/* Förslag 1 – Lanseringen. Pumpen står i en vinternatt som en produkt vid en lansering. Färgerna är förslag 3:s
   (marinblått och isblått, Felix 14.10.2026: "prova byta om färgtemat till det som version 3 använde"). Väljer man
   Mist Grey blir hela sidan ljus (html[data-farg="mist"]). Inter Tight i rubrikerna, Inter i texten. */

.f1 {
  --font-rubrik: "Inter Tight", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --vikt-rubrik: 700;
  --bg: #07111c;
  --yta: #0d1c2c;
  --yta-2: #15293e;
  --text: #eaf3fb;
  --text-2: #a9bfd3;
  --linje: rgba(160, 205, 255, .17);
  --accent: #e27100;
  --accent-text: #07111c;
  --accent-ink: #ff9124;
  --etikett: #7cc0ff;
  --huvud-bg: #07111c;
  --knapp-ram: rgba(160, 205, 255, .5);
  --knapp-ram-hover: rgba(124, 192, 255, .1);
  --paket-summa-bg: #7cc0ff;
  --paket-summa-text: #07111c;
  --falt-bg: #07111c;
  --falt-ram: rgba(160, 205, 255, .28);
  --fot-bg: #040a11;
  --mobilbar-bg: #0d1c2c;
  --bock: #7cc0ff;
  --fokus: #7cc0ff;
  --fokus-ring: rgba(124, 192, 255, .35);
  --radie: 14px;
}
html.f1[data-farg="mist"] .huvud__logga .ljus { display: none; }
html.f1[data-farg="mist"] .huvud__logga .mork { display: block; }
html.f1[data-farg="mist"] {
  --bg: #f2f0ec;
  --yta: #f7f6f3;
  --yta-2: #e1ded8;
  --text: #141517;
  --text-2: #56534d;
  --linje: rgba(0, 0, 0, .13);
  --accent-ink: #a84f00;
  --etikett: #a84f00;
  --huvud-bg: #f2f0ec;
  --knapp-ram: rgba(0, 0, 0, .42);
  --knapp-ram-hover: rgba(0, 0, 0, .06);
  --falt-bg: #ffffff;
  --falt-ram: rgba(0, 0, 0, .18);
  --mobilbar-bg: #f7f6f3;
  --bock: #a84f00;
  --fokus: #a84f00;
}
.f1 .huvud, .f1 .paket__del, .f1 .funk__grupp, .f1 .kvitto, .f1 .form, .f1 .mobilbar, .f1 .falt input, .f1 .falt textarea, .f1 .val, .f1 .steg__steg,
.f1 .scen__ljus, .f1 .tyg__bakgrund, .f1 .lans__citat, .f1 .termo, .f1 .termo__pump, .f1 .varld__mark, .f1 .varld__himmel { transition: background-color .6s ease, color .6s ease, border-color .6s ease, opacity .6s ease; }
.f1 h1, .f1 h2 { letter-spacing: -.03em; }
.f1 h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }

/* ---------------------------------------------------------------- Scenen: ett vinterlandskap i djupled */
.f1 { --is: #7cc0ff; }
html.f1[data-farg="mist"] { --is: #1668b5; }
/* Toppen fyller första skärmen: rubriken överst, pumpen i natthimlen, isen under den och prisraden längst ner
   (Felix 14.10.2026: "flytta den här sektionen till bottnen av sidan så att pumpen blir ovanför färgskiljningen"). */
.scen { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100svh - var(--huvud-h)); padding-top: clamp(16px, 3vh, 40px); }
.scen__ljus { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 70% at 78% 8%, #17344f 0%, rgba(23, 52, 79, 0) 62%), radial-gradient(60% 50% at 10% 100%, #0f2338 0%, rgba(15, 35, 56, 0) 70%); }
html[data-farg="mist"] .scen__ljus { background: radial-gradient(46% 52% at 50% 40%, #ffffff, rgba(255, 255, 255, .5) 55%, transparent 74%); }
.scen__in { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.scen__rad, .scen__rubrik { position: relative; z-index: 4; }
.scen__rad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: .92rem; color: var(--text-2); }
.scen__rubrik { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(12px, 2.2vh, 24px); }
.scen__namn { font: 600 .82rem/1.2 var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--etikett); }
.scen__slogan { font-size: clamp(2.3rem, 5.2vw, 4.5rem); line-height: 1; font-weight: 700; letter-spacing: -.04em; }

/* Landskapet. Lagren flyttas lite med pekaren: --px och --py (−1 … 1) sätts av js/dovre.js, --d är lagrets djup.
   Inga egna lager (isolation, z-index) på .varld och .varld__golv: snön i .scen ska kunna falla framför isen men
   bakom pumpen, figurerna och prisraden. js/dovre.js sätter .igang när landskapet syns första gången (rörelserna
   börjar) och .syns medan det syns (luften blåser bara då). */
.varld { flex: 1; display: flex; flex-direction: column; width: 100%; margin-top: clamp(6px, 1.4vh, 16px); text-align: left;
  --px: 0; --py: 0; --helbredd: calc(50% - 50vw); }
.varld__lager { --d: 0; transform: translate3d(calc(var(--px) * var(--d) * -1px), calc(var(--py) * var(--d) * -.5px), 0); }

/* Pumpen i natthimlen, snett underifrån med spjället öppet, och luften som blåser ut (svg.luft i bildens egna mått) */
/* Lite mindre pump när skärmen är lägre än 900 px (13-tums MacBook i Safari är ungefär 1470 × 830), så att prisraden
   ryms på första skärmen; under 820 px tar "Låg skärm" längre ner över */
.varld__pump { position: relative; z-index: 3; flex: none; width: clamp(36%, calc(46% - (900px - 100svh) * 1.06), 46%); margin: 0 auto; --d: 22; }
/* Skuggan är en egen bild (Safari ritade en ljus rektangel runt pumpen med filter: drop-shadow) */
.pbild img.pbild__skugga { position: absolute; max-width: none; height: auto; pointer-events: none; }
.pbild--sned > img:not(.pbild__skugga) { position: relative; }
.luft { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1400 / 1060; overflow: visible; pointer-events: none;
  color: #ffe8d2; opacity: 0; transition: opacity 1.4s ease .3s; }
html[data-farg="mist"] .luft { color: #5d86ad; }
.varld.igang .luft { opacity: 1; }
.luft__strom { fill: none; stroke: currentColor; stroke-opacity: .21; stroke-linecap: round; stroke-dasharray: 190 260; stroke-dashoffset: 450; }
html[data-farg="mist"] .luft__strom { stroke-opacity: .18; }
.varld.syns .luft__strom { animation: blasa 2.9s linear infinite; animation-delay: calc(var(--i) * -.53s); }
@keyframes blasa { from { stroke-dashoffset: 450; } to { stroke-dashoffset: 0; } }

/* Isen: börjar strax under pumpen (skarven är ".varld__golv"s överkant, med ett ljust streck) och går ända ner,
   också bakom prisraden. Himlens sken ligger strax ovanför skarven. */
.varld__golv { position: relative; flex: 1; display: flex; flex-direction: column; margin-top: clamp(14px, 2.6vh, 30px); padding-bottom: clamp(18px, 3vh, 36px); }
.varld__golv::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--helbredd); right: var(--helbredd); pointer-events: none;
  background: radial-gradient(34% 120px at 50% 0%, rgba(124, 192, 255, .18), transparent 100%), linear-gradient(to bottom, #12304b 0%, #0c2034 45%, var(--bg) 100%); }
.varld__golv::after { content: ""; position: absolute; z-index: -1; left: var(--helbredd); right: var(--helbredd); top: -24px; height: 48px; filter: blur(8px); pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(124, 192, 255, .28), transparent); }
.varld__himmel { position: absolute; z-index: -1; left: var(--helbredd); right: var(--helbredd); bottom: 100%; height: 300px; pointer-events: none;
  background: radial-gradient(46% 100% at 50% 100%, rgba(124, 192, 255, .16), rgba(124, 192, 255, .04) 55%, transparent 76%); }
html[data-farg="mist"] .varld__golv::before { background: radial-gradient(34% 120px at 50% 0%, rgba(255, 255, 255, .9), transparent 100%), linear-gradient(to bottom, #e3e6e9 0%, #eae9e6 45%, var(--bg) 100%); }
html[data-farg="mist"] .varld__golv::after { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .95), transparent); }
html[data-farg="mist"] .varld__himmel { background: radial-gradient(46% 100% at 50% 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 55%, transparent 76%); }
/* Ytan på isen mellan skarven och prisraden. Roboten och −40° står på samma marklinje en bit in mot mitten, under
   pumpens ändar (Felix 14.10.2026: "kanske dammsugaren o -40 närmare mitten o färgvalen ner igen"; dessförinnan
   "lite högre upp"). Raden ligger strax ovanför mitten av isen: det som blir över delas 2 : 3 mellan luften ovanför
   och under den. Ytan växer så att prisraden hamnar längst ner på första skärmen. --inn är avståndet in från kanten. */
.varld__scen { position: relative; flex: 1; display: flex; flex-direction: column; --inn: 19%; --minus-fs: clamp(58px, 6.8vw, 120px); }
.varld__scen::before, .varld__scen::after { content: ""; }
.varld__scen::before { flex: 2 1 0; min-height: var(--luft-upp, clamp(4px, 1vh, 12px)); }
.varld__scen::after { flex: 3 1 0; min-height: var(--luft-ner, clamp(26px, 4.4vh, 48px)); }
.varld__rad { display: flex; align-items: flex-end; }

/* Snön faller över hela toppen (Felix 14.10.2026: "snön sku få täcka övre delen av skärmen också"), framför himlen och
   isen men bakom texten, pumpen, figurerna och prisraden (de har z-index 3–4). Färgen läses av js/dovre.js. */
.scen__sno { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; color: rgba(232, 242, 255, .8); }
html[data-farg="mist"] .scen__sno { color: rgba(118, 142, 168, .55); }

/* Roboten och −40° står på isen, ovanpå pumpens luft och skugga */
/* --ut: hur långt roboten rullar ut när den städar (i procent av sin höjd) och --ut-s hur mycket större den då blir;
   längre på höga skärmar, där isen under den räcker till */
.varld__robot { position: relative; flex: none; width: 13%; margin: 0 0 0 var(--inn); z-index: 4; --d: 12; --ut: 16%; --ut-s: 1.1; }
@media (min-height: 940px) { .varld__robot { --ut: 26%; --ut-s: 1.16; } }
.robotpar { position: relative; }
.robotpar img { display: block; width: 100%; height: auto; }
.robotpar__bil, .robotpar__brum { position: absolute; inset: 0; }
.robotpar__bil { transform-origin: 50% 100%; }
.robotpar:not(.robotpar--spegel) { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); }
.robotpar--spegel { position: absolute; left: 0; top: 100%; width: 100%; transform: scaleY(-1); opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 38%); mask-image: linear-gradient(to top, #000 0%, transparent 38%); }
html[data-farg="mist"] .robotpar--spegel { opacity: .12; }
.robotpar__led { position: absolute; left: 44%; top: 62%; width: 20%; height: 8%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 185, 255, .95), rgba(110, 185, 255, 0)); }
.robotpar__lampa { position: absolute; left: 55.6%; top: 37.5%; width: 1.6%; height: 7.5%; border-radius: 2px; opacity: 0; pointer-events: none;
  background: #9fd2ff; box-shadow: 0 0 10px 2px rgba(124, 192, 255, .9), 0 0 26px 6px rgba(124, 192, 255, .45); }
html:not(.js) .robotpar__lampa { opacity: .85; }

/* Robotens rörelse: den städar framför stationen. Felix fick fyra förslag (14.10.2026: "gör alla 3 o låt mig kolla så
   ser vi va som blir bäst") och valde det här: "städar framför stationen e super". Bilden visar roboten rakt
   framifrån, så den rör sig bara rakt fram och bakåt: större och lägre = närmare oss. .varld.igang startar. Sist står
   roboten i stationen, och stationens lampa tänds när den har dockat (--dockad) och andas sedan lugnt. */
.js .varld.igang .robotpar__lampa { animation: tands .6s ease-out var(--dockad, 0s) both, ladda 2.4s ease-in-out calc(var(--dockad, 0s) + .6s) infinite alternate; }
@keyframes tands { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .9; } }
@keyframes ladda { from { opacity: .9; } to { opacity: .35; } }
@keyframes brum { from { transform: translateY(0); } to { transform: translateY(-.6%); } }
@keyframes led { from { opacity: .15; } to { opacity: 1; } }

/* Roboten rullar ut mot oss, suger upp snön som ligger framför stationen (flingorna försvinner in under den och
   fläcken blir ren) och backar in igen */
.js .varld { --dockad: 4.6s; }
.js .varld.igang .robotpar__bil { animation: stada 5s .2s both; }
.js .varld.igang .robotpar__brum { animation: brum .09s steps(2, jump-none) .45s 45; }
.js .varld.igang .robotpar__led { animation: led .32s ease-in-out .45s 13 alternate both; }
.robotsno { position: absolute; left: 50%; top: calc(100% + var(--ut) * .6); width: 160%; height: calc(var(--ut) + 16%); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 246, 255, .46), rgba(236, 246, 255, .2) 62%, rgba(236, 246, 255, 0)); }
html[data-farg="mist"] .robotsno { background: radial-gradient(closest-side, #ffffff, rgba(255, 255, 255, .6) 62%, rgba(255, 255, 255, 0)); }
.js .varld:not(.igang) .robotsno { opacity: 1; }
.js .varld.igang .robotsno { animation: stadad 5s .2s both; }
.robotdamm { position: absolute; inset: 0; pointer-events: none; }
/* Flingorna ligger på isen framför stationen (--sx, och --dy från linjen där robotens framkant hamnar) tills roboten
   suger upp dem en i taget */
.robotdamm i { position: absolute; left: var(--sx); top: calc(100% + var(--ut) + var(--dy)); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; opacity: 0;
  background: rgba(240, 247, 255, .92); box-shadow: 0 0 3px rgba(200, 230, 255, .55); }
html[data-farg="mist"] .robotdamm i { background: #ffffff; box-shadow: 0 0 0 1px rgba(120, 140, 160, .35); }
.js .robotdamm i { opacity: .85; }
.js .varld.igang .robotdamm i { animation: sug .8s cubic-bezier(.55, 0, .9, .45) calc(1.4s + var(--f) * .045s) both; }
@keyframes stada {
  0%, 6% { transform: none; animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  24%    { transform: translate(0, var(--ut)) scale(var(--ut-s)); animation-timing-function: ease-in-out; }
  33%    { transform: translate(0, calc(var(--ut) * .8)) scale(calc(var(--ut-s) - .02)); animation-timing-function: ease-in-out; }
  42%    { transform: translate(0, calc(var(--ut) * 1.04)) scale(calc(var(--ut-s) + .004)); animation-timing-function: ease-in-out; }
  51%    { transform: translate(0, calc(var(--ut) * .85)) scale(calc(var(--ut-s) - .015)); animation-timing-function: ease-in-out; }
  58%    { transform: translate(0, var(--ut)) scale(var(--ut-s)); animation-timing-function: cubic-bezier(.45, 0, .6, 1); }
  88%    { transform: translate(0, -1.4%) scale(.993); animation-timing-function: cubic-bezier(.25, 0, .3, 1); }
  95%    { transform: translate(0, .4%) scale(1.002); }
  100%   { transform: none; }
}
@keyframes stadad { 0%, 28% { opacity: 1; } 60%, 100% { opacity: 0; } }
/* Sidoborsten under roboten snurrar medan den städar och stannar när den backar in (Felix 14.10.2026: "skulle det gå
   att borsten under maskinen skulle snurra också?"). Fotots borste är borttagen (utan_sidoborste i bilder.py). Den här
   ligger bakom roboten, så bara armarnas spetsar syns under kanten, och den är ritad i golvets plan: en cirkel som
   trycks ihop till en ellips (.28, som robotens rundning). Navet är mätt i bilden. I full fart syns en svag virvel. */
.robotpar__robot { position: relative; }      /* ritas efter borsten */
.robotpar__borste { position: absolute; left: 25.5%; top: 87.4%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%) scaleY(.28); pointer-events: none; }
.robotpar__borste svg { display: block; width: 100%; height: 100%; overflow: visible; }
.robotpar__arm { transform: rotate(45deg); }
.robotpar__virvel { opacity: 0; }
.js .varld.igang .robotpar__arm { animation: borste 2.8s cubic-bezier(.45, 0, .55, 1) .45s both; }
.js .varld.igang .robotpar__virvel { animation: virvel 2.8s .45s both; }
@keyframes borste { from { transform: rotate(45deg); } to { transform: rotate(-1755deg); } }    /* fem varv, armarna landar där de började */
@keyframes virvel { 0%, 14% { opacity: 0; } 38%, 66% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes sug {
  0%   { left: var(--sx); top: calc(100% + var(--ut) + var(--dy)); opacity: .85; transform: scale(1); }
  100% { left: 52%; top: calc(100% + var(--ut) * .7); opacity: 0; transform: scale(.3); }
}

/* −40° står i höjd med roboten, mitt för dess mitt, med sin spegling under (Felix 15.10.2026: "ja saknar speglingen
   på -40", "-40 måste ändå va i höjd med dammsugaren"): figuren är lika hög som raden och siffrorna centreras i den */
.varld__kyla { position: relative; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin: 0 var(--inn) 0 auto; z-index: 4; --d: 12; text-align: right; }
/* På dator står −40°:s text till vänster om siffrorna, så gruppen flyttas ut åt höger och speglar robotens grupp: en jämn
   triangel med pumpen överst (Felix 15.10.2026: "flytta -40 o texten mer ti höger så vi får en snygg triangel").
   153 px = texten (ca 119 px) och luften till figuren (34 px). */
@media (min-width: 1061px) { .varld__kyla { margin-right: max(0px, calc(var(--inn) - 153px)); } }
.varld__siffror { position: relative; display: block; }
/* −40° räknar ner från plusgrader i rött direkt när toppen syns (js/dovre.js sätter siffran och färgerna) */
.varld__minus { display: block; position: relative; width: 2.3em; padding: 0 .02em; text-align: right;   /* fast bredd: "+39°" är bredast (2,26 em), så texten bredvid står still medan det räknas (Felix 15.10.2026) */
  font: 800 var(--minus-fs)/.82 var(--font-rubrik); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--is);
  background: linear-gradient(180deg, #ffffff 0%, #d8ecff 34%, #7cc0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #3f78ab) drop-shadow(0 3px 0 #2c5a83) drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.js .varld:not(.igang) .varld__minus { visibility: hidden; }
.varld__minus--spegel { position: absolute; right: 0; top: 100%; transform: scaleY(-1); opacity: .16; filter: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 60%); mask-image: linear-gradient(to top, #000 0%, transparent 60%); }
html[data-farg="mist"] .varld__minus { background-image: linear-gradient(180deg, #5c9fdc 0%, #2f7cc4 45%, #1668b5 100%);
  filter: drop-shadow(0 2px 0 #b9d3ea) drop-shadow(0 18px 22px rgba(40, 70, 100, .18)); }

/* Texterna vid roboten och −40° (Felix 15.10.2026: "de måste inte va i en såndär box", "skippa skriva
   robotdammsugare, -40", "snyggt o enhetligt", valde "Text bredvid, utåt" och "bredda allting lite så att de skulle
   finnas mer mellanrum"): ingen ruta, en rubrik och två rader fakta, likadant för båda. På dator står de bredvid
   figuren, utåt och mitt för den – robotens till vänster, −40°:s till höger – och får ta plats ut i marginalen. På
   smala skärmar (surfplatta på höjden, telefon) står de ovanför figuren. */
/* Etiketten är en rubrik, faktan en tydlig rad under (Felix 15.10.2026: "på köpet, byggd för ska ju va rubriker o först
   till kvarn under men de borde också va tydligare") */
.tagg { display: grid; justify-items: center; gap: 4px; text-align: center; line-height: 1.3; text-shadow: 0 1px 3px rgba(4, 10, 20, .55), 0 2px 16px rgba(4, 10, 20, .75); }
html[data-farg="mist"] .tagg { text-shadow: 0 1px 10px rgba(255, 255, 255, .9); }
.tagg__etikett { font: 800 1.2rem/1.1 var(--font-rubrik); letter-spacing: .06em; text-transform: uppercase; }
.tagg--robot .tagg__etikett { color: var(--accent-ink); }    /* erbjudandet i Mister Flincks orange */
.tagg--kyla .tagg__etikett { color: var(--is); }
.tagg__fakta { font: 500 1rem/1.3 var(--font-text); color: var(--text); white-space: nowrap; }
.tagg--robot, .tagg--kyla { position: absolute; top: 50%; width: max-content; transform: translateY(-50%); }
.tagg--robot { right: calc(100% + 34px); }     /* mer luft mot figuren (Felix 15.10.2026) */
.tagg--kyla { right: calc(100% + 34px); }   /* båda centrerade; −40°:s text står till vänster om siffrorna (Felix 15.10.2026: "byt plats på -40 och dens text") */
/* Roboten länkar till Wilfas sida om den (Felix 15.10.2026: "när man lägger musen ovanför dammsugaren kan den länka till
   wiflas sida om den"). Med musen över lyser den upp och "Läs mer hos Wilfa" visas under den. */
.robotlank { display: block; position: relative; color: var(--text); text-decoration: none; border-radius: 12px; }
.robotlank:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.robotlank .robotpar { transition: filter .25s ease; }
.robotlank:hover .robotpar, .robotlank:focus-visible .robotpar { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(124, 192, 255, .35)) brightness(1.08); }
.robotlank__tips { position: absolute; left: 50%; top: calc(100% + 6px); display: inline-flex; align-items: center; gap: 6px; width: max-content; white-space: nowrap; transform: translate(-50%, -4px);
  font: 600 .8rem/1.2 var(--font-text); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; text-shadow: 0 1px 10px rgba(4, 10, 20, .8); }
.robotlank__tips .ikon { width: 14px; height: 14px; }
.robotlank:hover .robotlank__tips, .robotlank:focus-visible .robotlank__tips { opacity: 1; transform: translate(-50%, 0); }
html[data-farg="mist"] .robotlank__tips { text-shadow: 0 1px 8px rgba(255, 255, 255, .95); }

.scen__fot { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px 28px; width: 100%; text-align: left; }
.scen__farg { justify-content: center; }
.scen__farg .fargval__rubrik { display: none; }
.scen__knappar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
@media (max-width: 1060px) {
  .scen__fot { grid-template-columns: minmax(0, 1fr) auto; }
  .scen__farg { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .scen__knappar { grid-column: 1 / -1; justify-content: flex-start; }
  .varld__pump { width: 56%; }
  .varld__scen { --inn: 12%; }
  .tagg--robot, .tagg--kyla { top: auto; bottom: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%); justify-items: center; text-align: center; }
  .varld__robot { width: 15%; }
  .tagg--robot { left: max(56.7%, calc(var(--tagg-halv, 54px) + 4px - var(--inn))); }   /* mitt över tömningsstationen (56,7 % in i bilden), inte över bildrutan med roboten (Felix 15.10.2026); på smal skärm så långt in att rubriken inte går utanför kanten */
  html[lang="fi"] .tagg--robot { --tagg-halv: 76px; }   /* "Kaupan päälle" */
}
@media (max-width: 760px) {
  .scen { min-height: 0; }
  .varld__pump { width: 94%; }
  /* Telefon: robotens texter står ovanför den, så isen ger plats för dem under skarven */
  .varld__scen { --inn: calc((100vw - 2 * var(--gutter)) * .04); --minus-fs: clamp(46px, 14.5vw, 74px); --luft-upp: 86px; --luft-ner: 26px; }
  .varld__robot { width: 25%; }
  .tagg__etikett { font-size: 1.17rem; letter-spacing: .04em; }    /* minst 18,7 px fet = stor text, så att orange räcker i Mist Grey */
  html[lang="fi"] .tagg__etikett { letter-spacing: 0; }               /* "Kaupan päälle" är längre än "På köpet" */
  .tagg__fakta { font-size: .86rem; }
}
@media (max-width: 640px) {
  .scen__rad { display: none; }   /* Felix 15.10.2026: "skippa FÖRHANDSFÖRSÄLJNING Bara hos utvalda Wilfa-partner på telefon versionen" */
  .varld__scen { --luft-upp: 44px; }   /* bara rubrikerna ovanför figurerna nu: allt ryms på första skärmen */
  .tagg__fakta { display: none; }   /* Felix 15.10.2026: "skippa även Först till kvarn, begränsat antal / 4,9 kW värme vid −15 °C på telefon" */
  .scen__slogan { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .scen__fot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scen__farg { grid-column: 1; grid-row: auto; justify-content: flex-end; }   /* höger sida (Felix 15.10.2026) */
  .scen__knappar .knapp { flex: 1 1 auto; }
  .scen__knappar .knapp--lank { flex: 0 0 auto; }
}
/* Låg skärm (liten bärbar), och smal skärm som inte är riktigt hög (surfplatta på bredden, litet fönster): rubriken
   på en rad, mindre pump och figurer så att allt ryms på första skärmen och texterna inte når pumpen */
@media (max-height: 820px) and (min-width: 761px), (max-height: 1000px) and (min-width: 761px) and (max-width: 1060px) {
  .scen__slogan { font-size: clamp(2.1rem, 3.4vw, 3.1rem); }
  .scen__slogan br { display: none; }
  .varld__pump { width: 36%; }
  .varld__golv { margin-top: 10px; }
  .varld__scen { --inn: 22%; --minus-fs: clamp(52px, 5.4vw, 92px); --luft-ner: clamp(20px, 3.4vh, 30px); }
  .varld__robot { width: 10%; }
  .tagg--robot, .tagg--kyla { top: 50%; bottom: auto; transform: translateY(-50%); }
  .tagg--robot { left: auto; right: calc(100% + clamp(8px, calc(4vw - 25px), 26px)); }   /* mindre luft mot roboten på smalare skärm, så att etiketten inte börjar utanför vänsterkanten (26 px från 1278 px bredd, som förut) */
  .tagg--kyla { left: auto; right: calc(100% + 26px); }
  .varld__kyla { margin-right: max(0px, calc(var(--inn) - 145px)); }
}
@media (prefers-reduced-motion: reduce) {
  .luft__strom { stroke-dasharray: none; stroke-opacity: .07; }
  .robotpar__lampa { animation: none !important; opacity: .85; }
  .varld * { animation-delay: 0s !important; }      /* annars ligger snön kvar tills fördröjningen har gått */
}

/* ---------------------------------------------------------------- Dra ner temperaturen */
.kyla { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sektion); }
.kyla__frost { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.2 + var(--kyla, .45) * .8); transition: opacity .3s;
  background: radial-gradient(70% 80% at 80% 50%, rgba(124, 192, 255, .16), transparent 66%); box-shadow: inset 0 0 160px rgba(190, 225, 255, calc(var(--kyla, .45) * .14)); }
html[data-farg="mist"] .kyla__frost { background: radial-gradient(70% 80% at 80% 50%, rgba(22, 104, 181, .10), transparent 66%); box-shadow: inset 0 0 160px rgba(22, 104, 181, calc(var(--kyla, .45) * .08)); }
.kyla__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.kyla__text .etikett { color: var(--is); }
.kyla__text h2 { margin-bottom: 18px; }
.kyla__punkter { display: grid; gap: 10px; margin-top: 26px; }
.kyla__punkter li { display: flex; gap: 10px; align-items: flex-start; }
.kyla__punkter .ikon { margin-top: 3px; color: var(--is); }
@media (max-width: 860px) { .kyla__in { grid-template-columns: minmax(0, 1fr); } }
/* Termometern bredvid funktionernas rubrik */
.funk__topp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: clamp(32px, 4.5vw, 56px); }   /* rubriken, och under den termometern som en bred remsa */
.funk__topp .sektion__huvud { margin-bottom: 0; }
.termo { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 220px); gap: 18px 40px; align-items: center; padding: 22px 28px; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--yta); }
.termo__vanster { display: grid; gap: 6px; }
.termo__rub { font: 600 .8rem/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--is); white-space: nowrap; }
.termo__grad { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.termo__grad output { min-width: 1.85em; font: 800 3.4rem/.9 var(--font-rubrik); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.termo__grad span { color: var(--text-2); white-space: nowrap; }
.termo__mitt { min-width: 0; }
.termo__reglage { display: block; width: 100%; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.termo__reglage::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #cfe9ff, #7cc0ff 55%, #e27100); }
.termo__reglage::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #cfe9ff, #7cc0ff 55%, #e27100); }
.termo__reglage::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #ffffff; border: 3px solid var(--bg); box-shadow: 0 0 0 2px #7cc0ff, 0 4px 14px rgba(0, 0, 0, .45); }
.termo__reglage::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 3px solid var(--bg); box-shadow: 0 0 0 2px #7cc0ff; }
/* Markeringarna under reglaget, där tummens mitt står vid den temperaturen (reglaget går från −40 till +5) */
.termo__skala { position: relative; height: 18px; margin: 0 15px; }
.termo__marke { position: absolute; left: calc((var(--t) + 40) / 45 * 100%); top: 2px; transform: translateX(-50%); font: 600 .76rem/1 var(--font-text); color: var(--text-2); white-space: nowrap; }
.termo__marke::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 4px; background: var(--text-2); }
.termo__not { margin: 6px 0 0; font-size: .88rem; color: var(--text-2); }
.termo__svar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.termo__pump { padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.termo__pump dt { font-size: .86rem; color: var(--text-2); white-space: nowrap; }
.termo__pump dd { margin: 2px 0 0; font: 700 1.4rem/1.15 var(--font-rubrik); letter-spacing: -.01em; white-space: nowrap; }
.termo__pump--a dd { color: var(--is); }
@media (max-width: 1060px) {
  .termo { grid-template-columns: auto minmax(0, 1fr); }
  .termo__svar { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .termo { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .termo__pump dd { font-size: 1.2rem; }
  .termo__marke:nth-child(3), .termo__marke:nth-child(5) { display: none; }   /* −20° och −30°: för tätt på smal skärm */
}

/* ---------------------------------------------------------------- Siffrorna */
.f1 .siffror { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 76px) var(--gutter) clamp(20px, 3vw, 40px); }
.f1 .siffra__tal { font-weight: 700; font-size: clamp(2.6rem, 4.8vw, 4.4rem); }
/* Siffrorna i egna block, som korten under Funktioner (Felix 15.10.2026: "gör nån block design runt dehä") */
.f1 .siffror__lista { gap: 14px; }
.f1 .siffra { padding: 24px 22px 26px; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--yta); }
.f1 .siffra:first-child { border-left: 1px solid var(--linje); }
.f1 .siffra__tal { font-size: clamp(2.3rem, 3.6vw, 3.6rem); }
@media (min-width: 1101px) { .f1 .siffra__rub { min-height: 2.4em; } }   /* "Kraftig men kompakt" går på två rader: siffrorna linjerar ändå */
@media (max-width: 1100px) { .f1 .siffror__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .f1 .siffror__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .f1 .siffra, .f1 .siffra:nth-child(-n+2) { padding: 18px 16px 20px; border-top: 1px solid var(--linje); }
}

/* ---------------------------------------------------------------- Erbjudandet */
.f1 .paket__del--summa .knapp--accent { background: #07111c; color: #eaf3fb; }

/* ---------------------------------------------------------------- Textilen och måtten */
.tyg { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--sektion); }
.tyg__bakgrund { position: absolute; inset: 0; z-index: -1; background: #1c2b3a url(../../bilder/dovre/textil-graphite-rapport.webp) center / 900px auto repeat; }
.tyg__bakgrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 17, 28, .95) 0%, rgba(7, 17, 28, .84) 42%, rgba(7, 17, 28, .48) 100%); }
html[data-farg="mist"] .tyg__bakgrund { background: #cfcfcf url(../../bilder/dovre/textil-mist-rapport.webp) center / 900px auto repeat; }
html[data-farg="mist"] .tyg__bakgrund::after { background: linear-gradient(90deg, rgba(242, 240, 236, 1) 0%, rgba(242, 240, 236, .96) 46%, rgba(242, 240, 236, .45) 100%); }
/* Tygmönstret hämtas först när sektionen närmar sig (js/dovre.js sätter .nara 800 px före). Specificiteten (0,3,0) går
   före både Graphite-regeln och Mist-regeln ovan (0,2,1); utan skript (ingen .js) syns mönstret direkt som förut. */
.js .tyg__bakgrund:not(.nara) { background-image: none; }
.tyg__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: center; }
.tyg__text h2 { margin-bottom: 18px; }
.tyg__farg { margin-top: 28px; }
.matt { position: relative; margin: 0; padding: 0 64px 64px 0; }
.matt__bild img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.matt__linje { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--text); font: 700 .95rem/1 var(--font-rubrik); }
.matt__linje span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.matt__linje--h span { transform: translate(-50%, -50%) rotate(-90deg); }
.matt__linje--b { left: 0; right: 64px; bottom: 22px; height: 2px; background: var(--text); }
.matt__linje--b::before, .matt__linje--b::after { content: ""; position: absolute; top: -8px; width: 2px; height: 18px; background: var(--text); }
.matt__linje--b::before { left: 0; } .matt__linje--b::after { right: 0; }
.matt__linje--h { top: 0; bottom: 64px; right: 22px; width: 2px; background: var(--text); }
.matt__linje--h::before, .matt__linje--h::after { content: ""; position: absolute; left: -8px; width: 18px; height: 2px; background: var(--text); }
.matt__linje--h::before { top: 0; } .matt__linje--h::after { bottom: 0; }
/* Måtten ritas fram när bilden syns (Felix 15.10.2026: "sträcken som mäter pumpen kunde du animera"): bredden från
   vänster, höjden nerifrån, och siffran kommer fram när strecket når den */
.js .matt .matt__linje { transition: clip-path 1.1s cubic-bezier(.6, 0, .25, 1); }
.js .matt .matt__linje--b { clip-path: inset(-60px 100% -60px -60px); transition-delay: .25s; }
.js .matt .matt__linje--h { clip-path: inset(100% -60px -60px -60px); transition-delay: 1.05s; }
.js .matt.in .matt__linje { clip-path: inset(-60px); }      /* gott om marginal: siffrornas ruta får aldrig kapas (Felix 15.10.2026) */
.js .matt .matt__linje span { opacity: 0; transition: opacity .4s ease; }
.js .matt.in .matt__linje--b span { opacity: 1; transition-delay: 1.15s; }
.js .matt.in .matt__linje--h span { opacity: 1; transition-delay: 1.95s; }
.matt figcaption { position: absolute; left: 0; bottom: -10px; font-size: .9rem; color: var(--text-2); }
@media (max-width: 860px) { .tyg__in { grid-template-columns: minmax(0, 1fr); } .tyg__bakgrund::after { background: rgba(7, 17, 28, .88); } html[data-farg="mist"] .tyg__bakgrund::after { background: rgba(242, 240, 236, .95); } }
@media (max-width: 480px) { .matt { padding: 0 44px 52px 0; } .matt__linje--b { right: 44px; bottom: 16px; } .matt__linje--h { bottom: 52px; right: 14px; } .matt__linje { font-size: .82rem; } }

/* ---------------------------------------------------------------- Lanseringen */
.lans { padding-block: var(--sektion); }
.lans__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.lans__text { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 64px; align-items: start; }
.lans__text .etikett { grid-column: 1 / -1; margin-bottom: 0; }
/* Om robotdammsugaren: rubriken och bockarna på en rad (Felix 15.10.2026: "lägg ba checksen på rad brevid om robot") */
.erbj__robot { grid-template-columns: auto minmax(0, 1fr); gap: 16px 48px; align-items: center; }
.erbj__robot h3 { margin: 0; }
.erbj__robot ul { grid-column: 2; grid-row: 1; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px 28px; margin: 0; }
@media (min-width: 1101px) { .erbj__robot li { white-space: nowrap; } }
@media (max-width: 1100px) { .erbj__robot ul { grid-template-columns: repeat(2, auto); justify-content: start; } }
@media (max-width: 760px) { .erbj__robot { grid-template-columns: minmax(0, 1fr); } .erbj__robot ul { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); } }
.lans__citat { margin: 0; padding-left: 26px; border-left: 3px solid var(--accent); }
.lans__citat p { font: 500 clamp(1.15rem, 1.7vw, 1.4rem)/1.5 var(--font-rubrik); letter-spacing: -.01em; }
.lans__citat footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.lans__citat img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.lans__citat footer span { display: flex; flex-direction: column; font-size: .9rem; color: var(--text-2); }
.lans__citat footer strong { color: var(--text); font-size: 1rem; }
@media (max-width: 860px) { .lans__text { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Resten */
.f1 .funk__grupp { border: 1px solid var(--linje); }
.f1 .mf__fakta li { border-top-color: var(--is); }
.f1 .bestall { background: linear-gradient(180deg, var(--bg), var(--yta) 140%); }
.f1 .form__klar { background: var(--bg); }

/* Funktionskorten i tre spalter som börjar och slutar på samma linje; det sista kortet i varje spalt sträcks ut */
.f1 .funk__grupper { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.f1 .funk__spalt { display: flex; flex-direction: column; gap: 16px; }
.f1 .funk__grupp { margin: 0; }
.f1 .funk__spalt > .funk__grupp:last-child { flex: 1; }
@media (max-width: 1000px) {
  .f1 .funk__grupper { display: block; columns: 2 300px; column-gap: 16px; }
  .f1 .funk__spalt { display: contents; }
  .f1 .funk__grupp { display: inline-block; width: 100%; margin-bottom: 16px; vertical-align: top; }
}
/* Nedräkningen under formuläret */
.form .bestall__nedr { margin-top: 18px; }
/* Varannan sektion i en annan nyans, så att det inte blir långa ytor i samma färg (Felix 15.10.2026, som på
   Mister Flincks sajt) */
.f1 { --sektion-mjuk: #0b1826; }
html.f1[data-farg="mist"] { --sektion-mjuk: #eeebe6; }
.f1 .erbj, .f1 .lans, .f1 .bestall, .f1 .teknik { background: var(--sektion-mjuk); }