/* Bygg om med python3 verktyg/bygg-sajt.py. Andra inte har. */

/* Tva lagen. Ljust ar utgangslaget, morkt kommer av systemet eller av valet.
   Valet skrivs som data-tema pa html av ett litet skript i head, alltsa fore
   forsta malningen, sa sidan aldrig blinkar i fel farg. */
:root {
  --kol: #07070c;
  --papper: #f7f8fb;
  --yta: #eceef4;
  --black: #0d0e16;
  --dampat: #5c6178;
  --linje: #0d0e1618;
  --linje-stark: #0d0e1636;
  --accent: #0f7d68;
  --accent-mork: #0a5f4f;
  --pa-accent: #f7fffd;
  --accent2: #5442d6;
  --accent3: #1668b8;
  --ja: #0f7d68;
  --djup: #07070c;
  --djup-text: #f4f5fb;
  --accent-ljus: #64e3c0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --rubrikfont: var(--sans);
  --brodfont: var(--sans);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 136px;
  --bredd: 1220px; --smal: 720px; --rund: 14px; --rund-s: 8px;
  --takt: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljus"]) {
  --kol: #07070c;
  --papper: #0a0a0f;
  --yta: #12121b;
  --black: #f4f5fb;
  --dampat: #9aa0b8;
  --linje: #f4f5fb18;
  --linje-stark: #f4f5fb32;
  --accent: #64e3c0;
  --accent-mork: #41c9a4;
  --pa-accent: #04231c;
  --accent2: #8a7bff;
  --accent3: #4aa8ff;
  --ja: #64e3c0;
  --djup: #050508;
  --djup-text: #f4f5fb;
  --accent-ljus: #64e3c0;
  }
}
:root[data-tema="mork"] {
  --kol: #07070c;
  --papper: #0a0a0f;
  --yta: #12121b;
  --black: #f4f5fb;
  --dampat: #9aa0b8;
  --linje: #f4f5fb18;
  --linje-stark: #f4f5fb32;
  --accent: #64e3c0;
  --accent-mork: #41c9a4;
  --pa-accent: #04231c;
  --accent2: #8a7bff;
  --accent3: #4aa8ff;
  --ja: #64e3c0;
  --djup: #050508;
  --djup-text: #f4f5fb;
  --accent-ljus: #64e3c0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip och inte hidden. Nar en axel ar hidden raknas den andra som auto,
     och body blir en rullbehallare som klipper menyer och bryter sticky. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papper);
  color: var(--black);
  font-family: var(--brodfont);
  font-size: clamp(16px, 0.96rem + 0.18vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--rubrikfont);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.4rem + 3.4vw, 4.1rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.35rem); }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--s4); padding-inline-start: 1.25em; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hoppa {
  position: absolute; inset-inline-start: var(--s4); top: var(--s3);
  z-index: 200; background: var(--accent); color: var(--papper);
  padding: var(--s3) var(--s5); border-radius: var(--rund-s);
  text-decoration: none; font-weight: 600;
  /* Inte left: -9999px. Det raknas som vagratt spill och ger en rullist. */
  transform: translateY(-250%);
  transition: transform 160ms var(--takt);
}
.hoppa:focus { transform: translateY(0); }

.ram { width: 100%; max-width: var(--bredd); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 900px) { .ram { padding-inline: var(--s7); } }

/* ---------------------------------------------------------- sidhuvudet */

.sidhuvud {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papper) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--linje);
}
.sidhuvud__ram {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 64px; padding-block: var(--s3);
}
.marke {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; flex: 0 0 auto;
}
.logga { width: 30px; height: 30px; flex: 0 0 auto; }
.logga__ring { fill: none; stroke: var(--accent); stroke-width: 2.2; opacity: 0.35; }
.logga__g { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.marke__text { display: flex; flex-direction: column; line-height: 1.05; }
.marke__familj {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dampat); font-weight: 600;
}
.marke__del { font-family: var(--rubrikfont); font-size: 1.06rem; font-weight: 600; }

