/* =============================================================
   Beredskapsplanleggeren.no – front.css
   Stilark for den nye forsiden (nytt design, oktober 2026).
   Undersidene bruker fortsatt styles.css + design.css.
   Ingen eksterne ressurser: fonter ligger i /fonts, alt virker offline.
   ============================================================= */
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#1A1A1A; --ink-2:#55524D; --muted:#625E57; --line:#E0DCD4;
  --paper:#FFFFFF; --sand:#F7F6F3; --hero:#22242A;
  --accent:#A8341A; --accent-dark:#8C2B15; --gold:#E8B23C; --banner:#FFD23F;
  --ok:#2F7D5B;
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --head:"Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Brukes av checklist.css */
  --signal:var(--accent); --signal-ink:var(--accent); --fjord:var(--ink); --ice:#EFEDE8;
  --banner-h:44px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:300;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
[id]{scroll-margin-top:130px}
@media(min-width:1100px){[id]{scroll-margin-top:96px}}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.skip{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--ink);color:#fff;padding:12px 16px}
.skip:focus{left:8px;top:8px}
.noscript-note{background:var(--ink);color:#fff;padding:12px 16px;text-align:center;font-size:14px}

/* ---------- Knapper ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer}
.btn:hover{background:var(--sand);color:var(--ink)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn--light{border-color:#fff;color:#fff}
.btn--light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.round{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:1px solid var(--ink);background:transparent;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.round:disabled{opacity:.3;cursor:not-allowed}

/* ---------- Varselstripe «Skjer det nå?» ---------- */
.bp-alert{position:relative;z-index:30;background:var(--banner);color:var(--ink);border-bottom:2px solid var(--ink)}
.bp-alert__bar{display:flex;align-items:center;gap:20px;min-height:calc(var(--banner-h) + 4px);padding:0 clamp(16px,3vw,56px);max-width:100%}
.bp-alert__title{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.bp-alert__links{display:none;gap:18px;flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden}
.bp-alert a{color:var(--ink);text-underline-offset:3px}
.bp-alert__more{margin-left:auto}
.bp-alert__more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:14px;font-weight:600}
.bp-alert__more>summary::-webkit-details-marker{display:none}
.bp-alert__more>summary::after{content:"▾"}
.bp-alert__more[open]>summary::after{content:"▴"}
.bp-alert__more .lbl-close,.bp-alert__more[open] .lbl-open{display:none}
.bp-alert__more[open] .lbl-close{display:inline}
.bp-alert__panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 60px);overflow:auto;background:var(--ink);color:#fff;padding:4px clamp(16px,3vw,32px) 24px;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.bp-alert__panel ul{list-style:none;margin:0;padding:0}
.bp-alert__panel li a{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid #3A3835;color:#fff;font-size:17px;text-decoration:none}
.bp-alert__panel li a::after{content:"→";color:var(--gold)}
.bp-alert__label{margin:16px 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9C5BE}
.bp-alert__tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bp-alert__tel a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;background:var(--accent);color:#fff;text-decoration:none}
.bp-alert__tel b{font-size:26px;font-weight:500;line-height:1}
.bp-alert__tel small{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(min-width:1240px){.bp-alert__more{margin-left:0}}
@media(min-width:1240px){.bp-alert__links{display:flex}.bp-alert__more{display:none}}
/* Varselstripen «Skjer det nå?» vises bare på forsidene (sider med
   hero-seksjon). På alle undersider skjules den for å spare plass og uro.
   Faller trygt tilbake til å vise banneret overalt i svært gamle nettlesere. */
body:not(:has(section.hero)) .bp-alert{display:none!important}

/* Nødnummer i «Hjelp i den første timen» */
.nod{margin:0 0 26px;padding:16px 18px;background:var(--sand);border-left:4px solid var(--accent)}
.nod__h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nod__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nod__row a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;padding:6px 4px;background:var(--accent);color:#fff;text-decoration:none}
.nod__row b{font-size:clamp(22px,5.6vw,28px);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.nod__row small{font-size:clamp(10px,2.6vw,12px);letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.2}
.nod__row a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media(hover:hover){.nod__row a:hover{background:var(--accent-dark)}}
@media(min-width:720px){.nod{display:flex;align-items:center;gap:24px;padding:18px 22px}.nod__h{margin:0;flex:1 1 auto}.nod__row{flex:0 0 auto;grid-template-columns:repeat(3,132px);gap:10px}}

/* ---------- Toppmeny ---------- */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #E6E3DD}
.top__bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;min-height:64px}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:12px 0;min-width:0}
.logo b{font-size:clamp(17px,2vw,26px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.logo small{font-size:13px;color:var(--muted)}
@media(max-width:480px){.logo small{display:none}.logo b{letter-spacing:.1em}}
.mainnav{order:3;width:100%;display:flex;gap:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid #E6E3DD}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
@media(min-width:1100px){
  .top__bar{flex-wrap:nowrap;min-height:76px;gap:28px}
  .mainnav{order:0;width:auto;margin-left:auto;border-top:0;gap:24px;overflow:visible}
}

/* Mobil og nettbrett (under 1100 px): stort navn + språk-knapp (uten boks).
   «Meny»-knappen er fjernet her; alt innhold nås ved å bla på siden.
   Tittelen «Beredskapsplanleggeren.no» skaleres så den alltid får plass,
   og brytes heller til to linjer enn å bli kuttet med «…». */
.nav-menu{display:none}
@media(max-width:1099px){
  .top__bar{flex-wrap:nowrap;min-height:62px;gap:12px}
  .top .mainnav{display:none}
  .logo{flex:1 1 auto;padding:10px 0}
  /* Tittelen fyller nå plassen som ble ledig da landkoden ble fjernet
     (språkvelgeren er bare et flagg). Brytes til to linjer ved behov. */
  .logo b{font-size:clamp(15px,calc((100vw - 100px) / 12.5),26px);font-weight:700;letter-spacing:0;text-transform:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.15}
  /* «Meny»-knappen skjules på mobil/nettbrett */
  .nav-menu{display:none}
  /* Språk-velgeren vises i stedet – uten ramme/boks */
  .top .lang-menu{display:block;margin-left:auto}
  .top .lang-menu>summary{border:0;padding:0 4px;gap:7px}
  .nm-ico{display:block;flex:none}
  .nm-ico--close,.nav-menu[open] .nm-ico--open{display:none}
  .nav-menu[open] .nm-ico--close{display:block}
  .nav-menu[open]>summary{background:var(--ink);color:#fff}
  .nm-panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 120px);overflow:auto;background:#fff;border-bottom:2px solid var(--ink);box-shadow:0 24px 40px rgba(0,0,0,.18);padding:4px 16px 22px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .nm-nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink);text-decoration:none}
  .nm-nav a::after{content:"→";color:var(--accent)}
  .nm-h{margin:20px 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .nm-langs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .nm-langs a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px}
  .nm-langs a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .nm-langs .flag{display:block;flex:none;width:21px;height:14px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
}
@media(max-width:359px){.nm-lbl{display:none}.nav-menu>summary{padding:0 11px}}

/* Språkvalg (nedtrekk, virker uten JavaScript) */
.lang-menu{position:relative;margin-left:auto;flex:none}
@media(min-width:1100px){.lang-menu{margin-left:0}}
.lang-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;font-size:13px;font-weight:600;letter-spacing:.08em}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu .flag{display:block;flex:none;width:21px;height:14px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-menu .chev{width:12px;height:12px}
.lang-menu .chev{transition:transform .2s}
.lang-menu[open] .chev{transform:rotate(180deg)}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:40;list-style:none;margin:0;padding:6px;min-width:190px;background:#fff;border:1px solid var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.lang-menu li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;text-decoration:none;font-size:15px}
.lang-menu li a:hover{background:var(--sand);color:var(--ink)}
.lang-menu li a[aria-current="true"]{background:var(--ink);color:#fff}

/* ---------- Toppbilde ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--hero);color:#fff}
.hero__media{position:relative;display:block}
.hero__media img{width:100%;aspect-ratio:4/3;max-height:58vh;object-fit:cover;object-position:50% 45%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,36,42,0) 55%,var(--hero) 100%)}
.hero .wrap{display:flex;flex-direction:column;gap:28px;padding-top:8px;padding-bottom:40px}
.hero__text{display:flex;flex-direction:column;gap:16px}
.hero .eyebrow{color:var(--gold);margin:0}
.hero h1{font-size:clamp(2.7rem,8.4vw,3.9rem);font-weight:500;line-height:1.04;color:#fff}
.hero p{color:#F0EFEC;max-width:560px}
.hero__actions{display:flex;flex-direction:column;gap:10px}
.hero__stats{display:flex;gap:32px}
.stat b{display:block;font-family:var(--head);font-size:40px;font-weight:300;line-height:1}
.stat span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#F0EFEC}
@media(min-width:600px){.hero__actions{flex-direction:row;flex-wrap:wrap}}
@media(min-width:1000px){
  .hero__media{position:absolute;top:0;bottom:0;left:44%;right:0;z-index:-1}
  .hero__media img{height:100%;max-height:none;aspect-ratio:auto}
  .hero__media::after{background:linear-gradient(90deg,var(--hero) 0%,rgba(34,36,42,.55) 18%,rgba(34,36,42,0) 45%)}
  .hero .wrap{min-height:620px;justify-content:center;gap:44px;padding-top:64px;padding-bottom:64px}
  .hero__text,.hero__stats{max-width:520px}
  .hero h1{font-size:clamp(3.4rem,5vw,4.7rem)}
  .hero p{font-size:18px}
  .stat b{font-size:56px}
}

/* ---------- Sesongblokk ---------- */
.season{background:var(--ok);color:#fff}
.season-box{padding:18px 0 18px 52px;position:relative}.season-clip{position:absolute;left:6px;top:12px;width:34px;height:34px;transform:rotate(-24deg);color:#fff;pointer-events:none}.season-clip svg{display:block;width:100%;height:100%}
.season-box h2{font-size:22px;font-weight:400;margin-bottom:4px}

/* ---------- Seksjoner ---------- */
.section{padding:48px 0}
.section--sand{background:var(--sand)}
.section h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:10px}
.section__intro{color:var(--ink-2);max-width:640px;margin-bottom:24px}
@media(min-width:1000px){.section{padding:72px 0}}

/* ---------- Kalkulator ---------- */
.kalk__head{display:grid;gap:10px;margin-bottom:24px}
.kalk__head p{color:var(--ink-2)}
.kalk__grid{display:grid;gap:24px}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.stepper__label{display:flex;flex-direction:column;gap:2px;min-width:0}
.stepper__label b{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.stepper__label span{font-size:14px;color:var(--muted)}
.stepper__ctrl{display:flex;align-items:center;gap:10px}
.stepper__value{min-width:52px;text-align:center;font-family:var(--head);font-size:40px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.kalk__actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.results{background:#fff;border:1px solid var(--line)}
.result{padding:18px 16px}
.result+.result{border-top:1px solid var(--line)}
.result__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.result__name{display:flex;flex-direction:column;gap:2px}
.result__name b{font-weight:500;font-size:17px}
.result__name span{font-size:14px;color:var(--muted)}
.result__value{font-family:var(--head);font-size:34px;font-weight:300;white-space:nowrap}
.result__value small{font-size:inherit;font-weight:inherit}
.results__cta{padding:16px;border-top:1px solid var(--line)}
.results__cta .btn{width:100%}
.source{margin-top:12px;font-size:14px;color:var(--muted)}
@media(min-width:720px){
  .kalk__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .kalk__actions{flex-direction:row;flex-wrap:wrap}
}
@media(min-width:1000px){
  .kalk__head{grid-template-columns:1fr 1fr;gap:56px;align-items:end}
  .stepper__value{font-size:48px;min-width:64px}
}

/* ---------- Full kalkulator ---------- */
.full{margin-top:32px;padding:24px 16px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 44px rgba(26,26,26,.12)}
.full__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.full__head h3{font-size:28px;margin-top:2px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:22px}
.steps button{min-height:50px;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.steps .dot{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--sand);font-size:12px}
.steps button[aria-current="step"]{background:var(--ink);border-color:var(--ink);color:#fff}
.steps button[aria-current="step"] .dot{background:var(--gold);color:var(--ink)}
.steps button.done .dot{background:var(--ink);color:#fff}
.full__grid{display:grid;gap:20px}
.full__panel{display:flex;flex-direction:column;gap:14px}
.full__panel h4{font-size:24px}
.hint{font-size:14px;color:var(--muted)}
.flags{display:grid;gap:8px}
.opt{min-height:62px;padding:10px 14px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer}
.opt .box{flex:0 0 24px;height:24px;border-radius:50%;border:1px solid #9A958D;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.opt b{display:block;font-weight:500;font-size:16px}
.opt small{display:block;font-size:13px;color:var(--muted)}
.opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.opt[aria-pressed="true"] small{color:#C9C5BE}
.opt[aria-pressed="true"] .box{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.score{padding:20px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:6px}
.score b{font-family:var(--head);font-size:56px;font-weight:300;line-height:1;color:var(--gold)}
.score strong{font-size:20px;font-weight:500}
.score>span{font-size:14px;color:#C9C5BE}
.bars{display:grid;gap:12px}
.bar__row{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.bar__row span{color:var(--muted);white-space:nowrap}
.bar__track{height:6px;background:var(--line);margin-top:6px}
.bar__fill{height:100%;width:0;background:var(--accent)}
.bar__fill.is-full{background:var(--ok)}
.row-actions{display:flex;flex-wrap:wrap;gap:10px}
.needs{padding:18px 16px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:10px;align-self:start}
.needs .eyebrow{color:var(--gold);margin:0}
.need{padding-top:10px;border-top:1px solid #3A3835}
.need b{font-family:var(--head);font-size:30px;font-weight:300;line-height:1}
.need em{font-style:normal;margin-left:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.need p{margin-top:4px;font-size:13px;line-height:1.45;color:#C9C5BE}
.needs .hint{color:#C9C5BE}
.full__nav{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:20px}
.full__nav .btn{padding:0 14px}
@media(min-width:720px){.flags{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .full{padding:40px 48px 48px}
  .full__head h3{font-size:40px}
  .steps button{min-height:56px;font-size:12px;letter-spacing:.12em}
  .full__grid{grid-template-columns:2fr 1fr;gap:28px}
}

/* Sjekklisten (checklist.js) inne i kalkulatoren – tilpasset nytt design */
.checklist .cl-btn{border-radius:0!important;min-height:48px;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.checklist .cl-track,.checklist .cl-fill{border-radius:0!important}
.checklist .cl-cat-label{font-family:var(--font)}

/* ---------- Verktøy ---------- */
.tools{display:grid;gap:28px;margin-top:12px}
.tool{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.tool picture{display:block;overflow:hidden;margin-bottom:10px;background:var(--sand)}
.tool img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.tool:hover img{transform:scale(1.03)}
.tool__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.tool__title{font-family:var(--head);font-size:23px;line-height:1.2}
.tool__text{font-size:15px;line-height:1.45;color:var(--ink-2)}
@media(min-width:720px){.tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
@media(prefers-reduced-motion:reduce){.tool img{transition:none}}

/* ---------- Det har skjedd ---------- */
.cards{display:grid;border-top:1px solid var(--line)}
.card{padding:18px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.card:hover .card__title{color:var(--accent)}
.card__top{display:flex;align-items:center;gap:10px;flex:none}
.card__icon{flex:none;display:inline-flex;color:var(--ink)}
.card__icon svg{display:block;width:32px;height:32px}
.card__num{font-size:13px;color:#8F8A82;width:24px;flex:none}
.card__body{flex:1;display:flex;flex-direction:column;gap:4px}
.card__title{font-family:var(--head);font-size:21px}
.card__text{font-size:14px;line-height:1.45;color:var(--ink-2)}
.card__arrow{font-size:20px;color:var(--accent)}
.more-link{margin-top:20px;font-weight:600}
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(5,minmax(0,1fr))}
  .card{flex-direction:column;align-items:flex-start;padding:22px 20px 26px;border-right:1px solid var(--line);min-height:200px}
  .card:first-child{border-left:1px solid var(--line)}
  .card__icon svg{width:36px;height:36px}
  .card__arrow{margin-top:auto}
}

/* ---------- Beredskapslageret (seks kategorier) ---------- */
.cat-grid{display:grid;gap:16px}
.cat-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.cat-card .media{position:relative}
.cat-card .media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-card .num{position:absolute;top:0;left:0;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:6px 10px}
.cat-card .body{padding:16px 18px 22px;display:flex;flex-direction:column;gap:6px}
.cat-card .body .eyebrow{margin:0}
.cat-card h3{font-size:23px;font-weight:400}
.cat-card p{font-size:15px;color:var(--ink-2)}
@media(min-width:720px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* ---------- 5 ting folk glemmer ---------- */
.forget{list-style:none;counter-reset:f;margin:8px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.forget li{counter-increment:f;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
.forget li::before{content:"0" counter(f);grid-row:span 2;font-size:13px;color:#8F8A82;padding-top:5px}
.forget h3{font-size:20px;font-weight:400}
.forget p{font-size:15px;color:var(--ink-2)}
@media(min-width:720px){.forget{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}

/* ---------- Hvorfor egenberedskap ---------- */
.why{background:var(--ink);color:#EDEBE2}
.why__grid{display:grid}
.why__fig{margin:0}
.why__fig picture{display:block;height:100%}
.why__fig img{min-height:260px}
.why__fig img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.why__say{padding:40px 16px}
.why__say .eyebrow{color:var(--gold)}
.why__say h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:16px}
.why__say p{color:#D8D5CE;max-width:52ch}
@media(min-width:900px){
  .why__grid{grid-template-columns:1fr 1fr;min-height:460px}
  .why__fig{position:relative;min-height:100%}
  .why__fig picture{position:absolute;inset:0;height:auto}
  .why__fig img{aspect-ratio:auto;min-height:0}
  .why__say{display:flex;flex-direction:column;justify-content:center;padding:56px}
}

/* ---------- Nyttige lenker ---------- */
.links-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.link-card{position:relative;display:block;background:#fff;border:1px solid var(--line);padding:20px 44px 22px 20px;text-decoration:none;color:var(--ink)}
.link-card::after{content:"↗";position:absolute;top:18px;right:18px;color:var(--accent)}
.link-card:hover{border-color:var(--ink)}
.link-card h3{font-size:20px;font-weight:400;margin-bottom:6px}
.link-card p{font-size:14px;color:var(--ink-2)}
/* «Mer om egenberedskap» – kort med tydelige bilder og knapper med tekst */
.mer .mer-card{background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.mer .mer-card__img{overflow:hidden;background:var(--sand)}
.mer .mer-card__img img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.mer .mer-card__body{display:flex;flex-direction:column;align-items:flex-start;padding:20px}
.mer .mer-card__body .eyebrow{margin-bottom:6px}
.section .mer-card__title{font-size:22px;line-height:1.25;font-weight:400;margin:0 0 8px}
.mer .mer-card__body p{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.mer .mer-btn{margin-top:auto;min-height:46px;padding:0 20px}
@media(hover:hover){.mer .mer-btn:hover{background:var(--ink);color:#fff}}
.mer .mer-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mer--a .mer-card.is-open{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.mer .mer-panel{background:#fff;border:1px solid var(--line);padding:8px 20px 24px}
.mer .mer-panel .links-grid{margin-top:16px}
/* Variant A: tre kort side om side, innhold åpnes i felt under */
.mer-grid{display:grid;gap:16px}
.mer--a .mer-card{display:flex;flex-direction:column}
.mer--a .mer-card__body{flex:1}
.mer--a .mer-panel[hidden]{display:none}
.mer--a:not(.mer-js) [data-mer-toggle]{display:none}
@media(min-width:600px) and (max-width:899px){
  .mer--a .mer-card{display:grid;grid-template-columns:40% 1fr}
  .mer--a .mer-card__img img{aspect-ratio:auto;min-height:100%}
}
@media(min-width:900px){
  .mer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .mer--a .mer-panel{order:1;grid-column:1/-1}
  .mer .mer-card__img img{aspect-ratio:3/2}
  .section .mer-card__title{font-size:24px}
}
/* Variant B: kort under hverandre, bilde til venstre, innhold åpnes i kortet */
.mer-list{display:grid;gap:16px}
.mer--b .mer-row{display:block;list-style:none;cursor:pointer}
.mer--b .mer-row::-webkit-details-marker{display:none}
.mer--b .mer-card:hover{border-color:var(--ink)}
.mer--b .mer-close,.mer--b details[open] .mer-open{display:none}
.mer--b details[open] .mer-close{display:inline}
.mer--b .mer-panel{border:0;border-top:1px solid var(--line);margin:0 20px}
.mer--b .mer-panel{padding-left:0;padding-right:0}
@media(min-width:720px){
  .mer--b .mer-row{display:grid;grid-template-columns:320px 1fr}
  .mer--b .mer-card__img img{aspect-ratio:auto;height:100%;min-height:200px}
  .mer--b .mer-card__body{padding:28px 32px;justify-content:center}
}
.links-sub{font-size:22px;font-weight:400;margin:36px 0 8px}
.price-note{font-size:14px;color:var(--muted);max-width:70ch;margin-bottom:14px}

/* ---------- Bunntekst ---------- */
footer{background:var(--ink);color:#B8B4AD;padding:40px 0;padding-bottom:max(40px,env(safe-area-inset-bottom));font-size:14px;line-height:1.6}
footer .wrap{display:grid;gap:24px}
footer a{color:#fff}
footer .f-logo{display:block;color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;margin-bottom:8px}
footer .f-label{color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
footer p+p{margin-top:6px}
@media(min-width:720px){footer .wrap{grid-template-columns:1fr auto;gap:40px}}

/* ---------- Felles for undersider ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pagehead{background:var(--hero);color:#fff;padding:40px 0 44px}
.pagehead .eyebrow{color:var(--gold)}
.pagehead h1{font-size:clamp(2.2rem,5.5vw,3.6rem);color:#fff;margin-bottom:12px}
.pagehead p{color:#E4E3E0;max-width:640px}
.cat-card h2.cat-h{font-size:23px;font-weight:400}
.cta-box{margin-top:32px;padding:24px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:16px}
.cta-box h2{font-size:28px;color:#fff;margin-bottom:6px}
.cta-box p{color:#D8D5CE}
@media(min-width:800px){.cta-box{flex-direction:row;align-items:center;justify-content:space-between;padding:32px 40px}}

/* ---------- Kalkulatorsiden ---------- */
.kalk-steps .steps{margin-bottom:24px;outline:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{background:#fff;border:1px solid var(--line);padding:22px 16px}
.panel__grid{display:grid;gap:28px}
.panel__h{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:8px}
.panel .hint{margin-bottom:6px}
.checks{display:grid;gap:8px;margin-top:4px}
.check{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:14px;border:1px solid var(--line);cursor:pointer;line-height:1.4}
.check:hover{border-color:var(--ink)}
.check input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--ink)}
.check:has(input:checked){background:var(--sand);border-color:var(--ink)}
.kalk-steps .full__nav{margin-top:20px}
@media(min-width:900px){
  .panel{padding:36px 40px}
  .panel__grid{grid-template-columns:3fr 2fr;gap:56px}
  .panel__grid--list{grid-template-columns:2fr 3fr}
}
/* Mangellisten («Start her») og handlelisten fra list.js */
.lst-gap{margin-top:16px;padding:20px;border:1px solid var(--line);background:var(--sand)}
.lst-gap h2{font-size:22px;font-weight:400;margin-bottom:8px}
.lst-panel-p{color:var(--ink-2);margin:0 0 12px;font-size:15px}
.gap-lead{font-size:18px;font-weight:500;margin:0 0 6px}
.gap-list{margin:0 0 12px;padding-left:20px;display:grid;gap:8px}
.gap-list li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gap-cost{color:var(--muted);font-size:14px;white-space:nowrap}
.gap-total{font-weight:600;margin:0 0 8px}
.lst-gap .btn-list{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:var(--accent);color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lst-gap .medal{margin-bottom:6px}
.lst-result #lstMeta{display:block;font-family:var(--font);font-size:14px;color:var(--muted);letter-spacing:0;margin-top:6px}
.lst-group{margin:0 0 22px}
.lst-group h3{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.lst-group ul{margin:0;padding:0;list-style:none}
.lst-group li{padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5}
.lst-group li:last-child{border-bottom:0}
.lst-group li b{font-variant-numeric:tabular-nums;margin-right:4px}
.lst-note{background:var(--sand);border-left:4px solid var(--ink);padding:12px 16px;margin:0 0 12px;font-size:15px}
.calc-note{font-size:14px;color:var(--muted);margin:10px 0 16px}
.lst-shared{margin-top:10px;font-weight:600;color:var(--ok)}

/* ---------- Felles sjekkliste (sjekk.js) ---------- */
.sk-status{background:var(--ink);color:#fff;padding:18px 20px;margin-bottom:20px}
.sk-status>div>b{display:block;font-family:var(--head);font-weight:300;font-size:34px;line-height:1.1;color:var(--gold)}
.sk-status strong{display:block;font-weight:500;font-size:17px;margin-top:2px}
.sk-bar{height:6px;background:#3A3835;margin:12px 0 10px}
.sk-bar i{display:block;height:100%;width:0;background:var(--gold)}
#skFirst{font-size:14px;color:#D8D5CE}
#skFirst b{color:#fff;font-weight:600}
/* Framdriftsstripe på sjekkliste-steget */
.sk-mini{margin-bottom:16px}
.sk-mini__txt{font-size:16px}
.sk-mini__txt b{font-weight:600}
.sk-mini__bar{height:6px;background:var(--line);margin:8px 0 4px}
.sk-mini__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
/* Resultatsiden (steg 3) */
.result-grid{display:grid;gap:28px}
.sk-way-lead{font-size:17px;font-weight:500;margin-bottom:4px}
.sk-miss{margin:0 0 10px;padding-left:20px}
.sk-miss li{padding:4px 0;line-height:1.45}
.sk-miss b{font-variant-numeric:tabular-nums;font-weight:600}
.sk-done{font-size:18px;font-weight:500;color:var(--ok)}
.sk-advice{margin:22px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2)}
.sk-advice li{line-height:1.45}
.result-side{background:var(--sand);padding:20px;align-self:start}
.sk-side-h{font-size:20px;font-weight:400;margin-bottom:4px}
.result-actions{display:grid;gap:8px;margin-top:14px}
.result-actions .btn{width:100%}
@media(min-width:900px){.result-grid{grid-template-columns:3fr 2fr;gap:40px}}
.sk-cols{display:grid;gap:24px}
.sk-colh{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between}
.sk-have .sk-colh{border-bottom-color:var(--ok);color:var(--ok)}
.sk-cat{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:18px 0 4px}
.sk-row{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"box qty" "box txt";align-items:start;gap:0 10px;padding:8px 0;border-bottom:1px solid var(--line)}
.sk-box{grid-area:box}.sk-qty{grid-area:qty}.sk-txt{grid-area:txt}
@media(min-width:600px){.sk-row{grid-template-columns:44px 120px 1fr;grid-template-areas:"box qty txt"}}
.sk-box{width:44px;height:44px;margin:-6px 0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sk-tick{width:24px;height:24px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;background:#fff}
.is-have .sk-tick{background:var(--ok);border-color:var(--ok);color:#fff}
.sk-qty{font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.sk-txt{display:flex;flex-direction:column;padding-top:2px;line-height:1.4}
.sk-sub{font-size:13px;color:var(--muted);margin-top:2px}
.is-have .sk-name,.is-have .sk-qty,.is-have .sk-sub{color:var(--muted);text-decoration:line-through}
/* Info-knapp (?) og utfellbar infoboks */
.sk-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sk-info-btn{flex:none;width:22px;height:22px;border:1.5px solid var(--accent);border-radius:50%;background:#fff;color:var(--accent);font-family:var(--font);font-size:13px;font-weight:700;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.sk-info-btn:hover{background:var(--accent);color:#fff}
.sk-info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sk-info[hidden]{display:none}
.sk-info{margin-top:8px;padding:10px 12px;background:var(--sand,#F3F0EA);border-left:3px solid var(--accent);font-size:13px;color:var(--ink);line-height:1.5}
.sk-info-p{display:block}
.sk-info-p+.sk-info-p{margin-top:6px}
.is-have .sk-info-btn{border-color:var(--muted);color:var(--muted)}
.sk-empty{color:var(--muted);font-size:15px;padding:14px 0}
@media(min-width:900px){.sk-cols{grid-template-columns:3fr 2fr;gap:40px}}
@media print{
  #printRoot .cl-print h1{font-size:18pt;margin:0 0 4pt}
  #printRoot .p-meta{font-size:10pt;margin:0 0 10pt}
  #printRoot .cl-print h2{font-size:12pt;margin:12pt 0 4pt;border-bottom:1px solid #000}
  #printRoot .cl-print ul{list-style:none;margin:0;padding:0}
  #printRoot .cl-print li{padding:3pt 0;font-size:11pt;break-inside:avoid}
  #printRoot .p-foot{margin-top:14pt;font-size:9pt}
}


/* Neste/Tilbake med tydelig pil */
.btn--nav{gap:12px;font-size:14px!important}
.btn--nav .nav-arrow{width:26px;height:26px;flex:none;transition:transform .15s ease}
#next:hover .nav-arrow{transform:translateX(4px)}
#back:hover .nav-arrow{transform:translateX(-4px)}
.is-first .full__nav{grid-template-columns:1fr}
/* Døgn-valget i høyre kolonne */
.days-box{border:1px solid var(--line);padding:0 14px;margin-bottom:6px}
.days-box .stepper{border-bottom:0}
.eyebrow--gap{margin-top:22px}
@media(prefers-reduced-motion:reduce){.btn--nav .nav-arrow{transition:none}}

/* ---------- Utskrift: bare listen som skrives ut ---------- */
#printRoot{display:none}
@media print{
  @page{size:A4 portrait;margin:12mm}
  html,body{background:#fff!important}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block!important;color:#000;font-family:var(--font)}
}
@media print{
  /* Kalkulatorsiden: skriv ut handlelisten når sjekklisten ikke er valgt */
  body.kalk-page>main#main{display:block!important}
  body.kalk-page:has(#printRoot:not(:empty))>main#main{display:none!important}
  body.kalk-page .no-print{display:none!important}
  body.kalk-page [data-panel]{display:none!important}
  body.kalk-page [data-panel="3"]{display:block!important;border:0;padding:0}
  body.kalk-page .section{padding:0;background:#fff}
  body.kalk-page .panel__grid{display:block}
}

/* =============================================================
   «Skjer det nå?» på mobil/nettbrett – oppdatert oktober 2026
   Hele stripa er nå én stor trykkflate som går til «Hjelp i den
   første timen» (#akutt). «Åpne»-knappen er fjernet. Temaene vises
   som løpende tekst, så det blir tydelig at feltet gir rask hjelp
   i ulike kriser. Ren CSS – ingen eksterne ressurser, virker offline.
   Reglene er et rent tillegg; eksisterende stil er uendret.
   ============================================================= */
.bp-alert__cta{display:flex;align-items:center;gap:10px;min-height:calc(var(--banner-h) + 4px);padding:0 clamp(14px,4vw,24px);color:var(--ink);text-decoration:none}
.bp-alert:has(.bp-alert__cta) .bp-alert__bar{display:none}
.bp-alert__cta .bp-alert__title{flex:none}
.bp-alert__go{flex:none;margin-left:auto;font-size:18px;font-weight:700;line-height:1}
.bp-alert__ticker{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%)}
.bp-alert__track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:bpTicker 26s linear infinite}
.bp-alert__item{display:inline-flex;align-items:center;font-size:13px;font-weight:600;letter-spacing:.01em}
.bp-alert__item::after{content:"•";margin:0 13px;color:var(--accent);font-weight:700}
@keyframes bpTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.bp-alert__cta:hover .bp-alert__track{animation-play-state:paused}.bp-alert__cta:hover .bp-alert__go{color:var(--accent)}}
.bp-alert__cta:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.bp-alert__track{animation:none}.bp-alert__ticker{-webkit-mask-image:none;mask-image:none}}
@media(min-width:1240px){.bp-alert:has(.bp-alert__cta) .bp-alert__cta{display:none}.bp-alert:has(.bp-alert__cta) .bp-alert__bar{display:flex}}

/* =============================================================
   Språkvelger på mobil/nettbrett – oppdatert 18. oktober 2026
   Kun flagget vises (landkoden «NO» og nedtrekkspila skjules), for
   en ryddigere topp og tydeligere tittel. Desktop (>= 1100px) er
   uendret: flagg + «NO» + pil som før. Rent tillegg.
   ============================================================= */
@media(max-width:1099px){
  .top .lang-menu .lang-code{display:none}
  .top .lang-menu .chev{display:none}
  .top .lang-menu>summary{gap:0;padding:0 2px}
}