/* ==========================================================================
   KostnadEnskiltAvlopp.se – designtokens v0.1
   Källa för alla färger, typsnitt, avstånd, radier, skuggor och rörelse.
   Kontrasterna är uträknade med design/kontrast.py som läser DEN HÄR filen.
   Ändra inte en färg utan att köra skriptet igen.
   Läge: följer ENBART systemets inställning (prefers-color-scheme).
   Ljust är standard i :root, mörkt i @media (prefers-color-scheme: dark).
   Inget läge utöver systemets inställning. Inget sparas i webbläsaren.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Var-Roman-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap; /* text syns direkt i reservtypsnitt */
}

:root {
  color-scheme: light dark;

  /* --- Varumärke (fasta, samma i båda lägen) ------------------------------ */
  --marke-logga-gron: #64A990;      /* taket */
  --marke-logga-gron-mork: #407B6E; /* husets nedre del */
  --marke-logga-bla: #5E99D4;       /* droppen */
  --marke-ordbild: #1D423B;         /* texten i loggan */

  /* --- Ytor ---------------------------------------------------------------- */
  --farg-bakgrund: #F8F7F3;        /* off-white */
  --farg-yta: #FFFFFF;             /* kort, formulär */
  --farg-yta-sand: #E8DFCF;        /* sand: band, förtroenderad */
  --farg-yta-sand-ljus: #F2EDE3;   /* faktarutor, tabellhuvud */
  --farg-yta-djup: #102A43;        /* marinblå: sidfot, toppremsa */
  --farg-yta-gron-ljus: #E4EFEA;   /* valt radioknappskort, ok-ruta */

  /* --- Text ---------------------------------------------------------------- */
  --farg-text: #102A43;            /* marinblå */
  --farg-text-dampad: #475A6B;
  --farg-text-pa-djup: #F8F7F3;
  --farg-text-dampad-pa-djup: #B9C6D2;
  --farg-rubrik-accent: #216A5B;   /* skogsgrön: överrubriker */

  /* --- Linjer -------------------------------------------------------------- */
  --farg-linje: #DDD6C8;           /* dekorativ avdelare, inget krav */
  --farg-linje-ui: #6B7A88;        /* fältkant, kortkant som bär betydelse (3:1) */

  /* --- Interaktion --------------------------------------------------------- */
  /* Färgregel (beslut 2026-10-25): fylld grön = sidans primära handling (en per vy),
     fylld blå = stegets handling inne i ett verktyg, kantad/länk = sekundär. */
  --farg-huvudhandling: #216A5B;        /* fylld skogsgrön: sidans primära handling. Vit text 6,41:1; mot bakgrund 5,98:1 */
  --farg-huvudhandling-hover: #1A5649;  /* vit text 8,50:1 */
  --farg-huvudhandling-aktiv: #134036;  /* vit text 11,57:1 */
  --farg-text-pa-huvudhandling: #FFFFFF;
  --farg-handling: #1B5B96;        /* stegknapp i verktyg (t.ex. Fortsätt i kalkylatorn): djup vattenblå */
  --farg-handling-hover: #144878;
  --farg-handling-aktiv: #0F3A62;
  --farg-text-pa-handling: #FFFFFF;
  --farg-sekundar: #216A5B;        /* sekundärknapp: kant och text skogsgrön */
  --farg-sekundar-hover-yta: #E4EFEA;
  --farg-lank: #1B5B96;
  --farg-lank-hover: #102A43;
  --farg-lank-besokt: #5A3E86;
  --farg-fokus: #102A43;           /* fokusring 3px + 2px avstånd */
  --farg-fokus-insida: #FFFFFF;    /* ljus kant innanför ringen på mörka knappar */
  --farg-vald: #216A5B;            /* valt kort, progress, radiopunkt */
  --farg-disabled-yta: #E6E3DC;
  --farg-disabled-text: #55616C;

  /* --- Status -------------------------------------------------------------- */
  --farg-info: #1B5B96;      --farg-info-yta: #E7EFF7;
  --farg-varning: #7A4B00;   --farg-varning-yta: #FAEFD6;  --farg-varning-kant: #A86A00;
  --farg-fel: #A9281F;       --farg-fel-yta: #FBEAE8;
  --farg-ok: #1E6152;        --farg-ok-yta: #E4EFEA;

  /* --- Illustration (SVG-klasser) ------------------------------------------ */
  --illu-mark: #D9CBB0;
  --illu-mark-djup: #C4B293;
  --illu-grus: #B9B2A5;
  --illu-grundvatten: #CFE1F2;
  --illu-linje: #102A43;
  --illu-tank: #FFFFFF;
  --illu-vatten: #5E99D4;
  --illu-hus: #64A990;
  --illu-gras: #8DBB8F;
  --illu-hero-linje: #216A5B;     /* hero-illustrationens linjer (skogsgrön) */
  --illu-hero-vatten: #1B5B96;    /* hero-illustrationens vatten (droppblå) */
  /* Hero-foto: övertoning mot --farg-bakgrund (#F8F7F3 som RGB-tripplett), minsta täckning där text börjar */
  --hero-tona: 248 247 243;
  --hero-tona-text: 0.92;

  /* --- Typografi ----------------------------------------------------------- */
  --typ-rubrik: "Source Serif 4", "Iowan Old Style", "Charter", "Georgia", serif;
  --typ-brod: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --typ-siffror: var(--typ-brod);
  /* Fluid skala, 360px → 1280px viewport */
  --typ-xs:  0.8125rem;                                     /* 13 px, bara metadata */
  --typ-s:   0.9375rem;                                     /* 15 px */
  --typ-m:   clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);  /* 17 → 18 px brödtext */
  --typ-l:   clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);   /* 19 → 22 px ingress, h4 */
  --typ-xl:  clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);     /* 22 → 28 px h3 */
  --typ-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);      /* 28 → 38 px h2 */
  --typ-3xl: clamp(2.125rem, 1.7rem + 1.9vw, 3.375rem);     /* 34 → 54 px h1 */
  --typ-belopp: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);     /* intervall i resultat */
  --radhojd-tat: 1.15;
  --radhojd-rubrik: 1.2;
  --radhojd-brod: 1.6;
  --matt-text: 68ch;   /* max radlängd för brödtext */

  /* --- Avstånd (bas 4 px, 8-px-rytm) --------------------------------------- */
  --rum-1: 0.25rem;  /* 4  */
  --rum-2: 0.5rem;   /* 8  */
  --rum-3: 0.75rem;  /* 12 */
  --rum-4: 1rem;     /* 16 */
  --rum-5: 1.5rem;   /* 24 */
  --rum-6: 2rem;     /* 32 */
  --rum-7: 3rem;     /* 48 */
  --rum-8: 4rem;     /* 64 */
  --rum-9: 6rem;     /* 96 */
  --rum-sektion: clamp(3rem, 2rem + 4vw, 6rem);
  --rum-kant: clamp(1rem, 0.6rem + 1.8vw, 2rem); /* sidomarginal */

  /* --- Rutnät -------------------------------------------------------------- */
  --rutnat-max: 76rem;      /* 1216 px innehållsbredd */
  --rutnat-smal: 46rem;     /* artikelspalt */
  --rutnat-glapp: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);

  /* --- Radier -------------------------------------------------------------- */
  --radie-s: 4px;    /* fält, taggar */
  --radie-m: 8px;    /* knappar, rutor */
  --radie-l: 14px;   /* kort, kalkylatorpanel */
  --radie-rund: 999px;

  /* --- Skuggor (låga, tonade i marinblått) --------------------------------- */
  --skugga-1: 0 1px 2px rgb(16 42 67 / 0.06), 0 1px 1px rgb(16 42 67 / 0.04);
  --skugga-2: 0 2px 6px rgb(16 42 67 / 0.06), 0 8px 24px rgb(16 42 67 / 0.07);
  --skugga-3: 0 4px 12px rgb(16 42 67 / 0.08), 0 20px 48px rgb(16 42 67 / 0.10);

  /* --- Rörelse ------------------------------------------------------------- */
  --tid-snabb: 120ms;
  --tid-bas: 200ms;
  --tid-lugn: 320ms;
  --kurva: cubic-bezier(0.2, 0, 0, 1);

  /* --- Övrigt -------------------------------------------------------------- */
  --fokus-bredd: 3px;
  --fokus-avstand: 2px;
  --malyta-min: 44px; /* minsta klickyta (WCAG 2.5.8 kräver 24, vi kör 44) */
}

