/* Biotherm Heat · produktsidan PelleTech Multiauto (kalla/produktsidor/multiauto.html).
   Konstruktion och precision: effektlinjalen (hjälten + väljaren), sprängskissen man pekar på, genomskärningen med utrop.
   Alla klasser börjar med ma-. Inga backdrop-filter, inga blend modes, inga stora CSS-filter. */

/* ---------- gemensamt på sidan ---------- */
.ma-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.ma-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 26px; }
.ma-data.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ma-data.fyra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ma-data > div { padding-top: 16px; border-top: 1px solid var(--linje-2); }
.ma-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); }
.ma-data dd { margin: 10px 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; }
.ma-data.tva dd { font-size: clamp(1.25rem, 1.05rem + .5vw, 1.625rem); }

/* jättetal med flödestextur (broschyrens 94 % och 70) */
.ma-jatte { display: flex; align-items: baseline; gap: .04em; line-height: .78; white-space: nowrap; }
.ma-jatte-tal { display: block; font-size: clamp(7.5rem, 2rem + 15vw, 17rem); font-weight: 800; font-stretch: 75%; font-variation-settings: "opsz" 96; letter-spacing: -.01em; font-variant-numeric: lining-nums; padding: .1em .02em .04em 0; margin: -.1em 0 -.04em;
  background: #2b5c92 url(../bild/produktsidor/multiauto-tex.webp) 50% 50% / cover no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ma-jatte-enhet { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); font-weight: 300; letter-spacing: -.02em; color: var(--varm); }
.ma-jatte-ca { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); font-weight: 300; color: var(--is-3); margin-right: .2em; }
/* värmen: bara den varma halvan av texturen */
.ma-jatte-varm .ma-jatte-tal { background-position: 92% 50%; background-size: 260% auto; }

/* ---------- hjälte ---------- */
.ma-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: 112px; background: var(--natt); }
.ma-hero-ljus { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 62% at 72% -6%, rgba(98, 150, 214, .2), rgba(98, 150, 214, .06) 55%, rgba(98, 150, 214, 0) 78%),
    radial-gradient(60% 40% at 30% 30%, rgba(14, 33, 72, .55), rgba(14, 33, 72, 0) 70%),
    linear-gradient(180deg, #040a18 0%, #061128 58%, #050d20 76%, #040a18 100%); }
.ma-hero-in { position: relative; }
.ma-hero .smulor { margin-bottom: clamp(18px, 2.4vw, 40px); }
.ma-hero-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
.ma-hero-text { grid-column: 1 / span 6; grid-row: 1; align-self: center; padding-bottom: clamp(20px, 3vw, 56px); position: relative; z-index: 1; }
.ma-h1 { margin-top: 22px; font-size: clamp(3.5rem, 1.2rem + 7vw, 10rem); letter-spacing: -.045em; }
.ma-hero-text .t-ingress { margin-top: 28px; max-width: 30ch; }
.ma-hero-text .ma-knappar { margin-top: 40px; }
.ma-hero-bild { grid-column: 6 / -1; grid-row: 1; position: relative; margin: 0; height: clamp(380px, calc(var(--vh) * 100 - 390px), 780px); display: flex; justify-content: center; align-items: flex-end; }
.ma-hero-bild img { position: relative; z-index: 1; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
/* golvet: en svag ljuspöl och en horisont som går genom hela bredden */
.ma-hero-bild::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 160, 225, .2), rgba(110, 160, 225, .06) 60%, rgba(110, 160, 225, 0)); }
.ma-hero-bild::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 1.2%; height: 1px; background: linear-gradient(90deg, rgba(170, 196, 228, 0) 20%, rgba(170, 196, 228, .16) 42%, rgba(170, 196, 228, .3) 55%, rgba(170, 196, 228, 0) 82%); }

/* ---------- effektlinjalen (hjälten och väljaren) ---------- */
.ma-skala { position: relative; }
.ma-skala-hjalte { margin-top: clamp(14px, 1.6vw, 28px); padding: 22px 0 clamp(28px, 3vw, 48px); }
.ma-skala-rubrik span { color: var(--is-4); letter-spacing: .12em; }
.ma-skala-yta { position: relative; margin-top: 14px; }
.ma-skala-staplar { position: relative; height: 84px; }
.ma-skala-staplar li { position: absolute; top: 0; height: 84px; left: calc(var(--a) / 200 * 100%); width: calc((var(--b) - var(--a)) / 200 * 100%); }
.ma-skala-staplar li > a, .ma-skala-staplar li > button { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: block; color: var(--is-2); text-align: center; min-width: 44px; }
.ma-skala-staplar .punkt > a, .ma-skala-staplar .punkt > button { left: -24px; right: -24px; }
.ma-skala-staplar i { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--f); box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: transform .5s var(--ease), box-shadow .5s ease; }
.ma-skala-staplar .punkt i { left: 50%; right: auto; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.ma-skala-staplar b { position: absolute; left: 50%; transform: translateX(-50%); font-size: .9375rem; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--is-2); transition: color .35s ease; }
.ma-skala-staplar .r0 i { top: 30px; }
.ma-skala-staplar .r0.punkt i { top: 28px; }
.ma-skala-staplar .r0 b { top: 4px; }
.ma-skala-staplar .r1 i { top: 46px; }
.ma-skala-staplar .r1.punkt i { top: 44px; }
.ma-skala-staplar .r1 b { top: 60px; }
.ma-skala-staplar li:last-child b { left: auto; right: 24px; transform: translateX(50%); }
.ma-skala-staplar a:hover b, .ma-skala-staplar button:hover b, .ma-skala-staplar a:focus-visible b, .ma-skala-staplar button:focus-visible b { color: var(--is); }
.ma-skala-staplar a:hover i, .ma-skala-staplar button:hover i { transform: scaleY(1.35); box-shadow: 0 0 18px var(--f); }
.ma-skala-staplar .punkt a:hover i, .ma-skala-staplar .punkt button:hover i { transform: scale(1.3); }
.ma-skala-staplar button[aria-pressed="true"] b { color: var(--bla); font-weight: 500; }
.ma-skala-staplar button[aria-pressed="true"] i { box-shadow: 0 0 0 3px rgba(0, 152, 212, .35), 0 0 22px var(--f); }
.ma-skala-axel { position: relative; height: 26px; border-top: 1px solid var(--linje-2); margin-top: 2px; }
.ma-skala-axel span { position: absolute; top: 8px; left: calc(var(--v) / 200 * 100%); transform: translateX(-50%); font-size: .8125rem; color: var(--is-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-skala-axel span::before { content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 6px; background: var(--linje-2); }
.ma-skala-axel span:first-child { transform: none; }
.ma-skala-axel span:first-child::before { left: 0; }
.ma-skala-axel span:last-child { transform: translateX(-100%); }
.ma-skala-axel span:last-child::before { left: auto; right: 0; }

/* ---------- 01 helautomatisk drift ---------- */
.ma-lugn { --lugn-h: clamp(560px, 52vw, 900px); padding-top: clamp(16px, 2vw, 40px); }
.ma-lugn-bild { position: relative; margin: 0; height: var(--lugn-h); overflow: hidden; background: #0a1834; }
.ma-lugn-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 74%); }
.ma-lugn-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--natt) 0%, rgba(4, 10, 24, .8) 13%, rgba(4, 10, 24, .3) 34%, rgba(4, 10, 24, 0) 50%, rgba(4, 10, 24, 0) 78%, rgba(4, 10, 24, .75) 93%, var(--natt) 100%),
              linear-gradient(90deg, rgba(4, 10, 24, .55) 0%, rgba(4, 10, 24, 0) 46%); }
.ma-lugn-in { position: relative; margin-top: calc(-1 * var(--lugn-h)); }
.ma-lugn-text { min-height: var(--lugn-h); padding-top: clamp(40px, 5vw, 96px); }
.ma-lugn-text .t-etikett { margin-bottom: 28px; }
.ma-lugn-text .t-ingress { margin-top: 26px; max-width: 30ch; color: var(--is); }
.ma-lugn-data { position: relative; margin-top: clamp(-40px, -2vw, -16px); }

/* ---------- 02 del för del (sprängskissen) ---------- */
.ma-delar-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
.ma-sprang { grid-column: 1 / span 8; position: relative; margin: 0; }
.ma-sprang img { width: 100%; height: auto; }
.ma-sprang::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 184, .14), rgba(31, 116, 184, 0)); pointer-events: none; }
.ma-punkt { position: absolute; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(4, 10, 24, .84); box-shadow: inset 0 0 0 1.5px rgba(238, 243, 250, .85), 0 4px 14px rgba(0, 0, 0, .5);
  color: var(--is); font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color .35s ease, box-shadow .35s ease, transform .5s var(--ease); }
