/*
 * Tarasoft. Färger, typsnitt och mått ur design/design.md, som i sin tur
 * lånar från appens web/src/styles.css. 390 px först, breddas vid 720 och 1024.
 * Logiska egenskaper (margin-inline-start, inte margin-left) så att en sida
 * på pashto med dir="rtl" fungerar utan omskrivning.
 */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url(../fonts/atkinson-next-latin.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url(../fonts/familjen-grotesk-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Färger ---------- */
:root {
  --botten: #F0F2F2;
  --papper: #FCFCFB;
  --text: #10171A;
  --text-svag: #525E65;
  --primar: #1B56A2;
  --primar-tryckt: #123C73;
  --pa-primar: #FFFFFF;
  --primar-ljus: #E2EAF4;
  --kant: #6E7C82;
  --linje: #C6CDD0;
  --klar: #2E7350;
  --klar-bg: #DDEBE3;
  --pagar: #8A5A05;
  --pagar-bg: #FBEFD6;
  --larm: #A03326;
  --larm-bg: #F7E3E0;
  --fokus: #123C73;
  --mock-skarm: #FFFFFF;
  color-scheme: light;

  --typ-rubrik: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --typ-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radie: 8px;
  --radie-kort: 12px;
  --marginal: 16px;
  --sektion: 64px;
}

/* Mörkt: följer telefonens inställning, om inte besökaren valt själv. Två block med samma värden, med flit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]) {
    --botten: #0C1113; --papper: #151C1F; --text: #E7EBEC; --text-svag: #94A1A7;
    --primar: #6EA8EF; --primar-tryckt: #9CC4F5; --pa-primar: #0A0F11; --primar-ljus: #1B2B3D;
    --kant: #6A7A80; --linje: #2C383D;
    --klar: #4FA97B; --klar-bg: #152A21; --pagar: #F5B942; --pagar-bg: #2C2313;
    --larm: #D37769; --larm-bg: #2E1A17; --fokus: #F5B942; --mock-skarm: #0F1517;
    color-scheme: dark;
  }
}
:root[data-tema="morkt"] {
  --botten: #0C1113; --papper: #151C1F; --text: #E7EBEC; --text-svag: #94A1A7;
  --primar: #6EA8EF; --primar-tryckt: #9CC4F5; --pa-primar: #0A0F11; --primar-ljus: #1B2B3D;
  --kant: #6A7A80; --linje: #2C383D;
  --klar: #4FA97B; --klar-bg: #152A21; --pagar: #F5B942; --pagar-bg: #2C2313;
  --larm: #D37769; --larm-bg: #2E1A17; --fokus: #F5B942; --mock-skarm: #0F1517;
  color-scheme: dark;
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--botten);
  color: var(--text);
  font-family: var(--typ-text);
  font-size: clamp(18px, 17.4px + .15vw, 19px);
  line-height: 1.5;
  overflow-wrap: break-word;
  /* Plats för den fasta knappen längst ner på telefon. */
  padding-block-end: calc(88px + env(safe-area-inset-bottom));
}
body.utan-fast-knapp { padding-block-end: 0; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 { font-family: var(--typ-rubrik); font-weight: 700; color: var(--text); margin: 0 0 16px; }
h1 { font-size: clamp(32px, 24px + 2.2vw, 48px); line-height: 1.1; }
h2 { font-size: clamp(26px, 22px + 1.1vw, 34px); line-height: 1.15; margin-block-start: 0; }
h3 { font-size: clamp(21px, 19.5px + .4vw, 24px); line-height: 1.2; font-weight: 600; }
p, ul, ol, dl { margin: 0 0 16px; }
ul, ol { padding-inline-start: 1.3em; }
li { margin-block-end: 8px; }
strong { font-weight: 700; }
small, .svag { color: var(--text-svag); font-size: 16px; line-height: 1.45; }
.ingress { font-size: clamp(20px, 19px + .3vw, 22px); line-height: 1.45; max-width: 68ch; }
.lopande > p, .lopande > ul, .lopande > ol, .lopande > dl { max-width: 68ch; }

a { color: var(--primar); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }

/* Fokus ritas utanför kontrollen, mot sidans bakgrund (design.md 1). */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.dold {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hoppa {
  position: absolute; inset-inline-start: 8px; inset-block-start: -200px; z-index: 100;
  background: var(--papper); color: var(--primar); padding: 16px 20px; border: 2px solid var(--primar);
  border-radius: var(--radie); font-weight: 700;
}
.hoppa:focus { inset-block-start: 8px; }

.ram { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--marginal); }

.sektion { padding-block: calc(var(--sektion) / 2); }
.sektion--papper { background: var(--papper); border-block: 1px solid var(--linje); }
.topp { padding-block-start: 32px; }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; padding: 12px 24px;
  border: 2px solid var(--primar); border-radius: var(--radie);
  font-family: var(--typ-text); font-size: 18px; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.knapp--primar { background: var(--primar); color: var(--pa-primar); }
.knapp--primar:hover { background: var(--primar-tryckt); border-color: var(--primar-tryckt); color: var(--pa-primar); }
.knapp--sekundar { background: var(--papper); color: var(--primar); }
.knapp--sekundar:hover { background: var(--primar-ljus); }
.knapp:active { filter: brightness(.92); }
.knapp--aktuell { background: var(--primar-ljus); color: var(--text); border-color: var(--primar); cursor: default; }
.knapprad { display: flex; flex-direction: column; gap: 12px; margin-block: 24px 16px; }
.knapprad .knapp { width: 100%; }
.textlank { display: inline-flex; align-items: center; gap: .3em; min-height: 48px; font-weight: 700; }

/* ---------- Sidhuvud ---------- */
.sidhuvud { background: var(--papper); border-block-end: 1px solid var(--linje); position: relative; z-index: 20; }
.sidhuvud__ram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; }
.logga {
  font-family: var(--typ-rubrik); font-weight: 700; font-size: 30px; color: var(--text);
  text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; padding-inline: 4px;
}
.menyknapp {
  margin-inline-start: auto; min-height: 52px; min-width: 96px; padding: 8px 18px;
  background: var(--papper); color: var(--primar); border: 2px solid var(--primar); border-radius: var(--radie);
  font: 700 18px/1 var(--typ-text); cursor: pointer;
}
.menyknapp[aria-expanded="true"] { background: var(--primar-ljus); }
.huvudmeny { flex-basis: 100%; padding-block-end: 16px; }
.huvudmeny__lista { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.huvudmeny__lista li { margin: 0; border-block-start: 1px solid var(--linje); }
.huvudmeny__lista a {
  display: flex; align-items: center; min-height: 56px; padding-inline: 8px;
  color: var(--text); font-weight: 700; text-decoration: none;
}
.huvudmeny__lista a:hover { color: var(--primar); text-decoration: underline; }
.huvudmeny__lista .current-menu-item > a, .huvudmeny__lista a[aria-current="page"] {
  color: var(--primar); text-decoration: underline; text-decoration-thickness: 3px;
}
.huvudmeny .knapp { width: 100%; }
/* Med JavaScript fälls menyn ihop på telefon. Utan JavaScript syns den alltid. */
.js .huvudmeny[data-stangd] { display: none; }

/* ---------- Fast knapp längst ner (telefon) ---------- */
.fast-knapp {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--papper); border-block-start: 1px solid var(--linje);
  transition: transform .2s;
}
.fast-knapp .knapp { width: 100%; }
.fast-knapp[data-dold] { transform: translateY(110%); }

/* ---------- Kort och rutor ---------- */
.kort {
  background: var(--papper); border: 1px solid var(--linje); border-radius: var(--radie-kort);
  padding: 20px; min-width: 0;
}
.sektion--papper .kort { background: var(--botten); }
.kort > :last-child { margin-block-end: 0; }
.ruta {
  background: var(--primar-ljus); border-radius: var(--radie-kort); padding: 20px; margin-block: 16px;
  border-inline-start: 6px solid var(--primar);
}
.ruta > :last-child { margin-block-end: 0; }
.ruta__rubrik { font-size: 21px; }
.ruta--obs { background: var(--pagar-bg); border-color: var(--pagar); }
.ruta--klar { background: var(--klar-bg); border-color: var(--klar); }
.ruta--fel { background: var(--larm-bg); border-color: var(--larm); }
.ruta--exempel { background: var(--primar-ljus); }
.ruta h3 { display: flex; align-items: center; gap: 8px; }
.ruta--klar h3 .ikon { color: var(--klar); }
.ruta--obs h3 .ikon { color: var(--pagar); }

.siffra {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primar); color: var(--pa-primar); font: 700 18px/1 var(--typ-text); flex-shrink: 0;
}
.siffror { font-variant-numeric: tabular-nums; }

