/* 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: #a34700;
  --accent-mork: #8a3d00;
  --pa-accent: #fffaf2;
  --accent2: #5442d6;
  --accent3: #1668b8;
  --ja: #a34700;
  --djup: #07070c;
  --djup-text: #f4f5fb;
  --accent-ljus: #ffa424;
  --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);

  /* Illustrationernas farger. De ritas som var(--dl-accent, ...) med en inbakad
     reservfarg, sa en fil gar att oppna ensam. Utan de har raderna anvands
     reservfargen aven pa sajten, och da foljer inte de 122 ritningarna temat. */
  --dl-accent: var(--accent-ljus);
  --dl-violett: var(--accent2);
  --dl-bla: var(--accent3);
  --dl-ljus: var(--djup-text);
  --dl-natt: var(--djup);
  --dl-dimma: var(--dampat);
}

@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: #ffa424;
  --accent-mork: #ff9100;
  --pa-accent: #12130c;
  --accent2: #8a7bff;
  --accent3: #4aa8ff;
  --ja: #ffa424;
  --djup: #050508;
  --djup-text: #f4f5fb;
  --accent-ljus: #ffd849;
  }
}
:root[data-tema="mork"] {
  --kol: #07070c;
  --papper: #0a0a0f;
  --yta: #12121b;
  --black: #f4f5fb;
  --dampat: #9aa0b8;
  --linje: #f4f5fb18;
  --linje-stark: #f4f5fb32;
  --accent: #ffa424;
  --accent-mork: #ff9100;
  --pa-accent: #12130c;
  --accent2: #8a7bff;
  --accent3: #4aa8ff;
  --ja: #ffa424;
  --djup: #050508;
  --djup-text: #f4f5fb;
  --accent-ljus: #ffd849;
}

*, *::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;
}
/* ---- fotografi bakom hjaltebilden ----
   Fonden gar kant till kant och inte bara over innehallsramen. En bild som
   slutar dar texten slutar laser som en platshallare, inte som en bild. */
.sektion--hero { position: relative; isolation: isolate;
  padding-block: clamp(4rem, 11vw, 8.5rem); }
.hero__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__fond .foto--fond { width: 100%; height: 100%; object-fit: cover;
  /* Fotot ar grund och inte motiv. Utan dampningen konkurrerar det med
     rubriken, och da blir bade bilden och texten samre. */
  opacity: 0.22; filter: grayscale(0.4) contrast(1.06); }
.hero__kon { position: absolute; inset: 0;
  background:
    radial-gradient(115% 75% at 50% -8%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 58%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--papper) 42%, transparent) 0%,
      color-mix(in srgb, var(--papper) 78%, transparent) 55%,
      var(--papper) 100%); }
/* Utan illustration bredvid far texten hela bredden och far andas. */
.sektion--hero:has(.hero__fond) .hero { grid-template-columns: 1fr; }
.sektion--hero:has(.hero__fond) .hero__text { max-width: 46rem; }

.cta__marke { display: block; width: 38px; height: 38px; margin-bottom: var(--s3); }
.cta__marke .logga { width: 38px; height: 38px; }

.marke__slogan { display: block; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dampat);
  margin-top: 0.1rem; }
@media (max-width: 30rem) { .marke__slogan { display: none; } }

.logga { width: 30px; height: 30px; flex: 0 0 auto; }
/* Market bar sin egen gradient och foljer darfor inte temavaxeln. Det ar med
   flit: gult mot gult ar samma marke i bada lagen, och en logotyp som byter
   farg med systeminstallningen ar tva logotyper. */
.logga__d { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); transform-origin: center; }
.marke:hover .logga__d { transform: scale(1.06) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .logga__d { transition: none; }
  .marke:hover .logga__d { transform: none; } }
.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; }

/* ------------------------------------------------------------- undermeny */

/* Pa telefon star undermenyn utfalld under sin foralder. En hovermeny finns
   inte pa en pekskarm, och en meny som kraver ett tryck for att oppna och ett
   till for att valja tappar halva besokarna i det forsta. */
