/* Flammepunkt Snittet – forsiden: de tre spørgsmål, snittet, eksemplet, målkæden, tegningshovedet og etagearkene.
   Indlæses kun på forsiden (functions.php) og efter style.css, som har indstillingerne (--fp-…), knapper, sidehoved og sidefod. */
.fp-forside .wp-block-columns{display:grid;gap:0}
/* ---------- forsidens top: de tre spørgsmål, snittet, eksemplet ---------- */
.fp-top{display:grid;overflow:clip;padding-inline:var(--_ud)}
.fp-top-tekst{padding:28px var(--_kant) 4px}
h1.fp-sp{display:grid;justify-items:start;font:600 var(--_h1)/1.1 var(--fp-skrift);letter-spacing:-.02em}
.fp-sp-k{display:flex;align-items:center;gap:14px;min-height:48px;padding:0;border:0;border-radius:var(--fp-r-betjening);background:none;color:var(--fp-tekst-svag);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.fp-sp-k[aria-pressed="true"],.fp-sp-k:hover{color:var(--fp-tekst)}
.fp-noegl{flex:none;width:14px;height:14px;border:1px solid}
.fp-sp-k[aria-pressed="true"] .fp-noegl{background:var(--fp-gloed);border-color:var(--fp-gloed)}
.fp-top .fp-eyebrow{margin-top:12px}
.fp-snit-felt{position:relative;aspect-ratio:320/270}
.fp-snit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--fp-tekst);stroke-width:var(--_sw);stroke-linejoin:round}
.fp-snit .tung{stroke-width:calc(var(--_sw)*1.9)}
.fp-snit .fin{stroke:var(--fp-tekst-svag);stroke-width:calc(var(--_sw)*.85)}
.fp-snit .rum,.fp-snit .rev{fill:var(--fp-gloed);stroke:none;opacity:0}
.fp-snit .fj-s{stroke:var(--fp-gloed);stroke-width:calc(var(--_sw)*1.9);stroke-dasharray:5 4;opacity:0}
.fp-snit .fjernet{opacity:0}
.fp-maal{position:absolute;right:calc(100% - 63 / 320 * 100%);top:calc(var(--y) / 270 * 100%);transform:translateY(-50%);font:400 .75rem/1 var(--fp-skrift-mono);color:var(--fp-tekst-svag);white-space:nowrap}
.fp-maal--h{right:var(--_kant)}
.fp-maal--rum{right:auto;left:calc(231.5 / 320 * 100%);transform:translate(-50%,-50%);color:var(--fp-tekst);opacity:0}
.fp-snit[data-t="gjaldt"] .ny{opacity:0}
.fp-snit[data-t="gjaldt"] .fjernet{opacity:1}
.fp-snit[data-t="aendret"] .basis{opacity:.4}
.fp-snit[data-t="aendret"] .ny{stroke:var(--fp-gloed);stroke-width:calc(var(--_sw)*2.2)}
.fp-snit[data-t="aendret"] :is(.fj-s,.rum,.fp-maal--rum){opacity:1}
.fp-snit[data-t="gaelder"] .rev{opacity:1}
.fp-snit figcaption{min-height:3.2em;padding:4px var(--_kant) 0;color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}
.fp-top-ind{display:grid;gap:24px;padding:20px var(--_kant) 0}
.fp-search{display:grid;gap:10px;max-width:34rem}
.fp-search label{display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;border-bottom:1px solid var(--fp-tekst)}
.fp-search svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--fp-tekst-svag);stroke-width:2;stroke-linecap:round}
.fp-search input{flex:1;min-width:0;min-height:44px;padding:0;border:0;outline:0;background:none;color:inherit;font:inherit}
.fp-search button{justify-self:start;background:none;border:0;padding:0;color:var(--fp-tekst-svag);cursor:default}
.fp-diff{display:grid;gap:6px;margin:48px var(--_kant) 0;padding-top:20px;border-top:1px solid var(--fp-streg)}
.fp-diff__h,.fp-diff__k{display:contents}
.fp-diff__h .fp-mono{margin-bottom:10px;color:var(--fp-tekst-svag)}
.fp-diff__a,.fp-diff__b{font:400 .75rem/1.5 var(--fp-skrift-mono)}
.fp-diff .fp-pil{order:3;margin:14px 0 8px;transform:rotate(90deg);color:var(--fp-tekst-svag)}
.fp-diff__a{order:1}.fp-da{order:2}.fp-diff__b{order:4}.fp-db{order:5}.fp-linje{order:6}.fp-diff figcaption{order:7}
.fp-diff p{max-width:34rem}
.fp-diff del{color:var(--fp-tekst-svag);text-decoration-thickness:1px}
.fp-diff ins{padding:.08em .3em;background:var(--fp-gloed);color:var(--fp-paa-gloed);text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fp-snit[data-t="gjaldt"]~.fp-diff :is(.fp-db,.fp-diff__b),.fp-snit[data-t="gaelder"]~.fp-diff :is(.fp-da,.fp-diff__a){color:var(--fp-tekst-svag)}
.fp-linje{width:100%;height:28px;margin-top:28px;overflow:visible;fill:none;stroke:var(--fp-tekst-svag);stroke-width:1}
.fp-linje path{vector-effect:non-scaling-stroke}
.fp-linje .a{stroke:var(--fp-tekst);stroke-width:2}
.fp-linje .b{stroke:var(--fp-gloed);stroke-width:3}
.fp-diff figcaption{margin-top:8px;color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}

/* fakta: en målkæde */
.fp-band{padding:56px var(--_side) 64px}
.fp-band>.wp-block-columns{display:block;border-left:1px solid var(--fp-tekst)}
.fp-band .wp-block-column{position:relative;padding:0 0 22px 22px}
.fp-band .wp-block-column:last-child{padding-bottom:0}
.fp-band .wp-block-column::before{content:"";position:absolute;left:-7px;top:.95em;width:13px;height:1px;background:var(--fp-tekst);transform:rotate(-45deg)}
.fp-band__tal+p{color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}

/* tegningshovedet: vejen ind til de fire produkter */
.fp-th-ind{display:grid;gap:28px;padding:36px var(--_side) 28px}
.fp-th .fp-eyebrow{margin-bottom:16px}
.fp-th h2{margin-bottom:10px}
.fp-th-r{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:2px 14px;align-items:center;min-height:64px;padding:14px 0;border-bottom:1px solid var(--fp-streg)}
.fp-th-r:first-child{border-top:1px solid var(--fp-tekst)}
.fp-th-r h3{display:flex;align-items:center;gap:14px}
.fp-th-r p{grid-column:1;margin-left:42px;color:var(--fp-tekst-svag)}
.fp-th-r p:not(.fp-tag){font-size:.9375rem;line-height:1.5}
.fp-th-r h3 a{text-decoration:none}
.fp-th-r h3 a::after{content:"";position:absolute;inset:0}
.fp-th-r:hover h3 a,.fp-th-r h3 a:focus-visible{text-decoration:underline;text-decoration-thickness:2px}
.fp-th-r::after{content:"";grid-area:1/2;width:20px;height:20px;background:currentColor;-webkit-mask:var(--_pil) center/contain no-repeat;mask:var(--_pil) center/contain no-repeat}

/* arkene: én etage pr. afsnit */
.fp-stribe{display:block;width:100%;height:max(56px,4vw);fill:none;stroke:var(--fp-tekst);stroke-width:1.25}
.fp-stribe .tung{stroke-width:2}
.fp-stribe .fin{stroke:var(--fp-tekst-svag);stroke-width:1}
.fp-mini{flex:none;width:var(--w,48px);aspect-ratio:320/270;color:var(--fp-tekst)}
.fp-mini[data-t="gjaldt"]{--o-rum:0;--o-fj:1;--o-ny:0}
.fp-mini[data-t="aendret"]{--o-basis:.4;--o-fj:1;--s-fj:var(--fp-gloed);--d-fj:14 10;--s-ny:var(--fp-gloed)}
.fp-mini[data-t="gaelder"]{--o-rum:0;--o-rev:1}
.fp-np{--o-rum:0;--o-vaeg:0;--o-ny:0}
.fp-ind{display:grid;gap:36px;padding:28px var(--_side) 64px}
.fp-intro{display:grid;justify-items:start}
.fp-intro h2+p{margin-top:16px}
.fp-intro .fp-snart{margin-top:20px;color:var(--fp-tekst-svag)}
.fp-etage{display:flex;align-items:center;gap:12px;margin-bottom:16px;white-space:nowrap}
.fp-etage .fp-eyebrow{color:var(--fp-tekst);white-space:normal}
.fp-rum3>div,.fp-rum2>div{padding:24px 0;border-top:1px solid var(--fp-streg)}
.fp-ikon{display:block;width:32px;height:32px;margin-bottom:14px;fill:none;stroke:var(--fp-tekst);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fp-rum3 h3{margin-bottom:8px}
.fp-rum3 h3 a{display:inline-block;padding-block:11px;margin-block:-11px}
.fp-rum3 p{color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.55}
.fp-rum3 .fp-num{margin-bottom:6px;font-size:.75rem;line-height:1.5}
.fp-rows{margin-top:6px;padding:0;list-style:none}
.fp-rows li{padding:10px 0;border-bottom:1px solid var(--fp-streg);font-size:.9375rem;line-height:1.45}
.fp-rum3 .fp-note{margin-top:14px}
.fp-rum2>div:first-child{border-top:0;padding-top:0}
.fp-rum2 h2{margin-bottom:14px}
.fp-rum2 p,.fp-rum2 .fp-rows{max-width:34rem}
.fp-rum2 .fp-rows{margin-top:20px}
.fp-rum2 .fp-rows li{display:grid;grid-template-columns:44px 5.5rem minmax(0,1fr);gap:10px;align-items:center;hyphens:auto;overflow-wrap:break-word}
.fp-rum2 .fp-rows .fp-mini{--w:44px}
.fp-rum2 .fp-rows .fp-mono{color:var(--fp-tekst-svag)}
.fp-rum2 .fp-rows li:last-child .fp-mono{color:var(--fp-tekst)}
.fp-answer{display:grid;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--fp-streg)}
.fp-cta .fp-ind{gap:16px}
.fp-cta .wp-block-buttons{margin-top:24px}

@media (min-width:700px){
.fp-sp-k{min-height:68px;gap:18px}
.fp-noegl{width:18px;height:18px}
.fp-snit{width:min(100%,640px);margin-inline:auto}
.fp-maal--h{right:0}
.fp-snit figcaption{padding-inline:0}
.fp-search{grid-template-columns:1fr auto;align-items:center;gap:16px}
.fp-diff{grid-template-columns:1fr auto 1fr;gap:6px 24px}
.fp-diff__h .fp-mono,.fp-linje,.fp-diff figcaption{grid-column:1/-1}
.fp-diff .fp-pil{order:2;align-self:center;margin:0;transform:none}
.fp-diff__b{order:3}.fp-da{order:4;grid-column:1/span 2;padding-right:24px}
.fp-band>.wp-block-columns{display:grid;grid-template-columns:repeat(2,1fr);border-left:0;border-top:1px solid var(--fp-tekst)}
.fp-band .wp-block-column,.fp-band .wp-block-column:last-child{padding:20px 16px 20px 0}
.fp-band .wp-block-column::before{left:-6px;top:0}
.fp-th-r{grid-template-columns:calc(42px + 14rem) minmax(0,1fr) 20px}
.fp-th-r p:not(.fp-tag){grid-area:1/2/span 2;margin-left:0}
.fp-th-r::after{grid-area:1/3}
/* Tre på række. Flere end tre rum (Værktøjer har fem, 9.10.2026) fortsætter i næste række: 3 + 2. Luften mellem rækkerne
   er polstring, ikke mellemrum, så den lodrette streg løber ubrudt ned gennem begge rækker. */
.fp-rum3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-rum3>div{padding:24px 20px 0;border-top:0;border-left:1px solid var(--fp-streg)}
.fp-rum3>div:nth-child(3n+1){padding-left:0;border-left:0}
.fp-rum3>div:nth-child(n+4){padding-top:48px}
.fp-rum2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fp-rum2>div{padding:0 0 0 32px;border-top:0;border-left:1px solid var(--fp-streg)}
.fp-rum2>div:first-child{padding:0 32px 0 0;border-left:0}
}
@media (min-width:1000px){
.fp-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;padding-top:28px}
.fp-top-tekst{grid-area:1/1;padding-right:24px}
/* luften under søgefeltet følger snittets højde: 58,33 % er snittets spalte (7 af 12) */
.fp-top-ind{grid-area:2/1;align-self:end;padding-right:24px;padding-bottom:calc(min(100vw,var(--fp-bredde-mellem) + 2*var(--_kant))*.5833*54/320 + 3.2em + 28px)}
.fp-snit{grid-area:1/2/span 2;width:100%;margin:0}
.fp-snit figcaption{padding-right:var(--_kant)}
.fp-maal--h{right:var(--_kant)}
.fp-sp-k{min-height:60px}
.fp-diff{grid-column:1/-1;grid-template-columns:minmax(0,4fr) minmax(0,4fr) auto minmax(0,4fr);gap:6px 28px;margin-top:8px}
.fp-diff__h .fp-mono{grid-area:1/1}
.fp-linje{grid-area:2/1;order:0;margin-top:6px}
.fp-diff figcaption{grid-area:3/1;order:0;padding-right:24px}
.fp-diff__a{grid-area:1/2}.fp-diff .fp-pil{grid-area:1/3}.fp-diff__b{grid-area:1/4}
.fp-da{grid-area:2/2/span 2/span 2}.fp-db{grid-area:2/4/span 2}
.fp-band>.wp-block-columns{grid-template-columns:repeat(4,1fr)}
.fp-th-ind,.fp-ind{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
.fp-th-ind{padding-block:52px 44px}
.fp-th-r{grid-template-columns:calc(42px + 12rem) minmax(0,1fr) 20px}
.fp-ind{padding-block:36px 96px}
.fp-ind--fuld{grid-template-columns:1fr}
}
body:not(.fp-afrunding-ingen) .fp-noegl{border-radius:50%}
body:not(.fp-afrunding-ingen) .fp-maal--h{padding:4px 9px;border:1px solid var(--fp-streg);border-radius:var(--fp-r-maerkat)}
body:not(.fp-afrunding-ingen) .fp-search label{padding:0 14px;border:1px solid var(--fp-tekst);border-radius:var(--fp-r-betjening)}
body:not(.fp-afrunding-ingen) .fp-th-liste{display:grid;gap:8px}
body:not(.fp-afrunding-ingen) .fp-th-r{padding:14px;border:0;border-radius:var(--fp-r-raekke);background:rgb(13 21 32 / .05)}
body:not(.fp-afrunding-ingen) .fp-th-r:hover{background:rgb(13 21 32 / .1)}
body:not(.fp-afrunding-ingen) .fp-th-r h3 a::after{border-radius:var(--fp-r-raekke)}
body:not(.fp-afrunding-ingen) .fp-th-r h3 a:focus-visible{outline:0}
body:not(.fp-afrunding-ingen) .fp-th-r:has(a:focus-visible){outline:2px solid var(--fp-tekst);outline-offset:2px}
body:not(.fp-afrunding-ingen) .fp-rum3 :is(h2,h3) a{display:inline-block;margin:0 0 2px -12px;padding:11px 12px;border-radius:var(--fp-r-betjening);background:rgb(230 234 238 / .08);text-decoration:none}
body:not(.fp-afrunding-ingen) .fp-rum3 :is(h2,h3) a:hover{background:rgb(230 234 238 / .16)}
.fp-afrunding-ark :is(.fp-th,.fp-ind,.fp-diff){margin-inline:calc(var(--_kant) / 2)}
.fp-afrunding-ark :is(.fp-th-ind,.fp-ind){padding-inline:max(calc(var(--_kant) / 2),calc((100% - var(--fp-bredde-mellem)) / 2))}
.fp-afrunding-ark .fp-th{border-radius:var(--fp-r-raekke)}
.fp-afrunding-ark .fp-ind{margin-bottom:32px;padding-block:28px 36px;border:1px solid var(--fp-streg);border-top:0;border-radius:0 0 var(--fp-r-raekke) var(--fp-r-raekke)}
.fp-afrunding-ark .fp-diff{padding:20px calc(var(--_kant) / 2);border:1px solid var(--fp-streg);border-radius:var(--fp-r-raekke)}
/* ---------- bevægelse: fem greb, kun på forsiden. Alt er slået fra ved "reducer bevægelse"; så står slutbilledet. ---------- */
@media (prefers-reduced-motion:no-preference){
/* 2 · de tre spørgsmål skifter tilstand i snit og eksempel */
.fp-snit :is(.l,.rum,.rev,.fj-s,.basis,.fp-maal--rum){transition:opacity .45s var(--fp-ud),stroke .45s var(--fp-ud),stroke-width .45s var(--fp-ud)}
.fp-diff :is(p,span){transition:color .45s var(--fp-ud)}
/* 1 · snittet tegner sig selv (scriptet sætter .fp-spil, første gang snittet er i syne) */
.fp-snit.fp-spil .l{stroke-dasharray:1;stroke-dashoffset:1;animation:fp-tegn .8s var(--fp-ud) forwards;animation-delay:calc(var(--i)*85ms)}
/* 4 · etagenavnene toner frem efter stregerne */
.fp-snit.fp-spil .fp-maal:not(.fp-maal--rum){opacity:0;animation:fp-ton .6s var(--fp-ud) 2.2s forwards}
/* 3 · det ændrede pulserer én gang i Glød */
.fp-snit[data-t="aendret"] .ny{animation:fp-puls 1s var(--fp-ud) .25s 1}
.fp-snit[data-t="aendret"] .fj-s{animation:fp-puls-s 1s var(--fp-ud) .25s 1}
/* 5 · hvert ark tegnes ind, mens det ruller ind på skærmen (ren CSS) */
@supports (animation-timeline:view()){.fp-stribe{animation:fp-ark linear both;animation-timeline:view();animation-range:entry 10% cover 38%}}
}
@keyframes fp-tegn{to{stroke-dashoffset:0}}
@keyframes fp-ton{to{opacity:1}}
@keyframes fp-puls{0%,100%{stroke-width:calc(var(--_sw)*2.2)}30%{stroke-width:calc(var(--_sw)*5.5)}}
@keyframes fp-puls-s{0%,100%{stroke-width:calc(var(--_sw)*1.9)}30%{stroke-width:calc(var(--_sw)*5)}}
@keyframes fp-ark{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
