@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-600-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');}

:root{
  --marin:#0F2B43; --vit:#FFFFFF; --kram:#F6F3EC; --sand:#ECE9E0;
  --skiffer:#4A5866; --amber-text:#8A5200; --amber:#C77600; --amber-ljus:#F4A524;
  --sten:#6A7682; --dekor:#B7C0C9; --gran:#2E6B4E;
  --fjord:#285A86; --fjord-yta:#E7EEF5; --tegel:#A3372C; --tegel-yta:#F8E9E6;
  --rubrik:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;
  --text:'Inter',Arial,Helvetica,sans-serif;
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vit);color:var(--marin);font-family:var(--text);font-size:18px;line-height:1.6}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--amber-text);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--rubrik);font-weight:700;color:var(--marin);margin:0 0 16px}
h3,h4{font-weight:600}
strong,b{font-weight:600}
h1{font-size:34px;line-height:1.15}
h2{font-size:28px;line-height:1.2}
h3{font-size:22px;line-height:1.35}
@media (min-width:768px){h1{font-size:44px}h2{font-size:34px}h3{font-size:26px}}
p{margin:0 0 16px;max-width:68ch}
.liten{font-size:15px;line-height:1.5;color:var(--skiffer)}

:focus{outline:none}
:focus-visible{outline:3px solid var(--fjord);outline-offset:2px;border-radius:2px}
.mork :focus-visible{outline-color:var(--amber-ljus)}

.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--marin);color:var(--vit);padding:12px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{top:16px;outline:3px solid var(--fjord);outline-offset:2px}
.honungsfalla{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.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}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 24px}}

.sidhuvud{background:var(--vit);border-bottom:1px solid var(--sand)}
.sidhuvud .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.logga{display:inline-block;padding:4px;margin-left:-16px}
.logga img{width:200px}
.meny ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px}
.meny a{color:var(--marin);text-decoration:none;font-weight:500;font-size:16px;line-height:1.5;padding:10px 8px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.meny a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menyknapp{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:8px 16px;border:1px solid var(--sten);border-radius:8px;background:var(--vit);color:var(--marin);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
@media (max-width:599px){
  .js .menyknapp:not([hidden]){display:inline-flex}
  .js .meny{display:none}
  .js .meny.oppen{display:block;flex-basis:100%}
  .js .meny ul{display:none}
  .js .meny ul.oppen{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--sand);padding-top:8px}
  .js .meny ul.oppen a{justify-content:flex-start;width:100%}
}
.meny a:hover{text-decoration:underline}

.sektion{padding:64px 0}
@media (min-width:768px){.sektion{padding:96px 0}}
.kram{background:var(--kram)}
.sand{background:var(--sand)}
.ingress{font-size:20px;line-height:1.55;max-width:60ch}

.hjalte.sektion{padding:32px 0 64px}
@media (min-width:768px){.hjalte.sektion{padding:48px 0 96px}}
.hjalte .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.hjalte .wrap > *{min-width:0;max-width:100%}
@media (min-width:900px){.hjalte .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
#hjalte-rubrik{font-size:clamp(1.75rem,1rem + 2vw,2.75rem);line-height:1.15;text-wrap:balance}

.exempel{margin:0;max-width:100%;min-width:0;background:var(--vit);border:1px solid var(--sand);border-left:4px solid var(--amber);border-radius:8px;padding:24px}
.exempel .etikett{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--skiffer);margin:0 0 12px}
.exempel .bock{width:22px;height:22px;flex:none}
.exempel blockquote{margin:0}
.exempel blockquote p{font-size:17px;font-variant-numeric:tabular-nums}

.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:8px;font-family:var(--text);font-weight:600;font-size:18px;line-height:1.2;text-decoration:none;cursor:pointer;border:2px solid var(--marin)}
.knapp-primar{background:var(--marin);color:var(--vit)}
.knapp-primar:hover{background:#1A3D5C}
.knapp-sekundar{background:transparent;color:var(--marin)}
.knappar{display:flex;flex-wrap:wrap;gap:12px}
.knapp-text{background:none;border:none;color:var(--amber-text);text-decoration:underline;font:inherit;font-size:15px;cursor:pointer;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}

.steg{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:24px;counter-reset:steg}
@media (min-width:768px){.steg{grid-template-columns:repeat(3,1fr)}}
.steg li{background:var(--vit);border:1px solid var(--sand);border-radius:12px;padding:24px;counter-increment:steg}
.steg li::before{content:counter(steg);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--marin);color:var(--vit);font-family:var(--rubrik);font-weight:700;margin-bottom:12px}

.priskort{max-width:480px;background:var(--vit);border:1px solid var(--sand);border-radius:12px;padding:40px 32px;margin-top:32px}
@media (max-width:420px){.priskort{padding:32px 20px}}
.priskort .pris{font-weight:600;font-size:34px;line-height:1.2;font-variant-numeric:tabular-nums;margin:0 0 8px}
.priskort .pris{margin-bottom:24px}
.priskort .pris-inkl{display:block;font-weight:500;font-size:20px;line-height:1.5;font-variant-numeric:tabular-nums;margin-top:8px}
.priskort ul{padding-left:0;list-style:none;margin:0 0 16px}
.priskort li{padding-left:28px;position:relative;margin-bottom:8px}
.priskort li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:2px solid var(--marin);border-bottom:2px solid var(--marin);transform:rotate(-45deg)}
.nowrap{white-space:nowrap}