/* ---------------- Mörkt läge (systeminställning) ---------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --farg-bakgrund: #0C1B2B;
    --farg-yta: #132638;
    --farg-yta-sand: #1D2E3E;
    --farg-yta-sand-ljus: #172A3C;
    --farg-yta-djup: #07131F;
    --farg-yta-gron-ljus: #143A35;
    --farg-text: #EDF1F4;
    --farg-text-dampad: #AEBCC9;
    --farg-text-pa-djup: #EDF1F4;
    --farg-text-dampad-pa-djup: #AEBCC9;
    --farg-rubrik-accent: #7CCDB0;
    --farg-linje: #263C51;
    --farg-linje-ui: #7D93A8;
    --farg-huvudhandling: #6FB79B;        /* mörk text 7,39:1; mot bakgrund #0C1B2B 7,39:1 */
    --farg-huvudhandling-hover: #8CC8AF;  /* mörk text 9,11:1 */
    --farg-huvudhandling-aktiv: #A8D7C3;  /* mörk text 10,91:1 */
    --farg-text-pa-huvudhandling: #0C1B2B;
    --farg-handling: #8CC0EE;
    --farg-handling-hover: #B0D4F5;
    --farg-handling-aktiv: #CFE4F8;
    --farg-text-pa-handling: #0C1B2B;
    --farg-sekundar: #7CCDB0;
    --farg-sekundar-hover-yta: #143A35;
    --farg-lank: #9CCBF5;
    --farg-lank-hover: #D3E7FA;
    --farg-lank-besokt: #C9B3EE;
    --farg-fokus: #F4D47C;
    --farg-fokus-insida: #0C1B2B;
    --farg-vald: #7CCDB0;
    --farg-disabled-yta: #1C2C3B;
    --farg-disabled-text: #8696A5;
    --farg-info: #9CCBF5;    --farg-info-yta: #13304A;
    --farg-varning: #F2C66B; --farg-varning-yta: #33290F; --farg-varning-kant: #D9A441;
    --farg-fel: #FF9C92;     --farg-fel-yta: #3A1A1A;
    --farg-ok: #7CCDB0;      --farg-ok-yta: #143A35;
    --illu-mark: #3A3326;
    --illu-mark-djup: #2E281E;
    --illu-grus: #4A4A48;
    --illu-grundvatten: #1B3A5A;
    --illu-linje: #D6DEE6;
    --illu-tank: #1D3247;
    --illu-vatten: #7FB2E5;
    --illu-hus: #6FB79B;
    --illu-gras: #4F7F5A;
    --illu-hero-linje: #6FB79B;
    --illu-hero-vatten: #8CC0EE;
    --hero-tona: 12 27 43;   /* #0C1B2B */
    --hero-tona-text: 0.92;
    --skugga-1: 0 1px 2px rgb(0 0 0 / 0.35);
    --skugga-2: 0 2px 6px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.30);
    --skugga-3: 0 4px 12px rgb(0 0 0 / 0.35), 0 20px 48px rgb(0 0 0 / 0.40);
  }
}

/* ---------------- Rörelse av ---------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --tid-snabb: 0ms; --tid-bas: 0ms; --tid-lugn: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   KostnadEnskiltAvlopp.se – komponenter v0.1
   Kräver tokens.css. Inga inline-stilar (CSP style-src 'self').
   Namngivning: svenska, block__del--variant. Tillstånd via ARIA/attribut.
   ========================================================================== */

/* ---------- Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--farg-bakgrund);
  color: var(--farg-text);
  font-family: var(--typ-brod);
  font-size: var(--typ-m);
  line-height: var(--radhojd-brod);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--typ-rubrik);
  font-weight: var(--rubrik-vikt, 600);
  letter-spacing: var(--rubrik-spacing, -0.01em);
  line-height: var(--radhojd-rubrik);
  margin: 0 0 var(--rum-4);
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--farg-text);
}
h1 { font-size: var(--typ-3xl); line-height: var(--radhojd-tat); }
h2 { font-size: var(--typ-2xl); }
h3 { font-size: var(--typ-xl); }
h4 { font-size: var(--typ-l); font-family: var(--typ-brod); font-weight: 650; letter-spacing: 0; }
p, ul, ol, dl, table { margin: 0 0 var(--rum-4); }
p, li { max-width: var(--matt-text); text-wrap: pretty; }
strong { font-weight: 650; }
small, .metadata { font-size: var(--typ-s); color: var(--farg-text-dampad); }
hr { border: 0; border-top: 1px solid var(--farg-linje); margin: var(--rum-6) 0; }
.visuellt-dold {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Fokus (gemensam) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--fokus-bredd) solid var(--farg-fokus);
  outline-offset: var(--fokus-avstand);
  border-radius: var(--radie-s);
}

/* ---------- Länkar ---------- */
a {
  color: var(--farg-lank);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--tid-snabb) var(--kurva), text-decoration-thickness var(--tid-snabb) var(--kurva);
}
a:hover { color: var(--farg-lank-hover); text-decoration-thickness: 2px; }
a:active { color: var(--farg-lank-hover); }
.prosa a:visited { color: var(--farg-lank-besokt); }
a[href^="https://"]:not(.knapp)::after {
  content: " ↗"; content: " ↗" / ""; font-size: 0.8em; text-decoration: none; display: inline-block;
}
.lank-pil { font-weight: 600; text-decoration: none; }
.lank-pil::after { content: " →"; content: " →" / ""; display: inline-block; transition: transform var(--tid-bas) var(--kurva); }
.lank-pil:hover { text-decoration: underline; }
.lank-pil:hover::after { transform: translateX(3px); }