.ma-punkt::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 152, 212, 0); transition: box-shadow .5s ease; }
.ma-punkt:hover { transform: scale(1.08); }
.ma-punkt.aktiv { background: var(--bla); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 6px 18px rgba(0, 0, 0, .5); }
.ma-punkt.aktiv::after { box-shadow: 0 0 0 1px rgba(0, 152, 212, .6); }
.ma-delar-sida { grid-column: 9 / span 4; }
.ma-lupp { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #0c1d40, #050d20); box-shadow: inset 0 0 0 1px var(--linje); }
.ma-lupp-bild { position: absolute; inset: 0; background-repeat: no-repeat; background-size: var(--lw, 1800px) auto; background-position: var(--lx, 0) var(--ly, 0); transition: background-position .9s var(--ease); }
.ma-lupp-sikte { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 152, 212, .55); pointer-events: none; }
.ma-lupp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 13, 32, 0) 62%, rgba(5, 13, 32, .9)); }
.ma-lupp-text { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; display: flex; align-items: baseline; gap: 12px; }
.ma-lupp-text b { font-weight: 400; font-size: 1.125rem; color: var(--is); }
.ma-dellista { margin-top: 26px; border-top: 1px solid var(--linje); counter-reset: d; }
.ma-dellista li { border-bottom: 1px solid var(--linje); }
.ma-dellista button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 13px 0; font-size: 1.125rem; font-weight: 380; color: var(--is-2); text-align: left; transition: color .3s ease; }
.ma-dellista button:hover { color: var(--is); }
.ma-dellista .nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linje-2); font-size: .8125rem; font-weight: 500; color: var(--is-2); font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.ma-dellista li.aktiv button { color: var(--is); }
.ma-dellista li.aktiv .nr { background: var(--bla); color: #fff; box-shadow: none; }
.ma-dellista p { display: none; padding: 0 0 18px 44px; color: var(--is-2); font-size: 1rem; line-height: 1.55; max-width: 40ch; }
.ma-dellista li.aktiv p, html.visa-allt .ma-dellista p { display: block; }

/* ---------- 03 trappstegsrostret ---------- */
.ma-roster-scen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.ma-roster-text { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 1; }
.ma-roster-text .t-etikett { margin-bottom: 24px; }
.ma-roster-text .t-ingress { margin-top: 26px; max-width: 34ch; }
.ma-roster-text .t-brod { margin-top: 20px; max-width: 42ch; }
/* 2026-10-17: tätare – bilden beskuren runt rostret och plymen (multiauto-roster-tat.webp) och högst ~640 px hög, så att
   rubriken, rostret och jämförelsen ryms på ungefär en skärm (kunden: sektionen var för stor) */
.ma-roster-bild { grid-column: 7 / span 6; grid-row: 1; margin: 0; display: flex; justify-content: center; }
.ma-roster-bild picture { display: block; }
.ma-roster-bild img { display: block; width: auto; max-width: 100%; height: min(640px, calc(var(--vh) * 72)); object-fit: contain; }
/* bildens kanter tonas ut i sidans natt, så att den beskurna bilden inte syns som en ruta */
.ma-roster-bild img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ma-jamfor { margin-top: clamp(20px, 2vw, 34px); }
.ma-jamfor table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ma-jamfor thead th { text-align: left; padding: 0 var(--spalt) 14px 0; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); font-variation-settings: "opsz" 12; }
.ma-jamfor thead td { width: 22%; }
.ma-jamfor tbody th { text-align: left; vertical-align: top; padding: 18px var(--spalt) 20px 0; font-size: clamp(1.125rem, 1rem + .4vw, 1.5rem); font-weight: 340; line-height: 1.2; letter-spacing: -.01em; }
.ma-jamfor tbody td { vertical-align: top; padding: 18px var(--spalt) 20px 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.4; }
.ma-jamfor tr.varm th, .ma-jamfor tr.varm td { border-top: 1px solid rgba(242, 154, 60, .55); color: var(--is); }
.ma-jamfor tr.varm th { color: var(--glod); }
.ma-jamfor tr.kall th, .ma-jamfor tr.kall td { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); color: var(--is-3); }
.ma-jamfor-etikett { display: none; }
.ma-jamfor-slut { margin-top: 20px; max-width: 70ch; }

/* ---------- 04 inuti (genomskärningen med utrop) ---------- */
.ma-inuti-huvud { align-items: end; }
.ma-inuti-huvud .t-ingress { margin-top: 30px; max-width: 34ch; }
.ma-grad { display: flex; flex-direction: column; align-items: flex-start; }
.ma-grad .ma-jatte-tal { font-size: clamp(5.5rem, 1.6rem + 8.4vw, 11.5rem); }
.ma-grad-text { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--is-2); }
.ma-snitt { position: relative; margin: 0 auto; max-width: 1360px; display: grid; grid-template-columns: 25% 50% 25%; }
.ma-snitt-bild { grid-column: 2; position: relative; }
.ma-snitt-bild img { width: 100%; height: auto; }
.ma-snitt-prick { display: none; }
.ma-utrop { position: absolute; inset: 0; pointer-events: none; }
.ma-utrop li { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1%); height: 0; }
.ma-utrop li > div { position: absolute; top: -12px; width: calc(25% - 34px); pointer-events: auto; }
.ma-utrop li.v > div { left: 0; text-align: right; }
.ma-utrop li.h > div { right: 0; }
.ma-utrop b { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; line-height: 1.3; font-weight: 400; color: var(--is); }
.ma-utrop li.v b { justify-content: flex-end; }
.ma-utrop b .nr { display: none; }
.ma-utrop li > div > span { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--is-3); }
/* ledlinjen: från utropet till punkten i bilden (bilden är mittkolumnen, 25–75 %) */
.ma-utrop li::before { content: ""; position: absolute; top: 0; height: 1px; background: linear-gradient(90deg, rgba(170, 196, 228, .2), rgba(205, 222, 242, .75)); }
.ma-utrop li.v::before { left: calc(25% - 22px); width: calc(var(--x) * .5% + 22px); }
.ma-utrop li.h::before { left: calc(25% + var(--x) * .5%); width: calc(50% - var(--x) * .5% + 22px); background: linear-gradient(90deg, rgba(205, 222, 242, .75), rgba(170, 196, 228, .2)); }
.ma-utrop li::after { content: ""; position: absolute; top: -4px; left: calc(25% + var(--x) * .5% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--is); box-shadow: 0 0 0 4px rgba(4, 10, 24, .6), 0 0 14px rgba(205, 222, 242, .6); }
.ma-utrop li.varm::after { background: var(--glod); box-shadow: 0 0 0 4px rgba(4, 10, 24, .5), 0 0 16px rgba(242, 154, 60, .8); }
.ma-utrop li.varm.v::before { background: linear-gradient(90deg, rgba(242, 154, 60, .2), rgba(255, 215, 160, .85)); }

/* ---------- 05 matningen ---------- */
.ma-matning-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.ma-matning-bild { grid-column: 1 / span 6; justify-self: center; width: 100%; max-width: 700px; position: relative; margin: 0; padding: 0 4% 0 6%; }
.ma-matning-bild img { width: 100%; height: auto; }
.ma-markor { position: absolute; display: inline-flex; align-items: center; gap: 10px; transform: translate(-5px, -50%); font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--is); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 8px rgba(4, 10, 24, .9); }
.ma-markor i { width: 10px; height: 10px; border-radius: 50%; background: var(--is); box-shadow: 0 0 0 4px rgba(4, 10, 24, .55); }
.ma-matning-bild .ma-markor { margin-left: 6%; }
.ma-markor.vanster { flex-direction: row; }
.ma-matning-text { grid-column: 8 / span 5; }
.ma-matning-text .t-etikett { margin-bottom: 30px; }
.ma-matning-text .t-ingress { margin-top: 30px; max-width: 32ch; }
.ma-tre { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-tre > div { padding-top: 16px; border-top: 1px solid var(--linje-2); }
.ma-tre dt { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); font-variation-settings: "opsz" 12; }
.ma-tre dd { margin: 12px 0 0; }
.ma-tre b { display: block; font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem); font-weight: 260; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-tre b small { font-size: .38em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .18em; }
.ma-tre dd > span { display: block; margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--is-3); }
/* bränslets väg: kall vid förrådet, varm vid brännaren */
.ma-vag { margin-top: clamp(56px, 6vw, 104px); }
.ma-vag-steg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); margin-top: 26px; padding-top: 30px; }
.ma-vag-steg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1d3a78, #1f74b8 30%, #9fb4c4 62%, #f29a3c 88%, #ffd7a0); }
.ma-vag-prick { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 5px var(--natt); }
.ma-vag-steg li { position: relative; }
.ma-vag-steg li.varm .ma-vag-prick { box-shadow: 0 0 0 5px var(--natt), 0 0 18px rgba(242, 154, 60, .9); }
.ma-vag-steg h3 { margin-top: 0; font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.75rem); font-weight: 340; letter-spacing: -.01em; }
.ma-vag-steg li.varm h3 { color: var(--glod); }
.ma-vag-steg p { margin-top: 10px; color: var(--is-2); font-size: 1rem; line-height: 1.55; max-width: 34ch; }
.ma-vag-steg li { padding-top: 0; }
.ma-vag-steg li .ma-vag-prick { top: -35px; }
.ma-vag-not { margin-top: 40px; max-width: 72ch; }
.ma-vag-not b { color: var(--is); font-weight: 420; }