.huvudmeny__post { position: relative; }
.huvudmeny__pil { display: none; }
.undermeny {
  list-style: none; margin: 0 0 var(--s2); margin-inline-start: var(--s5); padding: 0;
  display: grid; gap: 1px;
  border-inline-start: 1px solid var(--linje);
}
.undermeny a {
  display: block; padding: var(--s2) var(--s4); text-decoration: none;
  font-size: 0.88rem; color: var(--dampat); border-radius: var(--rund-s);
}
.undermeny a:hover { background: var(--yta); color: var(--black); }
.undermeny a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.huvudmeny__gren { color: var(--accent); }

@media (min-width: 1180px) {
  /* Fran och med bredden dar menyn ligger vagratt blir undermenyn en panel
     under sin foralder. Den oppnas av hover och av focus-within, sa
     tangentbordet kommer at den utan en rad JavaScript. */
  .huvudmeny__post--har-under > a { padding-inline-end: 2px; }
  .huvudmeny__pil {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer;
    color: inherit; vertical-align: middle;
  }
  .ikon--pil { width: 13px; height: 13px; stroke-width: 2; }
  .huvudmeny__post--har-under { display: flex; align-items: center; }
  .undermeny {
    position: absolute; inset-inline-start: 0; top: 100%;
    margin: 0; padding: var(--s2); border-inline-start: 0;
    min-width: 232px; z-index: 70;
    background: var(--papper); border: 1px solid var(--linje);
    border-radius: var(--rund);
    box-shadow: 0 18px 44px -22px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 160ms var(--takt), transform 160ms var(--takt), visibility 160ms;
  }
  .huvudmeny__post--har-under:hover > .undermeny,
  .huvudmeny__post--har-under:focus-within > .undermeny,
  .undermeny.oppen {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .huvudmeny__post--har-under:hover > .huvudmeny__pil .ikon--pil,
  .huvudmeny__post--har-under:focus-within > .huvudmeny__pil .ikon--pil {
    transform: rotate(180deg);
  }
  .ikon--pil { transition: transform 160ms var(--takt); }
  .undermeny a { padding: var(--s2) var(--s3); font-size: 0.86rem; white-space: nowrap; }
}

/* 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; }

/* Flaggorna. Ritade av rita-flaggor.py och inbakade inline, sa de foljer
   sidan och inte en bildfil som kan utebli. Kanten runt dem ar inte dekor:
   den finska och den islandska ar till stor del vita och skulle annars
   flyta ihop med papperet i ljust lage. */
.flagga {
  width: 20px; height: 14px; display: block; flex: 0 0 auto;
  border-radius: 2.5px;
}
.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: flex; align-items: center; gap: var(--s3);
  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; }
.sprakval__namn { flex: 1 1 auto; }
/* Koden star efter namnet och ar dampad. Den ar for den som letar efter en
   tvabokstavskod och inte efter ett sprakets namn den kanske inte kanner. */
.sprakval__kod2 {
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--dampat);
  font-variant-numeric: tabular-nums;
}
.sprakval__lista a[aria-current="true"] .sprakval__kod2 { color: inherit; }

/* I telefonmenyn ska sprakvalet inte vara en andra utfallsmeny inuti den
   forsta. Den absoluta listan hamnade under skarmkanten och sag trasig ut trots
   att den var oppen. Har syns alla sprak direkt och huvudmenyn sjalv rullar. */
@media (max-width: 1179px) {
  .huvudmeny__verktyg { align-items: flex-start; }
  .sprakval { flex: 1 1 100%; min-width: 0; }
  .sprakval__knapp { display: none; }
  .sprakval__lista, .sprakval__lista.oppen {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static; inset: auto; width: 100%; min-width: 0;
    max-height: none; overflow: visible; margin: 0; box-shadow: none;
  }
  .sprakval__lista a { min-height: 42px; }
}
@media (max-width: 359px) {
  .sprakval__lista, .sprakval__lista.oppen { grid-template-columns: 1fr; }
}

/* Ett forslag, aldrig en omdirigering. Raden ligger i dokumentflodet sa att
   den inte tacker menyn eller innehallet pa en liten skarm. */
