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

/* Husets egna kopior ur gaddr-jobs/brand/_fonts, bada under SIL Open Font
   License. Bricolage Grotesque bar rubrikerna och Manrope brodtexten.
   unicode-range slutar vid latinskt utokat med flit: varken filen bar grekiska
   glyfer, och utan gransen hade webblasaren laddat ned fyrahundra kilobyte pa
   den grekiska sajten for att sedan rita varje tecken ur reservstacken anda. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("typsnitt/bricolage.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20A0-20BF,
                 U+2113, U+2122, U+2190-21BB, U+2202-22EF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("typsnitt/manrope.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20A0-20BF,
                 U+2113, U+2122, U+2190-21BB, U+2202-22EF, U+2C60-2C7F, U+A720-A7FF;
}

/* 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: #241a10;
  --papper: #fefaf2;
  --yta: #f8f0df;
  --black: #241a10;
  --dampat: #6a5943;
  --linje: #241a1018;
  --linje-stark: #241a1033;
  --accent: #a85400;
  --accent-mork: #853f00;
  --pa-accent: #fff9ef;
  --accent2: #0f6f8c;
  --accent3: #3a7331;
  --ja: #2c7a44;
  --djup: #123c48;
  --djup-text: #f2fafc;
  --accent-ljus: #ffc23d;
  --ss-scen: #fdf4e4;
  --ss-strek: #3a2a18;
  --ss-glod: #bf6200;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --display: "Bricolage Grotesque", "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --textsans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-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(--display);
  --brodfont: var(--textsans);

  --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(--ss-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 ritningarna temat.

     SCENEN AR EGEN SEDAN 2026-09-01 och lanas inte langre ur det djupa bandet.
     Tidigare var --ss-natt samma som --djup, alltsa nastan svart i BADA lagena,
     sa alla femtioatta ritningar var nattbilder ocksa mitt i en ljus sida.
     Nu ar --ss-scen sommardager i ljust lage och djup sjo i morkt, och --ss-strek
     vander med den sa strecken syns i bada. Ingen ritning har ritats om: de bar
     redan sina fargnamn, sa de foljer med av sig sjalva. */
  --ss-accent: var(--ss-glod);
  --ss-violett: var(--accent2);
  --ss-bla: var(--accent3);
  --ss-ljus: var(--ss-strek);
  --ss-natt: var(--ss-scen);
  --ss-dimma: var(--dampat);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljus"]) {
  --kol: #241a10;
  --papper: #15100a;
  --yta: #211810;
  --black: #f8f0df;
  --dampat: #b0a189;
  --linje: #f8f0df1c;
  --linje-stark: #f8f0df36;
  --accent: #ffb43d;
  --accent-mork: #ff9500;
  --pa-accent: #1c1206;
  --accent2: #5cc6e4;
  --accent3: #8ecb72;
  --ja: #7dd79a;
  --djup: #0c2b34;
  --djup-text: #eaf7fa;
  --accent-ljus: #ffd47a;
  --ss-scen: #0c2b34;
  --ss-strek: #f4ecdd;
  --ss-glod: #ffb43d;
  }
}
:root[data-tema="mork"] {
  --kol: #241a10;
  --papper: #15100a;
  --yta: #211810;
  --black: #f8f0df;
  --dampat: #b0a189;
  --linje: #f8f0df1c;
  --linje-stark: #f8f0df36;
  --accent: #ffb43d;
  --accent-mork: #ff9500;
  --pa-accent: #1c1206;
  --accent2: #5cc6e4;
  --accent3: #8ecb72;
  --ja: #7dd79a;
  --djup: #0c2b34;
  --djup-text: #eaf7fa;
  --accent-ljus: #ffd47a;
  --ss-scen: #0c2b34;
  --ss-strek: #f4ecdd;
  --ss-glod: #ffb43d;
}