fieldset:first-of-type{margin-top:16px}
.formular{background:var(--vit);border:1px solid var(--sand);border-radius:12px;padding:32px 24px;max-width:720px;margin-top:32px}
@media (min-width:768px){.formular{padding:40px}}
fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
legend{font-weight:600;font-size:18px;margin:0 0 12px;padding:0}
.val{display:flex;flex-wrap:wrap;gap:8px}
.val input{position:absolute;opacity:0;width:1px;height:1px}
.val label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--sten);border-radius:999px;background:var(--vit);color:var(--marin);cursor:pointer;font-size:16px;user-select:none}
.val label::before{content:"";width:16px;height:16px;border:1px solid var(--sten);border-radius:50%;flex:none;background:var(--vit)}
.val input:checked + label{background:var(--marin);color:var(--vit);border-color:var(--marin)}
.val input:checked + label::before{content:"✓";border-color:var(--vit);background:var(--vit);color:var(--marin);font-size:12px;line-height:14px;text-align:center;font-weight:600}
.val input:focus-visible + label{outline:3px solid var(--fjord);outline-offset:2px}
.rensa{margin-top:4px}
.falt{margin:0 0 24px}
.falt label{display:block;font-weight:600;margin-bottom:8px}
.falt input[type=email]{width:100%;max-width:480px;min-height:48px;padding:10px 14px;font:inherit;color:var(--marin);background:var(--vit);border:1px solid var(--sten);border-radius:8px}
.falt input[aria-invalid=true]{border:2px solid var(--tegel)}
.hjalp{font-size:15px;line-height:1.5;color:var(--skiffer);margin:8px 0 0}
.fel{color:var(--tegel);background:var(--tegel-yta);border-radius:6px;padding:8px 12px;font-size:15px;margin:8px 0 0;max-width:480px}
.fel[hidden]{display:none}
.kryss{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;min-height:44px;margin:0 0 8px}
.kryss input{width:24px;height:24px;margin:0;accent-color:var(--marin);cursor:pointer}
.kryss label{font-weight:500;display:flex;align-items:center;min-height:44px;cursor:pointer}
.kryss + .hjalp{margin:0 0 24px 36px}
.status{margin-top:16px;border-radius:8px;padding:0}
.status:not(:empty){padding:12px 16px}
.status.ok{background:var(--kram);color:var(--gran);border:1px solid var(--gran)}
.status.fel-status{background:var(--tegel-yta);color:var(--tegel)}

.utkast{background:var(--fjord-yta);color:var(--fjord);border-left:4px solid var(--fjord);padding:16px 20px;border-radius:6px;margin:0 0 24px}
.utkast strong{color:var(--fjord);font-weight:600}

.sidfot{background:var(--marin);color:var(--kram);padding:48px 0}
.sidfot a{color:var(--amber-ljus)}
.sidfot .wrap{display:grid;gap:24px}
@media (min-width:768px){.sidfot .wrap{grid-template-columns:1fr 1fr;align-items:start}}
.sidfot img{width:180px}
.sidfot-logga{margin-left:-12px}
.sidfot ul{list-style:none;margin:0;padding:0}
.sidfot li{margin:0}
.sidfot nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.sidfot p{color:var(--kram)}

.textsida{max-width:760px}

.textsida h2{margin-top:40px}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
html{scroll-behavior:smooth}

.fel:not([hidden]),.status.ok,.status.fel-status{display:flex;gap:8px;align-items:flex-start}
.fel::before,.status.ok::before,.status.fel-status::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:no-repeat center/20px 20px}
.fel::before,.status.fel-status::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3372C' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E")}
.status.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E")}

