/* Flammepunkt Snittet – de fire figurer på /word/ (nyt udseende 8. okt. 2026). Forløbene står i fp-word.js og er de samme som før.
   Rammen er Snittet: ark med hårstreg, titelstribe i mono, fremdriftslinje i Glød, én knap under.
   INDE i rammen er det Word, og Office beholder sit eget udseende: hvid side, neutral rude, systemskrift, 4 px hjørner.
   Fra os kun Glød på hovedhandling, valgt og nyt. Figur 4 er vores eget dashboard og står på lyst ark.
   Bevægelse som i de gamle figurer: række ind, mærket ved det nye toner ud, skrivning med markør, tryk.
   style.css slår alt fra ved "reducer bevægelse". */

/* style.css gør .fp-atdemo til lyst ark; rammen skal stå på tegnefladen, så de fire indstillinger arves igen */
figure.fp-atdemo{--fp-flade:inherit;--fp-tekst:inherit;--fp-tekst-svag:inherit;--fp-streg:inherit;color-scheme:inherit;
--m:.5rem;--w-tekst:#1B1B1B;--w-svag:#595959;--w-streg:#C8C8C8;--w-ui:"Segoe UI",system-ui,sans-serif;
position:relative;margin-block:2rem 2.5rem;border:1px solid var(--fp-streg)}
.fp-atdemo::before{content:"";position:absolute;inset:-1px -1px auto;height:2px;background:var(--fp-gloed);transform:scaleX(var(--p,0));transform-origin:0;transition:transform .5s var(--fp-ud)}
.fp-d-hoved{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem .75rem;border-bottom:1px solid var(--fp-streg);font:400 .875rem/1.5 var(--fp-skrift-mono);color:var(--fp-tekst-svag)}
.fp-d-hoved span+span{color:var(--fp-tekst);text-align:right}
.fp-d-fod{display:flex;justify-content:flex-end;padding:.6rem .75rem;border-top:1px solid var(--fp-streg)}
.fp-d-knap{min-height:44px;padding:0 1rem;border:1px solid var(--fp-tekst-svag);border-radius:var(--fp-r-betjening);background:none;color:inherit;font:400 .875rem/1 var(--fp-skrift-mono);cursor:pointer;transition:background .2s var(--fp-ud)}
.fp-d-knap:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.fp-atdemo figcaption{padding:.6rem .75rem .7rem;border-top:1px solid var(--fp-streg);color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}