*, *::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); }
/* Sidhuvudet ar en navigeringsrad och inte brodtext, sa det bar inte
   brodtextens breddtak. Uppmatt 2026-08-31 med atta sprak: raden kraver
   1258 px pa grekiska och 1217 pa islandska, medan --bredd ger 1156.
   Spillet mattes med scrollWidth pa .sidhuvud__ram och inte pa dokumentet,
   och just darfor sa mat-sidan ren pa sidor dar jordklotet var kapat. */
.sidhuvud .ram { max-width: 1460px; }
@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;
}
.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. */

/* LAGAN BRINNER. Market ar en fackla, och en fackla som star still ar en
   ritning av en fackla. Animationen ligger HAR och inte i svg-strangen, av tva
   skal: logotypen bakas in tva ganger per sida och tva likadana keyframe-namn i
   samma dokument styr varandras rorelse, och en regel i stilmallen gar att mata
   och andra pa ett stalle.
   Rorelsen ar transform och opacity, aldrig d eller filter. Lagan andas kring
   sin egen fot, karnan gar i motfas och lite fortare, gloden pulsar svagt, och
   tre gnistor stiger och slocknar i olika takt.
   WCAG 2.3.1: langsta cykeln ar 3,4 s och kortaste 2,2 s, alltsa hogst 0,45
   vandningar i sekunden mot gransen tre. Ytan som andras ar dessutom 30 x 30
   bildpunkter i sidhuvudet. Uppmatt med verktyg/mat-blink.py. */
.logga__flamma, .logga__karna, .logga__glod, .logga__gnista {
  transform-box: fill-box;
}
.logga__yttre {
  transform-origin: 50% 100%;
  animation: ss-logga-andas 3.4s ease-in-out infinite alternate;
}
.logga__karna {
  transform-origin: 50% 100%;
  animation: ss-logga-karna 2.6s ease-in-out infinite alternate;
}
.logga__glod {
  transform-origin: center;
  animation: ss-logga-glod 3.4s ease-in-out infinite alternate;
}
/* Gnistorna startar pa 0.55 och aldrig pa 0. Under prefers-reduced-motion
   dodas animationen och elementet faller tillbaka pa sitt grundvarde, sa ett
   grundvarde pa 0 hade gjort dem osynliga i stallet for stillastaende. */
.logga__gnista { opacity: 0.55; transform-origin: 50% 100%; }
.logga__gnista--a { animation: ss-logga-gnista 2.2s ease-out infinite; }
.logga__gnista--b { animation: ss-logga-gnista 2.9s ease-out infinite; animation-delay: -0.9s; }
.logga__gnista--c { animation: ss-logga-gnista 3.1s ease-out infinite; animation-delay: -1.8s; }

@keyframes ss-logga-andas {
  from { transform: scale(0.965, 0.955) skewX(1.1deg); }
  to   { transform: scale(1.035, 1.045) skewX(-1.1deg); }
}
@keyframes ss-logga-karna {
  from { transform: scale(1.05, 0.94) skewX(-1.6deg); }
  to   { transform: scale(0.94, 1.06) skewX(1.6deg); }
}
@keyframes ss-logga-glod {
  from { transform: scale(0.93); opacity: 0.72; }
  to   { transform: scale(1.07); opacity: 1; }
}
@keyframes ss-logga-gnista {
  0%   { transform: translateY(1.4px) scale(0.7); opacity: 0.15; }
  35%  { opacity: 0.95; }
  100% { transform: translateY(-6.2px) scale(0.35); opacity: 0.12; }
}

/* Hover lyfter hela facklan ett snapp. Den gamla regeln pekade pa .logga__d,
   en klass som forsvann nar market blev en fackla, sa hovern gjorde ingenting. */