.menyknapp {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 1px solid var(--linje); border-radius: 999px;
  padding: var(--s2) var(--s4); font: inherit; font-size: 0.86rem;
  color: inherit; cursor: pointer;
}
.menyknapp__strecken { display: grid; gap: 3px; width: 15px; }
.menyknapp__strecken span {
  height: 1.8px; background: currentColor; border-radius: 2px;
  transition: transform 200ms var(--takt), opacity 160ms;
}
.menyknapp[aria-expanded="true"] .menyknapp__strecken span:nth-child(1) { transform: translateY(4.8px) rotate(45deg); }
.menyknapp[aria-expanded="true"] .menyknapp__strecken span:nth-child(2) { opacity: 0; }
.menyknapp[aria-expanded="true"] .menyknapp__strecken span:nth-child(3) { transform: translateY(-4.8px) rotate(-45deg); }

.huvudmeny {
  display: none; position: absolute; inset-inline: 0; top: 100%;
  background: var(--papper); border-bottom: 1px solid var(--linje);
  padding: var(--s4) var(--s5) var(--s6);
  max-height: calc(100dvh - 64px); overflow-y: auto;
}
.huvudmeny.oppen { display: block; }
.huvudmeny__lista { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 2px; }
.huvudmeny__lista a {
  display: block; padding: var(--s3) var(--s3); text-decoration: none;
  border-radius: var(--rund-s); font-size: 1.02rem;
}
.huvudmeny__lista a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.huvudmeny__lista a:hover { background: var(--yta); }
.huvudmeny__verktyg { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* Vagratt meny forst nar den faktiskt far plats. Med tio poster kravs 1090 px
   for marke, lista och verktyg tillsammans, och under det knuffas temavaxeln
   ned pa en egen rad. Det hande nar Egen kanal och Panelen tillkom. */
@media (min-width: 1180px) {
  .menyknapp { display: none; }
  .huvudmeny {
    display: flex; position: static; background: none; border: 0; padding: 0;
    margin-inline-start: auto; align-items: center; gap: var(--s4);
    max-height: none; overflow: visible;
  }
  .huvudmeny__lista { display: flex; gap: 0; margin: 0; flex-wrap: nowrap; }
  .huvudmeny__lista a { padding: var(--s2) 6px; font-size: 0.8rem; white-space: nowrap; }
}
@media (min-width: 1440px) {
  .huvudmeny { gap: var(--s5); }
  .huvudmeny__lista { gap: var(--s1); }
  .huvudmeny__lista a { padding: var(--s2) var(--s3); font-size: 0.9rem; }
}

.sprakval { position: relative; }
.sprakval__knapp, .temavaxel {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 1px solid var(--linje); border-radius: 999px;
  padding: 7px var(--s4); font: inherit; font-size: 0.84rem; color: inherit; cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.sprakval__knapp:hover, .temavaxel:hover { border-color: var(--accent); }
.sprakval__knapp { white-space: nowrap; }
.sprakval__kod { font-weight: 600; letter-spacing: 0.06em; }
.temavaxel { padding: 7px; }
.ikon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.temavaxel__mane { display: none; }
:root[data-tema="mork"] .temavaxel__sol { display: none; }
:root[data-tema="mork"] .temavaxel__mane { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljus"]) .temavaxel__sol { display: none; }
  :root:not([data-tema="ljus"]) .temavaxel__mane { display: inline-flex; }
}

.sprakval__lista {
  display: none; list-style: none; margin: var(--s2) 0 0; padding: var(--s2);
  position: absolute; inset-inline-end: 0; top: 100%; z-index: 60;
  background: var(--papper); border: 1px solid var(--linje);
  border-radius: var(--rund); min-width: 190px;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.5);
  /* Fjorton sprak ar cirka 500 px, alltsa hogre an en telefon i liggande
     lage. Utan taket hamnar de sista spraken under skarmkanten i en lista
     som inte gar att rulla, och de sprak som star sist i registret blir
     omojliga att valja. */
  max-height: min(62vh, 26rem); overflow-y: auto; overscroll-behavior: contain;
}
.sprakval__lista.oppen { display: block; }
/* Fran sju sprak och uppat blir en enda kolumn en stapel man rullar i.
   Tva kolumner far plats sa fort menyn far vara bredare an knappen. */
@media (min-width: 560px) {
  .sprakval__lista.oppen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); min-width: 340px; }
}
.sprakval__lista a {
  display: block; padding: var(--s2) var(--s3); text-decoration: none;
  border-radius: var(--rund-s); font-size: 0.92rem;
}
.sprakval__lista a:hover { background: var(--yta); }
.sprakval__lista a[aria-current="true"] { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------ sektioner */

.sektion { padding-block: var(--s8); }
@media (min-width: 900px) { .sektion { padding-block: var(--s9); } }
.sektion--hero { padding-block: var(--s7) var(--s8); }
.ton--yta { background: var(--yta); }

/* En djup sektion ar mork i bada lagen. Darfor pekar den om sina tokens i
   stallet for att arva de ljusa: annars far ett kort inuti en djup sektion
   pappersfarg i ryggen och ljus text ovanpa, vilket gor texten oläslig. Det
   hände med raknaren pa budsidan. Samma sak galler .cta, som ocksa ar djup. */
.ton--djup, .cta {
  --yta: color-mix(in srgb, var(--djup-text) 7%, transparent);
  --papper: var(--djup);
  --black: var(--djup-text);
  --dampat: color-mix(in srgb, var(--djup-text) 62%, transparent);
  --linje: color-mix(in srgb, var(--djup-text) 16%, transparent);
  --linje-stark: color-mix(in srgb, var(--djup-text) 34%, transparent);
  --accent: var(--accent-ljus);
  --pa-accent: var(--djup);
}
.ton--djup { background: var(--djup); color: var(--djup-text); }

.avsnittshuvud { max-width: var(--smal); margin-bottom: var(--s6); }
.overrubrik {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: var(--s3);
}
.ingress {
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.24rem);
  color: var(--dampat); max-width: 62ch;
}
.brodtext { max-width: 68ch; }
.brodtext p:last-child { margin-bottom: 0; }