/* ---------- Word: skematisk titelstribe, hvid side, neutral rude ---------- */
.fp-atdemo__bar{margin:var(--m) var(--m) 0;padding:.4rem .75rem;background:#3A3A3A;color:#F2F2F2;font:400 .875rem/1.5 var(--w-ui)}
.fp-atdemo__bar i{display:none}
.fp-atdemo__krop{display:grid;margin:0 var(--m) var(--m);background:#E2E2E2;color:var(--w-tekst);font:400 .9375rem/1.45 var(--w-ui)}
.fp-atdemo__dok{box-sizing:border-box;min-height:13rem;margin:.5rem .5rem 0;padding:1.25rem 1rem;background:#fff;font:400 1rem/1.6 Cambria,Georgia,"Times New Roman",serif}
.fp-atdemo__dok p{margin:0 0 .75rem}
.fp-atdemo__dok :is(.svag,h5){margin:0 0 .5rem;font:600 1rem/1.4 var(--w-ui);letter-spacing:0;color:var(--w-svag)}
.fp-atdemo__dok h5{margin-top:1.5rem}
.fp-litdemo .fp-atdemo__dok{min-height:19rem}
.fp-litdemo__liste{margin:0;padding:0;list-style:none;font-size:.9375rem;line-height:1.5}
.fp-litdemo__liste li{position:relative;padding:.2rem 0 .2rem 1.5em;text-indent:-1.5em}
/* det nye: Glød-streg under henvisningen og et lille kvadrat i margenen ved linjen – aldrig farven alene */
.fp-atdemo__felt{background:#E6E6E6;box-shadow:inset 0 -2px transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:box-shadow .5s}
.ny .fp-atdemo__felt,.fp-atdemo__felt.ny{box-shadow:inset 0 -2px var(--fp-gloed)}
.fp-litdemo__liste li::before{content:"";position:absolute;left:-.7rem;top:.75em;width:6px;height:6px;background:var(--fp-gloed);opacity:0;transition:opacity .5s}
.fp-litdemo__liste .ny::before{opacity:1}
.fp-atdemo__q{border-bottom:2px dotted var(--fp-gloed)}
.fp-atdemo__markoer{display:inline-block;height:1.1em;margin-left:1px;border-left:1.5px solid;vertical-align:-.18em}
.fp-atdemo__panel{box-sizing:border-box;min-height:15.5rem;padding:.9rem;border-top:1px solid var(--w-streg);background:#F5F5F5}
.fp-atdemo__panel h4{margin:0 0 .6rem;font:600 .875rem/1.4 var(--w-ui);letter-spacing:0}
.fp-atdemo__panel ul{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
.fp-atdemo__panel li,.fp-nydemo__kort{position:relative;padding:.45rem 2.2rem .45rem .7rem;border:1px solid var(--w-streg);border-radius:4px;background:#fff}
.fp-atdemo__panel li{display:none}
.g0>.g0,.g1>.g1,.g2>.g2{display:block;animation:fp-ind .3s var(--fp-ud) backwards}
ul:is(.g0,.g1,.g2)~.fp-atdemo__tom{display:none}
.fp-atdemo__panel b{font-weight:600}
.fp-atdemo__panel li b,.fp-atdemo__panel small{display:block}
.fp-atdemo__panel small,.fp-atdemo__tom,.fp-nydemo__badge{font-size:.875rem;color:var(--w-svag)}
.fp-atdemo__tom{margin:0}
li.valgt{border-color:var(--fp-gloed);box-shadow:inset 0 0 0 1px var(--fp-gloed)}
.fp-nydemo .fp-atdemo__panel{display:grid;grid-template-rows:auto 1fr;align-items:start}
.fp-nydemo .fp-atdemo__tom,.fp-nydemo__kort.fp-i{grid-area:2/1}
.fp-nydemo__kort{padding:.75rem}
.fp-nydemo__kort small{margin:.3rem 0 .7rem}
.fp-nydemo__badge{margin-left:.4rem;padding:.05rem .5rem;border:1px solid var(--w-streg);border-radius:999px}
.fp-nydemo__knapper{display:flex;flex-wrap:wrap;gap:.4rem}
.fp-nydemo__knapper span{padding:.35rem .7rem;border:1px solid #8A8A8A;border-radius:4px;font-weight:600;font-size:.875rem;transition:background .15s,transform .15s}
.fp-nydemo__knapper .prim{border-color:var(--fp-gloed);background:var(--fp-gloed);color:#fff}
.fp-nydemo__knapper .tryk{background:color-mix(in srgb,var(--fp-gloed),#000 25%);transform:scale(.94)}
.ok{color:var(--w-tekst);font-weight:600}

/* ---------- figur 4: dashboardet på lyst ark (Kridt og blæk bytter plads) ---------- */
.fp-admdemo .fp-atdemo__krop{padding:1rem;background:var(--fp-tekst);color:var(--fp-flade);font:400 1rem/1.5 var(--fp-skrift)}
.fp-admdemo__ind{width:min(100%,42rem);margin:auto}
.fp-admdemo__tal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;padding-bottom:.75rem;border-bottom:1px solid}
.fp-admdemo__tal span{font:400 .875rem/1.7 var(--fp-skrift-mono)}
.fuld::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.6em;background:var(--fp-gloed)}
.fp-admdemo__ind ul{margin:0;padding:0;list-style:none}
.fp-admdemo__ind li{display:grid;grid-template-columns:auto 1fr;gap:0 .75rem;align-items:center;padding:.6rem 0;border-bottom:1px solid rgb(13 21 32/.32)}
.fp-admdemo__ind small{grid-column:2;font-size:.875rem;color:#3A4656}
.fp-admdemo__boks{display:grid;place-items:center;grid-row:span 2;box-sizing:border-box;width:1.375rem;height:1.375rem;border:1.5px solid;border-radius:calc(var(--fp-r-betjening)*.4);transition:background .2s,border-color .2s,transform .15s}
.fp-admdemo__boks.tryk{transform:scale(.85)}
.til{border-color:var(--fp-gloed);background:var(--fp-gloed);color:var(--fp-paa-gloed)}

/* ---------- scenens tilstande (klasserne sættes af fp-word.js) ---------- */
.fp-i:not(.vis){display:none}
.fp-nydemo__kort.fp-i:not(.vis){display:block;visibility:hidden}
.fp-nydemo__kort.vis{animation:fp-ind .3s var(--fp-ud) backwards}
.vaek{visibility:hidden}
.valgt::after,.til::after,.ok::before{content:"";box-sizing:border-box;width:.8em;height:.45em;border:solid var(--fp-gloed);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.valgt::after{position:absolute;right:.8rem;top:calc(50% - .35em)}
.til::after{margin-top:-.15em;border-color:currentColor}
.ok::before{display:inline-block;margin:0 .5em .2em .1em}
.fp-spiller .fp-atdemo__markoer{animation:fp-blink 1s steps(1) 24}
.fp-straks *,.fp-straks ::before,.fp-straks ::after{animation:none!important;transition:none!important}
@keyframes fp-ind{from{opacity:0;transform:translateY(4px)}}
@keyframes fp-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fp-d-fod,.fp-atdemo::before{display:none}}

@media (min-width:700px){
figure.fp-atdemo{--m:1.25rem}
.fp-d-hoved,.fp-d-fod,.fp-atdemo figcaption{padding-inline:1.25rem}
.fp-atdemo__krop{grid-template-columns:minmax(0,1fr) 17rem}
:is(.fp-litdemo,.fp-admdemo) .fp-atdemo__krop{grid-template-columns:1fr}
.fp-atdemo__dok{width:min(100% - 2rem,40rem);min-height:15.5rem;margin:1rem auto 0;padding:1.75rem 2rem}
.fp-litdemo .fp-atdemo__dok{min-height:16.5rem}
.fp-atdemo__panel{min-height:0;border-top:0;border-left:1px solid var(--w-streg)}
.fp-admdemo__ind li{grid-template-columns:auto 1fr auto}
.fp-admdemo__ind small{grid-column:auto}
}
@media (min-width:1000px){.fp-atdemo__krop{grid-template-columns:minmax(0,1fr) 20rem}}