.sprakrad[hidden] { display: none; }
.sprakrad { background: var(--yta); border-block-end: 1px solid var(--linje); }
.sprakrad__ram {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s3);
}
.sprakrad__text { margin: 0; font-weight: 600; }
.sprakrad__val { display: flex; flex-wrap: wrap; gap: var(--s2); flex: 0 0 auto; }
.sprakrad .knapp { min-height: 40px; padding: 8px var(--s4); font-size: 0.86rem; }
@media (max-width: 620px) {
  .sprakrad__ram { align-items: stretch; flex-direction: column; }
  .sprakrad__val { width: 100%; }
  .sprakrad .knapp { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------------------ 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); }

/* Ritningen forklarar och fotografiet belagger. Star bada i samma spalt far
   fotografiet luft over sig, annars laser de som en enda trasig bild. */
.par__foto { margin-top: var(--s5); }

/* -------------------------------------------------------------- bildruta */

.bildruta { margin: 0; display: grid; gap: var(--s3); }
.bildruta__ruta { display: block; overflow: hidden; border-radius: var(--rund); }
.bildruta__ruta .foto { display: block; width: 100%; }
.bildruta__text {
  font-size: 0.84rem; line-height: 1.5; color: var(--dampat);
  padding-inline-start: var(--s3); border-inline-start: 2px solid var(--linje-stark);
}

/* ----------------------------------------------------------------- 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); }

/* Det korta formularet i botten av amnessidorna. Smalare an det pa
   kontaktsidan, och namn och adress star bredvid varandra anda ned till
   telefonbredd, sa att hela formularet syns utan att man rullar. */
.formular--kompakt { max-width: 44rem; }
.formular--kompakt .formular__rad { grid-template-columns: 1fr 1fr; gap: var(--s4); }
.formular--kompakt .falt--kryss { font-size: 0.86rem; }
.sektion--formular .formular--kompakt { margin-inline: auto; }

/* De valfria falten. Sammanfattningen ska se ut som en lank och inte som en
   knapp: den oppnar tre falt man kan hoppa over, inte ett nytt steg. */
.formular__mer { margin-bottom: var(--s5); }
.formular__mer > summary {
  cursor: pointer; font-size: 0.9rem; color: var(--accent); font-weight: 600;
  padding: var(--s2) 0; list-style: none; display: inline-flex; align-items: center; gap: var(--s2);
}
.formular__mer > summary::-webkit-details-marker { display: none; }
.formular__mer > summary::before { content: "+"; font-weight: 700; }
.formular__mer[open] > summary::before { content: "\2212"; }
.formular__mer > summary:hover { text-decoration: underline; }
.formular__mer > .formular__rad { margin-top: var(--s4); }

/* --------------------------------------------------------------- marken */