/* ---------- 06 fler funktioner ---------- */
.ma-fler-topp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
.ma-fler-tal { grid-column: 1 / span 6; display: flex; align-items: flex-end; gap: clamp(18px, 2vw, 36px); }
.ma-fler-tal-text { display: flex; flex-direction: column; gap: 8px; padding-bottom: 1.4em; font-size: 1.125rem; color: var(--is-2); }
.ma-lcc { grid-column: 8 / span 5; padding: 26px 0 8px; border-top: 1px solid var(--linje-2); }
.ma-lcc-text { margin-top: 14px; font-size: clamp(1.375rem, 1.1rem + .8vw, 2rem); line-height: 1.25; font-weight: 300; letter-spacing: -.012em; color: var(--is); text-wrap: balance; }
.ma-hylla { position: relative; margin-top: clamp(64px, 7vw, 120px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-hylla::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(180px, 15vw, 250px); height: 1px; background: linear-gradient(90deg, rgba(170, 196, 228, 0), rgba(170, 196, 228, .3) 20%, rgba(170, 196, 228, .3) 80%, rgba(170, 196, 228, 0)); }
.ma-hylla-bild { position: relative; height: clamp(180px, 15vw, 250px); display: flex; align-items: flex-end; justify-content: center; padding: 0 8% 14px; }
.ma-hylla-bild::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -16px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 160, 225, .18), rgba(110, 160, 225, 0)); }
.ma-hylla-bild img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ma-hylla h3 { margin-top: 30px; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 380; letter-spacing: -.008em; }
.ma-hylla p { margin-top: 8px; color: var(--is-2); font-size: 1rem; line-height: 1.55; max-width: 30ch; }

/* ---------- 07 bränslen (solfjädern) ---------- */
.ma-bransle-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.ma-bransle-text { grid-column: 1 / span 5; }
.ma-bransle-text .t-etikett { margin-bottom: 30px; }
.ma-bransle-text .t-ingress { margin-top: 30px; max-width: 34ch; }
.ma-kostnad { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-kostnad > div { padding-top: 16px; border-top: 1px solid var(--linje-2); }
.ma-kostnad dt { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); font-variation-settings: "opsz" 12; }
.ma-kostnad dd { margin: 12px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ma-kostnad dd b { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); font-weight: 260; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-kostnad dd b small { font-size: .4em; font-weight: 340; letter-spacing: 0; color: var(--is-3); margin-right: .25em; }
.ma-kostnad dd span { color: var(--is-2); }
.ma-kostnad dd.not { display: block; margin-top: 8px; font-size: .9375rem; color: var(--is-3); }
.ma-solfjader { grid-column: 6 / span 7; margin: 0; }
.ma-solfjader-yta { position: relative; aspect-ratio: 1000 / 760; }
.ma-solfjader-panna { position: absolute; left: 0; top: 4%; height: 92%; width: auto; }
.ma-solfjader-linjer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ma-solfjader-namn { position: absolute; left: 77%; right: 0; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: space-between; }
.ma-solfjader-namn li { font-size: clamp(1rem, .9rem + .35vw, 1.25rem); line-height: 1; font-weight: 360; color: var(--is); white-space: nowrap; }
.ma-dar { margin-top: clamp(72px, 7vw, 128px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 20px; align-items: end; }
.ma-dar h3 { grid-column: 1 / span 6; }
.ma-dar > .t-brod { grid-column: 8 / span 5; max-width: 40ch; }
.ma-dar .ma-data { grid-column: 1 / -1; margin-top: 22px; }

/* ---------- 08 styrning ---------- */
.ma-natet { position: relative; padding-top: 8px; }
.ma-natet-linje { position: absolute; left: 0; right: 0; top: 8px; width: 100%; height: 40px; }
/* en ljuspuls går längs linjen, från pannrummet till Biotherm (en enda transform-animation) */
.ma-natet-puls { position: absolute; left: 0; right: 0; top: 26px; height: 6px; overflow: hidden; pointer-events: none; }
.ma-natet-puls i { position: absolute; inset: 0; transform: translateX(-12%); animation: ma-puls 7s cubic-bezier(.45, 0, .25, 1) 1.5s infinite; }
.ma-natet-puls i::before { content: ""; position: absolute; left: 0; top: 0; width: 12%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(160, 205, 245, 0), rgba(200, 228, 255, .95) 70%, rgba(160, 205, 245, 0)); }
@keyframes ma-puls { 0% { transform: translateX(-12%); } 70%, 100% { transform: translateX(100%); } }
html.visa-allt .ma-natet-puls { display: none; }
.ma-natet-noder { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-natet-noder li { position: relative; padding-top: 52px; }
.ma-nod { position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--natt); box-shadow: inset 0 0 0 1.5px rgba(205, 222, 242, .9), 0 0 0 6px var(--natt); }
.ma-nod::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--is); }
.ma-nod.bla { box-shadow: inset 0 0 0 1.5px var(--bla), 0 0 0 6px var(--natt), 0 0 22px rgba(0, 152, 212, .5); }
.ma-nod.bla::after { background: var(--bla); }
.ma-natet-noder h3 { margin-top: 12px; font-size: clamp(1.375rem, 1.15rem + .6vw, 1.875rem); font-weight: 320; letter-spacing: -.012em; }
.ma-natet-noder p { margin-top: 8px; color: var(--is-2); max-width: 26ch; }
.ma-kaskad { margin-top: clamp(80px, 8vw, 140px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.ma-kaskad-bild { grid-column: 1 / span 8; position: relative; display: flex; align-items: flex-end; }
.ma-kaskad-bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(170, 196, 228, 0), rgba(170, 196, 228, .3) 15%, rgba(170, 196, 228, .3) 85%, rgba(170, 196, 228, 0)); }
.ma-kaskad-bild img { position: relative; width: 27%; height: auto; margin-right: -2.6%; }
/* pekskärmarna (25 % in, 6,6 % ned i bilden) binds ihop av en ljuslinje */
/* 2026-10-17: pekskärmen sitter överst i den nya designens turkosa rand (x 30 %, y 23,5 % av multiauto-50.webp) */
.ma-kaskad-linje { position: absolute; z-index: 6; left: 8.1%; width: 73.2%; top: 23.5%; height: 1.5px; margin-top: -1px; background: linear-gradient(90deg, #1f74b8, #9fb4c4 60%, #cfe0f2); box-shadow: 0 0 12px rgba(120, 170, 230, .5); }
.ma-kaskad-nod { position: absolute; z-index: 7; left: calc(8.1% + var(--i) * 24.4%); top: 23.5%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--is); box-shadow: 0 0 0 3px rgba(4, 10, 24, .7), 0 0 14px rgba(160, 200, 240, .8); }
.ma-kaskad-bild img:nth-child(1) { z-index: 4; }
.ma-kaskad-bild img:nth-child(2) { z-index: 3; }
.ma-kaskad-bild img:nth-child(3) { z-index: 2; }
.ma-kaskad-bild img:nth-child(4) { z-index: 1; }
.ma-kaskad-text { grid-column: 9 / span 4; }
.ma-kaskad-tal { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linje-2); }
.ma-kaskad-rad { margin-top: 10px; font-size: 1.125rem; color: var(--is-2); }
.ma-kaskad-tal b { font-size: clamp(3.5rem, 1.8rem + 4.4vw, 6.5rem); font-weight: 240; line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ma-kaskad-tal b small { font-size: .34em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .16em; }
.ma-kaskad-tal span { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.ma-kaskad-text .t-brod { margin-top: 22px; }

/* ---------- 09 trygg drift ---------- */
.ma-trygg-ram { position: relative; border-radius: 26px; overflow: hidden; background: #0b1530; min-height: clamp(520px, 44vw, 760px); display: flex; align-items: flex-end; }
.ma-trygg-bild { position: absolute; inset: 0; margin: 0; }
.ma-trygg-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ma-trygg-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 10, 24, .88) 0%, rgba(4, 10, 24, .6) 34%, rgba(4, 10, 24, 0) 62%), linear-gradient(0deg, rgba(4, 10, 24, .7), rgba(4, 10, 24, 0) 40%); }
.ma-trygg-text { position: relative; padding: clamp(32px, 4vw, 72px); max-width: 640px; }
.ma-trygg-text .t-etikett { margin-bottom: 26px; }
.ma-trygg-text .t-ingress { margin-top: 26px; color: var(--is); max-width: 32ch; }
.ma-trygg-data { margin-top: clamp(32px, 3vw, 48px); }

