/* Forsikringsguidens eget stilark.
   Guiden laeser faelles.css (skrifter, farver, cookieknap) og saa dette —
   ikke style.css. Praecis samme grund som paa erhvervsforsiden: de to
   regelsaet deler klassenavne og ville slaas om de samme elementer.
   Maal og tokens er hentet ud af style.css, saa guiden er den samme
   komponent som prisberegneren, ikke en efterligning af den.
   Mockuppen: https://claude.ai/artifact/BAsGwvcmwxafFaRRBBPoHi           */

/* Tokens og mål er hentet ud af sitets egen style.css, så guiden er den
   samme komponent som prisberegneren — ikke en efterligning af den.        */
:root{
  --papir:#F1F2EE; --ink:#0F2019; --groen:#2E6A4E; --muted:#565D58;
  --creme:#DCE0DC; --flade1:#F1F2EE; --flade2:#E7E9E3; --flade3:#DBDED6;
  --kant:color-mix(in oklab, #0F2019 52%, transparent);
  --haar:color-mix(in oklab, #0F2019 14%, transparent);
  --lov:#96271A; --prik:#51AE3C;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --r-md:4px; --r-lg:6px;
  --f:"Bricolage Grotesque",system-ui,sans-serif;
  --t:220ms cubic-bezier(.2,.7,.3,1);
}
[data-tema="mork"]{
  --papir:#0F2019; --ink:#DCE0DC; --muted:#9BA79E; --groen:#6FBE97;
  --flade1:#16281F; --flade2:#1B3024; --flade3:#24402F;
  --kant:color-mix(in oklab, #DCE0DC 40%, transparent);
  --haar:color-mix(in oklab, #DCE0DC 14%, transparent);
}
*{box-sizing:border-box}
body{margin:0;background:var(--papir);color:var(--ink);
  font:400 17px/1.62 var(--f);-webkit-font-smoothing:antialiased;
  transition:background var(--t),color var(--t)}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
p{margin:0}
a{color:var(--groen)}
button,select,input,textarea{font:inherit;color:inherit}

/* ── rammen: samme som beregneren, én skærm ad gangen ── */
.guide{min-height:100svh;display:flex;flex-direction:column;
  padding:var(--s3) 20px var(--s3);max-width:640px;margin-inline:auto}
.bt-top{display:grid;justify-items:center;gap:10px;flex:0 0 auto;
  margin-bottom:clamp(16px,2.4vh,32px)}
.bt-mrk svg{height:24px;width:auto;display:block}
.bt-prikker{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center}
.bt-prik{width:22px;height:4px;border-radius:2px;background:var(--flade3);
  transition:background-color var(--t),width var(--t)}
.bt-prik.gjort{background:color-mix(in oklab,var(--groen) 65%,transparent)}
.bt-prik.nu{background:var(--groen);width:34px}
.bt-tael{font-size:.8125rem;color:var(--muted)}
.bt-tael b{color:var(--ink);font-weight:700}
.bt-loefte{font-size:.8125rem;color:var(--muted);text-align:center;max-width:36ch}

.bt-midt{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s3)}
.bt-sp{font-weight:800;font-size:clamp(1.5rem,4.6vw,2rem);line-height:1.14;
  letter-spacing:-.03em;margin:0 0 var(--s2);text-align:center}
.bt-hjaelp{font-size:.9375rem;color:var(--muted);text-align:center;
  margin:0 auto var(--s4);max-width:40ch}

/* Underspoergsmaalet folder sig ud paa samme side. En tynd linje og en
   mindre overskrift viser, at det hoerer til svaret ovenfor og ikke er
   et nyt trin. */
.bt-under{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--kant)}
.bt-sp-under{font-weight:700;font-size:1.0625rem;line-height:1.2;
  letter-spacing:-.02em;margin:0 0 var(--s2);text-align:center}

.bt-valgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bt-valgrid.en-kol{grid-template-columns:1fr}
.bt-valg{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;
  padding:12px 13px;border:1.5px solid var(--kant);border-radius:var(--r-lg);
  background:var(--flade1);cursor:pointer;text-align:left;width:100%;
  transition:border-color var(--t),background var(--t),transform 120ms ease}
.bt-valg:hover{border-color:color-mix(in oklab,var(--groen) 55%,transparent)}
.bt-valg:active{transform:scale(.985)}
.bt-valg[aria-pressed="true"]{border-color:var(--groen);
  background:color-mix(in oklab,var(--groen) 8%,var(--flade1))}
.bt-valg:focus-visible{outline:3px solid color-mix(in oklab,var(--groen) 45%,transparent);
  outline-offset:2px}
.bt-valg-i{width:26px;height:26px;color:var(--groen);flex:none}
.bt-valg-i svg{width:100%;height:100%;display:block}
.bt-valg-t{font-weight:600;font-size:.9375rem;line-height:1.3}
.bt-valgrid-kompakt .bt-valg{min-height:44px;padding:9px 12px}
.bt-valgrid-kompakt .bt-valg-t{font-size:.875rem;font-weight:500}
.flueben{margin-left:auto;width:18px;height:18px;flex:none;color:var(--groen);opacity:0;
  transition:opacity var(--t)}
.bt-valg[aria-pressed="true"] .flueben{opacity:1}

.bt-felt{margin-bottom:var(--s3)}
.bt-felt label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px}
.bt-felt input{width:100%;min-height:56px;padding:15px 16px;border:1.5px solid var(--kant);
  border-radius:var(--r-md);background:var(--flade1);letter-spacing:.06em;font-size:19px}
.bt-felt input:focus-visible{outline:3px solid color-mix(in oklab,var(--groen) 45%,transparent);
  outline-offset:1px;border-color:var(--groen)}
.bt-felt select{width:100%;min-height:56px;padding:15px 44px 15px 16px;
  border:1.5px solid var(--kant);border-radius:var(--r-md);background:var(--flade1);
  font-size:17px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6A4E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:20px}
.bt-felt select:focus-visible{outline:3px solid color-mix(in oklab,var(--groen) 45%,transparent);
  outline-offset:1px;border-color:var(--groen)}


.bt-hint{margin-top:9px;font-size:13px;line-height:1.55;color:var(--muted)}
.bt-hint a{color:var(--groen);text-decoration:underline;text-underline-offset:3px}
.bt-fejl{margin-top:10px;font-size:.875rem;color:var(--lov);font-weight:650}

.bt-soeger{display:flex;align-items:center;gap:10px;margin-top:var(--s2);
  font-size:14.5px;color:var(--muted);text-align:left}
.bt-soeger .puls{width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:var(--groen);animation:puls 900ms ease-in-out infinite}

.bt-firma{border:1.5px solid var(--kant);border-radius:var(--r-lg);padding:16px;
  background:var(--flade2);text-align:left;margin-top:var(--s2)}
.bt-firma .demo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--groen);font-weight:650;margin-bottom:6px}
.bt-firma .bt-gruppe{margin-top:10px;padding-top:10px;font-size:13.5px;
  line-height:1.55;color:var(--muted);border-top:1px solid var(--haar)}