.punktlista { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); max-width: 68ch; }
.punktlista li { position: relative; padding-inline-start: 1.7em; }
.punktlista li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}
.punktlista--tat { margin-top: var(--s3); gap: var(--s2); font-size: 0.94rem; }

/* ---------------------------------------------------------------- hero */

.hero { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.02fr 1fr; gap: var(--s8); } }
.hero__rubrik { margin-bottom: var(--s5); }
.hero__ingress {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.32rem);
  color: var(--dampat); max-width: 54ch; margin-bottom: var(--s6);
}
.hero__under { font-size: 0.86rem; color: var(--dampat); margin-top: var(--s5); }
.hero__bild { position: relative; }
.hero__bild .ill, .hero__bild .foto { width: 100%; border-radius: var(--rund); }
.foto--hero { object-fit: cover; aspect-ratio: 4 / 3; }

.statrad {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5);
  margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--linje);
}
@media (min-width: 760px) { .statrad { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__tal {
  font-family: var(--rubrikfont); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  font-weight: 600; color: var(--accent); line-height: 1.05;
}
.stat__text { font-size: 0.84rem; color: var(--dampat); }

/* -------------------------------------------------------------- knappar */

.knappar { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px var(--s6); border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; border: 1.5px solid transparent;
  transition: transform 180ms var(--takt), background 180ms, color 180ms, border-color 180ms;
}
.knapp--stark { background: var(--accent); color: var(--pa-accent); }
.knapp--stark:hover { transform: translateY(-2px); background: var(--accent-mork); }
.knapp--tunn { border-color: var(--linje-stark); }
.knapp--tunn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* --------------------------------------------------------------- rutnat */

.rutnat { display: grid; gap: var(--s5); }
@media (min-width: 660px) { .rutnat--2, .rutnat--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .rutnat--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .rutnat--3 { grid-template-columns: repeat(3, 1fr); }
  .rutnat--4 { grid-template-columns: repeat(4, 1fr); }
}
.kort {
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rund); padding: var(--s5);
  display: flex; flex-direction: column;
  transition: transform 220ms var(--takt), border-color 220ms;
}
.kort:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.kort__ill { margin: calc(var(--s2) * -1) 0 var(--s4); }
.kort__ill .ill { width: 100%; border-radius: var(--rund-s); }
.kort__ill--foto .foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rund-s); }
.kort h3 { margin-bottom: var(--s2); }
.kort p { color: var(--dampat); font-size: 0.95rem; margin-bottom: 0; }
.kort > *:last-child { margin-bottom: 0; }
.etikett {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: var(--s2);
}
.kortlank {
  margin-top: auto; padding-top: var(--s4); font-weight: 600;
  font-size: 0.9rem; color: var(--accent); text-decoration: none;
}
.kortlank::after { content: " \2192"; }