/* ---------- 10 förråd (registret) ---------- */
.ma-forrad-std { margin-top: 18px; color: var(--is-3); }
.ma-register { border-top: 1px solid var(--linje-2); }
.ma-register li { border-bottom: 1px solid var(--linje); }
.ma-register a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr) 28px; column-gap: var(--spalt); align-items: start; padding: clamp(22px, 2.2vw, 34px) 0; transition: background-color .4s ease; }
.ma-register a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.ma-register a:hover::before, .ma-register a:focus-visible::before { transform: scaleX(1); }
.ma-register .nr { padding-top: .9em; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.ma-register b { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.5rem); font-weight: 280; line-height: 1.05; letter-spacing: -.02em; color: var(--is); }
.ma-register-tal { font-size: clamp(1.375rem, 1.1rem + .8vw, 2rem); font-weight: 280; letter-spacing: -.02em; color: var(--is); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-register-tal small { display: block; margin: 4px 0 6px; font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.ma-register-text { padding-top: .35em; color: var(--is-2); font-size: 1rem; line-height: 1.55; max-width: 48ch; }
.ma-register-bild { align-self: center; height: clamp(72px, 6.4vw, 104px); display: flex; align-items: center; justify-content: center; }
.ma-register-bild img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; opacity: .92; transition: opacity .4s ease, transform .8s var(--ease); }
.ma-register a:hover .ma-register-bild img { opacity: 1; transform: scale(1.04); }
.ma-register .pil { align-self: center; color: var(--bla); transition: transform .6s var(--ease); }
.ma-register a:hover .pil { transform: translateX(4px); }
.ma-register a:hover b { color: #fff; }

/* ---------- 11 modeller och mått ---------- */
.ma-tva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-tva-ett h3 { margin-top: 30px; font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); font-weight: 300; letter-spacing: -.018em; }
.ma-tva-ett > p { margin-top: 10px; min-height: 3.2em; color: var(--is-2); font-size: 1.0625rem; max-width: 40ch; }
.ma-tva-ett .ma-data { margin-top: 30px; max-width: 560px; }
.ma-tva-bild { position: relative; height: clamp(300px, 28vw, 460px); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; }
.ma-tva-bild::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 160, 225, .2), rgba(110, 160, 225, 0)); }
.ma-tva-bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: linear-gradient(90deg, rgba(170, 196, 228, 0), rgba(170, 196, 228, .3) 20%, rgba(170, 196, 228, .3) 80%, rgba(170, 196, 228, 0)); }
.ma-tva-bild img { position: relative; z-index: 1; max-height: 100%; max-width: 90%; width: auto; height: auto; object-fit: contain; }
.ma-valjare { margin-top: clamp(88px, 9vw, 160px); }
.ma-skala-val { padding-bottom: 8px; }
.ma-skala-val .ma-skala-rubrik { color: var(--is-2); }
.ma-blad { margin-top: clamp(28px, 3vw, 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--spalt); row-gap: 0; padding: clamp(28px, 3vw, 48px) 0 0; border-top: 1px solid var(--linje-2); }
.ma-blad-huvud { grid-column: 1 / span 4; padding-bottom: 36px; }
.ma-blad-namn { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; font-size: clamp(3.5rem, 2rem + 4vw, 6.5rem); font-weight: 240; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-blad-namn small { font-size: .3em; font-weight: 400; letter-spacing: 0; color: var(--is-3); }
.ma-blad-not { margin-top: 18px; color: var(--is-3); font-size: .9375rem; max-width: 34ch; }
.ma-ritningar { grid-column: 5 / span 8; grid-row: 1 / span 4; align-self: start; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: clamp(24px, 3vw, 56px); align-items: end; }
.ma-rit { position: relative; margin: 0; }
.ma-rit-yta { position: relative; }
.ma-rit img { width: 100%; height: auto; opacity: .9; }
.ma-rit figcaption { margin-top: 18px; text-align: center; }
.ma-matt-lapp { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; background: var(--natt); font-size: .9375rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--is); }
.ma-matt-lapp i { font-style: normal; font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--bla); }
.ma-matt-lapp.lodrat { transform: translate(-30%, -50%); }
.ma-blad-data { grid-column: 1 / span 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-content: start; }
.ma-blad-data > div { padding: 11px 0 10px; border-top: 1px solid var(--linje); }
.ma-blad-data dt { font-size: .8125rem; line-height: 1.35; color: var(--is-3); }
.ma-blad-data dd { margin: 4px 0 0; font-size: 1.0625rem; color: var(--is); font-variant-numeric: tabular-nums; }
.ma-blad-data > div.stor dd { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.875rem); font-weight: 280; letter-spacing: -.015em; }

.ma-blad.begaran .ma-matt-lapp span { color: var(--is-3); }
.ma-blad.begaran .ma-blad-data > div:not([data-alltid]) { display: none; }
.ma-blad-begaran { grid-column: 1 / span 4; padding: 26px 0 0; border-top: 1px solid var(--linje); align-self: start; }

