/* ==========================================================================
   Onboarding — velkomst-guiden (første besøg i demo-appen)
   Tæppe + kort med trin-linje, levende scener og bløde trinskift.
   ========================================================================== */
.ob-taeppe{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:20px;background:rgba(11,32,34,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  animation:obTon .3s ease both}
@keyframes obTon{from{opacity:0}to{opacity:1}}
.ob-taeppe.ud{opacity:0;transition:opacity .25s ease}

.ob-kort{position:relative;width:min(480px,100%);background:#fff;border-radius:26px;
  padding:26px 26px 20px;box-shadow:0 40px 90px -30px rgba(6,30,34,.6);
  animation:obKort .5s cubic-bezier(.34,1.56,.64,1) both;
  max-height:calc(100dvh - 40px);overflow-y:auto}
@keyframes obKort{from{opacity:0;transform:translateY(26px) scale(.94)}
  to{opacity:1;transform:none}}
.ob-luk{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--svag,#6E8487);font-size:19px;
  transition:background .2s,color .2s,transform .2s}
.ob-luk:hover{background:var(--info-bg,#E4EFEF);color:var(--blaek);transform:rotate(90deg)}

/* trin-linjen øverst */
.ob-progress{position:relative;display:flex;justify-content:space-between;
  margin:2px 4px 22px;padding:0 2px}
.ob-progress::before{content:"";position:absolute;left:6px;right:6px;top:50%;
  height:2px;border-radius:2px;background:var(--linje,#E2EAEA);transform:translateY(-50%)}
.ob-progress .ob-streg{position:absolute;left:6px;top:50%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--dyb,#16565C),var(--accent,#17767E));
  transform:translateY(-50%);transition:width .5s cubic-bezier(.16,1,.3,1);z-index:1}
.ob-progress i{position:relative;z-index:2;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2.5px solid var(--linje,#E2EAEA);
  transition:border-color .3s,transform .3s var(--fjeder),background .3s}
.ob-progress i.gennem{background:var(--dyb,#16565C);border-color:var(--dyb,#16565C)}
.ob-progress i.aktiv{border-color:var(--accent,#17767E);transform:scale(1.3);
  box-shadow:0 0 0 4px rgba(23,118,126,.14)}

/* indholdet glider mellem trinnene */
.ob-indhold{transition:opacity .22s ease,transform .22s ease}
.ob-indhold.ud-venstre{opacity:0;transform:translateX(-22px)}
.ob-indhold.ind-hoejre{opacity:0;transform:translateX(22px)}
.ob-indhold.ud-hoejre{opacity:0;transform:translateX(22px)}
.ob-indhold.ind-venstre{opacity:0;transform:translateX(-22px)}
.ob-scene{display:block;height:120px;border-radius:16px;margin-bottom:18px;
  background:linear-gradient(165deg,#F2F7F7,#E9F1F1);border:1px solid var(--linje-let,#EEF3F3);
  position:relative;overflow:hidden}
.ob-titel{margin:0 0 8px;font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--blaek)}
.ob-tekst{margin:0;font-size:14.5px;line-height:1.65;color:var(--daemp,#52686B);max-width:56ch}
.ob-tekst b{color:var(--blaek)}
.ob-tip{display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  background:var(--info-bg,#E4EFEF);border:1px solid var(--info-kant,#CBDFDF);
  border-radius:12px;padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--info-blaek,#3E6266)}
.ob-tip b{color:var(--dybere,#14484D)}

/* fod-knapper */
.ob-fod{display:flex;align-items:center;gap:10px;margin-top:22px}
.ob-skip{font-size:13px;font-weight:600;color:var(--svag,#6E8487);padding:9px 6px;
  transition:color .2s}
.ob-skip:hover{color:var(--blaek)}
.ob-hoejre{margin-left:auto;display:flex;gap:9px}
.ob-tilbage{font-size:13.5px;font-weight:650;color:var(--dyb,#16565C);
  background:var(--info-bg,#E4EFEF);border:1px solid var(--info-kant,#CBDFDF);
  border-radius:11px;padding:11px 16px;transition:background .2s,transform .15s}
.ob-tilbage:hover{background:#D8E8E8}
.ob-tilbage:active{transform:scale(.96)}
.ob-tilbage[hidden]{display:none}
.ob-naeste{font-size:14px;font-weight:700;color:#fff;background:var(--dyb,#16565C);
  border-radius:11px;padding:12px 20px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 10px 20px -8px rgba(20,72,77,.5);
  transition:filter .2s,transform .15s var(--fjeder),gap .2s}
.ob-naeste:hover{filter:brightness(1.07);gap:11px}
.ob-naeste:active{transform:scale(.96)}

/* ---------- scenekfigurer ---------- */
/* fælles: prikker og sol */
.ob-dot{position:absolute;border-radius:50%}
@keyframes obSvæv{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 1 · velkommen: tavlen med familien */
.ob-scene .bræt{position:absolute;left:50%;top:16px;bottom:16px;width:190px;
  transform:translateX(-50%);border-radius:12px;background:#fff;
  border:1px solid var(--ui-kant,#D8E2E2);box-shadow:0 10px 22px -10px rgba(20,72,77,.25)}
.ob-scene .bræt::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:7px;
  border-radius:4px;background:#DDE7E7}
.ob-scene .bræt::after{content:"";position:absolute;left:14px;top:29px;width:56%;height:7px;
  border-radius:4px;background:#E7EEEE}
.ob-scene .sol{position:absolute;right:26px;top:22px;width:15px;height:15px;
  background:#E8A93D;box-shadow:0 0 10px rgba(232,169,61,.7);
  animation:obSolPuls 3s ease-in-out infinite}
@keyframes obSolPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ob-scene .fa{left:calc(50% - 26px);bottom:24px;width:15px;height:15px;background:#E2604F;
  box-shadow:0 0 8px rgba(226,96,79,.5);animation:obSvæv 3.4s ease-in-out infinite}
.ob-scene .fv{left:calc(50% + 11px);bottom:24px;width:15px;height:15px;background:#2F6BC6;
  box-shadow:0 0 8px rgba(47,107,198,.5);animation:obSvæv 3.4s ease-in-out 1.7s infinite}

/* 2 · skolen: kilderne flyder ind på tavlen */
.ob-scene .krum{position:absolute;left:50%;bottom:14px;width:64px;height:26px;
  transform:translateX(-50%);border-radius:8px 8px 10px 10px;background:var(--petrol,#16565C)}
.ob-scene .krum::after{content:"";position:absolute;left:9px;right:9px;top:6px;height:2.5px;
  border-radius:2px;background:rgba(255,255,255,.5)}
.ob-scene .kd{top:14px;width:8px;height:8px;opacity:0;animation:obFald 3s ease-in infinite}
.ob-scene .kd.k1{left:calc(50% - 24px);background:#17767E;animation-delay:0s}
.ob-scene .kd.k2{left:calc(50% - 8px);background:#4FA88A;animation-delay:.7s}
.ob-scene .kd.k3{left:calc(50% + 8px);background:#2F6BC6;animation-delay:1.4s}
.ob-scene .kd.k4{left:calc(50% + 24px);background:#22834A;animation-delay:2.1s}
@keyframes obFald{0%{transform:translateY(0);opacity:0}10%{opacity:1}
  72%{transform:translateY(66px);opacity:1}82%,100%{transform:translateY(66px);opacity:0}}

/* 3 · partner: to der forbindes med en kode */
.ob-scene .p1{left:calc(50% - 52px);top:44px;width:20px;height:20px;background:#E2604F;
  box-shadow:0 0 10px rgba(226,96,79,.5)}
.ob-scene .p2{left:calc(50% + 32px);top:44px;width:20px;height:20px;background:#2F6BC6;
  box-shadow:0 0 10px rgba(47,107,198,.5)}
.ob-scene .forbind{position:absolute;left:calc(50% - 30px);top:53px;width:60px;height:2px;
  background:linear-gradient(90deg,#E2604F,#2F6BC6);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  animation:obForbind 3.4s var(--let) infinite}
@keyframes obForbind{0%,25%{transform:scaleX(0)}45%,85%{transform:scaleX(1)}
  95%,100%{transform:scaleX(1);opacity:0}}
.ob-scene .kode{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;font-weight:600;
  color:var(--dybere,#14484D);background:#fff;border:1px solid var(--ui-kant,#D8E2E2);
  border-radius:7px;padding:4px 8px;letter-spacing:.1em;
  animation:obKodeHop 3.4s var(--fjeder) infinite}
@keyframes obKodeHop{0%,30%{transform:translateX(-50%) translateY(0)}
  42%{transform:translateX(-50%) translateY(-5px)}55%,100%{transform:translateX(-50%) translateY(0)}}

/* 4 · hjemmeskærm: ikonet lander i gitret */
.ob-scene .grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;grid-template-columns:repeat(4,34px);gap:9px}
.ob-scene .grid i{width:34px;height:34px;border-radius:9px;background:#E9F0F0;
  border:1px solid #D2DFDF;opacity:1}
.ob-scene .grid .tav{opacity:1;background:var(--petrol,#16565C);display:grid;place-items:center;
  box-shadow:0 6px 14px -4px rgba(20,72,77,.5);animation:obTavLand 4s var(--fjeder) infinite}
@keyframes obTavLand{0%,55%{transform:scale(1)}64%{transform:scale(1.22) rotate(-5deg)}
  74%,100%{transform:scale(1)}}
.ob-scene .grid .tav svg{width:60%;height:60%}

/* 5 · klar: sol op, flueben tegnet */
.ob-scene .skort{position:absolute;left:50%;bottom:14px;width:120px;height:34px;
  transform:translateX(-50%);border-radius:9px;background:#fff;
  border:1px solid var(--ui-kant,#D8E2E2);display:grid;place-items:center}
.ob-scene .skort .fl{stroke-dasharray:18;stroke-dashoffset:18;
  animation:obFl 4s var(--let) infinite}
@keyframes obFl{0%,20%{stroke-dashoffset:18}38%,82%{stroke-dashoffset:0}
  94%,100%{stroke-dashoffset:18}}
.ob-scene .sol2{left:calc(50% - 90px);bottom:18px;width:19px;height:19px;background:#E8A93D;
  box-shadow:0 0 12px rgba(232,169,61,.8);animation:obSolOp 4s ease-in-out infinite}
@keyframes obSolOp{0%,100%{transform:translateY(6px)}50%{transform:translateY(-5px)}}
.ob-scene .streg-v{left:calc(50% + 71px);bottom:20px;width:2px;height:26px;
  background:var(--dyb,#16565C);border-radius:2px;opacity:.3}

@media (prefers-reduced-motion:reduce){
  .ob-taeppe,.ob-kort{animation:none}
  .ob-scene *{animation:none!important;opacity:1}
  .ob-scene .kd{opacity:.85;transform:translateY(66px)}
  .ob-scene .forbind{transform:scaleX(1)}
  .ob-scene .skort .fl{stroke-dashoffset:0}
}
/* ==========================================================================
   Onboarding v2 — assistenten der konfigurerer med
   Spotlight på det rigtige sted i appen + guide-boble ved siden af.
   ========================================================================== */
.ob-spot{position:fixed;z-index:390;pointer-events:none;border-radius:18px;
  border:2px dashed var(--accent,#17767E);
  box-shadow:0 0 0 9999px rgba(11,32,34,.42),inset 0 0 0 9999px rgba(255,255,255,.06);
  transition:left .4s cubic-bezier(.16,1,.3,1),top .4s cubic-bezier(.16,1,.3,1),
    width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1);
  animation:obSpotPuls 2.2s ease-in-out infinite}
@keyframes obSpotPuls{0%,100%{border-color:var(--accent,#17767E)}
  50%{border-color:rgba(23,118,126,.35)}}

.ob-guide{position:fixed;z-index:400;width:min(336px,calc(100vw - 24px));
  background:#fff;border-radius:20px;padding:17px 18px 14px;
  box-shadow:0 28px 60px -20px rgba(6,30,34,.55),0 4px 12px rgba(23,42,45,.1);
  transition:left .4s cubic-bezier(.16,1,.3,1),top .4s cubic-bezier(.16,1,.3,1);
  animation:obGuideInd .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes obGuideInd{from{opacity:0;transform:translateY(14px) scale(.95)}
  to{opacity:1;transform:none}}
.ob-guide.centrér{left:50%!important;top:50%!important;
  transform:translate(-50%,-50%);
  animation:obGuideIndC .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes obGuideIndC{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.95)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ob-guide .ob-eyebrow{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#17767E);
  display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.ob-guide .ob-eyebrow .ob-luk2{font-size:16px;color:var(--svag,#6E8487);cursor:pointer;
  padding:2px 6px;border-radius:6px;line-height:1}
.ob-guide .ob-eyebrow .ob-luk2:hover{background:var(--info-bg,#E4EFEF);color:var(--blaek)}
.ob-guide h3{margin:0 0 7px;font-size:17.5px;font-weight:750;letter-spacing:-.015em;color:var(--blaek)}
.ob-guide .ob-gtekst{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--daemp,#52686B)}
.ob-guide .ob-gtekst b{color:var(--blaek)}
/* Hvad man faar. Staar visuelt adskilt fra fremgangsmaaden — det ene er
   en instruktion, det andet er grunden til at foelge den. */
.ob-guide .ob-faar{margin:0 0 10px;padding:9px 11px;border-radius:9px;
  background:#EAF2F2;border:1px solid #CBDFDF;
  font-size:12.5px;line-height:1.55;color:#2C4A4D}
.ob-guide .ob-faar b{color:#14484D}

/* mini-formularen: sådan ser felterne ud, og hvad der skal stå */
.ob-mini{background:#F7FAFA;border:1px solid var(--linje,#E2EAEA);border-radius:13px;
  padding:12px 13px;margin:2px 0 12px}
.ob-mini .m-lab{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--svag,#6E8487);
  margin:8px 0 4px}
.ob-mini .m-lab:first-child{margin-top:0}
.ob-mini .m-felt{display:block;font-size:12.5px;color:#8CA0A3;background:#fff;
  border:1px solid #D8E2E2;border-radius:9px;padding:8px 10px}
.ob-mini .m-felt b{color:#3E5457;font-weight:600}
.ob-mini .m-knap{display:block;text-align:center;margin-top:11px;font-size:12.5px;
  font-weight:700;color:#fff;background:var(--dyb,#16565C);border-radius:9px;padding:9px}

.ob-handlinger{display:flex;align-items:center;gap:8px;margin-top:4px}
.ob-gknap{flex:none;font-size:13px;font-weight:700;color:#fff;background:var(--dyb,#16565C);
  border-radius:10px;padding:10px 15px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 8px 16px -7px rgba(20,72,77,.5);transition:filter .2s,transform .15s}
.ob-gknap:hover{filter:brightness(1.08)}
.ob-gknap:active{transform:scale(.96)}
.ob-gknap.sekundar{background:var(--info-bg,#E4EFEF);color:var(--dybere,#14484D);
  border:1px solid var(--info-kant,#CBDFDF);box-shadow:none}
.ob-gknap.sekundar:hover{background:#D8E8E8;filter:none}
.ob-forbi{margin-left:auto;font-size:12px;font-weight:600;color:var(--svag,#6E8487);
  padding:8px 4px;cursor:pointer}
.ob-forbi:hover{color:var(--blaek)}
/* ---------- kom godt i gang ----------
   Baren er smal med vilje. Den skal vise, hvor langt der er — ikke
   feire noget. Haekket saettes kun, naar punktet ER gjort; formerne er
   de samme som .ob-progress, saa der ikke opstaar to slags haek. */
.ob-fremtal{margin-top:14px;font-size:9.5px;font-weight:750;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,#17767E)}
.ob-fremgang{height:6px;border-radius:4px;margin:6px 0 12px;
  background:var(--linje,#E2EAEA);overflow:hidden}
.ob-fremgang span{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--dyb,#16565C),var(--accent,#17767E));
  transition:width .6s var(--let,ease)}
.ob-liste{display:grid;gap:7px}
.ob-liste div{display:flex;gap:9px;align-items:flex-start}
.ob-liste i{flex:none;width:13px;height:13px;margin-top:2px;border-radius:50%;
  background:#fff;border:2px solid var(--linje,#E2EAEA)}
.ob-liste div.gjort i{background:var(--dyb,#16565C);border-color:var(--dyb,#16565C)}
.ob-liste span{display:block;font-size:12.5px;line-height:1.35}
.ob-liste b{display:block;font-weight:650;color:var(--svag,#6E8487)}
.ob-liste div.gjort b{color:var(--blaek)}
.ob-liste em{display:block;font-style:normal;font-size:11px;
  color:var(--svag,#6E8487);opacity:.85}
@media (prefers-reduced-motion:reduce){.ob-fremgang span{transition:none}}

.ob-prikker{display:flex;gap:5px;margin-top:12px}
.ob-prikker i{width:6px;height:6px;border-radius:50%;background:var(--linje,#E2EAEA)}
.ob-prikker i.gennem{background:var(--dyb,#16565C)}
.ob-prikker i.aktiv{background:var(--accent,#17767E);transform:scale(1.25)}

/* lille konfetti-agtig succesmarkering når koden er lavet */
.ob-succes{display:flex;gap:10px;align-items:center;background:var(--god-bg,#E6F4EB);
  border:1px solid var(--god-kant,#CBE7D4);border-radius:12px;padding:10px 12px;
  margin-bottom:10px;animation:obGuideInd .4s cubic-bezier(.34,1.56,.64,1) both}
.ob-succes .segl{flex:none;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#2FA05A,#1B6B3D 74%);display:grid;place-items:center}
.ob-succes b{font-size:13px;color:var(--god-blaek,#1B6B3D)}
.ob-succes span{display:block;font-size:12px;color:var(--god-blaek,#1B6B3D);opacity:.85}

/* ---------- "Fortsæt opsætningen": brikken, når man er på pause ---------- */
.ob-fortsaet{position:fixed;z-index:250;
  top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  border:0;border-radius:999px;padding:10px 16px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:#fff;
  background:var(--dyb,#16565C);box-shadow:0 14px 28px -12px rgba(15,63,68,.55);
  transition:filter .2s,transform .15s;
  animation:obFortsaetInd .4s cubic-bezier(.34,1.56,.64,1) both}
.ob-fortsaet span{font-weight:750;font-size:11.5px;
  background:rgba(255,255,255,.22);border-radius:999px;padding:2px 8px}
.ob-fortsaet:hover{filter:brightness(1.08)}
.ob-fortsaet:active{transform:translateX(-50%) scale(.96)}
@keyframes obFortsaetInd{from{opacity:0;transform:translateX(-50%) translateY(-14px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .ob-spot,.ob-guide,.ob-succes,.ob-fortsaet{animation:none}
  .ob-spot,.ob-guide{transition:none}
}