/* v4.css  (webb v135)  Gemensam meny, sidfot och typografi för alla publika sidor.
 * Laddas sist i <head>, efter sidans egna stilar. Klasser med prefixet an- hör till den
 * gemensamma mallen (v4_mall.py). Resten är de gemensamma måtten från granskningen:
 * rubrikskala, avstånd, radlängd, knappar och tryckytor.
 */
:root{--an-navy:#0A2540;--an-ink:#0E1B2C;--an-soft:#41506A;--an-blue:#2563EB;--an-blue-deep:#1D4ED8;--an-line:#E2E8F2;
  --an-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gap-rubrik:16px;--gap-stycke:14px;--gap-h3:8px;--gap-ingress:22px;--sektion:80px}
@media (max-width:639px){:root{--sektion:56px}}

/* ---------- meny ---------- */
.an-top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);border-bottom:1px solid var(--an-line);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
.an-top .an-nav{position:static;display:block;margin:0;padding:0;background:none;border:0;box-shadow:none;height:auto;font-family:var(--an-font)}
.an-top .an-in{max-width:1140px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px;min-height:68px;box-sizing:border-box}
.an-top .an-brand{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;text-decoration:none;border:0;padding:0}
.an-top .an-brand svg{display:block}
.an-top .an-panel{display:flex;align-items:center;gap:18px;margin-left:auto}
.an-top .an-lankar{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.an-top .an-lankar li{margin:0;padding:0;list-style:none;max-width:none}
.an-top .an-lankar a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--an-ink);font-size:15px;font-weight:500;
  text-decoration:none;border-radius:8px;border:0;background:none;white-space:nowrap}