.raknare .formular{margin-top:0}
.falt input.kort{width:100%;max-width:320px;min-height:48px;padding:10px 14px;font:inherit;color:var(--marin);background:var(--vit);border:1px solid var(--sten);border-radius:8px;font-variant-numeric:tabular-nums}
.falt input.kort[aria-invalid=true]{border:2px solid var(--tegel)}
.fel-sammanfattning{background:var(--tegel-yta);color:var(--tegel);border-left:4px solid var(--tegel);border-radius:6px;padding:16px 24px;margin:0 0 24px}
.fel-sammanfattning a{color:var(--tegel)}
.fel-sammanfattning ul{margin:8px 0 0;padding-left:24px}
.fel-sammanfattning li a{display:block;padding:8px 0;min-height:44px}
.fel-sammanfattning .fel-rubrik{display:flex;gap:8px;align-items:flex-start;font-weight:600;margin:0}
.fel-sammanfattning .fel-rubrik::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;background:no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3372C' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E")}
.resultat{background:var(--sand);border-radius:12px;padding:32px 24px;margin-top:32px;max-width:720px}
.utrakning{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.utrakning th{text-align:left;font-weight:400;padding:8px 16px 8px 0;vertical-align:top}
.utrakning td{text-align:right;white-space:nowrap;padding:8px 0;vertical-align:top}
.utrakning tr{border-bottom:1px solid var(--dekor)}
.utrakning .summa-rad th,.utrakning .summa-rad td{font-weight:600}
.utrakning .total-rad th{font-weight:600;font-size:20px;line-height:1.35;border-bottom:0;padding-top:16px}
.utrakning .total-rad td{font-weight:600;font-size:36px;line-height:1.2;font-variant-numeric:tabular-nums;padding-top:12px}
.utrakning .total-rad{border-bottom:0}
@media (max-width:599px){
  .resultat{padding:24px 16px}
  .utrakning,.utrakning tbody,.utrakning tr{display:block;width:100%}
  .utrakning th,.utrakning td{display:block;text-align:left;padding-right:0;white-space:normal}
  .utrakning td{padding-top:0;overflow-wrap:anywhere}
  .utrakning .total-rad td{font-size:36px}
}
@media (max-width:359px){.utrakning .total-rad td{font-size:30px}}
.obs{background:var(--fjord-yta);color:var(--fjord);border-radius:8px;padding:24px;margin-top:32px;max-width:720px}
.obs p,.obs li{color:var(--fjord)}
.obs .liten{color:var(--fjord)}
.obs-rubrik{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px}
.obs .ikon{width:22px;height:22px;flex:none}
.obs ul{padding-left:24px;margin:0 0 16px}
.obs strong{font-weight:600}
.annat-falt{margin:16px 0 0}
.utrakning .forklaring{display:block;font-size:15px;line-height:1.5;color:var(--skiffer);margin-top:4px}
.forbehall-kort{margin:32px 0 0}
.forbehall-kort + .resultat{margin-top:16px}
.knapp-sekundar:hover{background:var(--vit)}
h2.obs-rubrik{font-family:var(--text);font-size:18px;line-height:1.5;color:var(--fjord);margin:0 0 8px}
.falt[hidden],.kryss[hidden]{display:none}
.villkorsrad{margin:16px 0 0}
.hjalp.varning{color:var(--amber-text);font-weight:500}

body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
.dela{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.knapp-liten{min-height:44px;padding:8px 16px;font-size:16px;gap:8px}
.knapp-liten .ikon{width:20px;height:20px;flex:none}
.dela-reserv{min-height:44px;width:100%;max-width:420px;padding:8px 12px;font:inherit;font-size:16px;border:1px solid var(--sten);border-radius:8px;color:var(--marin);background:var(--vit)}
.dela-reserv[hidden]{display:none}
.dela-status{margin:0;font-size:15px;color:var(--gran);font-weight:500}
.dela-status:empty{display:none}
.liten-rubrik{font-family:var(--text);font-size:16px;line-height:1.5;margin:24px 0 4px;color:var(--marin)}
.i-ditt-namn{margin-top:48px;max-width:720px}
.integritetsrad{margin-top:24px;max-width:720px}
.priskort .pris-huvud{padding-left:0;margin-bottom:16px}
.priskort .pris-huvud::before{display:none}
.priskort .pris-huvud .pris{display:block;font-weight:600;font-size:34px;line-height:1.2;font-variant-numeric:tabular-nums;margin:0 0 4px}
h1,h2,h3{overflow-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none}
@media (max-width:400px){h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}}

.tabell-wrap{overflow-x:auto;margin:0 0 24px}
.tabell-wrap:focus-visible{outline:3px solid var(--fjord);outline-offset:2px}
.tabell-wrap table{border-collapse:collapse;min-width:640px;font-size:16px;line-height:1.5}
.tabell-wrap th,.tabell-wrap td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--dekor)}
.tabell-wrap th{font-weight:600;background:var(--sand)}
.textsida ol,.textsida ul{margin:0 0 16px;padding-left:24px}
#sa-fungerar-det .sa-rubrik{font-family:var(--rubrik);font-weight:700;color:var(--marin);font-size:24px;line-height:1.2;max-width:40ch;margin:0 0 16px;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual}
#sa-fungerar-det .sa-etikett{font-family:var(--rubrik);font-weight:600;color:var(--skiffer);font-size:20px;line-height:1.35;margin:0}
#sa-fungerar-det .steg{margin-top:32px}
#sa-fungerar-det .steg h4{font-family:var(--rubrik);font-weight:600;color:var(--marin);font-size:20px;line-height:1.35;margin:0 0 16px;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
#sa-fungerar-det .steg + p{margin-top:24px}
@media (min-width:401px){#sa-fungerar-det .sa-rubrik{font-size:28px}#sa-fungerar-det .steg h4{font-size:22px}}
@media (min-width:768px){
  #sa-fungerar-det .sa-rubrik{font-size:34px;margin-bottom:24px}
  #sa-fungerar-det .sa-etikett{font-size:22px}
  #sa-fungerar-det .steg{margin-top:48px}
  #sa-fungerar-det .steg h4{font-size:26px}
  #sa-fungerar-det .steg + p{margin-top:32px}
}
.datum{white-space:nowrap}