.ma-tabell { margin-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--linje-2); border-bottom: 1px solid var(--linje); }
.ma-tabell summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 340; color: var(--is); }
.ma-tabell summary::-webkit-details-marker { display: none; }
.ma-tabell summary .chev { width: 14px; height: 9px; color: var(--bla); transition: transform .5s var(--ease); }
.ma-tabell[open] summary .chev { transform: rotate(180deg); }
.ma-tabell-rull { overflow-x: auto; padding-bottom: 24px; }
.ma-tabell table { width: 100%; min-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ma-tabell th, .ma-tabell td { padding: 11px 12px; border-top: 1px solid var(--linje); text-align: right; font-size: .9375rem; line-height: 1.3; white-space: nowrap; }
.ma-tabell thead th { border-top: 0; font-size: 1.125rem; font-weight: 340; color: var(--is); padding-top: 4px; }
.ma-tabell thead th:first-child { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.ma-tabell tbody th { text-align: left; font-weight: 380; color: var(--is-2); padding-left: 0; }
.ma-tabell tbody th i { font-style: normal; display: inline-block; width: 38px; font-size: .8125rem; font-weight: 600; color: var(--bla); }
.ma-tabell tbody th small { color: var(--is-4); font-size: .8125rem; margin-left: 4px; }
.ma-tabell td { color: var(--is); }
.ma-tabell tr.grupp th { padding-top: 26px; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); border-top: 0; }
.ma-tabell td.pab { text-align: center; vertical-align: middle; white-space: normal; color: var(--is-3); background: rgba(14, 28, 56, .45); border-left: 1px solid var(--linje); }
.ma-matt-fotnot { margin-top: 18px; max-width: 90ch; }

/* ---------- 12 pannrummet ---------- */
.ma-rum-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
.ma-rum-text { grid-column: 1 / span 5; }
.ma-rum-text .t-etikett { margin-bottom: 30px; }
.ma-rum-text .t-ingress { margin-top: 30px; max-width: 32ch; }
.ma-rum-data { margin-top: 40px; max-width: 460px; }
.ma-rum-data > div { display: flex; flex-direction: column-reverse; padding: 14px 0 14px; border-top: 1px solid var(--linje); }
.ma-rum-data > div:last-child { border-bottom: 1px solid var(--linje); }
.ma-rum-data dt { margin-top: 6px; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); font-variation-settings: "opsz" 12; }
.ma-rum-data dd { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); font-weight: 260; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ma-rum-data dd small { font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .2em; }
.ma-rum-lank { margin-top: 28px; }
.ma-plan { grid-column: 7 / span 6; margin: 0; }
.ma-plan-yta { position: relative; padding: 0; border-radius: 6px; background: radial-gradient(60% 50% at 50% 50%, rgba(31, 116, 184, .14), rgba(31, 116, 184, 0)); }
.ma-plan-yta img { width: 100%; height: auto; }
.ma-plan-matt { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; background: rgba(4, 10, 24, .82); }
.ma-plan-matt b { font-size: clamp(1.375rem, 1.1rem + .9vw, 2.125rem); font-weight: 260; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-plan-matt b small { font-size: .45em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .2em; }
.ma-plan-matt span { font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.ma-plan figcaption { margin-top: 18px; font-size: .75rem; color: var(--is-4); }

/* ---------- 13 PelleTech och BWT, broschyren ---------- */
.ma-bwt-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; padding: clamp(36px, 4vw, 64px) 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.ma-bwt-loggor { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ma-bwt-loggor .pt { width: clamp(170px, 14vw, 230px); height: auto; }
.ma-bwt-loggor .bwt { width: clamp(130px, 11vw, 180px); height: auto; }
.ma-bwt-text { grid-column: 6 / span 7; }
.ma-bwt-text .t-etikett { margin-bottom: 22px; }
.ma-bwt-text .t-brod { margin-top: 18px; max-width: 62ch; }
.ma-bwt-tal { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); }
.ma-bwt-tal > div { display: flex; flex-direction: column-reverse; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linje); }
.ma-bwt-tal dt { font-size: .8125rem; color: var(--is-3); }
.ma-bwt-tal dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.25rem); font-weight: 260; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ma-broschyr { margin-top: clamp(80px, 8vw, 140px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.ma-broschyr-omslag { grid-column: 2 / span 3; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px var(--linje); transition: transform .8s var(--ease); }
.ma-broschyr-omslag:hover { transform: translateY(-4px); }
.ma-broschyr-omslag img { width: 100%; height: auto; }
.ma-broschyr-text { grid-column: 6 / span 6; }
.ma-broschyr-text h2 { margin-top: 18px; }
.ma-broschyr-text .t-liten { margin-top: 14px; }
.ma-broschyr-text .ma-knappar { margin-top: 32px; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .ma-hero-text { grid-column: 1 / span 7; }
  .ma-hero-bild { grid-column: 6 / span 7; }
  .ma-data.fyra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-sprang { grid-column: 1 / -1; }
  .ma-delar-sida { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--spalt); align-items: start; margin-top: 28px; }
  .ma-dellista { margin-top: 0; }
  .ma-roster-text { grid-column: 1 / span 6; }
  .ma-roster-bild { grid-column: 7 / span 6; }
  .ma-snitt { display: block; max-width: 760px; }
  .ma-snitt-prick { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(4, 10, 24, .86); box-shadow: inset 0 0 0 1.5px rgba(238, 243, 250, .9); font-size: .75rem; font-weight: 500; color: var(--is); }
  .ma-snitt-prick.varm { box-shadow: inset 0 0 0 1.5px var(--glod), 0 0 12px rgba(242, 154, 60, .7); }
  .ma-utrop { position: static; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spalt); border-top: 1px solid var(--linje); }
  .ma-utrop li { position: static; height: auto; border-bottom: 1px solid var(--linje); padding: 14px 0; }
  .ma-utrop li::before, .ma-utrop li::after { display: none; }
  .ma-utrop li > div { position: static; width: auto; text-align: left !important; }
  .ma-utrop li.v b { justify-content: flex-start; }
  .ma-utrop b .nr { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linje-2); font-size: .75rem; font-weight: 500; color: var(--is-2); }
  .ma-utrop li.varm b .nr { box-shadow: inset 0 0 0 1px var(--glod); color: var(--glod); }
  .ma-utrop li > div > span { padding-left: 34px; font-size: .9375rem; }
  .ma-matning-bild { grid-column: 1 / span 6; padding: 0; }
  .ma-matning-text { grid-column: 7 / span 6; }
  .ma-tre { grid-template-columns: 1fr; row-gap: 18px; }
  .ma-fler-tal { grid-column: 1 / span 7; }
  .ma-lcc { grid-column: 8 / span 5; }
  .ma-hylla { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .ma-hylla::before { display: none; }
  .ma-bransle-text { grid-column: 1 / -1; }
  .ma-solfjader { grid-column: 1 / -1; margin-top: 48px; }
  .ma-kaskad-bild { grid-column: 1 / -1; }
  .ma-kaskad-text { grid-column: 1 / -1; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spalt); }
  .ma-kaskad-text .t-brod { grid-column: 1 / -1; }
  .ma-register a { grid-template-columns: 48px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) 28px; row-gap: 10px; }
  .ma-register-text { grid-column: 2 / span 2; grid-row: 2; }
  .ma-register-bild { grid-column: 4; grid-row: 1 / span 2; }
  .ma-register .pil { grid-column: 5; grid-row: 1; }
  .ma-blad-huvud, .ma-blad-data, .ma-blad-begaran { grid-column: 1 / -1; }
  .ma-ritningar { grid-column: 1 / -1; grid-row: auto; max-width: 760px; margin-top: 36px; }
  .ma-blad { grid-template-rows: none; }
  .ma-blad-data { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ma-rum-text { grid-column: 1 / -1; }
  .ma-plan { grid-column: 1 / -1; margin-top: 48px; max-width: 760px; }
  .ma-bwt-loggor, .ma-bwt-text { grid-column: 1 / -1; }
  .ma-bwt-text { margin-top: 36px; }
  .ma-broschyr-omslag { grid-column: 1 / span 4; }
  .ma-broschyr-text { grid-column: 6 / span 7; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .ma-data, .ma-data.tre, .ma-data.fyra { grid-template-columns: 1fr 1fr; row-gap: 22px; column-gap: 16px; }
  .ma-data dd { font-size: 1.0625rem; }
  .ma-hero { padding-top: 92px; }
  .ma-hero-rutnat { display: flex; flex-direction: column-reverse; }
  .ma-hero-bild { height: 300px; width: 100%; margin-top: 4px; }
  .ma-hero-text { padding-bottom: 0; margin-top: 18px; }
  .ma-h1 { margin-top: 16px; font-size: 3.75rem; }
  .ma-hero-text .t-ingress { margin-top: 18px; }
  .ma-hero-text .ma-knappar { margin-top: 26px; flex-direction: column; align-items: stretch; gap: 18px; }
  .ma-hero-text .ma-knappar .lank { justify-content: center; }
  .ma-skala-hjalte { margin-top: 30px; }
  .ma-skala-staplar b { font-size: .8125rem; }
  .ma-skala-axel span { font-size: .75rem; }

  .ma-lugn { --lugn-h: 560px; }
  .ma-lugn-bild img { object-position: var(--fp, 50% 70%); }
  .ma-lugn-text { min-height: 0; padding-top: 28px; padding-bottom: 300px; }
  .ma-lugn-text .t-ingress { font-size: 1.125rem; }

  .ma-delar-sida { display: block; margin-top: 20px; }
  .ma-lupp { display: none; }
  .ma-punkt { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: .8125rem; }
  .ma-punkt::after { inset: -8px; }
  .ma-dellista p { display: block; padding-bottom: 16px; }
  .ma-dellista button { padding: 12px 0 8px; }

  .ma-roster-scen { display: flex; flex-direction: column; }
  .ma-roster-bild { order: -1; display: block; margin: 0 calc(-1 * var(--marg)) 8px; }
  .ma-roster-bild img { width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .ma-jamfor thead { display: none; }
  .ma-jamfor table, .ma-jamfor tbody, .ma-jamfor tr, .ma-jamfor th, .ma-jamfor td { display: block; width: 100%; }
  .ma-jamfor tbody th { padding: 18px 0 4px; }
  .ma-jamfor tbody td { padding: 10px 0; border-top: 0 !important; font-size: 1rem; }
  .ma-jamfor tr.kall td:last-child { padding-bottom: 18px; }
  .ma-jamfor tr.kall th, .ma-jamfor tr.kall td { border-bottom: 0; }
  .ma-jamfor tr.kall { border-bottom: 1px solid var(--linje); }
  .ma-jamfor-etikett { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
  .ma-jamfor tr.varm .ma-jamfor-etikett { color: rgba(242, 154, 60, .85); }
  .ma-jamfor tr.kall .ma-jamfor-etikett { display: none; }

  .ma-grad { margin-top: 12px; }
  .ma-snitt-bild { margin: 0 -4px; }
  .ma-snitt-prick { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .ma-utrop { grid-template-columns: 1fr; margin-top: 24px; }

  .ma-matning-rutnat { display: flex; flex-direction: column; }
  .ma-matning-bild { width: 100%; padding: 0 2% 0 8%; margin-bottom: 36px; }
  .ma-markor { font-size: .6875rem; letter-spacing: .12em; gap: 7px; }
  .ma-markor i { width: 8px; height: 8px; }
  .ma-tre { margin-top: 32px; }
  .ma-vag-steg { grid-template-columns: 1fr; row-gap: 28px; padding-top: 0; padding-left: 30px; }
  .ma-vag-steg::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, #1d3a78, #1f74b8 30%, #9fb4c4 62%, #f29a3c 88%, #ffd7a0); }
  .ma-vag-steg li .ma-vag-prick { top: 6px; left: -30px; }

  .ma-fler-topp { display: block; }
  .ma-fler-tal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ma-fler-tal-text { padding-bottom: 0; }
  .ma-lcc { margin-top: 40px; }
  .ma-hylla { column-gap: 16px; row-gap: 40px; }
  .ma-hylla-bild { height: 140px; padding: 0 2% 10px; }
  .ma-hylla h3 { margin-top: 20px; font-size: 1.125rem; }
  .ma-hylla p { font-size: .9375rem; }

  .ma-kostnad { margin-top: 32px; }
  .ma-solfjader { margin-top: 36px; }
  .ma-solfjader-namn { left: 70%; top: 7%; bottom: 7%; }
  .ma-solfjader-namn li { font-size: .875rem; }
  .ma-dar { display: block; }
  .ma-dar > .t-brod { margin-top: 16px; }
  .ma-dar .ma-data { grid-template-columns: 1fr; margin-top: 28px; }

  .ma-natet-linje, .ma-natet-puls { display: none; }
  .ma-natet-noder { grid-template-columns: 1fr; row-gap: 0; }
  .ma-natet-noder::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 40px; width: 1.5px; background: linear-gradient(180deg, #1f74b8, #9fb4c4 60%, #cfe0f2); }
  .ma-natet-noder li { padding: 14px 0 22px 44px; }
  .ma-nod { top: 14px; }
  .ma-natet-noder h3 { margin-top: 6px; }
  .ma-kaskad-text { display: block; }
  .ma-kaskad-bild { padding-bottom: 12px; }
  .ma-kaskad-bild::after { bottom: 12px; }

  .ma-trygg-ram { min-height: 640px; border-radius: 20px; margin-inline: calc(-1 * var(--marg) + 8px); }
  .ma-trygg-bild img { object-position: 50% 30%; }
  .ma-trygg-bild::after { background: linear-gradient(0deg, rgba(4, 10, 24, .95) 0%, rgba(4, 10, 24, .75) 40%, rgba(4, 10, 24, 0) 70%); }
  .ma-trygg-text { padding: 26px 22px 30px; }
  .ma-trygg-text .t-ingress { font-size: 1.0625rem; }

  .ma-register a { grid-template-columns: minmax(0, 1fr) 96px 24px; column-gap: 12px; row-gap: 8px; padding: 22px 0; }
  .ma-register-bild { grid-column: 2; grid-row: 2 / span 2; height: 72px; }
  .ma-register .nr { grid-column: 1; grid-row: 1; }
  .ma-register b { grid-column: 1; grid-row: 2; font-size: 1.75rem; }
  .ma-register-tal { grid-column: 1; grid-row: 3; font-size: 1.375rem; }
  .ma-register-tal small { display: inline; margin: 0 8px 0 0; }
  .ma-register .nr { padding-top: 0; }
  .ma-register-text { padding-top: 0; }
  .ma-register-text { grid-column: 1; grid-row: 4; font-size: .9375rem; }
  .ma-register .pil { grid-column: 3; grid-row: 2; }

  .ma-tva { grid-template-columns: 1fr; row-gap: 64px; }
  .ma-tva-bild { height: 300px; }
  .ma-tva-ett h3 { margin-top: 22px; }
  .ma-blad-namn { font-size: 3.75rem; }
  .ma-ritningar { column-gap: 16px; }
  .ma-matt-lapp { font-size: .75rem; padding: 1px 4px; gap: 4px; }
  .ma-matt-lapp i { font-size: .625rem; }
  .ma-blad-data { grid-template-columns: 1fr 1fr; }
  .ma-tabell summary { font-size: 1.125rem; }

  .ma-plan { margin-top: 36px; }
  .ma-plan-matt { padding: 2px 4px; }
  .ma-plan-matt b { font-size: 1.125rem; }
  .ma-plan-matt span { font-size: .625rem; letter-spacing: .12em; }

  .ma-bwt-tal { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .ma-broschyr { display: flex; flex-direction: column; align-items: flex-start; }
  .ma-broschyr-omslag { width: 62%; max-width: 260px; }
  .ma-broschyr-text { margin-top: 36px; }
  .ma-broschyr-text .ma-knappar { flex-direction: column; align-items: stretch; gap: 18px; width: 100%; }
}

/* engelska sidan (2026-10-16): "approx." är längre än "ca" och fick inte plats framför jättetalet 1,500 °C –
   där står det i stället som en liten rad ovanför talet. Den svenska sidan påverkas inte. */
html[lang="en"] .ma-grad .ma-jatte { flex-wrap: wrap; }
html[lang="en"] .ma-grad .ma-jatte-ca { flex-basis: 100%; margin: 0 0 .45em; line-height: 1; }

/* ================= Hjälten: förslag 01 Omslaget (vald av kunden 2026-10-17, flyttad från assets/forslag/multiauto/v01.css) =================
   Broschyromslaget (s.1) på webben; egna klasser mv01-.
   Namnet i omslagets tunna vikt och skala, pannan i lågt perspektiv på golvlinjen framför omslagets förrenderade
   värmeflöde, datablocket 20–200 kW nere till vänster. Inga backdrop-filter, inga blend modes; rörelse bara opacity/transform. */

.mv-01 { display: flex; flex-direction: column; min-height: max(640px, calc(var(--vh) * 100)); padding-bottom: clamp(22px, calc(var(--vh) * 3.6), 46px);
  /* bara ett svagt ljus uppe till vänster: där flödesbilden ligger är bakgrunden ren natt (bilden är tonad mot natt) */
  background: radial-gradient(36% 32% at 12% 0%, rgba(30, 62, 124, .24), rgba(30, 62, 124, 0) 100%) no-repeat,
    linear-gradient(180deg, #030a17 calc(100% - 64px), var(--natt)) #030a17; }   /* #030a17 = natt som webp avkodar den, så flödesbildens kant aldrig syns */
.mv01-in { position: relative; flex: 1; display: flex; flex-direction: column; }
.mv-01 .smulor { margin-bottom: 0; }

/* namnet: omslagets 220-vikt, broschyrens skala (namnet ≈ 57 % av sidbredden) */
.mv01-titel { position: relative; z-index: 2; margin-top: clamp(18px, calc(var(--vh) * 4), 52px); }
.mv01-etikett b { color: var(--bla); font-weight: 600; }
.mv01-h1 { margin-top: clamp(10px, calc(var(--vh) * 1.6), 22px); margin-left: -.055em; font-size: min(16.4vw, calc(var(--vh) * 28), 21rem); line-height: .9; font-weight: 220;
  font-variation-settings: "opsz" 96; letter-spacing: -.046em; color: var(--is); white-space: nowrap; }
.mv01-h1 .rad { padding-bottom: .06em; margin-bottom: -.06em; }

/* scenen: texten till vänster, pannan på golvlinjen till höger */
.mv01-scen { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); min-height: 0; }
.mv01-text { grid-column: 1 / span 5; padding-top: clamp(18px, calc(var(--vh) * 3.6), 46px); padding-bottom: clamp(24px, calc(var(--vh) * 6), 72px); position: relative; z-index: 2; }
.mv01-text .t-ingress { max-width: 31ch; }
.mv01-text .ma-knappar { margin-top: clamp(24px, calc(var(--vh) * 4.4), 48px); }

.mv01-bild { position: absolute; z-index: 1; right: calc(var(--marg) * -.35); bottom: 0; margin: 0;
  height: min(calc(var(--vh) * 60), 47vw, 720px); aspect-ratio: 1380 / 1400; transform: translateY(10.4%); pointer-events: none; }
.mv01-bild img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* omslagets värmeflöde bakom pannan: plymens källa bakom pannkroppen (32 % / 60 % av figuren), spegelvänd så att den
   breder ut sig in mot mitten, och klippt vid golvlinjen (pannans fot på 89,6 % av figurens höjd = 95,7 % av plymen) */
.mv01-flode { position: absolute; z-index: 0; left: -66.6%; top: 10.8%; width: 135%; aspect-ratio: 1600 / 990;
  background: url(../bild/produktsidor/multiauto-v01-flode.webp) 0 0 / 100% 100% no-repeat; transform: scaleX(-1); clip-path: inset(0 0 4.3% 0); opacity: .8; }
/* ljuset på golvet vid pannans fot */
.mv01-bild::after { content: ""; position: absolute; z-index: 0; left: 2%; right: 6%; bottom: 3%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 154, 60, .16), rgba(242, 154, 60, .05) 55%, rgba(242, 154, 60, 0)); }

/* golvlinjen: bas, flödets färger, en tick vid noll (omslagets .golv) */
.mv01-golv { position: relative; z-index: 2; height: 2px; }
.mv01-golv::before { content: ""; position: absolute; left: 0; right: 0; top: .5px; height: 1px; background: var(--linje-2); }
.mv01-golv-fyll { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--flode); }
.mv01-golv-tick { position: absolute; left: 0; top: -6px; width: 1px; height: 14px; background: rgba(212, 226, 243, .7); }

.mv01-fot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: clamp(14px, calc(var(--vh) * 2.2), 26px); }
.mv01-data { display: flex; flex-direction: column; gap: 10px; }
.mv01-tal { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 4.25rem); line-height: .9; font-weight: 240; font-variation-settings: "opsz" 96; letter-spacing: -.035em;
  font-variant-numeric: lining-nums; white-space: nowrap; color: var(--is); }
.mv01-tal b { font-weight: 240; color: var(--glod); }
.mv01-tal small { font-size: .46em; font-weight: 340; letter-spacing: 0; color: var(--is-2); margin-left: .28em; }
.mv01-agent { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; padding-bottom: 2px; }
.mv01-agent b { color: var(--is); font-weight: 600; }
.mv01-gen { margin: 0; }
/* PelleTech är nu en del av BWT – loggan och raden länkar till avsnitt 13 */
.mv01-bwt { display: inline-flex; align-items: center; gap: 12px; color: var(--is-2); text-decoration: none; }
.mv01-bwt img { height: 22px; width: auto; display: block; }
.mv01-bwt .t-etikett { transition: color .25s; }
.mv01-bwt:hover .t-etikett, .mv01-bwt:focus-visible .t-etikett { color: var(--is); }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .mv01-text { grid-column: 1 / span 6; }
  .mv01-bild { height: min(calc(var(--vh) * 48), 52vw); }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .mv-01 { min-height: 0; padding-bottom: 40px; }
  .mv01-titel { margin-top: 26px; }
  .mv01-h1 { font-size: 26.4vw; margin-top: 12px; }
  .mv01-scen, .mv01-text { display: contents; }
  .mv01-text .t-ingress { order: 1; margin-top: 18px; font-size: 1.1875rem; }
  .mv01-bild { order: 2; position: relative; right: auto; align-self: center; width: min(88%, 380px); height: auto; margin-top: 10px; transform: translateY(10.4%); }
  .mv01-golv { order: 3; }
  .mv01-fot { order: 4; padding-top: 16px; }
  .mv01-text .ma-knappar { order: 5; margin-top: 30px; flex-direction: column; align-items: stretch; gap: 18px; }
  .mv01-text .ma-knappar .lank { justify-content: center; }
  .mv01-fot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mv01-agent { align-items: flex-start; text-align: left; }
  .mv01-gen { display: none; }
  .mv01-flode { opacity: .62; }
  /* mobilversionen av flödet (1200 px, kalla/mobilbilder_2026_10_25.py): visas ca 450 px brett här, den stora är 2100 px */
  .mv01-flode { background-image: url(../bild/produktsidor/multiauto-v01-flode-m.webp); }
}

/* ================= 11 modeller och mått som i broschyren s.19–21 (2026-10-17) =================
   "Sju utföranden." med jättesjuan i flödestextur och ritningarna med bara måttbokstäverna, måtten för alla utföranden;
   "Tekniska data." med broschyrens stigande pelare bakom kolumnerna (kall blå -> varm efter effekt). */
.ma-sju { margin-top: clamp(96px, 10vw, 180px); }
.ma-sju-topp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 28px; align-items: end; }
.ma-sju-text { grid-column: 1 / -1; }
.ma-sju-rubrik { margin-top: 22px; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem); font-weight: 260; font-variation-settings: "opsz" 96; letter-spacing: -.03em; line-height: 1; color: var(--is); }
.ma-sju-text .t-ingress, .ma-tek-text .t-ingress { margin-top: 18px; color: var(--is-2); max-width: 46ch; }
.ma-sju-sju { grid-column: 1 / span 4; margin: 0; align-self: end; }
.ma-sju-sju .ma-jatte-tal { font-size: clamp(18rem, 6rem + 38vw, 48rem); line-height: .8; background-position: 34% 50%; background-size: cover; }
.ma-sju .ma-ritningar.ma-sju-rit { grid-column: 5 / span 8; grid-row: auto; align-self: end; max-width: none; margin-top: 0; }
.ma-sju-tabell { margin-top: clamp(32px, 3vw, 52px); }
.ma-sju-not { margin-top: 14px; }
.ma-tek { margin-top: clamp(96px, 10vw, 170px); }
.ma-tek-text { max-width: 760px; }
.ma-tek-tabell { margin-top: clamp(20px, 2vw, 32px); border-top: 0; }
.ma-tek-yta { position: relative; min-width: 860px; padding-top: 128px; }
.ma-tek-yta table { position: relative; z-index: 1; table-layout: fixed; min-width: 0; }
.ma-tek-yta thead th:first-child { width: 28%; }
.ma-tek-pelare { position: absolute; inset: 0; display: grid; grid-template-columns: 28% repeat(7, minmax(0, 1fr)); align-items: end; pointer-events: none; }
.ma-tek-pelare i { display: block; height: calc(100% - 128px + var(--x, 16px)); margin: 0 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--f) 30%, transparent), color-mix(in srgb, var(--f) 10%, transparent) 26%, rgba(14, 28, 56, .2) 60%, rgba(14, 28, 56, .08));
  box-shadow: inset 0 2px 0 var(--f), 0 -10px 34px -14px var(--f); }