/* ---------- Layout ---------- */
.behallare { width: 100%; max-width: calc(var(--rutnat-max) + 2 * var(--rum-kant)); margin-inline: auto; padding-inline: var(--rum-kant); }
.behallare--smal { max-width: calc(var(--rutnat-smal) + 2 * var(--rum-kant)); }
.sektion { padding-block: var(--rum-sektion); }
.sektion--sand { background: var(--farg-yta-sand); }
.sektion--yta { background: var(--farg-yta); border-block: 1px solid var(--farg-linje); }
.sektion__huvud { max-width: 44rem; margin-bottom: var(--rum-6); }
.rutnat { display: grid; gap: var(--rutnat-glapp); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rutnat > * { grid-column: 1 / -1; }
.kortrutnat { display: grid; gap: var(--rutnat-glapp); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.stack > * + * { margin-top: var(--rum-4); }

/* ---------- Typografiska hjälpare ---------- */
.overrubrik {
  font-family: var(--typ-brod); font-size: var(--typ-s); font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--farg-rubrik-accent);
  margin: 0 0 var(--rum-3);
}
.ingress { font-size: var(--typ-l); line-height: 1.5; color: var(--farg-text); max-width: 40rem; }
.dampad { color: var(--farg-text-dampad); }
.siffror { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Hoppa till innehåll ---------- */
.hoppa {
  position: absolute; left: var(--rum-4); top: -100px; z-index: 100;
  background: var(--farg-yta); color: var(--farg-text); padding: var(--rum-3) var(--rum-4);
  border-radius: var(--radie-m); box-shadow: var(--skugga-2); font-weight: 600;
}
.hoppa:focus { top: var(--rum-3); }

/* ---------- Toppremsa ---------- */
.topprad { background: var(--farg-yta-djup); color: var(--farg-text-pa-djup); font-size: var(--typ-s); }
.topprad p { margin: 0; padding-block: var(--rum-2); max-width: none; }
.topprad a { color: var(--farg-text-pa-djup); }
/* Mobil: en rad. Fulltexten från 48rem. */
.topprad__kort { display: none; }
@media (max-width: 47.99rem) { .topprad__lang { display: none; } .topprad__kort { display: inline; } }
.topprad :focus-visible, .sidfot :focus-visible { outline-color: var(--farg-text-pa-djup); }

/* ---------- Sidhuvud ---------- */
.sidhuvud {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--farg-bakgrund) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--farg-linje);
}
.sidhuvud__inre { display: flex; align-items: center; gap: var(--rum-4); min-height: 4rem; }
.logga { display: inline-flex; align-items: center; gap: var(--rum-3); text-decoration: none; color: var(--marke-ordbild); margin-right: auto; }
.logga:hover { color: var(--marke-ordbild); }

.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rum-1); }
.nav__lank {
  display: inline-flex; align-items: center; min-height: var(--malyta-min); padding-inline: var(--rum-3);
  color: var(--farg-text); text-decoration: none; font-weight: 550; border-radius: var(--radie-m);
  position: relative;
}
.nav__lank:hover { background: var(--farg-yta-sand-ljus); color: var(--farg-text); }
.nav__lank[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--rum-3); right: var(--rum-3); bottom: 6px;
  height: 2px; background: var(--farg-vald); border-radius: 2px;
}
.menyknapp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rum-2);
  min-height: var(--malyta-min); min-width: var(--malyta-min); padding-inline: var(--rum-3);
  border: 1px solid var(--farg-linje-ui); border-radius: var(--radie-m);
  background: var(--farg-yta); color: var(--farg-text); font: inherit; font-size: var(--typ-s); font-weight: 600;
  cursor: pointer; transition: background var(--tid-snabb) var(--kurva);
}
.menyknapp:hover { background: var(--farg-yta-sand-ljus); }
.menyknapp svg { width: 1.25rem; height: 1.25rem; }
.menyknapp { display: none; }

/* Mobil meny: utan JS syns navigationen som lista under loggan (progressiv). */
@media (max-width: 63.99rem) {
  .js .menyknapp { display: inline-flex; }
  .js .nav { display: none; }
  .js .nav[data-oppen="true"] {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--farg-bakgrund); border-bottom: 1px solid var(--farg-linje); box-shadow: var(--skugga-3);
    padding: var(--rum-3) var(--rum-kant) var(--rum-5);
    animation: glid-in var(--tid-bas) var(--kurva);
  }
  .js .nav .nav__lista { flex-direction: column; }
  .js .nav .nav__lank { width: 100%; font-size: var(--typ-l); min-height: 3rem; }
  .js .nav .nav__lank[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .sidhuvud__inre { flex-wrap: wrap; }
  .js .sidhuvud__inre { flex-wrap: nowrap; }
}
@keyframes glid-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rum-2);
  min-height: 3rem; padding: 0.75rem 1.25rem; border-radius: var(--radie-m);
  font: inherit; font-weight: 650; font-size: var(--typ-m); line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--tid-snabb) var(--kurva), color var(--tid-snabb) var(--kurva), transform var(--tid-snabb) var(--kurva), box-shadow var(--tid-bas) var(--kurva);
}
.knapp svg { width: 1.125rem; height: 1.125rem; flex: none; }
/* Fylld grön: sidans primära handling, en per vy. Störst i hierarkin: högre (minst 52 px, 56 px med typ-l), bredare padding,
   större text och skugga-2. Kant = fyllnad, så ytan mot bakgrunden (≥ 3:1) är knappens gräns. */