.bt-firma .bt-gruppe b{display:inline;font-size:inherit;margin:0;color:var(--ink);font-weight:650}
.bt-firma b{display:block;font-size:17px;letter-spacing:-.02em;margin-bottom:2px}
.bt-firma span{font-size:14.5px;color:var(--muted)}

.bt-styr{flex:0 0 auto;padding-top:var(--s3);display:grid;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;width:100%;
  padding:16px 23px;border-radius:var(--r-md);border:1.5px solid var(--ink);
  background:var(--ink);color:var(--papir);font-weight:650;font-size:16px;cursor:pointer;
  transition:background var(--t),opacity var(--t)}
.btn:hover{opacity:.88}
.btn[disabled]{opacity:.35;cursor:default}
.btn-linje{background:transparent;color:var(--ink)}
.bt-tilbage{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;
  padding:8px;justify-self:center;text-decoration:underline;text-underline-offset:3px}
.bt-tilbage:hover{color:var(--ink)}
.bt-tema{justify-self:center;margin-top:4px}
.bt-tema button{background:transparent;border:1.5px solid var(--haar);border-radius:999px;
  padding:8px 15px;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.bt-tema button:hover{border-color:var(--groen);color:var(--groen)}
.bt-jura{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--haar);
  font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.bt-jura a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ── overgang mellem trin ── */
.skift{animation:ind 260ms cubic-bezier(.2,.7,.3,1) both}
@keyframes ind{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── loaderen: max 800 ms, som specen siger ── */
.loader{flex:1 1 auto;display:grid;place-items:center;gap:14px;text-align:center}
.loader .puls{width:11px;height:11px;border-radius:50%;background:var(--groen);
  animation:puls 900ms ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ── resultat ── */
.res{padding-block:var(--s3)}
.res h1,.res h2{font-size:clamp(1.4rem,3.6vw,1.9rem);font-weight:800;letter-spacing:-.03em;
  text-align:center}
.res .ind{color:var(--muted);text-align:center;margin:var(--s2) auto var(--s4);
  max-width:46ch;font-size:.9375rem}
.gruppe{margin-bottom:var(--s4)}
.g-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.maerke{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;border-radius:3px}
.m-lov{background:var(--lov);color:#fff}
.m-anb{background:var(--groen);color:var(--papir)}
.m-ovr{background:var(--flade2);color:var(--muted);border:1px solid var(--haar)}
.g-hdr .n{margin-left:auto;font-size:13px;color:var(--muted)}
/* Bestillingslisten gentager de produkter, man har sat kryds ved ovenfor,
   saa man kan se, hvad man bestiller, uden at rulle tilbage. Den foelger
   afkrydsningerne live. */
.bestil{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:12px}
.bestil li{display:flex;align-items:flex-start;gap:12px;
  font-weight:650;font-size:15.5px;line-height:1.35;letter-spacing:-.015em}
.bestil svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--groen)}
.bestil .tom{font-weight:400;font-size:14.5px;color:var(--muted)}
.krav{color:var(--lov);font-weight:700}
.form .bt-felt input.fejler,.form textarea.fejler{border-color:var(--lov);border-width:2px}
.form .bt-fejl:empty{display:none}
.form .bt-fejl{margin-top:7px}
.kvittering:empty{display:none}
.kvittering{margin-top:var(--s2);padding:13px 15px;border-radius:var(--r-md);
  background:color-mix(in oklab,var(--groen) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--groen) 45%,transparent);
  font-size:14.5px;line-height:1.5}

.kort{border:1.5px solid var(--haar);border-radius:var(--r-lg);padding:14px 15px;
  margin-bottom:8px;display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start;
  background:var(--flade1)}
.kort input{margin:3px 0 0;width:19px;height:19px;accent-color:var(--groen)}
.kort h3{font-size:16px;letter-spacing:-.02em;margin-bottom:3px}
.kort .hvad{font-size:13.5px;color:var(--muted);line-height:1.45}
.hvorfor{margin-top:9px;padding:9px 12px;border-left:3px solid var(--groen);
  background:var(--flade2);border-radius:0 3px 3px 0;font-size:13.5px;line-height:1.5}
.hvorfor + .hvorfor{margin-top:6px}
.forbehold{border:1.5px solid var(--kant);border-radius:var(--r-lg);padding:15px 16px;
  font-size:14px;line-height:1.55;background:var(--flade2);margin-bottom:var(--s3)}
.forbehold b{display:block;margin-bottom:4px}
.form{border-top:1px solid var(--haar);padding-top:var(--s4);margin-top:var(--s4)}
.form .bt-felt input,.form textarea{min-height:52px;font-size:16px;letter-spacing:0;
  width:100%;padding:14px 15px;border:1.5px solid var(--kant);border-radius:var(--r-md);
  background:var(--flade1)}
.form textarea{min-height:84px;resize:vertical;font-family:var(--f)}
.form-jura{margin-top:var(--s3);font-size:13px;line-height:1.6;color:var(--muted)}
.form-jura a{color:var(--groen);text-decoration:underline;text-underline-offset:3px}
.tilvalg{margin-top:var(--s2);display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;color:var(--muted)}
.tilvalg input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--groen);flex:none}

@media(max-width:520px){
  .bt-valgrid{grid-template-columns:1fr}
  .guide{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}