.ma-tek-pelare i:nth-of-type(2) { --x: 30px; } .ma-tek-pelare i:nth-of-type(3) { --x: 44px; } .ma-tek-pelare i:nth-of-type(4) { --x: 58px; }
.ma-tek-pelare i:nth-of-type(5) { --x: 72px; } .ma-tek-pelare i:nth-of-type(6) { --x: 88px; } .ma-tek-pelare i:nth-of-type(7) { --x: 104px; }
.ma-tek-tabell table th, .ma-tek-tabell table td { background-clip: padding-box; }
.ma-tek-tabell thead th { text-align: center; }
.ma-tek-tabell thead th:first-child { text-align: left; }
.ma-tek-tabell td { text-align: center; }
.ma-tek-tabell td.pab { background: rgba(4, 10, 24, .35); }
@media (max-width: 1100px) {
  .ma-sju .ma-ritningar.ma-sju-rit { grid-column: 5 / span 8; }
}
@media (max-width: 760px) {
  .ma-sju-sju, .ma-sju .ma-ritningar.ma-sju-rit { grid-column: 1 / -1; }
  .ma-sju-sju .ma-jatte-tal { font-size: 15rem; }
  .ma-tek-yta { padding-top: 112px; }
}

/* ================= 13 broschyren som ett föremål (2026-10-17, kunden: "mer levande … lutas när man håller musen över") =================
   Omslaget vrids in på plats när avsnittet syns, ett ljus sveper över en gång, två av broschyrens sidor sticker fram bakom.
   Med musen lutar omslaget efter pekaren (multiauto.js sätter --rx/--ry/--gx/--gy) och sidorna fläktar ut. Bara transform/opacity. */