.knapp--huvud {
  background: var(--farg-huvudhandling); color: var(--farg-text-pa-huvudhandling); border-color: var(--farg-huvudhandling);
  min-height: 3.25rem; padding: 0.8125rem 1.625rem; font-size: var(--typ-l); font-weight: 700; box-shadow: var(--skugga-2);
}
.knapp--huvud:hover { background: var(--farg-huvudhandling-hover); border-color: var(--farg-huvudhandling-hover); color: var(--farg-text-pa-huvudhandling); }
.knapp--huvud:active { background: var(--farg-huvudhandling-aktiv); border-color: var(--farg-huvudhandling-aktiv); color: var(--farg-text-pa-huvudhandling); box-shadow: var(--skugga-1); transform: translateY(1px); }
.knapp--huvud:focus-visible { outline: var(--fokus-bredd) solid var(--farg-fokus); outline-offset: var(--fokus-avstand); box-shadow: var(--skugga-2), inset 0 0 0 2px var(--farg-fokus-insida); }
/* Fylld blå: stegets handling inne i ett verktyg (Fortsätt, Visa resultat). */
.knapp--primar { background: var(--farg-handling); color: var(--farg-text-pa-handling); box-shadow: var(--skugga-1); }
.knapp--primar:hover { background: var(--farg-handling-hover); color: var(--farg-text-pa-handling); }
.knapp--primar:active { background: var(--farg-handling-aktiv); transform: translateY(1px); }
.knapp--sekundar { background: transparent; color: var(--farg-sekundar); border-color: var(--farg-sekundar); }
.knapp--sekundar:hover { background: var(--farg-sekundar-hover-yta); color: var(--farg-sekundar); }
.knapp--sekundar:active { transform: translateY(1px); }
.knapp--text { background: none; color: var(--farg-lank); padding-inline: var(--rum-2); text-decoration: underline; text-underline-offset: 0.18em; }
.knapp--text:hover { color: var(--farg-lank-hover); }
.knapp--bred { width: 100%; }
.knapp:disabled, .knapp[aria-disabled="true"] {
  background: var(--farg-disabled-yta); color: var(--farg-disabled-text); border-color: transparent;
  box-shadow: none; cursor: not-allowed; transform: none;
}
.knapprad { display: flex; flex-wrap: wrap; gap: var(--rum-3); align-items: center; }

/* ---------- Brödsmulor ---------- */
.brodsmulor { font-size: var(--typ-s); padding-block: var(--rum-4); }
.brodsmulor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-2); }
.brodsmulor li { display: inline-flex; align-items: center; gap: var(--rum-2); max-width: none; color: var(--farg-text-dampad); }
.brodsmulor li + li::before { content: "/"; content: "/" / ""; color: var(--farg-text-dampad); }
.brodsmulor a { color: var(--farg-lank); }
.brodsmulor [aria-current="page"] { color: var(--farg-text-dampad); }

/* ---------- Kort ---------- */
.kort {
  position: relative; background: var(--farg-yta); border: var(--kort-kant, 1px solid var(--farg-linje));
  border-top: var(--kort-topplinje, var(--kort-kant, 1px solid var(--farg-linje)));
  border-radius: var(--radie-l); padding: var(--rum-5); box-shadow: var(--skugga-1);
  transition: box-shadow var(--tid-bas) var(--kurva), transform var(--tid-bas) var(--kurva), border-color var(--tid-bas) var(--kurva);
}
.kort h3 { font-size: var(--typ-l); margin-bottom: var(--rum-2); }
.kort p { font-size: var(--typ-s); color: var(--farg-text-dampad); }
.kort--lank:hover { box-shadow: var(--skugga-2); border-color: var(--farg-linje-ui); }
@media (prefers-reduced-motion: no-preference) { .kort--lank:hover { transform: translateY(-2px); } }
.kort--lank a.kort__lank { text-decoration: none; color: var(--farg-text); }
.kort--lank a.kort__lank::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* hela kortet klickbart */
.kort--lank a.kort__lank:focus-visible { outline: none; }
.kort--lank:has(a.kort__lank:focus-visible) { outline: var(--fokus-bredd) solid var(--farg-fokus); outline-offset: var(--fokus-avstand); }
.kort__ikon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radie-m); display: grid; place-items: center;
  background: var(--farg-yta-gron-ljus); color: var(--farg-rubrik-accent); margin-bottom: var(--rum-4);
}
.kort__ikon svg { width: 1.5rem; height: 1.5rem; }
.kort__fot { margin-top: var(--rum-4); font-size: var(--typ-s); font-weight: 600; color: var(--farg-lank); }

/* ---------- Förtroenderad ---------- */
.loftesrad { background: var(--farg-yta-sand); border-block: 1px solid var(--farg-linje); }
.loftesrad ul { list-style: none; margin: 0; padding: var(--rum-4) 0; display: grid; gap: var(--rum-3); }
.loftesrad li { display: flex; gap: var(--rum-3); align-items: flex-start; font-size: var(--typ-s); font-weight: 550; max-width: none; }
.loftesrad svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--farg-rubrik-accent); margin-top: 0.15em; }
@media (min-width: 48rem) { .loftesrad ul { grid-template-columns: repeat(3, 1fr); gap: var(--rum-5); padding-block: var(--rum-5); } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--rum-6) var(--rum-sektion); }
.hero__rutnat { display: grid; gap: var(--rum-6); align-items: start; }
.hero__text h1 { margin-bottom: var(--rum-4); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--rum-2) var(--rum-4); margin-top: var(--rum-5); font-size: var(--typ-s); color: var(--farg-text-dampad); }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--rum-2); }
.hero__meta svg { width: 1rem; height: 1rem; color: var(--farg-rubrik-accent); }
@media (min-width: 64rem) {
  .hero { padding-top: var(--rum-8); }
  .hero__rutnat { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--rum-8); }
}

/* ---------- Kalkylator: panel, progress, val ---------- */
.kalkyl {
  background: var(--farg-yta); border: 1px solid var(--farg-linje); border-radius: var(--radie-l);
  box-shadow: var(--skugga-3); padding: var(--rum-5); position: relative;
}
@media (min-width: 48rem) { .kalkyl { padding: var(--rum-6); } }
.kalkyl__huvud { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rum-3); margin-bottom: var(--rum-3); }
.kalkyl__steginfo { font-size: var(--typ-s); color: var(--farg-text-dampad); margin: 0; font-variant-numeric: tabular-nums; }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0 0 var(--rum-5); padding: 0; list-style: none; }
.progress li { height: 4px; border-radius: 2px; background: var(--farg-linje); max-width: none; transition: background var(--tid-lugn) var(--kurva); }
.progress li[data-status="klar"], .progress li[data-status="aktiv"] { background: var(--farg-vald); }
.progress li[data-status="aktiv"] { box-shadow: 0 0 0 1px var(--farg-vald); }
.kalkyl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kalkyl legend { font-family: var(--typ-rubrik); font-weight: var(--rubrik-vikt, 600); font-size: var(--typ-xl); line-height: var(--radhojd-rubrik); padding: 0; margin-bottom: var(--rum-2); }
.kalkyl__hjalp { font-size: var(--typ-s); color: var(--farg-text-dampad); margin-bottom: var(--rum-4); }
.kalkyl__fot { display: flex; justify-content: space-between; align-items: center; gap: var(--rum-3); margin-top: var(--rum-5); flex-wrap: wrap; }
.kalkyl__fot .knapp--primar { margin-left: auto; }
/* Hierarki: stegknappen i kortet är normalstorlek och platt (kortet har redan skugga), så den gröna
   huvudknappen i heron är den enda fyllda knappen med egen skugga och större text. */
