/* Silvergen – designspec "Grannen" (_docs/design.md) */

@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url('/assets/fonts/young-serif-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #231d21;
  --muted: #574d53;
  --line: #e2d9df;
  --plum: #7a2e5c;
  --plum-dark: #561f40;
  --lilac: #f5eff3;
  --sun: #fbe7a6;
  --focus: #2f6f8f;
  --bg: #ffffff;
  --ton-1: #e6dde3;
  --ton-2: #dde5e2;
  --ton-3: #e7e1d6;
  --ton-4: #d6e0e6;
  --ton-ikon: #7a5d70;
  --lh: 1.55;
  --ls: normal;
  --stycke: 1em;
  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r-stor: 22px;
  --r-kort: 16px;
  --r-bild: 10px;
  --bredd: 1280px;
  --sida: 24px;
  color-scheme: light;
}
html[data-kontrast="hog"] {
  --ink: #000000; --muted: #111111; --line: #000000; --plum: #4a1236; --plum-dark: #2e0a21;
  --lilac: #ffffff; --sun: #ffe27a; --ton-1: #f2f2f2; --ton-2: #f2f2f2; --ton-3: #f2f2f2; --ton-4: #f2f2f2; --ton-ikon: #000000;
}
html[data-luft="1"] { --lh: 1.85; --ls: 0.02em; --stycke: 1.25em; }

html { font-size: 118.75%; -webkit-text-size-adjust: 100%; } /* 19 px vid webbläsarens standard 16 px */
html[data-text="1"] { font-size: 136.5%; }
html[data-text="2"] { font-size: 154.4%; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: var(--lh); letter-spacing: var(--ls); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; font-family: var(--serif); font-weight: 400; line-height: 1.18; margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0 0 var(--stycke); }
a { color: var(--plum); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--plum-dark); text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; letter-spacing: inherit; }

.behallare { max-width: var(--bredd); margin: 0 auto; padding: 0 var(--sida); }
.ikon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ikon--stor { width: 4rem; height: 4rem; stroke-width: 1.4; }