.ma-broschyr-omslag { overflow: visible; border-radius: 0; box-shadow: none; transition: none; }
.ma-broschyr-omslag:hover { transform: none; }
.ma-bro-scen { position: relative; display: block; }   /* platt stapling: omslaget har eget perspektiv, så att det alltid ligger överst */
.ma-bro-bok { position: relative; z-index: 3; display: block; border-radius: 6px; overflow: hidden; transform-origin: 50% 50%;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px var(--linje);
  transform: perspective(1100px) rotateY(var(--ry, -9deg)) rotateX(var(--rx, 2deg)) translateZ(var(--tz, 0px));
  transition: transform 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.ma-bro-bok img { display: block; width: 100%; height: auto; }
.ma-bro-glans { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(55% 45% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%); }
.ma-bro-glans::after { content: ""; position: absolute; inset: -20% -60%; transform: translateX(-80%) rotate(14deg); opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 38%, rgba(255, 240, 220, .22) 50%, rgba(255, 255, 255, 0) 62%); }
.ma-bro-sida { position: absolute; left: 2%; right: 2%; top: 1.6%; bottom: 1.6%; z-index: 1; display: block; border-radius: 4px; overflow: hidden; transform-origin: 100% 100%;
  box-shadow: 0 24px 46px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(170, 196, 228, .1); transition: transform 1.1s var(--ease), opacity .8s; }