.kalkyl .knapp--primar { box-shadow: none; }
.kalkyl__integritet { margin: var(--rum-4) 0 0; font-size: var(--typ-xs); color: var(--farg-text-dampad); display: flex; gap: var(--rum-2); }
.kalkyl__integritet svg { width: 1rem; height: 1rem; flex: none; }

.valkort-lista { display: grid; gap: var(--rum-3); }
@media (min-width: 40rem) { .valkort-lista--tva { grid-template-columns: 1fr 1fr; } }
.valkort {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--rum-1) var(--rum-3); align-items: start;
  padding: var(--rum-4); min-height: var(--malyta-min);
  background: var(--farg-yta); border: 1px solid var(--farg-linje-ui); border-radius: var(--radie-m);
  cursor: pointer; transition: border-color var(--tid-snabb) var(--kurva), background var(--tid-snabb) var(--kurva), box-shadow var(--tid-snabb) var(--kurva);
}
.valkort:hover { border-color: var(--farg-vald); background: var(--farg-yta-sand-ljus); }
.valkort input {
  appearance: none; -webkit-appearance: none; margin: 0.15em 0 0; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--farg-linje-ui); border-radius: 50%; background: var(--farg-yta); display: grid; place-content: center;
}
.valkort input::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--farg-vald); transform: scale(0); transition: transform var(--tid-snabb) var(--kurva); }
.valkort input:checked { border-color: var(--farg-vald); }
.valkort input:checked::before { transform: scale(1); }
.valkort input:focus-visible { outline: var(--fokus-bredd) solid var(--farg-fokus); outline-offset: var(--fokus-avstand); }
.valkort:has(input:checked) { border-color: var(--farg-vald); background: var(--farg-yta-gron-ljus); box-shadow: inset 0 0 0 1px var(--farg-vald); }
.valkort:has(input:focus-visible) { outline: var(--fokus-bredd) solid var(--farg-fokus); outline-offset: var(--fokus-avstand); }
.valkort:has(input:focus-visible) input { outline: none; }
.valkort:has(input:disabled) { cursor: not-allowed; background: var(--farg-disabled-yta); border-color: var(--farg-linje); color: var(--farg-disabled-text); }
.valkort__titel { font-weight: 600; line-height: 1.35; }
.valkort__beskr { grid-column: 2; font-size: var(--typ-s); color: var(--farg-text-dampad); max-width: none; margin: 0; }
.valkort__ikon { position: absolute; right: var(--rum-4); top: var(--rum-4); width: 1.75rem; height: 1.75rem; color: var(--farg-rubrik-accent); opacity: 0.9; }
.valkort--ikon { padding-right: 3.5rem; }

/* Förklaring per val (visuell återkoppling) */
.forklaring {
  margin-top: var(--rum-4); padding: var(--rum-4); border-radius: var(--radie-m);
  background: var(--farg-yta-sand-ljus); border-left: 3px solid var(--farg-vald);
  font-size: var(--typ-s);
}
.forklaring[hidden] { display: none; }
.forklaring p { margin: 0; }
.forklaring__rubrik { font-weight: 650; margin-bottom: var(--rum-1) !important; }
@media (prefers-reduced-motion: no-preference) { .forklaring:not([hidden]) { animation: tona-in var(--tid-lugn) var(--kurva); } }
@keyframes tona-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Felmeddelande vid "Nästa" utan val */
.faltfel { display: flex; gap: var(--rum-2); align-items: flex-start; color: var(--farg-fel); font-weight: 600; font-size: var(--typ-s); margin: var(--rum-3) 0 0; }
.faltfel svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.1em; }
.faltfel[hidden] { display: none; }
.kalkyl fieldset[aria-invalid="true"] .valkort { border-color: var(--farg-fel); }

/* ---------- Resultat ---------- */
.resultat { display: grid; gap: var(--rum-5); }
.resultat__etikett {
  display: inline-flex; align-items: center; gap: var(--rum-2); padding: 0.25rem 0.625rem; border-radius: var(--radie-rund);
  background: var(--farg-varning-yta); color: var(--farg-varning); font-size: var(--typ-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--farg-varning-kant);
}
.intervall { border: 1px solid var(--farg-linje); border-radius: var(--radie-l); background: var(--farg-yta); padding: var(--rum-5); }
.intervall__rubrik { font-family: var(--typ-brod); font-size: var(--typ-s); font-weight: 650; color: var(--farg-text-dampad); margin: 0 0 var(--rum-2); letter-spacing: 0; }
.intervall__belopp { font-family: var(--typ-rubrik); font-size: var(--typ-belopp); font-weight: 600; line-height: 1.1; margin: 0 0 var(--rum-2); font-variant-numeric: lining-nums tabular-nums; }
.intervall__belopp .streck { color: var(--farg-text-dampad); padding-inline: 0.15em; }
.intervall__enhet { font-size: var(--typ-s); color: var(--farg-text-dampad); margin: 0 0 var(--rum-4); }
.intervall__omfang { font-size: var(--typ-s); margin: 0; }
.intervall--dold { background: var(--farg-yta-sand-ljus); border-style: dashed; border-color: var(--farg-linje-ui); }
.intervall--dold .intervall__belopp { font-family: var(--typ-brod); font-size: var(--typ-l); font-weight: 650; color: var(--farg-text); }

.faktorlista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rum-3); }
.faktorlista li { display: grid; grid-template-columns: auto 1fr; gap: var(--rum-1) var(--rum-3); padding: var(--rum-4); background: var(--farg-yta); border: 1px solid var(--farg-linje); border-radius: var(--radie-m); max-width: none; }
.faktorlista__ikon { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--farg-yta-gron-ljus); color: var(--farg-rubrik-accent); font-size: var(--typ-s); font-weight: 700; }
.faktorlista__val { font-weight: 650; }
.faktorlista__effekt { grid-column: 2; font-size: var(--typ-s); color: var(--farg-text-dampad); margin: 0; max-width: none; }
.paverkan { display: inline-block; margin-left: var(--rum-2); padding: 0 0.5rem; border-radius: var(--radie-rund); font-size: var(--typ-xs); font-weight: 700; border: 1px solid currentColor; vertical-align: 0.1em; }
.paverkan--okar { color: var(--farg-varning); }
.paverkan--oklar { color: var(--farg-text-dampad); }
.paverkan--ingen { color: var(--farg-ok); }

