/* Wilfa Dovre 40 design – kampanjsidans grund: mekaniken (sidhuvud, meny, knappar, formulär, tabeller, frågor,
   nedräkning, färgval) och ett neutralt utseende. Sidans eget utseende står i f1.css. */

/* ---------- Typsnitt: Inter och Inter Tight från egen server (samma vikter och unicode-range som Google Fonts gav,
   Inter v20, Inter Tight v9) ----------
   Båda är variabla, så alla vikter delar en fil per teckenuppsättning. Kampanjsidan behöver då inga anrop till
   fonts.googleapis.com/fonts.gstatic.com (snabbare första bild, inga besökaradresser till Google). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #ffffff;
  --yta: #f4f4f2;
  --yta-2: #e9e8e4;
  --text: #141414;
  --text-2: #55534e;
  --linje: rgba(0, 0, 0, .12);
  --accent: #e27100;            /* Mister Flinck-orange: knappar och ytor, aldrig text på ljus botten */
  --accent-text: #111214;
  --accent-ink: #a84f00;        /* orange som text på ljus botten */
  --huvud-bg: var(--bg);
  --huvud-text: var(--text);
  --font-rubrik: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", sans-serif;
  --vikt-rubrik: 700;
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sektion: clamp(64px, 9vw, 124px);
  --huvud-h: 68px;
  --radie: 18px;
  --radie-liten: 12px;
  --radie-knapp: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--huvud-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--font-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .6s ease, color .6s ease;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-rubrik); font-weight: var(--vikt-rubrik); line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