/* Stegkort på Start: hela kortet klickbart via rubriklänken. */
.stegkort { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 16px; }
.stegkort__kort { position: relative; margin: 0; }
.stegkort__ikon { color: var(--primar); display: block; margin-block-end: 8px; }
.kortlank { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.kortlank::after { content: ""; position: absolute; inset: 0; border-radius: var(--radie-kort); }
.stegkort__kort:hover { border-color: var(--primar); }
.kortlank:focus-visible { outline: none; }
.stegkort__kort:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }

.faktalista { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 75ch; }
.faktalista li { background: var(--botten); border-radius: var(--radie-kort); padding: 16px 20px; margin: 0; }
.sektion .faktalista li { background: var(--papper); border: 1px solid var(--linje); }
.sektion--papper .faktalista li { background: var(--botten); }

.bocklista { list-style: none; padding: 0; }
.bocklista li { display: flex; gap: 12px; align-items: flex-start; }
.bocklista .ikon { color: var(--klar); flex-shrink: 0; margin-block-start: 2px; }

.plankort { display: grid; gap: 16px; margin-block-end: 16px; }

.tva-spalter, .rutnat-2 { display: grid; gap: 32px; }
.rutnat-2 { gap: 16px; }

/* ---------- Packarnas bildsida ---------- */
.packarbilder { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.packarbild {
  margin: 0; background: var(--papper); border: 2px solid var(--linje); border-radius: var(--radie-kort);
  padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sektion--papper .packarbild { background: var(--botten); }
.packarbild__ikon { color: var(--primar); }
.packarbild__namn { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 24px; }
.packarbild__namn .siffra { width: 30px; height: 30px; font-size: 16px; }
.packarbild__ord { margin: 0; font-size: 20px; font-weight: 700; }
.lattlast { font-size: 20px; }
.lattlast__text p { margin-block-end: 10px; }
.lattlast__ram { display: grid; gap: 16px; }
.lattlast__rutor { display: grid; gap: 16px; }
.lattlast__rutor .ruta { margin: 0; }
.lattlast__rutor p { margin-block-end: 6px; }
.exempelrad { background: var(--papper); border: 2px solid var(--linje); border-radius: var(--radie); padding: 12px 16px; font-size: 20px; }

.hoppknappar, .innehallsknappar { list-style: none; padding: 0; display: grid; gap: 12px; margin-block: 24px 0; }
.hoppknappar li, .innehallsknappar li { margin: 0; }
.hoppknappar .knapp, .innehallsknappar .knapp { width: 100%; justify-content: flex-start; text-align: start; }

/* ---------- Så fungerar Tara ---------- */
.stegnav ul { list-style: none; padding: 0; margin: 16px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stegnav li { margin: 0; }
.stegnav__lank {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
  background: var(--papper); border: 2px solid var(--linje); border-radius: var(--radie);
  color: var(--text); font-weight: 700; text-decoration: none; padding: 8px;
}
.stegnav__lank .ikon { color: var(--primar); }
.stegnav__lank:hover { border-color: var(--primar); }
.steg__ram { display: grid; gap: 24px; align-items: start; }
.steg h2 { display: flex; align-items: center; gap: 12px; }
.steg__ikon { color: var(--primar); display: inline-flex; flex-shrink: 0; }
.steg__text > p, .steg__text > ul { max-width: 62ch; }
.steg__bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; justify-items: center; }
.steg__bilder--en { grid-template-columns: minmax(0, 280px); justify-content: start; margin-block-start: 16px; }

.demo-ram { display: none; }
.demo-iframe { width: 100%; border: 1px solid var(--linje); border-radius: var(--radie-kort); background: var(--papper); display: block; }
.demo-telefon .knapp { width: 100%; }

/* ---------- Bilder och illustrationer ---------- */
.bild { margin: 0; width: 100%; }
.bild--telefon { max-width: 240px; }
@media (min-width: 720px) { .bild--telefon { max-width: 300px; } }
.lattlast__bild .bild--telefon { max-width: 200px; }
.bild figcaption { color: var(--text-svag); font-size: 16px; line-height: 1.45; margin-block-start: 8px; }
.bild--telefon img, .mock {
  aspect-ratio: 390 / 844; width: 100%; border: 1px solid var(--kant); border-radius: 22px; overflow: hidden;
}
.bild--foto { margin-block-start: 16px; max-width: 520px; }
.fotoplats {
  aspect-ratio: 4 / 3; border: 2px dashed var(--kant); border-radius: var(--radie-kort);
  display: grid; place-items: center; color: var(--text-svag); padding: 16px; text-align: center; background: var(--botten);
}

.mock {
  position: relative; background: var(--mock-skarm); display: flex; flex-direction: column;
  font-size: 15px; line-height: 1.3; color: var(--text); user-select: none;
}
.mock__marke {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2;
  background: var(--pagar-bg); color: var(--pagar); border: 1px solid var(--pagar);
  font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em;
}
.mock__topp { background: var(--papper); border-block-end: 1px solid var(--linje); padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.mock__tara { font-family: var(--typ-rubrik); font-weight: 700; font-size: 18px; }
.mock__titel { font-weight: 700; color: var(--primar); padding-inline-end: 80px; }
.mock__yta { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mock__rad, .mock__falt { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid var(--linje); border-radius: 8px; background: var(--papper); }
.mock__falt { flex-direction: column; }
.mock__ruta { border: 2px solid var(--kant); border-radius: 6px; padding: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mock__rad strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock__knapp { margin-block-start: auto; background: var(--primar); color: var(--pa-primar); text-align: center; font-weight: 700; padding: 14px; border-radius: 8px; }
.mock__not { margin: 0; padding: 8px; background: var(--pagar-bg); border-radius: 6px; font-weight: 700; }
.mock__packrad { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--linje); border-radius: 8px; background: var(--papper); }
.mock__packrad--klar { background: var(--klar-bg); border-color: var(--klar); }
.mock__bock { width: 30px; height: 30px; border: 2px solid var(--kant); border-radius: 6px; display: grid; place-items: center; color: var(--klar); }
.mock__packrad--klar .mock__bock { border-color: var(--klar); }
.mock__vara { display: flex; flex-direction: column; font-size: 14px; }
.mock__vara strong { font-size: 15px; }
.mock__mangd { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mock__start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; align-content: start; }
.mock__startknapp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; border: 2px solid var(--primar); border-radius: 12px; background: var(--papper); color: var(--primar); font-weight: 700; font-size: 17px; }
.mock__lapp { background: #fff; color: #10171A; border: 1px solid #9aa4a9; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.mock__lapp small { border-block-end: 1px solid #9aa4a9; padding-block-end: 6px; margin-block-end: 4px; font-size: 12px; color: #3b464c; }
.mock__stor { font-size: 22px; }
.mock__a4 { background: #fff; color: #10171A; border: 1px solid #9aa4a9; padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mock__a4 small { font-size: 12px; color: #3b464c; }
.mock__a4 .mock__rad { background: #fff; border-color: #c6cdd0; color: #10171A; }
.mock__tom { flex: 1; display: grid; place-content: center; text-align: center; padding: 16px; color: var(--text-svag); border: 2px dashed var(--kant); margin: 40px 12px 12px; border-radius: 12px; }

/* ---------- Ikoner ---------- */
.ikon { flex-shrink: 0; vertical-align: middle; }

/* ---------- Planmärken och status ---------- */
.plan {
  display: inline-block; vertical-align: middle; font: 700 15px/1 var(--typ-text);
  padding: 6px 10px; border: 1px solid var(--kant); border-radius: 6px; color: var(--text); background: var(--papper);
}
.plan--premium { border-color: var(--primar); color: var(--primar); }
.status { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1.2 var(--typ-text); padding: 4px 10px; border-radius: 6px; vertical-align: middle; }
.status--klar { background: var(--klar-bg); color: var(--klar); }
.status--pagar { background: var(--pagar-bg); color: var(--pagar); }
.status--inte { color: var(--text-svag); }

/* Jämförelsetabellen blir en lista per rad på telefon (design.md 3). */
.jamforelse { width: 100%; border-collapse: collapse; }
.jamforelse thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.jamforelse tr { display: block; background: var(--papper); border: 1px solid var(--linje); border-radius: var(--radie-kort); padding: 12px 16px; margin-block-end: 12px; }
.jamforelse th[scope="row"] { display: block; text-align: start; font-size: 19px; padding-block-end: 8px; }
.jamforelse td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-block-start: 1px solid var(--linje); }
.jamforelse td::before { content: attr(data-plan); font-weight: 700; }

/* ---------- Kopplingar ---------- */
.koppling { display: grid; gap: 4px; }
.koppling dt { font-family: var(--typ-rubrik); font-weight: 700; font-size: 21px; margin-block-start: 16px; }
.koppling dd { margin: 0; }
.koppling dd ul { margin-block-end: 0; }
.citat { margin: 0 0 16px; padding: 16px 20px; border-inline-start: 6px solid var(--primar); background: var(--papper); font-size: 21px; max-width: 60ch; }
.citat p { margin: 0; }

/* ---------- Frågor (details) ---------- */
.fragelista { display: grid; gap: 8px; margin-block-end: 16px; max-width: 75ch; }
.fraga { background: var(--papper); border: 1px solid var(--linje); border-radius: var(--radie-kort); }
.sektion--papper .fraga { background: var(--botten); }
.fraga summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 12px 16px; cursor: pointer; font-weight: 700;
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga__tecken { width: 28px; height: 28px; border: 2px solid var(--primar); border-radius: 50%; position: relative; flex-shrink: 0; }
.fraga__tecken::before, .fraga__tecken::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: 12px; height: 2px; background: var(--primar); transform: translate(-50%, -50%); }
.fraga__tecken::after { transform: translate(-50%, -50%) rotate(90deg); }
.fraga[open] .fraga__tecken::after { display: none; }
.fraga__svar { padding: 0 16px 16px; }
.fraga__svar p { margin: 0; }

/* ---------- Anmäl intresse ---------- */
.anmal { display: grid; gap: 32px; }
.anmal__formular { max-width: 640px; }
.anmal__sida .ruta:first-child { margin-block-start: 0; }
.kvitto { color: var(--klar); margin: 0 0 8px; }
.numrerad li { margin-block-end: 8px; }

/* ---------- Avslut och sidfot ---------- */
.avslut { background: var(--primar-ljus); text-align: start; }
.sidfot { background: var(--papper); border-block-start: 1px solid var(--linje); padding-block: 32px; font-size: 17px; }
.sidfot__lankar { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.sidfot__lankar li { margin: 0; }
.sidfot__lankar a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.temaknapp { min-height: 52px; }

/* ---------- Bredare skärmar ---------- */
@media (min-width: 720px) {
  :root { --marginal: 32px; --sektion: 96px; }
  .knapprad { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .knapprad .knapp { width: auto; }
  .stegkort { grid-template-columns: 1fr 1fr; }
  .plankort, .rutnat-2 { grid-template-columns: 1fr 1fr; }
  .packarbilder { grid-template-columns: repeat(4, 1fr); }
  .lattlast__ram { grid-template-columns: 1fr 1fr; }
  .lattlast__bild { grid-column: 1 / -1; }
  .hoppknappar, .innehallsknappar { grid-template-columns: 1fr 1fr; }
  .stegnav ul { grid-template-columns: repeat(4, 1fr); }
  .demo-ram { display: block; }
  .demo-telefon { display: none; }
  .jamforelse thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .jamforelse tr { display: table-row; padding: 0; margin: 0; border: 0; }
  .jamforelse th, .jamforelse td { display: table-cell; padding: 14px 16px; border-block-end: 1px solid var(--linje); border-block-start: 0; text-align: start; vertical-align: middle; }
  .jamforelse thead th { font-family: var(--typ-rubrik); font-size: 20px; border-block-end: 2px solid var(--kant); }
  .jamforelse td::before { content: none; }
  .jamforelse tbody tr:nth-child(odd) { background: var(--papper); }
  .jamforelse th[scope="row"] { font-size: inherit; }
}

@media (min-width: 1024px) {
  body { padding-block-end: 0; }
  .fast-knapp { display: none; }
  .menyknapp { display: none !important; }
  .js .huvudmeny[data-stangd], .huvudmeny { display: flex !important; }
  .sidhuvud__ram { flex-wrap: nowrap; }
  .huvudmeny { flex-basis: auto; margin-inline-start: auto; padding: 0; align-items: center; gap: 16px; }
  .huvudmeny__lista { flex-direction: row; margin: 0; gap: 4px; }
  .huvudmeny__lista li { border: 0; }
  .huvudmeny__lista a { min-height: 48px; padding-inline: 10px; font-size: 17px; }
  .huvudmeny .knapp { width: auto; min-height: 52px; padding-inline: 18px; }
  .topp__ram { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .tva-spalter { grid-template-columns: 1fr 1fr; gap: 48px; }
  .stegkort { grid-template-columns: repeat(4, 1fr); }
  .steg__ram { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
  .anmal { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .anmal__sida { position: sticky; top: 16px; }
  .lattlast__ram { grid-template-columns: 1.2fr 1fr 280px; }
  .lattlast__bild { grid-column: auto; }
  .innehallsknappar { grid-template-columns: repeat(3, 1fr); }
}
/* Bilden överst på Start visas bara på dator, som i wireframen. På telefon räcker texten och knapparna. */
@media (max-width: 1023px) {
  .topp__bild { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .sidhuvud, .fast-knapp, .sidfot nav, .temaknapp, .avslut { display: none; }
  body { padding: 0; background: #fff; color: #000; }
}