/* ---------- Rutor: fakta, källa, info, varning, fel, ok ---------- */
.ruta { border-radius: var(--radie-m); padding: var(--rum-4) var(--rum-5); border: 1px solid var(--farg-linje); background: var(--farg-yta); margin-block: var(--rum-5); max-width: var(--matt-text); }
.ruta > :last-child { margin-bottom: 0; }
.ruta__rubrik { display: flex; align-items: center; gap: var(--rum-2); font-family: var(--typ-brod); font-size: var(--typ-m); font-weight: 700; letter-spacing: 0; margin: 0 0 var(--rum-2); }
.ruta__rubrik svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ruta p, .ruta li { font-size: var(--typ-s); }
.faktaruta { background: var(--farg-yta-sand-ljus); border-color: var(--farg-linje); border-left: 4px solid var(--farg-rubrik-accent); }
.faktaruta .ruta__rubrik { color: var(--farg-rubrik-accent); }
.faktaruta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--rum-2) var(--rum-4); margin: 0; font-size: var(--typ-s); }
.faktaruta dt { font-weight: 650; }
.faktaruta dd { margin: 0; }
.kallruta { background: var(--farg-yta); border-left: 4px solid var(--farg-linje-ui); }
.kallruta ol, .kallruta ul { padding-left: 1.25rem; margin-bottom: var(--rum-3); }
.kallruta li + li { margin-top: var(--rum-2); }
.kallruta__datum { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-4); font-size: var(--typ-xs); color: var(--farg-text-dampad); border-top: 1px solid var(--farg-linje); padding-top: var(--rum-3); margin: 0; }
.kallruta__datum strong { color: var(--farg-text); }
.inforuta { background: var(--farg-info-yta); border-color: transparent; border-left: 4px solid var(--farg-info); }
.inforuta .ruta__rubrik { color: var(--farg-info); }
.varningsruta { background: var(--farg-varning-yta); border-color: var(--farg-varning-kant); border-left-width: 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rum-2); align-items: start; }
.varningsruta .ruta__rubrik { color: var(--farg-varning); margin: 0; }
.varningsruta > .ruta__rubrik + p { margin-top: 0; }
.varningsruta .ruta__rubrik svg { margin-top: 0.15em; }
.felruta { background: var(--farg-fel-yta); border-color: var(--farg-fel); border-left-width: 4px; }
.felruta .ruta__rubrik { color: var(--farg-fel); }
.okruta { background: var(--farg-ok-yta); border-color: transparent; border-left: 4px solid var(--farg-ok); }
.okruta .ruta__rubrik { color: var(--farg-ok); }

/* Uppdaterad-rad (sidnivå). Ikon och datum är löpande text, inte två flexrader. */
.uppdaterad { font-size: var(--typ-s); color: var(--farg-text-dampad); margin: var(--rum-4) 0 0; }
.uppdaterad svg { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.35rem; vertical-align: -0.15em; color: var(--farg-rubrik-accent); }
.uppdaterad span { display: inline; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---------- Tagg ---------- */
.tagg { display: inline-flex; align-items: center; gap: var(--rum-1); padding: 0.125rem 0.5rem; border-radius: var(--radie-s); font-size: var(--typ-xs); font-weight: 700; letter-spacing: 0.03em; background: var(--farg-yta-sand-ljus); color: var(--farg-text); border: 1px solid var(--farg-linje-ui); }
.tagg--exempel { background: var(--farg-varning-yta); color: var(--farg-varning); border-color: var(--farg-varning-kant); text-transform: uppercase; }

/* ---------- Numrerade steg ---------- */
.steglista { list-style: none; margin: 0; padding: 0; counter-reset: steg; display: grid; gap: var(--rutnat-glapp); }
.steglista > li { counter-increment: steg; position: relative; padding: var(--rum-5); padding-top: calc(var(--rum-5) + 2.75rem); background: var(--farg-yta); border: 1px solid var(--farg-linje); border-radius: var(--radie-l); max-width: none; }
.steglista > li::before {
  content: counter(steg); position: absolute; top: var(--rum-5); left: var(--rum-5);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--typ-rubrik); font-weight: 600; font-size: 1.125rem;
  color: var(--farg-rubrik-accent); border: 2px solid var(--farg-rubrik-accent);
}
.steglista h3 { font-size: var(--typ-l); margin-bottom: var(--rum-2); }
.steglista p { font-size: var(--typ-s); color: var(--farg-text-dampad); margin-bottom: var(--rum-2); }
.steglista__vem { font-size: var(--typ-xs) !important; font-weight: 650; color: var(--farg-text) !important; margin: 0 !important; }
@media (min-width: 48rem) { .steglista--rad { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }

/* ---------- Jämförelsekort ---------- */
.jamforelse { display: grid; gap: var(--rutnat-glapp); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.jamforelse__kort { background: var(--farg-yta); border: 1px solid var(--farg-linje); border-radius: var(--radie-l); padding: var(--rum-5); display: flex; flex-direction: column; }
.jamforelse__kort h3 { font-size: var(--typ-l); margin-bottom: var(--rum-2); }
.jamforelse__kort dl { margin: var(--rum-3) 0 var(--rum-4); display: grid; gap: var(--rum-3); font-size: var(--typ-s); }
.jamforelse__kort dt { font-weight: 650; font-size: var(--typ-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--farg-text-dampad); }
.jamforelse__kort dd { margin: 0; }
.jamforelse__kort .lank-pil { margin-top: auto; }

/* ---------- Tabell ---------- */
.tabell-rull { overflow-x: auto; margin-block: var(--rum-5); border: 1px solid var(--farg-linje); border-radius: var(--radie-m); background: var(--farg-yta); }
.tabell-rull:focus-visible { outline-offset: 2px; }
.tabell { width: 100%; border-collapse: collapse; font-size: var(--typ-s); margin: 0; min-width: 36rem; }
.tabell caption { caption-side: top; text-align: left; padding: var(--rum-4) var(--rum-4) var(--rum-2); font-weight: 650; color: var(--farg-text); }
.tabell th, .tabell td { padding: var(--rum-3) var(--rum-4); text-align: left; vertical-align: top; border-top: 1px solid var(--farg-linje); }
.tabell thead th { background: var(--farg-yta-sand-ljus); font-weight: 650; font-size: var(--typ-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--farg-text-dampad); white-space: nowrap; }
.tabell tbody tr:hover { background: var(--farg-yta-sand-ljus); }
.tabell td.tal, .tabell th.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--farg-linje); max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--farg-linje); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--rum-4);
  padding: var(--rum-4) var(--rum-1); min-height: var(--malyta-min); font-weight: 650; font-size: var(--typ-m);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--tid-bas) var(--kurva); color: var(--farg-rubrik-accent);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--farg-lank); }
.faq__svar { padding: 0 var(--rum-1) var(--rum-5); }
.faq__svar p { font-size: var(--typ-m); }