/* ------------------------------------------------------------------ par */

.par { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .par { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .par--vand .par__media { order: 2; }
}
.par__media .ill, .par__media .foto { width: 100%; border-radius: var(--rund); }
.par__media .foto { aspect-ratio: 4 / 3; object-fit: cover; }
.par__text .avsnittshuvud { margin-bottom: var(--s5); }

/* ----------------------------------------------------------------- steg */

.stegkedja { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: steg; }
@media (min-width: 760px) { .stegkedja { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .stegkedja { grid-template-columns: repeat(4, 1fr); } }
.steg { position: relative; padding-top: var(--s5); border-top: 2px solid var(--linje); }
.steg__nr {
  font-family: var(--rubrikfont); font-size: 0.8rem; font-weight: 700;
  color: var(--accent); display: block; margin-bottom: var(--s3);
  letter-spacing: 0.1em;
}
.steg__nr::before { content: "0"; }
.steg__ill { margin-bottom: var(--s4); }
.steg__ill .ill { width: 100%; border-radius: var(--rund-s); }
.steg h3 { margin-bottom: var(--s2); font-size: 1.06rem; }
.steg p { color: var(--dampat); font-size: 0.94rem; margin: 0; }

/* --------------------------------------------------------------- tabell */

.tabellram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabell { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 560px; }
.tabell th, .tabell td { padding: var(--s4) var(--s4); text-align: start; vertical-align: top; }
.tabell thead th {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dampat); font-weight: 700; border-bottom: 2px solid var(--linje-stark);
}
.tabell thead th.oss { color: var(--accent); }
.tabell tbody tr { border-bottom: 1px solid var(--linje); }
.tabell tbody th { font-weight: 600; }
.tabell td.oss { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }
.varde--ja { color: var(--ja); }
.varde--nej { color: var(--dampat); }
.tabellfot { margin-top: var(--s4); font-size: 0.82rem; color: var(--dampat); }

@media (max-width: 700px) {
  .tabell { min-width: 0; }
  .tabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabell tbody tr { display: block; padding: var(--s4) 0; }
  .tabell tbody th { display: block; font-size: 1.02rem; padding: 0 0 var(--s3); }
  .tabell tbody td { display: flex; justify-content: space-between; gap: var(--s4); padding: 5px 0; }
  .tabell tbody td::before {
    content: attr(data-etikett); color: var(--dampat); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.08em; flex: 0 0 auto;
  }
  .tabell td.oss { padding-inline: var(--s3); border-radius: var(--rund-s); }
}

/* -------------------------------------------------------------- rakning */

.rakningsram {
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rund); padding: var(--s6); max-width: 720px;
}
.rakning { list-style: none; margin: 0; padding: 0; }
.rakning__rad {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--linje);
}
.rakning__rad--fram { color: var(--accent); font-weight: 600; }
.rakning__rad--summa {
  border-bottom: 0; border-top: 2px solid var(--linje-stark);
  margin-top: var(--s3); padding-top: var(--s4);
  font-family: var(--rubrikfont); font-size: 1.15rem; font-weight: 600;
}
.rakning__etikett { display: flex; flex-direction: column; }
.rakning__not { font-size: 0.8rem; color: var(--dampat); font-weight: 400; }
.rakning__varde { font-variant-numeric: tabular-nums; white-space: nowrap; }

.stapel { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin-top: var(--s6); }
.stapel__del { width: calc(var(--andel) * 1%); }
.stapel__del:nth-child(1) { background: var(--accent); }
.stapel__del:nth-child(2) { background: var(--accent2); }
.stapel__del:nth-child(3) { background: var(--accent3); }
.stapel__del:nth-child(4) { background: var(--dampat); }
.stapel__del:nth-child(5) { background: var(--linje-stark); }
.stapelnyckel { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; font-size: 0.84rem; }
.stapelnyckel li { display: flex; align-items: center; gap: var(--s2); }
.nyckel__prick { width: 10px; height: 10px; border-radius: 3px; background: var(--dampat); }
.stapelnyckel li:nth-child(1) .nyckel__prick { background: var(--accent); }
.stapelnyckel li:nth-child(2) .nyckel__prick { background: var(--accent2); }
.stapelnyckel li:nth-child(3) .nyckel__prick { background: var(--accent3); }
.stapelnyckel li:nth-child(5) .nyckel__prick { background: var(--linje-stark); }