.logga__flamma, .logga__facklan { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); }
.marke:hover .logga__flamma { transform: translateY(-1.1px) scale(1.05); }
.marke:hover .logga__facklan { transform: translateY(-0.6px); }
@media (prefers-reduced-motion: reduce) {
  .logga__flamma, .logga__facklan { transition: none; }
  .marke:hover .logga__flamma, .marke:hover .logga__facklan { 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; }
@media (min-width: 1360px) { .huvudmeny__verktyg { flex-wrap: nowrap; } }

/* Vagratt meny forst nar den faktiskt far plats, och gransen ar matt pa det
   bredaste spraket och inte pa svenskan. Atta poster plus tva knappar, sprakval
   och temavaxel kraver 1258 px pa grekiska. Med sidhuvudets egen bredd och
   padding ger 1360 px 1296 px innehall, alltsa 38 px marginal.
   Under gransen ar menyn en meny bakom knappen, och det ar rattt lage. */
@media (min-width: 1360px) {
  .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; min-width: 0; }
  .huvudmeny__lista a { padding: var(--s2) 6px; font-size: 0.8rem; white-space: nowrap; }
  .huvudmeny__knappar { order: 2; }
  .huvudmeny__verktyg { order: 3; }
}
/* Har fanns en 1440-niva som vidgade gap och hojde typsnittet till 0.9rem i
   sidhuvudet. Den ar borta. Uppmatt 2026-08-31: den lade 175 px pa raden och
   var darmed sjalva orsaken till att engelska, spanska, danska, finska,
   grekiska och islandska hade ett kapat sidhuvud pa varje bred skarm.
   Spillet vaxte inte med skarmen utan lag still, eftersom behallaren har ett
   tak, och det var vad som gjorde felet svart att se. */

.sprakval { position: relative; flex: 0 0 auto; }
.sprakval__knapp, .temavaxel {
  display: inline-flex; align-items: center; gap: var(--s2);
  /* Verktygsknapparna ar de minsta i raden och blir darfor det flexboxen
     krymper forst. De ska inte krympas alls: menyns lista har luft att ge. */
  flex: 0 0 auto;
  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; }
/* flex: 0 0 auto ar inte kosmetika. En svg med width i px krymps anda till NOLL
   bredd av en flexrad som inte far plats, och display och visibility ser rata
   ut hela tiden. Uppmatt 2026-08-31: vid 1440 px, dar mediefragan vidgar
   menyns gap, var jordklotet och manen 0x16 medan de var 16x16 vid 1320. Ikonen
   sag alltsa ut att vara borta pa varje bred skarm, och bara pa dem. */
.ikon { width: 16px; height: 16px; flex: 0 0 auto; 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); } }
/* HEROBANNERN. Hjalten ar inte langre en vanlig sektion utan ett band: egen
   varmare grund, en glod som faller in fran hoger dar illustrationen star, en
   hartunn accentlinje langst upp, och en tempolinje langst ned som knyter
   bandet till varumarket. Bandet gar kant till kant medan innehallet haller sig
   i spalten, sa sidan far en tydlig overkant utan att texten flyttar.
   Gloden ligger pa negativt z och kraver darfor att sektionen bildar egen
   stapelkontext, annars hamnar den over rubriken. */
.sektion--hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--s8) var(--s8);
  background: var(--yta);
  border-bottom: 1px solid var(--linje);
  overflow: clip;
}
.sektion--hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 78% at 82% 18%,
      color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 72%),
    radial-gradient(42% 60% at 4% 96%,
      color-mix(in srgb, var(--accent2) 10%, transparent) 0%, transparent 70%);
}
/* Accentlinjen langst upp: glod som gar over i familjens violett, alltsa samma
   ordning som i logotypens gradient. */
.sektion--hero::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 58%,
                              var(--accent2) 100%);
}
/* Tempolinjen langst ned i bandet. Streckad och stillastaende: den ar en
   markering och inte en animation, och en rorlig linje under varje rubrik pa
   femton sidor blir en tick. */
.hero__takt {
  position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--linje-stark) 0 10px, transparent 10px 22px);
}
.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);
  /* Illustrationen ar bandets tyngdpunkt och ska laser som ett foremal pa
     bordet, inte som en platta klistrad pa bakgrunden. */
  box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--kol) 70%, transparent),
              0 0 0 1px var(--linje);
}
.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-stark);
}
@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;
  /* En knapptext som bryts pa tva rader gor knappen dubbelt sa hog som sin
     granne och hela raden ser trasig ut. "Bli partner" brots i sidhuvudet. */
  white-space: nowrap;
  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); }