/* ---------- Illustration ---------- */
.illustration { margin: 0; }
.illustration figcaption { font-size: var(--typ-s); color: var(--farg-text-dampad); margin-top: var(--rum-3); max-width: 50rem; }
.illu-mark { fill: var(--illu-mark); }
.illu-mark-djup { fill: var(--illu-mark-djup); }
.illu-grus { fill: var(--illu-grus); }
.illu-grundvatten { fill: var(--illu-grundvatten); }
.illu-gras { fill: var(--illu-gras); }
.illu-hus { fill: var(--illu-hus); }
.illu-tank { fill: var(--illu-tank); }
.illu-vatten { fill: var(--illu-vatten); }
.illu-linje { stroke: var(--illu-linje); fill: none; }
.illu-text { fill: var(--farg-text); font-family: var(--typ-brod); font-size: 13px; font-weight: 600; }
.illu-text-dampad { fill: var(--farg-text-dampad); font-family: var(--typ-brod); font-size: 12px; }
.illu-ledare { stroke: var(--farg-text-dampad); stroke-width: 1; fill: none; stroke-dasharray: 2 3; }
.illu-flode { stroke: var(--illu-vatten); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }
@media (prefers-reduced-motion: no-preference) { .illu-flode { animation: flode 3s linear infinite; } }
@keyframes flode { to { stroke-dashoffset: -24; } }

/* ---------- Sidfot ---------- */
.sidfot { background: var(--farg-yta-djup); color: var(--farg-text-pa-djup); padding-block: var(--rum-8) var(--rum-6); margin-top: var(--rum-sektion); font-size: var(--typ-s); }
.sidfot a { color: var(--farg-text-pa-djup); }
.sidfot a:hover { color: var(--farg-text-pa-djup); text-decoration-thickness: 2px; }
.sidfot__rutnat { display: grid; gap: var(--rum-6); }
@media (min-width: 48rem) { .sidfot__rutnat { grid-template-columns: 2fr 1fr 1fr; } }
.sidfot h2 { font-family: var(--typ-brod); font-size: var(--typ-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--farg-text-dampad-pa-djup); margin-bottom: var(--rum-3); }
.sidfot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rum-2); }
.sidfot p { color: var(--farg-text-dampad-pa-djup); }
.sidfot__botten { border-top: 1px solid color-mix(in srgb, var(--farg-text-pa-djup) 18%, transparent); margin-top: var(--rum-6); padding-top: var(--rum-4); display: flex; flex-wrap: wrap; gap: var(--rum-3) var(--rum-5); color: var(--farg-text-dampad-pa-djup); }

/* ---------- Under uppbyggnad ---------- */
.tomt { text-align: left; max-width: 40rem; padding: var(--rum-6); border: 1px dashed var(--farg-linje-ui); border-radius: var(--radie-l); background: var(--farg-yta); }
.tomt__ikon { display: block; width: 3rem; height: 3rem; color: var(--farg-rubrik-accent); margin-bottom: var(--rum-4); }
.tomt__ikon svg { display: block; width: 100%; height: 100%; }
.sidinnehall { padding-bottom: var(--rum-sektion); }
.intervall details { margin: var(--rum-3) 0; font-size: var(--typ-s); }
.intervall summary, .kallruta > summary { cursor: pointer; font-weight: 650; color: var(--farg-lank); min-height: var(--malyta-min); display: flex; align-items: center; }
.intervall details ul { padding-left: 1.25rem; margin: var(--rum-2) 0 0; }
.intervall details li + li { margin-top: var(--rum-1); }
.kalkyl legend:focus-visible, .resultat h2:focus-visible { outline-offset: 4px; }
.resultat h3 { font-size: var(--typ-l); }

/* ---------- Logga (variant C, låst) ----------
   Källa: logo/kallfiler/README.md (slutlig). Ljust/mörkt och dator/mobil väljs i
   ett <picture> med <source media>; ingen JS, inga tema-attribut.
   Dator 60 px (minst 56), mobil < 64rem kompaktversion 38 px (36–40). */
.logga { display: inline-block; line-height: 0; }
.logga img { display: block; height: 60px; width: auto; }
@media (max-width: 63.99rem) { .logga img { height: 38px; } }
/* Sidfoten är alltid mörk: logo-mork.svg, minst 56 px (taglinen får inte bli < ca 10,5 px). */
.sidfot .logga img, .sidfot .logga__fot { height: 56px; width: auto; display: block; margin-bottom: var(--rum-4); }

/* ---------- Illustration, tillägg ---------- */
.illu-halvgenom{opacity:.35}.illu-kant{stroke:var(--illu-linje)}.illu-ror-inre{stroke:var(--illu-tank);fill:none}.illu-slam{fill:var(--illu-mark-djup)}.illu-grus-korn circle{fill:var(--illu-mark-djup)}
.illu-droppar path{stroke:var(--illu-vatten);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 5}
.illu-nummer{fill:var(--farg-rubrik-accent)}.illu-nummer-text{fill:var(--farg-yta);font:700 13px system-ui,sans-serif}

/* ---------- Mobil ovan vecket (startsidan) ----------
   Kalkylatorns första fråga ska börja synas på en 390×844-skärm. */
.kalkyl__steginfo { white-space: nowrap; }
/* Överrubriken i kalkylatorn bryts aldrig mitt i. Blir raden för smal (under ca 340 px)
   flyttas "Steg 1 av 7" till en egen rad i stället. Verifierat i 390 px. */