/* ------------------------------------------------------------- raknare */

.raknare {
  display: grid; gap: var(--s6); align-items: start;
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rund); padding: var(--s6);
}
@media (min-width: 860px) { .raknare { grid-template-columns: 1fr 1fr; gap: var(--s8); padding: var(--s7); } }
.ton--yta .raknare { background: var(--papper); }
.raknare__falt { display: grid; gap: var(--s5); align-content: start; }
.raknare__reglage label {
  display: block; font-size: 0.86rem; color: var(--dampat); margin-bottom: var(--s2);
}
.raknare__rad { display: flex; align-items: center; gap: var(--s4); }
.raknare__rad input[type="range"] {
  flex: 1 1 auto; min-width: 0; accent-color: var(--accent); height: 22px;
}
.raknare__rad output {
  font-family: var(--rubrikfont); font-weight: 600; font-size: 1.06rem;
  font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: end;
}
.raknare__enhet { font-size: 0.84rem; color: var(--dampat); min-width: 3.2ch; }
.raknare__kryss {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer;
  font-size: 0.94rem; padding: var(--s2) 0;
}
.raknare__kryss input { width: 18px; height: 18px; accent-color: var(--accent); }
.raknare__svar .rakning__rad { padding: 10px 0; }
.raknare__extra {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--linje);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  font-size: 0.94rem; color: var(--dampat);
}
.raknare__extra strong {
  font-family: var(--rubrikfont); font-size: 1.3rem; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- citat */

.citat {
  margin: 0; max-width: 40ch; padding-inline-start: var(--s6);
  border-inline-start: 3px solid var(--accent);
}
.citat blockquote { margin: 0; }
.citat p {
  font-family: var(--rubrikfont); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.28; margin-bottom: var(--s4);
}
.citat__vem { font-size: 0.86rem; color: var(--dampat); }

/* -------------------------------------------------------------- galleri */

.galleri { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .galleri { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
@media (min-width: 1060px) { .galleri { grid-template-columns: repeat(4, 1fr); } }
.galleri__ruta { overflow: hidden; border-radius: var(--rund-s); }
.foto--galleri {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 600ms var(--takt);
}
.galleri__ruta:hover .foto--galleri { transform: scale(1.05); }
@media (min-width: 700px) {
  .galleri__ruta:nth-child(6n+1) { grid-row: span 2; }
  .galleri__ruta:nth-child(6n+1) .foto--galleri { aspect-ratio: 1 / 2.06; }
}

/* ------------------------------------------------------------- illvagg */

.illvagg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .illvagg { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .illvagg { grid-template-columns: repeat(4, 1fr); } }
.illvagg__ruta {
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rund); padding: var(--s3); overflow: hidden;
}
.illvagg__ruta .ill { width: 100%; display: block; }

/* --------------------------------------------------------------- fragor */

.fragor { max-width: var(--smal); }
.fraga { border-bottom: 1px solid var(--linje); }
.fraga summary {
  cursor: pointer; padding: var(--s5) var(--s7) var(--s5) 0; position: relative;
  font-weight: 600; font-size: 1.02rem; list-style: none;
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after {
  content: ""; position: absolute; inset-inline-end: var(--s3); top: calc(50% - 5px);
  width: 10px; height: 10px; border-inline-end: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg);
  transition: transform 200ms var(--takt);
}
.fraga[open] summary::after { transform: rotate(-135deg); }
.fraga__svar { padding-bottom: var(--s5); color: var(--dampat); max-width: 64ch; }
.fraga__svar p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ cta */

.cta {
  background: var(--djup); color: var(--djup-text);
  border-radius: var(--rund); padding: var(--s7);
  display: grid; gap: var(--s6); align-items: center;
}
@media (min-width: 860px) { .cta { grid-template-columns: 1fr 1fr; padding: var(--s8); } }
.cta h2 { margin-bottom: var(--s4); }
.cta p { color: color-mix(in srgb, var(--djup-text) 74%, transparent); max-width: 48ch; }
.cta .knapp--tunn { border-color: color-mix(in srgb, var(--djup-text) 34%, transparent); }
.cta .knapp--tunn:hover { border-color: var(--djup-text); color: var(--djup-text); }
.cta__ill .ill { width: 100%; }

/* ------------------------------------------------------------------ tal */

.talrad { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .talrad { grid-template-columns: repeat(4, 1fr); } }
.talruta { border-top: 2px solid var(--accent); padding-top: var(--s4); }
.talruta__tal {
  display: block; font-family: var(--rubrikfont); font-weight: 600;
  font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1; margin-bottom: var(--s3);
}
.talruta__text { display: block; font-size: 0.95rem; }
.talruta__not { display: block; font-size: 0.78rem; color: var(--dampat); margin-top: var(--s2); }

/* -------------------------------------------------------------- sidfot */

.storfot { border-top: 1px solid var(--linje); padding-block: var(--s8) var(--s6); margin-top: var(--s6); }
.storfot__topp { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .storfot__topp { grid-template-columns: 1fr 2fr; } }
.storfot__marke .logga { width: 34px; height: 34px; }
.storfot__ord { margin-top: var(--s4); color: var(--dampat); max-width: 34ch; font-size: 0.94rem; }
.storfot__kolumner { display: grid; gap: var(--s6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .storfot__kolumner { grid-template-columns: repeat(3, 1fr); } }
.storfot__kolumn h2 {
  font-family: var(--brodfont); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dampat); margin-bottom: var(--s4);
}
.storfot__kolumn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.storfot__kolumn a { text-decoration: none; font-size: 0.94rem; }
.storfot__kolumn a:hover { color: var(--accent); }
.storfot__botten {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--linje);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between;
  font-size: 0.82rem; color: var(--dampat);
}
.storfot__botten p { margin: 0; }
.storfot__bolag { font-variant-numeric: tabular-nums; }
.storfot__kontakt a { color: var(--accent); text-decoration: none; }
.storfot__kontakt a:hover { text-decoration: underline; }

/* ------------------------------------------------------- inkomst i vy */

/* Rorelsen ror bara transform. Ingenting pa sidan startar genomskinligt.
   Det ar inte en smaksak: en IntersectionObserver slutar leverera i en flik
   som webblasaren anser dold, och en timer i samma flik strypts till en gang
   per sekund. Med opacity i rorelsen blev hela sidan svart i exakt det laget,
   vilket ocksa hande har under bygget. Failar skriptet nu blir resultatet att
   sektionen star still, vilket ingen marker. */
.js .sektion { transform: translateY(14px); transition: transform 620ms var(--takt); }
.js .sektion.inne, .js .sektion:first-of-type { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .sektion { transform: none; }
}

/* Ett kort pa en yta-sektion far papperets farg, annars smalter kortet ihop
   med sektionen eftersom bada laser --yta. */
.ton--yta .kort, .ton--yta .rakningsram, .ton--yta .illvagg__ruta { background: var(--papper); }

/* ------------------------------------------------------- uppdateringen */

.uppdatering {
  position: fixed; inset-inline: var(--s4); bottom: var(--s4); z-index: 300;
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--djup); color: var(--djup-text);
  border: 1px solid color-mix(in srgb, var(--djup-text) 22%, transparent);
  border-radius: var(--rund); padding: var(--s4) var(--s5);
  font-size: 0.92rem; box-shadow: 0 20px 48px -24px rgba(0,0,0,0.6);
}
@media (min-width: 660px) {
  .uppdatering { inset-inline: auto var(--s5); max-width: 420px; }
}
.uppdatering button {
  margin-inline-start: auto; background: var(--accent-ljus); color: var(--djup);
  border: 0; border-radius: 999px; padding: 9px var(--s5);
  font: inherit; font-weight: 600; cursor: pointer;
}
.uppdatering button:hover { filter: brightness(1.08); }

@media print {
  .sidhuvud, .storfot, .knappar, .menyknapp { display: none; }
  .sektion { padding-block: var(--s5); opacity: 1; transform: none; }
  body { font-size: 11pt; }
}