.hoppa { position: absolute; left: 1rem; top: -100px; z-index: 10; background: var(--plum); color: #fff; padding: 0.6em 1em; border-radius: 99px; font-weight: 700; }
.hoppa:focus { top: 0.6rem; color: #fff; }

/* Sidhuvud */
.sidhuvud { border-bottom: 1px solid var(--line); background: var(--bg); }
.sidhuvud__rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.logga { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--serif); font-size: 1.9rem; color: var(--plum); text-decoration: none; line-height: 1; margin-right: auto; }
.logga:hover { color: var(--plum-dark); }
.huvudmeny ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.05rem; }
.huvudmeny a { display: block; padding: 0.55rem 0; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.huvudmeny a:hover { color: var(--plum); border-bottom-color: var(--line); }
.huvudmeny a[aria-current] { border-bottom-color: var(--plum); color: var(--plum); }
.knapp-installningar, .knapp-meny { display: inline-flex; align-items: center; gap: 0.45em; min-height: 48px; padding: 0 1.05em; border-radius: 99px; border: 2px solid var(--plum); background: var(--bg); color: var(--plum); font-weight: 700; cursor: pointer; }
.knapp-installningar[aria-expanded="true"], .knapp-meny[aria-expanded="true"] { background: var(--plum); color: #fff; }
.knapp-meny { display: none; }

.lasinstallningar { background: var(--lilac); border-top: 1px solid var(--line); }
.lasinstallningar__rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.1rem 2.4rem; padding-top: 1.1rem; padding-bottom: 1.2rem; }
.lasinstallningar__grupp { display: flex; flex-direction: column; gap: 0.4rem; }
.lasinstallningar__rubrik { font-weight: 700; }
.lasinstallningar__not { flex: 1 1 14rem; margin: 0; color: var(--muted); font-size: 0.9rem; }
.knapprad { display: flex; gap: 0.5rem; }
.val { min-height: 48px; min-width: 48px; padding: 0 1em; border-radius: 99px; border: 2px solid var(--plum); background: var(--bg); color: var(--plum); font-weight: 700; cursor: pointer; }
.val[aria-pressed="true"] { background: var(--plum); color: #fff; }

/* Menyn får en egen rad när den inte ryms bredvid logga och knapp (smalare fönster eller större text) */
@media (max-width: 1290px) { .huvudmeny { order: 5; flex-basis: 100%; } }
html[data-text] .huvudmeny { order: 5; flex-basis: 100%; }

@media (max-width: 860px) {
  :root { --sida: 16px; }
  .sidhuvud__rad { gap: 0.5rem; }
  .knapp-meny { display: inline-flex; }
  .huvudmeny { display: none; order: 5; flex-basis: 100%; }
  .huvudmeny.oppen { display: block; }
  .huvudmeny ul { flex-direction: column; gap: 0; }
  .huvudmeny a { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .knapp-installningar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .knapp-installningar { padding: 0 0.8em; }
}

/* Brödsmulor */
.brodsmulor ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin: 1.1rem 0 0; padding: 0; font-size: 0.9rem; color: var(--muted); }
.brodsmulor li + li::before { content: '›'; margin-right: 0.5rem; color: var(--muted); }

/* Knappar */
.knapp { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.55em 1.35em; border-radius: 99px; background: var(--plum); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--plum); }
.knapp:hover { background: var(--plum-dark); border-color: var(--plum-dark); color: #fff; }
.knapp--kontur { background: transparent; color: var(--ink); border-color: var(--ink); }
.knapp--kontur:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.knapp--mork { background: var(--ink); border-color: var(--ink); }
.knapp--mork:hover { background: #000; border-color: #000; }
.knapprad-lankar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lank-knapp { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 0.2em; background: none; border: 0; color: var(--plum); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* Bilder och tonade platshållare */
.bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.bild--tom { display: flex; align-items: center; justify-content: center; color: var(--ton-ikon); min-height: 10rem; }
.ton-1 { background: var(--ton-1); } .ton-2 { background: var(--ton-2); } .ton-3 { background: var(--ton-3); } .ton-4 { background: var(--ton-4); }

/* Hero */
.hero { display: flex; flex-wrap: wrap; border-radius: var(--r-stor); overflow: hidden; background: var(--lilac); margin-top: 1rem; }
.hero__bild { flex: 999 1 26rem; min-height: 19rem; display: flex; }
.hero__bild > * { flex: 1; }
.hero__text { flex: 1 1 18rem; min-width: 0; padding: 2.1rem 2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero__text h1 { font-size: 2.2rem; margin: 0.3rem 0 0.9rem; }
.hero__text .ingress { color: var(--muted); }
.hero--sektion .hero__bild { min-height: 15rem; }
.kicker { margin: 0; font-weight: 700; color: var(--plum); }

/* Sektioner på startsida/hubbar */
.sektion { padding-top: 3rem; }
.sektion > h2, .sektion__huvud h2 { font-size: 1.8rem; margin-bottom: 1.1rem; }
.sektion__huvud { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 2rem; }
.kortrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1.6rem; }
.kort { display: block; color: var(--ink); text-decoration: none; }
.kort__bild { aspect-ratio: 4 / 3; border-radius: var(--r-kort); min-height: 0; height: auto; }
.kort img.kort__bild { height: auto; }
.kort__rubrik { font-size: 1.4rem; margin-top: 0.6rem; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; }
.kort__text { color: var(--muted); margin: 0.3rem 0 0; }
.kort:hover .kort__rubrik { color: var(--plum); }

.duo { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.duo > * { flex: 1 1 20rem; min-width: 0; }
.solruta { padding: 1.8rem; border-radius: 18px; background: var(--sun); }
.solruta h2 { font-size: 1.6rem; margin: 0.3rem 0 0.6rem; }
.ramruta { padding: 1.8rem; border-radius: 18px; border: 2px solid var(--line); }
.ramruta h2 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.fragelista { list-style: none; margin: 0; padding: 0; }
.fragelista li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.fragelista li:last-child { border-bottom: 0; }
.fragelista a { font-weight: 600; }

.band { display: flex; flex-wrap: wrap; border-radius: var(--r-stor); overflow: hidden; border: 1px solid var(--line); }
.band__text { flex: 1 1 20rem; min-width: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.band__text h2 { font-size: 1.7rem; margin: 0.3rem 0 0.6rem; }
.band__bild { flex: 999 1 26rem; min-height: 17rem; display: flex; }
.band__bild > * { flex: 1; }

.produktrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1.2rem; }
.produktkort { display: block; padding: 0.8rem; border-radius: var(--r-kort); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.produktkort .bild { aspect-ratio: 1 / 1; border-radius: var(--r-bild); min-height: 0; height: auto; }
.produktkort__namn { display: block; font-weight: 700; margin-top: 0.5rem; text-decoration: underline; }
.produktkort__text { display: block; color: var(--muted); font-size: 0.9rem; }

/* Artikel */
.artikel__huvud { max-width: 46rem; padding-top: 1.6rem; }
.artikel__huvud h1 { font-size: 2.15rem; margin: 0.35rem 0 0.8rem; }
.ingress { font-size: 1.15rem; color: var(--muted); }
.artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; color: var(--muted); font-size: 0.92rem; }
.artikel__bild { margin: 1rem 0 2rem; border-radius: var(--r-stor); overflow: hidden; aspect-ratio: 21 / 8; display: flex; }
.artikel__bild > * { flex: 1; }
.artikel__kropp { max-width: 40rem; }
.text h2 { font-size: 1.65rem; margin: 2.4rem 0 0.8rem; scroll-margin-top: 1rem; }
.text h3 { font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }
.text ul, .text ol { padding-left: 1.3em; margin: 0 0 var(--stycke); }
.text li { margin-bottom: 0.4em; }
.text blockquote { margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 4px solid var(--plum); font-family: var(--serif); font-size: 1.2rem; }

.innehallsforteckning details { background: var(--lilac); border-radius: var(--r-kort); padding: 1rem 1.3rem; margin-bottom: 1.5rem; }
.innehallsforteckning summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.innehallsforteckning ol { margin: 0.4rem 0 0.2rem; padding-left: 1.3em; }
.innehallsforteckning li { margin: 0.3rem 0; }

.ruta { background: var(--lilac); border-radius: var(--r-kort); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.ruta > :last-child { margin-bottom: 0; }
.ruta h3, .ruta h2 { margin-top: 0 !important; font-size: 1.2rem; margin-bottom: 0.5rem; }
.ruta--sol { background: var(--sun); }
.ruta--varning { background: var(--bg); border: 3px solid var(--plum); }

.steg { list-style: none; counter-reset: steg; padding-left: 0 !important; }
.steg > li { counter-increment: steg; position: relative; padding: 0 0 0 3.2rem; margin-bottom: 1.1rem; min-height: 2.4rem; }
.steg > li::before { content: counter(steg); position: absolute; left: 0; top: -0.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--plum); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.checklista { list-style: none; padding-left: 0 !important; }
.checklista li { position: relative; padding-left: 2rem; }
.checklista li::before { content: ''; position: absolute; left: 0.1rem; top: 0.35em; width: 1rem; height: 0.55rem; border-left: 3px solid var(--plum); border-bottom: 3px solid var(--plum); transform: rotate(-45deg); }

.tabellbox { overflow-x: auto; margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--r-kort); }
.tabellbox table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.tabellbox caption { text-align: left; font-weight: 700; padding: 0.9rem 1rem 0.3rem; }
.tabellbox th, .tabellbox td { text-align: left; vertical-align: top; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.tabellbox thead th { background: var(--lilac); }
.tabellbox tbody tr:last-child td, .tabellbox tbody tr:last-child th { border-bottom: 0; }

.faq { margin-top: 2.8rem; }
.faq h2, .kallor h2 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 0.85rem 2rem 0.85rem 0; position: relative; list-style: none; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.3rem; top: 0.6rem; font-size: 1.4rem; color: var(--plum); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 1rem; }
.kallor { margin-top: 2.6rem; font-size: 0.95rem; }
.kallor ul { padding-left: 1.2em; }
.kallor__not { color: var(--muted); }

.relaterat { margin-top: 3.4rem; padding: 2.6rem 0 3rem; background: var(--lilac); }
.relaterat h2 { font-size: 1.6rem; margin-bottom: 1.2rem; }

/* Mall (utskrivbar) */
.mall { border: 2px solid var(--ink); border-radius: var(--r-kort); padding: 1.6rem; margin: 2rem 0; background: #fff; }
.mall h2, .mall h3 { margin-top: 1.4rem !important; }
.mall > :first-child { margin-top: 0 !important; }
.falt { display: flex; align-items: flex-end; gap: 0.8rem; margin: 0 0 1rem; }
.falt-etikett { flex: none; }
.linje { flex: 1; border-bottom: 1.5px solid var(--ink); min-height: 1.6em; }
.kryss { position: relative; padding-left: 1.9em; }
.ruta-kryss { position: absolute; left: 0; top: 0.22em; width: 1.1em; height: 1.1em; border: 2px solid var(--ink); border-radius: 3px; }
.skrivyta { min-height: 7rem; border: 1.5px solid var(--ink); border-radius: 6px; margin: 0 0 1rem; background: repeating-linear-gradient(transparent 0 1.9rem, var(--line) 1.9rem calc(1.9rem + 1px)); }

/* Sidfot */
.sidfot { margin-top: 3rem; background: var(--plum); color: #fff; }
.relaterat + .sidfot { margin-top: 0; }
.sidfot__rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.4rem 3rem; padding-top: 2.4rem; padding-bottom: 2.4rem; font-size: 0.95rem; }
.sidfot__om { flex: 1 1 20rem; max-width: 34rem; }
.sidfot__om p { color: #f4e8ef; }
.sidfot__logga { display: flex; align-items: center; gap: 0.4em; font-family: var(--serif); font-size: 1.7rem; color: #fff !important; margin-bottom: 0.4rem; }
.sidfot a { color: #fff; }
.sidfot__lankar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
html[data-kontrast="hog"] .sidfot { background: #000; }

/* Utskrift */
@media print {
  html { font-size: 12pt; }
  .sidhuvud, .lasinstallningar, .sidfot, .relaterat, .brodsmulor, .artikel__bild, .innehallsforteckning, .lank-knapp, .hoppa, .knapp { display: none !important; }
  body { color: #000; background: #fff; }
  .artikel__kropp, .artikel__huvud { max-width: none; }
  a { color: #000; }
  .text a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; word-break: break-all; }
  .faq details { break-inside: avoid; }
  .faq details:not([open]) > p { display: block; }
  .ruta, .solruta { border: 1px solid #000; background: #fff !important; }
  .typ-mall .artikel__huvud, .typ-mall .text > :not(.mall), .typ-mall .faq, .typ-mall .kallor { display: none !important; }
  .typ-mall .mall { border: 0; padding: 0; margin: 0; }
  .mall h2, .mall h3 { break-after: avoid; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.artikel__luft { height: 1.6rem; }

.logga img, .sidfot__logga img { width: 1.2em; height: 1.2em; flex: none; }
.hero__bild, .band__bild { position: relative; }
.hero__bild > img.bild, .band__bild > img.bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__lasnu { margin: 0.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; font-weight: 600; }
@media (max-width: 860px) { .hero__bild, .band__bild { flex-basis: 100%; min-height: 0; aspect-ratio: 4 / 3; } }
/* Samtyckesruta (statistik) – lika framträdande Ja/Nej */
.samtycke { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 var(--sida) 1rem; pointer-events: none; }
.samtycke__ruta { pointer-events: auto; max-width: 46rem; margin: 0 auto; background: var(--bg); border: 2px solid var(--plum); border-radius: 18px; padding: 1.2rem 1.4rem; box-shadow: 0 6px 30px rgba(35, 29, 33, 0.18); }
.samtycke__rubrik { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.4rem; }
.samtycke__ruta .knapp { cursor: pointer; font: inherit; font-weight: 700; }
.sidfot__knapp { background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font: inherit; }
@media print { .samtycke { display: none !important; } }
.ruta--ansok { border: 2px solid var(--plum); background: var(--bg); margin-top: 2.4rem; }
.nedladdning { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0.6rem; }
.nedladdning__not { color: var(--muted); font-size: 0.92rem; }

/* Räknare (/verktyg/) – stora, tydliga fält. Se _docs/raknare.md */
.raknare { background: var(--lilac); border-radius: var(--r-kort); padding: 1.4rem 1.5rem; margin: 1.6rem 0; }
.raknare h2, .raknare h3 { margin-top: 0 !important; }
.raknare__falt { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1.1rem; max-width: 26rem; }
.raknare__falt label, .raknare__falt legend { font-weight: 700; }
.raknare__hjalp { color: var(--muted); font-size: 0.9rem; margin: 0; }
.raknare input[type="number"], .raknare input[type="text"], .raknare select {
  font: inherit; font-size: 1.1rem; min-height: 52px; padding: 0.4rem 0.8rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%;
}
.raknare input:focus-visible, .raknare select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.raknare fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.raknare__val { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.raknare__val label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; min-height: 44px; cursor: pointer; }
.raknare__val input { width: 1.3rem; height: 1.3rem; accent-color: var(--plum); }
.raknare button.knapp { cursor: pointer; font: inherit; font-weight: 700; }
.raknare__resultat { background: var(--bg); border: 2px solid var(--plum); border-radius: var(--r-kort); padding: 1.2rem 1.4rem; margin-top: 1.2rem; }
.raknare__resultat[hidden] { display: none; }
.raknare__summa { font-family: var(--serif); font-size: 2rem; line-height: 1.15; color: var(--plum); margin: 0.2rem 0 0.6rem; }
.raknare__resultat table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.95rem; }
.raknare__resultat th, .raknare__resultat td { text-align: left; padding: 0.45rem 0.3rem; border-bottom: 1px solid var(--line); }
.raknare__resultat td:last-child { text-align: right; white-space: nowrap; }
.raknare__fel { color: #8a1c1c; font-weight: 700; }
.raknare-friskrivning ul { margin: 0.2rem 0 0.6rem; }
.raknare-friskrivning__data { margin-bottom: 0.3rem; }
.raknare-lista { list-style: none; padding: 0 !important; display: grid; gap: 0.9rem; }
.raknare-lista li { border: 1px solid var(--line); border-radius: var(--r-kort); padding: 0.9rem 1.1rem; }
.raknare-lista__text { color: var(--muted); font-size: 0.95rem; }
@media print { .raknare form { display: none; } .raknare { background: #fff; padding: 0; } }
.raknarkort { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.raknarkort a { display: flex; gap: 0.8rem; align-items: flex-start; height: 100%; padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: var(--r-kort); color: var(--ink); text-decoration: none; }
.raknarkort a:hover { border-color: var(--plum); }
.raknarkort .ikon { width: 2rem; height: 2rem; color: var(--plum); margin-top: 0.1rem; }
.raknarkort strong { text-decoration: underline; text-underline-offset: 0.18em; }
.raknarkort__text { color: var(--muted); font-size: 0.92rem; }
.raknare__resultat { overflow-x: auto; }
.raknare__resultat table:has(th:nth-child(3)), .raknare__resultat table:has(td:nth-child(3)) { min-width: 34rem; }

/* Hjälpmedelssidan: ingång efter behov (hjalpmedel/index.php) */
.behovsrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1.2rem; }
.behov { padding: 1.2rem 1.3rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-kort); background: var(--bg); }
.behov__rubrik { display: flex; align-items: center; gap: 0.5em; font-size: 1.3rem; margin: 0 0 0.4rem; }
.behov__rubrik .ikon { color: var(--plum); flex: none; }
.behov__text { color: var(--muted); margin: 0 0 0.7rem; }
.behov__lankar { list-style: none; padding: 0; margin: 0; }
.behov__lankar li { margin: 0.25rem 0; }
.behov__lankar a { font-weight: 700; }
.behov__las { margin: 0.8rem 0 0.1rem; font-size: 0.9rem; color: var(--muted); }
.behov__lankar--las a { font-weight: 400; }
.behov__ruta { margin-top: 2rem; max-width: 46rem; }

/* Startsidan: Nytt på Silvergen (de fem senast publicerade, senaste_sidor()) */
.nyttlista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 1rem 2rem; }
.nytt { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start; color: var(--ink); text-decoration: none; padding: 0.4rem 0; }
.nytt__bild { width: 100%; aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: var(--r-bild); }
.nytt .bild--tom .ikon { width: 2rem; height: 2rem; }
.nytt__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.nytt__meta { font-size: 0.85rem; font-weight: 700; color: var(--plum); }
.nytt__rubrik { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; }
.nytt__ingress { color: var(--muted); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nytt:hover .nytt__rubrik { color: var(--plum); }
@media (max-width: 600px) { .nytt { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.8rem; } .nytt__rubrik { font-size: 1.1rem; } .nytt__ingress { -webkit-line-clamp: 3; } }

/* ===== Mobil (≤ 600 px): mindre typsnitt och rubriker, smalare utfyllnad, tabeller utan sidscroll (2026-10-07) ===== */
.hero__bild { min-width: 0; flex-basis: min(26rem, 100%); }
@media (max-width: 600px) {
  html { font-size: 112.5%; }                 /* 18 px */
  main { overflow-wrap: break-word; }         /* långa sammansatta ord och snedstreck bryts i stället för att spilla över */
  html[data-text="1"] { font-size: 129.4%; }  /* samma steg som på dator: +15 % */
  html[data-text="2"] { font-size: 146.3%; }  /* +30 % */
  h1, .artikel__huvud h1, .hero__text h1 { font-size: 1.6rem; }
  .text h2, .sektion > h2, .sektion__huvud h2, .faq h2, .kallor h2, .relaterat h2, .solruta h2, .band__text h2 { font-size: 1.35rem; }
  .text h3 { font-size: 1.15rem; }
  .ingress { font-size: 1.05rem; }
  .hero__text { padding: 1.3rem 1.1rem; }
  .ruta { padding: 1rem 0.95rem; }
  .raknare { padding: 1rem 0.85rem; }
  .raknare__resultat { padding: 0.9rem 0.8rem; }
  .raknare__summa { font-size: 1.45rem; overflow-wrap: break-word; hyphens: auto; }
  .raknare__resultat .tabellbox { margin: 0.8rem 0; }
  /* Tabeller: inga minsta bredder – tvåkolumnstabeller ryms, bredare staplas (se tabell--stapla) */
  .tabellbox table, .raknare__resultat table:has(th:nth-child(3)), .raknare__resultat table:has(td:nth-child(3)) { min-width: 0; }
  .tabellbox th, .tabellbox td { padding: 0.55rem 0.7rem; overflow-wrap: break-word; hyphens: auto; }
  .raknare__resultat th, .raknare__resultat td { padding: 0.45rem 0.5rem; }
  .raknare__resultat td:last-child { white-space: normal; min-width: 5.6em; } /* belopp ryms på en rad, längre text bryts */
  /* Sidhuvud på en rad: logga, Meny och Läsinställningar (ikon) */
  .sidhuvud__rad { gap: 0.4rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .logga { font-size: 1.5rem; min-width: 0; }
  .knapp-meny, .knapp-installningar { min-height: 44px; padding: 0 0.75em; flex: none; }
  .huvudmeny { flex-basis: 100%; }
  /* Staplad tabell: varje rad blir ett kort, kolumnrubriken står framför värdet (silvergen.js sätter klass och data-label) */
  table.tabell--stapla, .tabell--stapla tbody, .tabell--stapla tr, .tabell--stapla th, .tabell--stapla td { display: block; width: 100%; }
  .tabell--stapla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabell--stapla caption { display: block; }
  .tabell--stapla tr { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); }
  .tabell--stapla tbody tr:last-child { border-bottom: 0; }
  .tabell--stapla th, .tabell--stapla td { border: 0 !important; padding: 0.12rem 0 !important; text-align: left !important; }
  .tabell--stapla tr > :first-child { font-weight: 700; font-size: 1.02rem; margin-bottom: 0.15rem; }
  .tabell--stapla [data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
}
@media (max-width: 380px) {
  .logga { font-size: 1.35rem; }
  .knapp-meny, .knapp-installningar { padding: 0 0.6em; }
}

/* Annonsruta för affiliateprogram utan feed (inc/annonser.php) – tydligt märkt, lugn och utan butikskänsla */
.annonsruta { margin: 1.8rem 0; padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: var(--r-kort); background: var(--bg); max-width: 40rem; }
.annonsruta__etikett { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.annonsruta__rubrik { margin: 0 0 0.3rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.annonsruta__text { margin: 0 0 0.8rem; color: var(--muted); }
.annonsruta__knapp { min-height: 44px; padding: 0.3em 1.1em; }
.annonsruta .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .annonsruta { display: none; } }

/* AdSense-annonsplatser (inc/adsense.php). Etiketten "Annons" krävs (marknadsföringslagen 9 §). */
.annonsplats { margin: 2.2rem 0; padding-top: 0.5rem; border-top: 1px solid var(--line); clear: both; }
.annonsplats--artikel-slut, .annonsplats--sektion { margin: 2.6rem 0 0; }
.annonsplats__etikett { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.annonsplats ins { min-height: 100px; }
.annonsplats--test .annonsplats__test { display: flex; align-items: center; justify-content: center; min-height: 140px; border: 2px dashed var(--line); border-radius: var(--r-kort); color: var(--muted); font-size: 0.9rem; }
@media print { .annonsplats { display: none !important; } }
.annonsplats:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Högerkolumn på breda skärmar (silvergen.js): produktblocket och/eller sidoannonsen flyttas hit när det
   finns plats för både textkolumnen (40rem) och kolumnen (17rem). Med annons sträcks kolumnen över hela
   artikelkroppen så att annonsen kan följa med när man skrollar. */
.artikel__kropp--sido { display: grid; grid-template-columns: minmax(0, 40rem) minmax(17rem, 21rem); column-gap: clamp(2rem, 4vw, 4rem); max-width: none; align-items: start; }
.artikel__kropp--sido > :not(.sidokolumn) { grid-column: 1; }
.sidokolumn { grid-column: 2; grid-row: 1 / span 30; align-self: start; }
.sidokolumn--fast { position: sticky; top: 1rem; }
.sidokolumn--annons { align-self: stretch; }
.annonsplats--sida { display: none; }
.sidokolumn .annonsplats--sida { display: block; position: sticky; top: 1rem; margin: 0; padding-top: 0; border-top: 0; }
.sidokolumn .produkter + .annonsplats--sida { margin-top: 1.6rem; }
.annonsplats--sida.annonsplats--test .annonsplats__test { width: 300px; min-height: 600px; }