.sektion--marken .avsnittshuvud { margin-bottom: var(--s7); }
.marken__grupp + .marken__grupp { margin-top: var(--s7); }
.marken__rubrik {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 var(--s5);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--linje);
}
.marken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 620px) { .marken { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .marken { grid-template-columns: repeat(4, 1fr); } }
.marken__post { display: grid; gap: var(--s2); align-content: start; }
/* Ordmarket satts i sajtens eget typsnitt. Det ar inte nagon annans logotyp
   och ska inte likna en. */
.marken__namn {
  font-family: var(--rubrikfont); font-size: clamp(1.32rem, 1.1rem + 0.8vw, 1.72rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--black);
  text-decoration: none; line-height: 1.1;
}
a.marken__namn { transition: color 200ms var(--takt); }
a.marken__namn:hover { color: var(--accent); }
.marken__vad { font-size: 0.88rem; line-height: 1.5; color: var(--dampat); }
.marken__fot { margin-top: var(--s6); font-size: 0.88rem; color: var(--dampat); max-width: 46rem; }

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

/* Hogst sex rutor, var och en med en bildtext som sager vad som syns.
   Mosaiken med en dubbelhog forsta ruta ar borta: den byggde pa att raden
   var lang nog att bara ett monster, och det ar den inte langre. */
.galleri { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .galleri { grid-template-columns: repeat(3, 1fr); } }
.galleri__ruta .foto--galleri {
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 600ms var(--takt);
}
.galleri__ruta:hover .foto--galleri { transform: scale(1.04); }

/* ------------------------------------------------------------- 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); }

/* ---- Formular och kontoyta ---------------------------------------------
   Faltet ritas som resten av sajten: linje fore yta, ingen fylld ruta. Det ar
   samma regel som gor illustrationerna till konstruktionsritningar. */
.formular { max-width: 62rem; }
.formular--smal { max-width: 34rem; }
.formular__rad { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
.formular__rad:has(> .falt:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 44rem) { .formular__rad { grid-template-columns: 1fr; } }
.falt { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s4); }
.falt label { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; }
.falt input[type=text], .falt input[type=email], .falt select, .falt textarea {
  font: inherit; font-size: 0.98rem; color: var(--black);
  background: transparent; border: 1px solid var(--linje-stark);
  border-radius: 2px; padding: 0.7rem 0.8rem; width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.falt textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.falt input:focus-visible, .falt select:focus-visible, .falt textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.falt--fel input, .falt--fel select, .falt--fel textarea { border-color: #c0392b; }
.falt__hjalp { font-size: 0.84rem; color: var(--dampat); }
.falt__fel:not(:empty) { font-size: 0.84rem; color: #c0392b; font-weight: 600; }
.falt--kryss label { display: flex; gap: 0.7rem; align-items: flex-start;
  font-weight: 400; font-size: 0.92rem; line-height: 1.5; cursor: pointer; }
.falt--kryss input { margin-top: 0.22rem; accent-color: var(--accent); flex: 0 0 auto; }
.formular__rattslig { font-size: 0.84rem; color: var(--dampat); max-width: 46rem;
  padding-top: var(--s3); border-top: 1px solid var(--linje); }
.formular__svar:not(:empty) { margin-top: var(--s4); padding: 0.85rem 1rem;
  border-inline-start: 3px solid var(--linje-stark); font-size: 0.94rem; }
.formular__svar--ok { border-inline-start-color: var(--ja); background: color-mix(in srgb, var(--ja) 8%, transparent); }
.formular__svar--fel { border-inline-start-color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }
/* Honungsfallan. Borta for oga, for skarmlasare och for tangentbord, men kvar
   i dokumentet dar en robot laser den. Aldrig display:none, en del robotar
   hoppar over just det. */
.formular__falla { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.konto__sso { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--linje); }
.konto__eller { font-size: 0.88rem; color: var(--dampat); }
.mfa{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--linje)}
.mfa__rubrik{font-size:1.05rem; font-weight:600; letter-spacing:-.015em; margin:0 0 .4rem}
.mfa__text{font-size:.92rem; color:var(--dampat); max-width:52ch; margin:0 0 var(--s3)}
.mfa__lank{font-size:.88rem; margin:.5rem 0 var(--s4)}
.mfa__pa{display:inline-flex; align-items:center; gap:.5rem; font-size:.94rem;
  font-weight:600; color:var(--ja)}
.mfa__pa::before{content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ja)}
.mfa__av{margin-top:var(--s4)}
.mfa__av summary{cursor:pointer; font-size:.88rem; color:var(--dampat)}
.mfa__av summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mfa__koder{list-style:none; padding:0; margin:0; display:grid; gap:.4rem;
  /* min() sa en smal telefon far en kolumn i stallet for vagratt spill.
     Grinden failar pa minmax utan den. */
  grid-template-columns:repeat(auto-fill,minmax(min(8rem,100%),1fr))}
.mfa__koder li{font-family:"JetBrains Mono",monospace; font-size:.92rem;
  letter-spacing:.06em; padding:.5rem .6rem; border:1px solid var(--linje-stark);
  border-radius:2px; text-align:center}
.konto__vem { color: var(--dampat); font-size: 0.94rem; margin-bottom: var(--s4); }
.konto__not { font-size: 0.88rem; color: var(--dampat); max-width: 34rem; margin-top: var(--s4); }
.konto__lista { margin-bottom: var(--s5); overflow-x: auto; }
.konto__lista .tabell { min-width: 0; }

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