h3 { font-size: 1.2rem; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { line-height: 0; }
sup a { text-decoration: none; padding: 0 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form__honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* fälla för robotar i formuläret */
/* Sajtens sparade pausval (pausknappen på startsidan) stoppar rörelserna här också – js/dovre.js sätter html.stilla */
html.stilla *, html.stilla *::before, html.stilla *::after { animation-play-state: paused !important; }
:focus-visible { outline: 3px solid var(--fokus, var(--accent)); outline-offset: 3px; border-radius: 6px; }

.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hoppa { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; }
.hoppa:focus { top: 12px; }

.sektion__in { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sektion__huvud { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sektion__huvud h2 + .ingress, .sektion__huvud h2 + p { margin-top: 18px; }
.etikett { margin-bottom: 14px; font: 600 .78rem/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--etikett, var(--text-2)); }
.ingress { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.ingress a { color: inherit; }
.finstilt { font-size: .86rem; color: var(--text-2); max-width: 80ch; }
.ankare { position: relative; top: calc(-1 * var(--huvud-h)); }

/* ---------------------------------------------------------------- Knappar */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--radie-knapp);
  font: 600 1rem/1.15 var(--font-knapp, var(--font-text)); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.knapp .ikon { width: 19px; height: 19px; transition: transform .2s; }
.knapp:hover .ikon { transform: translateX(3px); }
.knapp:active { transform: translateY(1px); }
.knapp--accent { background: var(--accent); color: var(--accent-text); }
.knapp--accent:hover { background: var(--accent-hover, var(--accent)); }
.knapp--ram { border-color: var(--knapp-ram, currentColor); background: transparent; }
.knapp--ram:hover { background: var(--knapp-ram-hover, rgba(127, 127, 127, .12)); }
.knapp--stor { min-height: 56px; padding: 0 28px; font-size: 1.06rem; }
.knapp--liten { min-height: 40px; padding: 0 16px; font-size: .94rem; }
.knapp--lank { padding-inline: 6px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.knapp--lank:hover { text-decoration-thickness: 2.5px; }

.pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: 700 .76rem/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- Sidhuvudet */
.huvud { position: sticky; top: 0; z-index: 50; background: var(--huvud-bg); color: var(--huvud-text); transition: background-color .6s, box-shadow .3s; }
.huvud.rullad { box-shadow: 0 1px 0 var(--linje), 0 10px 30px -18px rgba(0, 0, 0, .45); }
.huvud__in { display: flex; align-items: center; gap: 14px; height: var(--huvud-h); max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.huvud__logga { flex: none; display: flex; align-items: center; min-height: 44px; }
.huvud__logga img { height: 32px; width: auto; }
/* Loggan finns i två färger: den vita på mörkt sidhuvud, den mörka på ljust (html[data-logga], och förslag 1 i Mist Grey) */
.huvud__logga .mork, html[data-logga="mork"] .huvud__logga .ljus { display: none; }
html[data-logga="mork"] .huvud__logga .mork { display: block; }
.huvud__x { flex: none; font: 300 1.1rem/1 var(--font-text); opacity: .7; }
.huvud__wilfa { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.meny { margin-left: auto; }
.meny__lista { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.meny__lista a { display: inline-block; padding: 8px 0; font-weight: 500; font-size: .96rem; text-decoration: none; white-space: nowrap; color: inherit; }
.meny__lista a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.meny__tel { display: none; }
.huvud__tel { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .96rem; text-decoration: none; white-space: nowrap; }
.huvud__knapp { flex: none; }
.menyknapp { display: none; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.menyknapp .ikon { width: 26px; height: 26px; }
.menyknapp .ikon--kryss, .menyknapp[aria-expanded="true"] .ikon--meny { display: none; }
.menyknapp[aria-expanded="true"] .ikon--kryss { display: block; }
/* Språkbytet SV / FI: två knappar i en rundad skena, det valda språket fyllt. Syns i sidhuvudet på alla bredder
   (Felix 20.10.2026: "byte mellan språk behöver komma tydligare fram"). */
.sprak { flex: none; display: inline-flex; border-radius: 999px; background: var(--sprak-skena, rgba(127, 127, 127, .16)); }
.sprak a { position: relative; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 4px; border-radius: 999px;
  font: 700 .8rem/1 var(--font-text); letter-spacing: .08em; text-decoration: none; color: inherit; isolation: isolate; }
.sprak a::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 999px; transition: background-color .2s; }
.sprak a[aria-current="page"] { color: var(--sprak-vald-text, var(--bg)); }
.sprak a[aria-current="page"]::before { background: var(--sprak-vald, var(--text)); }
.sprak a:not([aria-current]):hover::before { background: rgba(127, 127, 127, .22); }
.sprak a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

@media (max-width: 1239px) {
  .huvud__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .huvud__tel { width: 44px; height: 44px; justify-content: center; border: 1.5px solid var(--linje); border-radius: 50%; }
}
@media (max-width: 1099px) {
  .menyknapp { display: inline-flex; }
  .huvud__sprak { margin-left: auto; }
  .meny {
    position: absolute; left: 0; right: 0; top: 100%; height: var(--meny-h, calc(100dvh - var(--huvud-h)));
    display: flex; flex-direction: column; padding: 18px var(--gutter) 28px; overflow-y: auto;
    background: var(--meny-bg, var(--huvud-bg)); color: var(--huvud-text);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .meny.oppen { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .meny__lista { flex-direction: column; gap: 0; }
  .meny__lista a { display: block; padding: 14px 0; font: var(--vikt-rubrik) 1.5rem/1.2 var(--font-rubrik); border-bottom: 1px solid var(--linje); }
  .meny__tel { display: block; margin-top: 24px; }
  .meny__tel a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.15rem; text-decoration: none; }
  html.meny-oppen { overflow: hidden; }
}
@media (max-width: 520px) {
  :root { --huvud-h: 60px; }
  .huvud__in { gap: 10px; }
  .huvud__logga img { height: 27px; }
  .huvud__wilfa { width: 26px; height: 26px; }
  .huvud__x { font-size: .95rem; }
  .huvud__knapp { display: none; }
}
/* Telefon: raden längst ner har ett samtal, så sidhuvudet får plats med språkbytet */
@media (max-width: 640px) { .huvud__tel { display: none; } }
@media (max-width: 360px) { .huvud__in { gap: 7px; } }

/* ---------------------------------------------------------------- Produktbilden i två färger */
.pbild { display: block; position: relative; }
.pbild img { width: 100%; height: auto; }
.pbild__m, html[data-farg="mist"] .pbild__g { display: none; }
html[data-farg="mist"] .pbild__m { display: block; }
img.pbild__m { display: none; }
html[data-farg="mist"] img.pbild__m { display: block; }
html[data-farg="mist"] img.pbild__g { display: none; }

/* ---------------------------------------------------------------- Färgvalet */
.fargval { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fargval__rubrik { font: 600 .78rem/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.fargval__knappar { display: flex; gap: 8px; flex-wrap: wrap; }
.fargval__knapp { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 16px 5px 5px; border: 1.5px solid var(--linje); border-radius: 999px; background: transparent; cursor: pointer; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.fargval__knapp:hover { border-color: var(--text-2); }
.fargval__knapp[aria-pressed="true"] { border-color: var(--text); }
.fargval__prov { display: block; width: 32px; height: 32px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
/* Proven har egna små bilder (240 px, bilder.py) i stället för hela tygbilden */
.fargval__prov--graphite { background: #45464b url(../../bilder/dovre/textil-graphite-prov.webp) center / 220% auto; }
.fargval__prov--mist { background: #c9c9c9 url(../../bilder/dovre/textil-mist-prov.webp) center / 220% auto; }

/* ---------------------------------------------------------------- Pris, gåva, nedräkning */
.pris { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.pris__tal { font: 800 clamp(2rem, 3.6vw, 2.9rem)/1 var(--font-rubrik); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pris__liten { font-size: .95rem; color: var(--text-2); }
.pris__manad { flex-basis: 100%; font-size: .9rem; color: var(--text-2); }
.pris__manad a { color: inherit; }

.nedr__rubrik { font: 600 .76rem/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.nedr__rad { display: flex; gap: 14px; margin-top: 6px; }
.nedr__rad[hidden] { display: none; }
.nedr__del { display: inline-flex; align-items: baseline; gap: 3px; }
.nedr__tal { font: 700 1.35rem/1 var(--font-rubrik); font-variant-numeric: tabular-nums; }
.nedr__enh { font-size: .85rem; color: var(--text-2); }
.nedr--stor .nedr__rad { gap: 10px; margin-top: 10px; }
.nedr--stor .nedr__del { flex-direction: column; align-items: center; gap: 6px; min-width: 76px; padding: 14px 10px 12px; border-radius: var(--radie-liten); background: var(--yta); }
.nedr--stor .nedr__tal { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.nedr--stor .nedr__enh { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 480px) {
  .nedr--stor .nedr__rad { gap: 6px; }
  .nedr--stor .nedr__del { flex: 1 1 0; min-width: 0; padding: 12px 2px 10px; }
  .nedr--stor .nedr__enh { font-size: .75rem; letter-spacing: 0; }
}

/* ---------------------------------------------------------------- Siffrorna */
.siffror__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.siffra { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; border-left: 1px solid var(--linje); }
.siffra:first-child { border-left: 0; }
.siffra__rub { font: 600 .76rem/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.siffra__tal { display: flex; align-items: baseline; gap: 6px; font: 800 clamp(2.6rem, 4.6vw, 4.2rem)/1 var(--font-rubrik); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.siffra__enh { font-size: .36em; font-weight: 700; letter-spacing: 0; }
.siffra__forkl { font-size: .92rem; color: var(--text-2); line-height: 1.45; }
@media (max-width: 1000px) {
  .siffror__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siffra { border-left: 0; border-top: 1px solid var(--linje); padding: 22px 14px 22px 0; }
  .siffra:nth-child(-n+2) { border-top: 0; }
  .siffra:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Erbjudandet */
.erbj { padding-block: var(--sektion); }
.erbj__in { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.erbj__text { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.erbj__text h2 { margin-bottom: 18px; }
.paket { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr); align-items: stretch; gap: 12px; }
/* Alla tre rutor har lika hög bildyta (bilden står på dess botten), så att bilder, namn och texter ligger i nivå */
.paket__del { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 230px; padding: 22px; border-radius: var(--radie); background: var(--yta); }
.paket__bild { display: block; width: 100%; height: 132px; margin: 0 0 14px; }
img.paket__bild { object-fit: contain; object-position: center bottom; }
.paket__bild img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.paket__ikon { display: grid; place-items: center; width: 64px; height: 64px; margin: auto 0 14px; border-radius: 50%; background: var(--yta-2); }
.paket__ikon .ikon { width: 30px; height: 30px; }
.paket__namn { font: 700 1.05rem/1.25 var(--font-rubrik); }
.paket__info { font-size: .9rem; color: var(--text-2); line-height: 1.4; }
.paket__tecken { display: grid; place-items: center; color: var(--text-2); }
.paket__tecken .ikon { width: 26px; height: 26px; }
.paket__del--summa { justify-content: center; background: var(--paket-summa-bg, var(--text)); color: var(--paket-summa-text, var(--bg)); }
.paket__del--summa .paket__info { color: inherit; opacity: .85; }
.paket__summa { font: 800 clamp(2.2rem, 3.4vw, 3rem)/1 var(--font-rubrik); letter-spacing: -.02em; white-space: nowrap; }
.paket__del--summa .knapp { margin-top: 16px; align-self: flex-start; }
.erbj__robot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 40px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linje); }
.erbj__robot h3 { grid-column: 1; }
.erbj__robot p { grid-column: 1; color: var(--text-2); }
.erbj__robot ul { grid-column: 2; grid-row: 1 / span 2; }
.finstilt { margin-top: 18px; }
.bocklista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.bocklista li { display: flex; gap: 10px; align-items: flex-start; }
.bocklista .ikon { margin-top: 2px; color: var(--bock, var(--accent-ink)); }
@media (max-width: 1100px) {
  .paket { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .paket__tecken:nth-of-type(4) { display: none; }
  .paket__del--summa { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 0; gap: 4px 18px; }
  .paket__del--summa .knapp { margin-top: 0; }
  .paket > .paket__tecken:nth-child(6) { display: none; }
}
@media (max-width: 760px) {
  .paket { grid-template-columns: minmax(0, 1fr); }
  .paket__tecken { padding: 0; height: 28px; }
  .paket > .paket__tecken:nth-child(6) { display: grid; }
  .paket__del { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
  .paket__del .paket__bild { margin: 0; width: 96px; height: 76px; flex: none; }
  .paket__del > .paket__namn, .paket__del > .paket__info { flex: 1 1 calc(100% - 120px); }
  .paket__del--summa > * { flex: none !important; }
  .erbj__robot { grid-template-columns: minmax(0, 1fr); }
  .erbj__robot ul { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .bocklista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Funktionerna */
.funk { padding-block: var(--sektion); }
.funk__grupper { columns: 3 300px; column-gap: 16px; }
.funk__grupp { break-inside: avoid; margin-bottom: 16px; padding: 26px; border-radius: var(--radie); background: var(--yta); }
.funk__grupp h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.15rem; }
.funk__ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yta-2); flex: none; }
.funk__antal { margin-left: auto; font: 600 .8rem/1 var(--font-text); color: var(--text-2); }
.funk__grupp li { padding: 10px 0; border-top: 1px solid var(--linje); }
.funk__namn { display: block; font-weight: 600; }
.funk__forkl { display: block; margin-top: 2px; font-size: .9rem; color: var(--text-2); line-height: 1.45; }
@media (max-width: 640px) { .funk__grupp { padding: 22px 18px; } }

/* ---------------------------------------------------------------- Tekniska data */
.teknik { padding-block: var(--sektion); }
.teknik__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.teknik__marken { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.teknik__marken .energi { width: 120px; height: auto; }
.teknik__marken img { width: 96px; height: 96px; }
.teknik table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.teknik th, .teknik td { padding: 13px 0; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; }
.teknik th { padding-right: 20px; font-weight: 500; color: var(--text-2); }
.teknik td { font-weight: 600; text-align: right; }
.teknik__kalla { margin-top: 14px; font-size: .86rem; color: var(--text-2); }
.teknik__blad { margin-top: 6px; font-size: .86rem; color: var(--text-2); }
.teknik__blad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-underline-offset: 3px; }
@media (max-width: 900px) { .teknik__in { grid-template-columns: minmax(0, 1fr); } .teknik__in .sektion__huvud { margin-bottom: 0; } }
@media (max-width: 480px) {
  .teknik tr { display: block; padding: 11px 0; border-bottom: 1px solid var(--linje); }
  .teknik th, .teknik td { display: block; padding: 0; border: 0; text-align: left; }
  .teknik th { font-size: .9rem; }
}

/* ---------------------------------------------------------------- Frågorna */
.fragor { padding-block: var(--sektion); }
.fragor__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.fraga { border-bottom: 1px solid var(--linje); }
.fraga:first-child { border-top: 1px solid var(--linje); }
.fraga summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 1.08rem/1.35 var(--font-rubrik); }
.fraga summary::-webkit-details-marker { display: none; }
.fraga__ikon { width: 24px; height: 24px; }
.fraga__ikon .ikon__lodrat { transform-origin: 12px 12px; transition: transform .25s; }
.fraga[open] .fraga__ikon .ikon__lodrat { transform: scaleY(0); }
.fraga p { padding: 0 40px 22px 0; color: var(--text-2); }
.fraga p a { color: inherit; font-weight: 600; }
@media (max-width: 900px) { .fragor__in { grid-template-columns: minmax(0, 1fr); } .fragor__in .sektion__huvud { margin-bottom: 0; } }

/* ---------------------------------------------------------------- Tidslinjen och stegen */
.tid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
@media (max-width: 1000px) { .tid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
.tid__steg { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 24px 0 0; }
.tid__steg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--linje); }
.tid__steg::after { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.tid__datum { font: 800 1.6rem/1 var(--font-rubrik); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tid__rub { font-weight: 700; }
.tid__text { font-size: .92rem; color: var(--text-2); }
@media (max-width: 760px) {
  .tid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tid__steg { padding: 0 0 26px 30px; }
  .tid__steg::before { left: 6px; right: auto; top: 8px; bottom: 0; width: 2px; height: auto; }
  .tid__steg:last-child::before { display: none; }
  .tid__steg::after { top: 2px; }
}
/* ---------------------------------------------------------------- Mister Flinck */
.mf { padding-block: var(--sektion); }
.mf__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.mf__media { position: relative; }
.mf__bild { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radie); }
.mf__bild--bil { aspect-ratio: auto; object-fit: contain; }
.mf__bild--vinter { aspect-ratio: 4 / 3; }
.mf__text h2 { margin-bottom: 18px; }
.mf__fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 20px; }
.mf__fakta li { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 2px solid var(--text); }
.mf__tal { font: 800 1.9rem/1 var(--font-rubrik); letter-spacing: -.02em; white-space: nowrap; }
.mf__text .mf__fakta .mf__text { font-size: .9rem; color: var(--text-2); }
.mf__orter { color: var(--text-2); font-size: .95rem; }
.mf__knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 860px) { .mf__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .mf__fakta { gap: 8px; } .mf__tal { font-size: 1.55rem; } }

/* ---------------------------------------------------------------- Förhandsbeställningen */
.bestall { padding-block: var(--sektion); }
.bestall__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: start; }
.bestall__sammanfattning h2 { margin-bottom: 18px; }
.kvitto { margin-top: 28px; padding: 24px; border-radius: var(--radie); background: var(--yta); }
.kvitto__bild { max-width: 360px; margin: 0 auto 18px; }
.kvitto__rader > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid var(--linje); }
.kvitto__rader dt { font-weight: 600; }
.kvitto__rader dd { margin: 0; text-align: right; color: var(--text-2); }
.kvitto__summa dt, .kvitto__summa dd { font: 800 1.35rem/1.2 var(--font-rubrik); color: var(--text) !important; }
.kvitto__not { margin-top: 8px; font-size: .86rem; color: var(--text-2); }
.bestall__nedr { margin-top: 24px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radie); background: var(--form-bg, var(--yta)); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend, .falt label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.falt__frivillig { font-weight: 400; color: var(--text-2); }
.form__rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.falt input, .falt textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 14px; border: 1.5px solid var(--falt-ram, var(--linje)); border-radius: var(--radie-liten);
  background: var(--falt-bg, var(--bg)); color: var(--text); font: 400 1rem/1.4 var(--font-text);
}
.falt textarea { min-height: 96px; resize: vertical; }
.falt input:focus, .falt textarea:focus { outline: 0; border-color: var(--text); box-shadow: 0 0 0 3px var(--fokus-ring, rgba(226, 113, 0, .35)); }
.falt input[aria-invalid="true"] { border-color: #c4361d; }
.falt textarea::placeholder { color: var(--text-2); opacity: .8; }
.val__rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); gap: 10px; }
.val { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--falt-ram, var(--linje)); border-radius: var(--radie-liten); background: var(--falt-bg, var(--bg)); cursor: pointer; }
.val input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.val:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.val:has(input:focus-visible) { outline: 3px solid var(--accent); outline-color: var(--fokus, var(--accent)); outline-offset: 2px; }   /* temats fokusfärg: orange räcker inte mot ljusa Mist Grey */
.val__prov { width: 34px; height: 34px; }
.val__prov--vet { display: grid; place-items: center; border-radius: 50%; background: var(--yta-2); font-weight: 700; }
.val__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.val__text strong { font-size: .96rem; }
.val__text small { font-size: .8rem; color: var(--text-2); }
.form__fel { padding: 12px 14px; border-radius: var(--radie-liten); background: #fbe4df; color: #7a1d0b; font-weight: 600; }
.form__skicka { width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
.form__not { font-size: .86rem; color: var(--text-2); text-align: center; }
.form__klar { padding: 22px; border-radius: var(--radie-liten); background: var(--bg); border: 1.5px solid var(--text); }
.form__klar-rub { font: 800 1.4rem/1.2 var(--font-rubrik); margin-bottom: 6px; }
.form__klar-knappar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.form__klar-knappar[hidden] { display: none; }   /* knapparna visas bara när beställningen inte gick att skicka */
@media (max-width: 960px) { .bestall__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .val { min-height: 56px; } }
@media (max-width: 560px) { .form__rad { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Sidfoten */
.fot { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--fot-bg, #0d0d0e); color: var(--fot-text, #e9e9e6); }
.fot__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.fot__logga { height: 38px; width: auto; margin-bottom: 18px; }
.fot__mf p { color: var(--fot-text-2, #bdbdb7); font-size: .95rem; }
.fot__mf a { color: var(--fot-text, #e9e9e6); }
.fot__some { display: flex; gap: 8px; margin-top: 14px; }
.fot__some a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); }
.fot__finstilt { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; color: var(--fot-text-2, #bdbdb7); }
.fot .fot__rub { margin: 0 0 6px; font: 700 .95rem/1.3 var(--font-rubrik); letter-spacing: 0; color: var(--fot-text, #e9e9e6); }   /* .fot: före .f1 h2 */
.fot__spalt ul { margin: 0; padding: 0; list-style: none; color: var(--fot-text-2, #bdbdb7); font-size: .95rem; }
.fot__spalt li { display: flex; align-items: center; min-height: 44px; line-height: 1.4; }
.fot__spalt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fot-text, #e9e9e6); text-decoration: none; }
.fot__spalt a:hover { text-decoration: underline; }
.fot__bot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0; font-size: .82rem; color: var(--fot-text-2, #bdbdb7); }
.fot__bot a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) { .fot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fot__mf { grid-column: 1 / -1; } }
@media (max-width: 640px) { .fot__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Knappen som följer med på telefon */
.mobilbar { display: none; }
@media (max-width: 900px) {
  .mobilbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--mobilbar-bg, var(--bg)); color: var(--mobilbar-text, var(--text));
    box-shadow: 0 -1px 0 var(--linje), 0 -12px 30px -18px rgba(0, 0, 0, .5);
    transform: translateY(110%); transition: transform .3s ease; visibility: hidden;
  }
  .mobilbar.syns { transform: none; visibility: visible; }
  .mobilbar__pris { display: flex; flex-direction: column; line-height: 1.15; }
  .mobilbar__pris strong { font: 800 1.35rem/1.1 var(--font-rubrik); white-space: nowrap; }
  .mobilbar__pris span { font-size: .8rem; color: var(--mobilbar-text-2, var(--text-2)); }
  .mobilbar .knapp { min-height: 48px; }
  .mobilbar__knappar { display: flex; align-items: center; gap: 10px; }
  .mobilbar__tel { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1.5px solid var(--linje); border-radius: 50%; color: inherit; }
  .mobilbar__tel .ikon { width: 22px; height: 22px; }
  .mobilbar__manad a { color: inherit; text-decoration: none; padding: 0 2px; }
  .mobilbar__pris span { white-space: nowrap; }
  body { padding-bottom: 0; }
  .fot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }   /* länkar som får fokus med Tab rullas fram ovanför raden längst ner (den är 73 px hög), inte bakom den */
}
@media (max-width: 640px) {
  .scen__knappar, .scen__pris { display: none !important; }
  .mobilbar { gap: 8px; }
  .mobilbar__knappar { gap: 8px; }
  .mobilbar .knapp { padding-inline: 16px; gap: 8px; }
}
@media (max-width: 370px) {
  .mobilbar .knapp .ikon { display: none; }
  .mobilbar .knapp { padding-inline: 14px; font-size: .95rem; }
  .mobilbar__tel { width: 44px; height: 44px; }
}
@media (max-width: 340px) {
  .mobilbar { gap: 6px; }
  .mobilbar__knappar { gap: 6px; }
  .mobilbar .knapp { padding-inline: 12px; font-size: .88rem; }
  .mobilbar__pris strong { font-size: 1.2rem; }
  .mobilbar__pris span { font-size: .72rem; }   /* telefon: raden längst ner har priset, månadsraten och knapparna (och ett samtal) i stället */
}

/* ---------------------------------------------------------------- Rörelse */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}