.knapp--liten { padding: 9px var(--s5); font-size: 0.86rem; }

/* Uppmaningarna i sidhuvudet. I den lilla menyn star de forst och breda, sa
   den som oppnar menyn for att ansoka trafar dem direkt. */
.huvudmeny__knappar { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.huvudmeny__knappar:empty { display: none; }
@media (min-width: 1320px) {
  .huvudmeny__knappar { display: flex; gap: var(--s2); margin: 0; }
}

/* --------------------------------------------------------------- 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(2, 1fr); } }
/* Fyra kolumner forst nar de far plats. Sidfoten ar sidkartan over femton
   sidor, sa den bar arton lankar, och tre kolumner gav en fjarde rad som
   hangde ensam. */
@media (min-width: 1040px) { .storfot__kolumner { grid-template-columns: repeat(4, 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; }

/* Ansokan i sidfoten. Egen yta med varm grund, sa den lasas som en inbjudan
   och inte som ytterligare en rad lankar. */
.storfot__start {
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rund); padding: var(--s6) var(--s5);
  margin-bottom: var(--s8);
}
.storfot__start .avsnittshuvud { margin-bottom: var(--s5); }
.storfot__start .rubrik { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }
.storfot__start .formular { max-width: 46rem; }
@media (min-width: 900px) {
  .storfot__start { padding: var(--s7) var(--s7); }
}

/* ------------------------------------------------------- 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:not([type=checkbox]):not([type=radio]), .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; }
.falt--bred { grid-column: 1 / -1; }

/* En grupp kryss eller radioknappar. Fieldset och legend, aldrig en label per
   grupp: en label kan bara peka pa en kontroll, och utan fieldset laser en
   skarmlasare upp varje val utan fragan de svarar pa. */
.falt--grupp { border: 1px solid var(--linje); border-radius: var(--rund-s);
  padding: var(--s4) var(--s4) var(--s3); margin: 0 0 var(--s4); min-inline-size: 0; }
.falt--grupp legend { font-size: 0.88rem; font-weight: 600; padding-inline: var(--s2);
  letter-spacing: 0.01em; }
.kryssrad { display: grid; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 40rem) { .kryssrad { grid-template-columns: 1fr 1fr; } }
.kryss { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400;
  font-size: 0.92rem; line-height: 1.45; cursor: pointer; padding: 0.3rem 0; }
.kryss input { margin-top: 0.2rem; 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-left: 3px solid var(--linje-stark); font-size: 0.94rem; }
.formular__svar--ok { border-left-color: var(--ja); background: color-mix(in srgb, var(--ja) 8%, transparent); }
.formular__svar--fel { border-left-color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }

/* Kvittot ERSATTER formularet nar ansokan gatt igenom. En rad under en
   fortfarande ifylld blankett later som att nagot kanske gick igenom, och da
   skickar folk igen. */
.kvitto {
  background: var(--yta); border: 1px solid var(--linje);
  border-inline-start: 3px solid var(--ja);
  border-radius: var(--rund); padding: var(--s6) var(--s5);
  max-width: 46rem;
}
.kvitto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kvitto__rubrik {
  font-family: var(--rubrikfont); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--s3);
}
.kvitto__text { margin: 0; max-width: 42ch; }
.kvitto__ref {
  margin: var(--s4) 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.94rem; letter-spacing: 0.06em; color: var(--accent);
}

/* Rakneverket visas forst nara taket. Ett "0 av 4000" fran borjan later som
   ett krav pa langd, och det ar tvartemot vad hjalptexten sager. */
.falt__rakneverk { font-size: 0.82rem; color: var(--dampat); font-variant-numeric: tabular-nums; }
.falt__rakneverk:empty { display: none; }
.falt__rakneverk--nara { color: var(--accent); font-weight: 600; }

/* Ett falt som webblasaren eller tjansten underkant. aria-invalid satts av
   skriptet, sa markeringen foljer det en skarmlasare faktiskt far veta. */
.falt [aria-invalid="true"] { border-color: #c0392b; }
.falt [aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, #c0392b 22%, 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; }
}