.ma-bro-sida.s1 { z-index: 2; }
.ma-bro-sida img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* vila: sidorna sticker fram lite, så att man ser att det är en broschyr */
.ma-broschyr-omslag.syns .ma-bro-sida.s1 { transform: translateX(-5%) rotate(-1.6deg); }
.ma-broschyr-omslag.syns .ma-bro-sida.s2 { transform: translateX(-10%) rotate(-3.2deg); }
/* innan avsnittet syns: omslaget vridet, sidorna inne */
.js .ma-broschyr-omslag:not(.syns) .ma-bro-bok { transform: perspective(1100px) rotateY(-34deg) rotateX(8deg) translateZ(-40px); }
.js .ma-broschyr-omslag:not(.syns) .ma-bro-sida { opacity: 0; }
.ma-broschyr-omslag.syns .ma-bro-glans::after { animation: ma-bro-svep 1.8s var(--ease) .6s 1 both; }
@keyframes ma-bro-svep { 0% { opacity: 0; transform: translateX(-80%) rotate(14deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(80%) rotate(14deg); } }
/* musen över: lyft, glans och utfläkta sidor (lutningen sätts av skriptet) */
.ma-broschyr-omslag.lut .ma-bro-bok { --tz: 30px; transition: transform .18s ease-out, box-shadow .6s var(--ease); box-shadow: 0 50px 90px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(170, 196, 228, .2); }
.ma-broschyr-omslag.lut .ma-bro-glans { opacity: 1; }
.ma-broschyr-omslag.lut .ma-bro-sida.s1 { transform: translate(-16%, -1%) rotate(-5deg); }
.ma-broschyr-omslag.lut .ma-bro-sida.s2 { transform: translate(-30%, -2%) rotate(-10deg); }
.ma-broschyr:hover .ma-broschyr-text .knapp .pil, .ma-broschyr:focus-within .ma-broschyr-text .knapp .pil { transform: translateY(3px); }
.ma-broschyr-text .knapp .pil { transition: transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .ma-bro-bok, .js .ma-broschyr-omslag:not(.syns) .ma-bro-bok { transition: none; transform: perspective(1100px) rotateY(-9deg) rotateX(2deg); }
  .ma-bro-sida { transition: none; }
  .ma-broschyr-omslag.syns .ma-bro-glans::after { animation: none; }
}
@media (max-width: 760px) {
  .ma-broschyr-omslag { width: 56%; max-width: 240px; }
  .ma-bro-sida { transform-origin: 0% 100%; }
  .ma-broschyr-omslag.syns .ma-bro-sida.s1 { transform: translateX(6%) rotate(1.8deg); }
  .ma-broschyr-omslag.syns .ma-bro-sida.s2 { transform: translateX(12%) rotate(3.6deg); }
}

/* ================= broschyrblocket i ett eget avsnitt (kalla/bro_2026.py) ================= */
.bro-sek .ma-broschyr { margin-top: 0; }

/* ================= inuti: startsektionen S30 Genomskärningen på produktsidorna (kalla/ma_s30.py – ändra där och kör om) ================= */
/* Själva sektionen: assets/sx/s30.css och s30.js (ur startsektionerna, kalla/sx_in.py s30 ../) – gemensamma för alla bildpar.
   Här bara produktsidans anpassningar, under .ma-s30 (Multiauto; IDRO och AERO laddar också den här filen). */
.ma-s30 .s30-text .t-ingress { margin-top: 20px; max-width: 36ch; }
.ma-s30 .s30-delar { margin-top: clamp(20px, 2vw, 30px); }
.ma-s30 .s30-del { padding: 10px 0 11px; }
/* granskningen 2026-10-24: linjen och handtaget stannar 22 px innanför bildens kanter (bilden är tom där – pannan börjar
   vid ca 10 %), så att handtaget aldrig skärs av skärmkanten på mobilen; ljusslingan bakom linjen (90 px) är aldrig
   bredare än sträckan linjen har gått, så att den inte ligger som en ljus panel över listans högerkant i början */
.ma-s30 .s30-linje, .ma-s30 .s30-grepp { left: clamp(22px, var(--x), calc(100% - 22px)); }
.ma-s30 .s30-linje { width: min(90px, var(--x)); margin-left: calc(-1 * min(90px, var(--x))); }
.ma-s30 .s30-linje::before { left: auto; right: -1px; }
.ma-s30 .s30-linje::after { left: 0; width: auto; }
/* mobil: ingen luft under listan – nästa avsnitt har sin egen (annars dubbel luft mot 06) */
@media (max-width: 760px) {
  .ma-s30 .s30-klibb { padding-bottom: 0; }
}
@media (min-width: 761px) {
  /* den klistrade scenen börjar under sidhuvudet (76 px) */
  .ma-s30 .s30-klibb { padding-top: 76px; }
}
/* fönster upp till 940 px höga (t.ex. 1440 × 900): något mindre ingress och tätare lista, så att alla fem delarna med text
   ryms under sidhuvudet även på engelska */
@media (min-width: 761px) and (max-height: 940px) {
  .ma-s30 .s30-text .t-etikett { margin-bottom: 20px; }
  .ma-s30 .s30-text .t-ingress { margin-top: 16px; font-size: 1.25rem; }
  .ma-s30 .s30-delar { margin-top: 18px; }
  .ma-s30 .s30-del { padding: 8px 0 9px; }
}
/* lägre fönster och smalare skärmar (dator/platta): fem delar med text ryms inte – bara den senast tända delens text syns
   (de andra finns kvar för skärmläsare); texten står överst så att inget hoppar när raderna byts */
@media (min-width: 761px) and (max-height: 860px), (min-width: 761px) and (max-width: 1100px) {
  .ma-s30 .s30-rutnat { align-self: stretch; }
  .ma-s30 .s30-text { align-self: start; padding-top: clamp(16px, 4vh, 44px); }
  .ma-s30 .s30-del > span:last-child { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ma-s30 .s30-del.pa:not(:has(~ .s30-del.pa)) > span:last-child { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; animation: ma-s30-text .6s ease both; }
}
/* riktigt låga fönster (bärbara 720–800 px): tätare rubrik, ingress och lista */
@media (min-width: 761px) and (max-height: 800px) {
  .ma-s30 .s30-text { padding-top: 20px; }
  .ma-s30 .s30-text .t-etikett { margin-bottom: 18px; }
  .ma-s30 .s30-text .t-h2 { font-size: min(clamp(2.375rem, 1.4rem + 3.3vw, 5.25rem), calc(var(--vh) * 7)); }
  .ma-s30 .s30-text .t-ingress { margin-top: 14px; font-size: 1.1875rem; }
  .ma-s30 .s30-delar { margin-top: 16px; }
  .ma-s30 .s30-del { padding: 8px 0 9px; }
}
/* reducerad rörelse och skärmdumpsläget (?visa-allt): slutläget direkt, så ingen klistrad scen – annars 150 vh tomt
   under den (som sajtens andra klistrade scener i läget .stilla); alla delarnas texter syns */
html.visa-allt .ma-s30 .s30-scen { height: auto; }
html.visa-allt .ma-s30 .s30-klibb { position: relative; height: auto; min-height: 0; padding: var(--sektion) 0 0; }
html.visa-allt .ma-s30 .s30-text { padding-top: 0; }
html.visa-allt .ma-s30 .s30-del > span:last-child { display: block; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ma-s30 .s30-scen { height: auto; }
  .ma-s30 .s30-klibb { position: relative; height: auto; min-height: 0; padding: var(--sektion) 0 0; }
  .ma-s30 .s30-text { padding-top: 0; }
  .ma-s30 .s30-del > span:last-child { display: block; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; animation: none; }
}
@keyframes ma-s30-text { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ================= slut inuti (S30) ================= */