.kalkyl__huvud { flex-wrap: wrap; row-gap: var(--rum-1); }
.kalkyl__huvud .overrubrik { white-space: nowrap; margin-bottom: 0; }
/* Rad med flera pil-länkar */
.lankrad { display: flex; flex-wrap: wrap; gap: var(--rum-3) var(--rum-5); }
@media (max-width: 47.99rem) {
  .hero { padding-top: var(--rum-5); }
  .hero__meta, .hero .uppdaterad { margin-top: var(--rum-3); }
  .hero__rutnat { gap: var(--rum-5); }
}
/* Ikonstorlek i små etiketter (ikonen ärver textfärg) */
.resultat__etikett svg, .tagg svg { width: 1rem; height: 1rem; flex: none; }
@media (max-width: 29.99rem) {
  .kalkyl__huvud { column-gap: var(--rum-2); }
  .kalkyl__huvud .overrubrik { letter-spacing: 0.03em; }
}
/* 340 px: logga och menyknapp på en rad, sidhuvudet cirka 65 px. */
@media (max-width: 21.25rem) {
  .js .sidhuvud__inre { gap: var(--rum-2); }
  .sidhuvud > .behallare { padding-inline: 0.5rem; }
  .sidhuvud .logga { min-width: 0; max-width: 11.25rem; }
  .sidhuvud .logga img { max-width: 100%; width: auto; height: auto; max-height: 38px; }
  .menyknapp { flex: none; white-space: nowrap; padding-inline: var(--rum-2); gap: var(--rum-1); }
}
/* Exempelkorten ritas in av skriptet. Höjden är uppmätt så att korten inte skjuter ner sidan. */
.js #kalkylator-intervall { min-height: 1902px; }
@media (min-width: 21.25rem) { .js #kalkylator-intervall { min-height: 1821px; } }
@media (min-width: 22.5rem) { .js #kalkylator-intervall { min-height: 1739px; } }
@media (min-width: 23.4375rem) { .js #kalkylator-intervall { min-height: 1712px; } }
@media (min-width: 24.375rem) { .js #kalkylator-intervall { min-height: 1686px; } }
@media (min-width: 25.75rem) { .js #kalkylator-intervall { min-height: 1665px; } }
@media (min-width: 27rem) { .js #kalkylator-intervall { min-height: 1556px; } }
@media (min-width: 30rem) { .js #kalkylator-intervall { min-height: 1426px; } }
@media (min-width: 32rem) { .js #kalkylator-intervall { min-height: 1374px; } }
@media (min-width: 37.5rem) { .js #kalkylator-intervall { min-height: 1274px; } }
@media (min-width: 40rem) { .js #kalkylator-intervall { min-height: 1240px; } }
@media (min-width: 43.75rem) { .js #kalkylator-intervall { min-height: 1165px; } }
@media (min-width: 48rem) { .js #kalkylator-intervall { min-height: 1171px; } }
@media (min-width: 56.25rem) { .js #kalkylator-intervall { min-height: 1070px; } }
@media (min-width: 80rem) { .js #kalkylator-intervall { min-height: 867px; } }

/* ---------- Hero-illustration (dekor, inline-SVG från illustration/hero-avlopp.svg) ----------
   Tunn linje, 1,5 px oavsett skala (vector-effect: non-scaling-stroke). Färg via tokens, så mörkt läge följer
   prefers-color-scheme. Ingen animation. */
.hero__illu { margin: 0 0 var(--rum-4); }
.hero__illu svg { display: block; width: 20rem; max-width: 100%; height: auto; }
.hero-illu__linje { stroke: var(--illu-hero-linje); }
.hero-illu__vatten { stroke: var(--illu-hero-vatten); }
@media (max-width: 63.99rem) { .hero__illu svg { width: 16rem; } }
@media (max-width: 47.99rem) {
  /* Döljs på mobil. Provat i 120 px (390×844): detaljerna blev grötiga och första svarsalternativet
     hamnade under vecket. Utan illustration syns frågan och början av första alternativet. */
  .hero__illu { display: none; }
}

/* ---------- Hero med foto (beslut 2026-10-24, ersätter hero-illustrationen ovanför rubriken) ----------
   Fotot ligger som ett brett band överst i heron och tonar nedåt ut i --farg-bakgrund. Kalkylatorkortet
   (ogenomskinligt) lappar över bandets nedre del till höger; text börjar först där övertoningen täcker
   minst 92 %, så kontrasten håller oavsett vad fotot visar (mätt med bygg/hero_kontrast.py).
   Mörkt läge: fotot dämpas (brightness/saturate) och tonas mot den mörka bakgrunden. Ingen animation. */
.hero--foto {
  --hero-foto-h: clamp(26rem, 34vw, 40rem);           /* bandets höjd */
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--hero-foto-h) * 0.45);       /* kortet börjar här */
}
.hero__foto { position: absolute; inset: 0 0 auto; height: var(--hero-foto-h); z-index: -1; }
.hero__foto picture, .hero__foto img { display: block; width: 100%; height: 100%; }
.hero__foto img { object-fit: cover; object-position: 50% 0%; } /* rutan är beskuren i bilder.py så att takfot och fönster ligger överst */
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(var(--hero-tona) / 0) 0%, rgb(var(--hero-tona) / 0) 30%,
    rgb(var(--hero-tona) / 0.5) 46%, rgb(var(--hero-tona) / var(--hero-tona-text)) 58%,
    rgb(var(--hero-tona) / 1) 78%);
}
/* Sekundärknappen under kortet finns bara på mobil (se nedan). */
@media (min-width: 48rem) { .hero__guide { display: none; } }
/* Texten börjar där täckningen är minst --hero-tona-text (58 % av bandet). */
.hero--foto .hero__text { padding-top: calc(var(--hero-foto-h) * 0.15); }
@media (max-width: 63.99rem) { .hero--foto .hero__text { padding-top: calc(var(--hero-foto-h) * 0.13); } }
@media (prefers-color-scheme: dark) { .hero__foto img { filter: brightness(0.7) saturate(0.85); } }
@media (max-width: 47.99rem) {
  /* Mobil: lågt bildband, 10rem = 160 px. Övre 45 % är klart (fasad och fönster), överrubriken ligger
     i bandets nedersta del där täckningen är minst 92 %. */
  .hero--foto { --hero-foto-h: 10rem; padding-top: 8rem; }
  .hero--foto .hero__text { padding-top: 0; }
  .hero__foto img { object-position: 50% 0%; }
  .hero__foto::after { background: linear-gradient(180deg, rgb(var(--hero-tona) / 0) 0%, rgb(var(--hero-tona) / 0) 45%,
      rgb(var(--hero-tona) / 0.6) 64%, rgb(var(--hero-tona) / var(--hero-tona-text)) 78%, rgb(var(--hero-tona) / 1) 90%); }
  /* Mobil (beslut 2026-10-25): kalkylatorn är den enda handlingen ovan vecket. Ingressen döljs (samma innehåll
     finns i sektionerna nedanför). "Utforska kostnaderna" döljs och ersätts av den kantade sekundärknappen
     "Läs hela kostnadsguiden" direkt under kalkylatorkortet. Bara en av de två är synlig per bredd
     (display: none tar bort den andra även för skärmläsare), så länken dubbleras aldrig. */
  .hero--foto .ingress { display: none; }
  .hero--foto .hero__huvudknapp { display: none; }
  .hero--foto .knapprad { margin: 0; }
  .hero--foto .knapprad .knapp { width: 100%; }
  /* Uppdaterad/källor visas under kalkylatorkortet på mobil så att första svarsalternativet ryms ovan vecket. */
  .hero--foto .hero__rutnat { row-gap: var(--rum-3); }
  .hero--foto .overrubrik { margin-bottom: 0; }
  .hero--foto .hero__text { display: contents; }
  .hero--foto .hero__rutnat > .kalkyl { order: 1; }
  .hero--foto .hero__guide { order: 1; }
  .hero--foto .uppdaterad { order: 2; margin-top: 0; }
  .hero--foto h1, .hero--foto .ingress { margin-bottom: 0; }
}

/* Linjeillustrationen (illustration/hero-avlopp.svg) som litet märke i sektionen "Så går det till". */
.sektion__illu { margin-bottom: var(--rum-4); }
.sektion__illu svg { display: block; width: 15rem; max-width: 100%; height: auto; }
@media (max-width: 47.99rem) { .sektion__illu svg { width: 12rem; } }

/* Fotokreditering i sidfoten (krävs av CC BY-SA). */
.sidfot__kredit { font-size: var(--typ-xs, 0.8125rem); margin: var(--rum-5) 0 0; max-width: 60rem; }