.an-top .an-lankar a:hover{color:var(--an-blue-deep);text-decoration:underline;text-underline-offset:4px}
.an-top .an-lankar a[aria-current="page"]{color:var(--an-blue-deep);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.an-top .an-cta,.an-fot .an-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;
  background:var(--an-blue);color:#fff!important;font:700 15.5px/1.2 var(--an-font);text-decoration:none!important;border:0;white-space:nowrap}
.an-top .an-cta:hover,.an-fot .an-cta:hover{background:var(--an-blue-deep)}
.an-top a:focus-visible,.an-top button:focus-visible,.an-fot a:focus-visible{outline:3px solid var(--an-blue);outline-offset:3px;border-radius:8px}
.an-fot a:focus-visible{outline-color:#fff}
.an-top .an-cta-mobil{display:none}
.an-top .an-meny{display:none;min-height:44px;min-width:44px;padding:0 16px;border:1.5px solid var(--an-line);border-radius:10px;background:#fff;
  color:var(--an-navy);font:600 15px/1 var(--an-font);cursor:pointer;margin-left:auto}
.an-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* språkväljaren */
.an-top .an-sprak{position:relative}
.an-top .an-sprak-knapp{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1.5px solid var(--an-line);border-radius:10px;
  background:#fff;color:var(--an-navy);font:600 15px/1 var(--an-font);cursor:pointer}
.an-top .an-pil{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.an-top .an-sprak-knapp[aria-expanded="true"] .an-pil{transform:rotate(-135deg) translate(-2px,-2px)}
.an-top .an-sprak-lista{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:6px;list-style:none;background:#fff;
  border:1px solid var(--an-line);border-radius:12px;box-shadow:0 16px 40px -18px rgba(10,37,64,.35);z-index:70}
.an-top .an-sprak-lista.an-oppen{display:block}
.an-top .an-sprak-lista li{margin:0;padding:0;list-style:none;max-width:none}
.an-top .an-sprak-lista a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--an-ink);text-decoration:none;font:500 15px/1.2 var(--an-font)}
.an-top .an-sprak-lista a:hover{background:#F5F7FB}
.an-top .an-sprak-lista a[aria-current="true"]{font-weight:700;color:var(--an-blue-deep)}
@media (max-width:1179px){
  .an-top .an-meny{display:inline-flex;align-items:center;margin-left:0}
  .an-top .an-cta-mobil{display:inline-flex;margin-left:auto;min-height:44px;padding:0 14px;font-size:14.5px}
  .an-top .an-in{gap:10px}
  .an-top .an-panel .an-cta{display:none}
  .an-top .an-panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:12px;margin:0;
    padding:12px 24px 20px;background:#fff;border-bottom:1px solid var(--an-line);box-shadow:0 20px 40px -24px rgba(10,37,64,.35);max-height:calc(100vh - 68px);overflow:auto}
  .an-top .an-panel.an-oppen{display:flex}
  .an-top .an-in{position:relative}
  .an-top .an-lankar{flex-direction:column;align-items:stretch;gap:0}
  .an-top .an-lankar a{display:flex;padding:0 4px;border-bottom:1px solid var(--an-line);border-radius:0;font-size:16px}
  .an-top .an-sprak-knapp{display:none}
  .an-top .an-sprak-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:static;box-shadow:none;border:0;padding:0;min-width:0}
  .an-top .an-sprak-lista a{justify-content:center;border:1.5px solid var(--an-line);padding:0 6px;font-size:14.5px}
  .an-top .an-sprak-lista a[aria-current="true"]{border-color:var(--an-blue);background:#EAF0FE}
  .an-top .an-panel .an-cta{min-height:52px;font-size:16.5px}
}
@media (max-width:420px){.an-top .an-in{padding:10px 16px}.an-top .an-brand svg{width:118px;height:auto}.an-top .an-meny{padding:0 12px}}

/* ---------- sidfot ---------- */
.an-fot{background:var(--an-navy);color:#C9D5E3;font-family:var(--an-font);margin:0;padding:0;border:0}
.an-fot .an-fot-in{max-width:1140px;margin:0 auto;padding:56px 24px 36px;box-sizing:border-box}
.an-fot a{color:#fff}
.an-fot .an-fot-kontakt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-bottom:32px;border-bottom:1px solid #1E3E5C}
.an-fot .an-fot-rad{display:inline-flex;align-items:center;min-height:44px;font-size:16.5px;font-weight:600;color:#fff;text-underline-offset:4px}
.an-fot .an-fot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px;padding:36px 0 28px;border-bottom:1px solid #1E3E5C}
.an-fot .an-fot-brand p{font-size:15px;line-height:1.6;color:#C9D5E3;margin:14px 0 0;max-width:34ch}
.an-fot .an-fot-brand > a:first-child{display:inline-flex;min-height:44px;align-items:center}
.an-fot .an-fot-a11y{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:14.5px;color:#fff}
.an-fot .an-fot-h{font:700 13px/1.3 var(--an-font);letter-spacing:.08em;text-transform:uppercase;color:#9DB0C6;margin:0 0 8px;padding:0}
.an-fot ul{list-style:none;margin:0;padding:0}
.an-fot li{margin:0;padding:0;max-width:none;list-style:none}
.an-fot .an-fot-kol a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:15px;line-height:1.35;color:#DCE5F0;text-decoration:none;box-sizing:border-box}
.an-fot .an-fot-kol a:hover{color:#fff;text-decoration:underline}
.an-fot .an-fot-botten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-top:24px}
.an-fot .an-fot-botten p{margin:0;font-size:14px;line-height:1.6;color:#9DB0C6;max-width:none}
.an-fot .an-fot-botten a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
@media (max-width:900px){.an-fot .an-fot-grid{grid-template-columns:1fr 1fr}.an-fot .an-fot-brand{grid-column:1 / -1}}
@media (max-width:520px){.an-fot .an-fot-grid{grid-template-columns:1fr 1fr;gap:24px 16px}.an-fot .an-fot-in{padding:44px 20px 28px}.an-fot .an-fot-kol a{font-size:14.5px}}

/* ---------- typografi: en skala för alla mallar ----------
 * H1 54 (startsidan 66), H2 för sektioner 38, H2 i långa texter (villkor, policy, guider) 28,
 * H2 i kort 22, H3 20. Mobil: H1 34, H2 28, H2 i text 24, H2 i kort 21, H3 19.
 * !important behövs eftersom de tretton gamla mallarna har egna, mer specifika rubrikregler. */
h1,h2,h3{text-wrap:balance}
main h1,main h2,main h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:639px){main h1,main h2,main h3{overflow-wrap:anywhere}}
main .wrap > *{min-width:0}
main h1{font-size:54px!important;line-height:1.08!important;letter-spacing:-1.2px}
main h1.an-h1-start{font-size:66px!important}
main h2{font-size:38px!important;line-height:1.15!important;letter-spacing:-.6px}
main.an-artikel h2{font-size:28px!important;line-height:1.2!important;letter-spacing:-.3px}
main :is(.kontakt-kort,.pricebox,aside,.vr-col,.valpuff-copy,.toc,.contact,.kallor,.tier,.mod,.card,.prow,.bigstep,.an-kort) h2{font-size:22px!important;line-height:1.25!important;letter-spacing:-.2px}
main h3:not(.kh){font-size:20px!important;line-height:1.3!important}
main .sr-only{font-size:1px!important}
@media (max-width:639px){
  main h1,main h1.an-h1-start{font-size:34px!important;letter-spacing:-.6px}
  main h2{font-size:28px!important}
  main.an-artikel h2{font-size:24px!important}
  main :is(.kontakt-kort,.pricebox,aside,.vr-col,.valpuff-copy,.toc,.contact,.kallor,.tier,.mod,.card,.prow,.bigstep,.an-kort) h2{font-size:21px!important}
  main h3:not(.kh){font-size:19px!important}
}
/* avstånd: rubrik -> text 16, stycke -> stycke 14, H3 -> text 8, H1 -> ingress 22 */
main h2:has(+ p){margin-bottom:0!important}
main h2 + p{margin-top:var(--gap-rubrik)!important}
main p:has(+ p){margin-bottom:0!important}
main p + p{margin-top:var(--gap-stycke)!important}
main h3:has(+ p){margin-bottom:0!important}
main h3 + p{margin-top:var(--gap-h3)!important}
main h1:has(+ p){margin-bottom:0!important}
main h1 + p{margin-top:var(--gap-ingress)!important}
/* sektioner: 80 px, 56 px under 640 px */
main > section,main > .sec,main > article > section{padding-top:var(--sektion)!important;padding-bottom:var(--sektion)!important}
/* radlängd: högst cirka 80 tecken per rad (60ch) */
main p,main li{max-width:60ch!important}
main :is(.an-fri,.cta-band,.cta,.kcta,.band,.endcta,.an-snart) :is(p,li),main [style*="text-align:center"] :is(p,li){margin-left:auto;margin-right:auto}
main :is(td,th,.tier,.prow,nav,.an-fri,.scan-note,.kkort,.film-stills,.result) :is(p,li){max-width:none!important}

/* ---------- knappar: två klasser i hela bygget ---------- */
main .btn-p,main .btn-s,main .btn,.kcta .btn-p,.kcta .btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;
  border-radius:12px;font-family:var(--an-font);font-size:16.5px;font-weight:700;line-height:1.2;text-decoration:none;box-sizing:border-box;text-align:center}
main .btn-s{border-width:1px}
main .btn-p:focus-visible,main .btn-s:focus-visible,main .btn:focus-visible{outline:3px solid var(--an-blue);outline-offset:3px}

/* ---------- priser: kolumner och knappar i linje, Mest populär ---------- */
.prow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 240px!important}
.prow .act{justify-self:stretch!important}
.prow .act a{display:flex!important;justify-content:center;width:100%;white-space:normal}
.prow.an-pop{background:#F5F8FF;border:2px solid var(--an-blue)!important;border-radius:14px;padding:22px 20px!important;margin:10px -22px}
@media (max-width:720px){.prow.an-pop{margin:10px 0}}
.an-badge{display:inline-block;background:#E7F3EC;color:#116330;font:700 13px/1 var(--an-font);padding:6px 10px;border-radius:999px;margin-bottom:8px}
.tier .an-badge{position:absolute;top:-12px;right:20px;margin:0}
.tier{border-width:2px!important}
.tier:not(.pop){border-color:var(--an-line)!important}
.tier .who{min-height:4.3em!important}
.an-utan{display:block;font-weight:700;color:var(--an-ink);margin-top:6px}
@media (max-width:720px){.prow{grid-template-columns:1fr!important}.prow .act a{width:auto}}

/* ---------- boka-raden under hjälten ---------- */
.an-bokrad{margin:18px 0 0;font-size:16px;font-weight:600;max-width:none}
.an-bokrad a{color:var(--an-blue-deep);text-underline-offset:4px}

/* ---------- länkar i innehållsförteckningar ska vara understrukna ---------- */
main .toc a,main nav[aria-label*="nnehåll"] a,main .innehall a{text-decoration:underline}

/* ---------- vänteläget för /k/ och /bevakas när motorn saknar endpointen ---------- */
.an-snart{max-width:680px;margin:0 auto;padding:var(--sektion) 24px;text-align:left}
.an-snart h1{font-size:44px}
.an-snart .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:639px){.an-snart h1{font-size:32px}}

/* ---------- tryckytor 44 px: flikar på Så funkar det, brödsmulor ---------- */
main .crumbs a,main nav.crumbs a{display:inline-flex;align-items:center;min-height:44px}
main [role="tablist"] a,main [role="tab"],main .flikar a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- snabbkollen (kolla.js) ---------- */
.kkort .katgard{margin:0;padding:10px 12px;font-size:15px;line-height:1.5;background:#F5F8FF;border-radius:8px;max-width:none!important}
.knot{font-size:15px;color:var(--an-soft);margin-top:12px}
.kexempel-rad{margin:12px 0 0}
.kexempel-knapp{background:none;border:0;padding:0;min-height:44px;color:var(--an-blue-deep);font:600 15.5px/1.3 var(--an-font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.kexempel-knapp:focus-visible{outline:3px solid var(--an-blue);outline-offset:3px;border-radius:4px}
main nav.toc a,main .toc a{display:block;min-height:44px;padding:10px 0;box-sizing:border-box;line-height:1.4}
.crumbs a,nav.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.tabnav a{min-height:44px!important;display:inline-flex;align-items:center;box-sizing:border-box}
.kstat .n a{display:inline-flex;align-items:center;min-height:44px}