/* Hours — Forhandling, sidespecifikt lag. Indlæses efter scene-base.css. Fire scener, fire forskellige mekanikker, samme designsprog: 1 Samtalen og priskortet reagerer paa hinanden (16 s) 2 Forhandlingsbriefen bygges: raa kontrakt -> data -> analyse -> maal (14 s) 3 Foer/efter: vilkaarene forbedres ét ad gangen, hoejre side fyldes (15 s) 4 Proceslinjen: status vandrer gennem forloebet, hvert trin lander et kort (15 s) Hver scene koerer én faelles cyklus pr. flade. Forskydning ligger ALTID i keyframe-procenter, aldrig i animation-delay: et delay paa en uendelig animation forskyder cyklussen permanent i forhold til resten af scenen. 100 % er identisk med 0 %, saa loopet lukker uden spring. Tallene er de samme hele siden igennem: 1.870 nu, 1.620 marked, 1.790 foerste modbud, 1.650 endelig, 2.640 kr sparet om aaret. */ /* ══ 1 · Forhandlingstraaden (16 s) ══════════════════════════════════ */ /* Fladen er nu fotoet. Animationen koerer uaendret, men samlet i ét lag der staar nedskaleret i venstre hjoerne. Skalaen ligger paa wrapperen, aldrig paa kortene selv: flere af scenens keyframes bruger transform. */ body.page-forhandling .fh-panel { position: relative; display: block; padding: 0; min-height: 520px; overflow: hidden; } body.page-forhandling .fh-foto { position: absolute; inset: 0; } body.page-forhandling .fh-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } body.page-forhandling .fh-anim { position: absolute; left: clamp(16px, 2.6vw, 40px); bottom: clamp(16px, 2.6vw, 40px); width: min(316px, 56%); } /* ── E-mail-kortet ────────────────────────────────────────────────────── Amber forhandler over mail, ikke sms. Kortet er derfor bygget som en mailtraad: modtager og emne staar fast oeverst, og svarene lander ét ad gangen nedenunder. Kladde-pillen er den samme detalje som paa forsidens Amber-kort, saa de to flader taler samme sprog. Alle beloeb skrives ens: tal foerst, derefter "kr/md". */ body.page-forhandling .fh-mail-kort { display: flex; flex-direction: column; border-radius: 7px; overflow: hidden; } body.page-forhandling .fh-mk-hd { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #f2f0ec; } body.page-forhandling .fh-mk-ik { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; background: var(--green-bg); color: var(--green-txt); } body.page-forhandling .fh-mk-ik svg { width: 14px; height: 14px; } body.page-forhandling .fh-mk-hdtx { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.25; } body.page-forhandling .fh-mk-hdtx b { font-size: .72rem; font-weight: 600; color: var(--t1); } body.page-forhandling .fh-mk-hdtx span { font-size: .56rem; color: var(--t3); } body.page-forhandling .fh-mk-stvk { display: inline-grid; flex: 0 0 auto; justify-items: end; } body.page-forhandling .fh-mk-stvk > * { grid-area: 1 / 1; } body.page-forhandling .fh-mk-draft, body.page-forhandling .fh-mk-sendt { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px; border-radius: 999px; font-size: .55rem; font-style: normal; font-weight: 600; letter-spacing: .02em; white-space: nowrap; opacity: 0; } body.page-forhandling .fh-mk-draft { background: #0a84ff; color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.08); } body.page-forhandling .fh-mk-sendt { background: var(--green-bg); color: var(--green-txt); } body.page-forhandling .fh-mk-sendt svg { width: 9px; height: 9px; } body.page-forhandling .fh-mk-meta { display: flex; flex-direction: column; gap: 4px; padding: 10px 13px; background: #faf9f7; border-bottom: 1px solid #f2f0ec; } body.page-forhandling .fh-mk-mr { display: flex; gap: 7px; font-size: .6rem; line-height: 1.35; color: var(--t2); } body.page-forhandling .fh-mk-mr i { flex: 0 0 26px; font-style: normal; color: var(--t3); } body.page-forhandling .fh-mk-vedh { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 3px 0 0 33px; padding: 3px 8px 3px 6px; border: 1px solid #ece9e3; border-radius: 5px; background: #fff; font-size: .58rem; color: var(--t2); } body.page-forhandling .fh-mk-vedh svg { width: 11px; height: 11px; color: var(--t3); } body.page-forhandling .fh-mk-vedh em { font-style: normal; color: var(--t3); } body.page-forhandling .fh-mk-traad { display: grid; padding: 12px 13px; min-height: 104px; } body.page-forhandling .fh-mail { grid-area: 1 / 1; align-self: center; display: flex; gap: 9px; opacity: 0; } body.page-forhandling .fh-mail-av { display: grid; place-items: center; overflow: hidden; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: #efece7; } body.page-forhandling .fh-mail-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } body.page-forhandling .fh-av-amber { background: var(--green-bg); color: var(--green-txt); } body.page-forhandling .fh-av-amber svg { width: 13px; height: 13px; } body.page-forhandling .fh-mail-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } body.page-forhandling .fh-mail-top { display: flex; align-items: baseline; gap: 6px; } body.page-forhandling .fh-mail-top b { font-size: .63rem; font-weight: 600; color: var(--t1); } body.page-forhandling .fh-mail-top i { font-style: normal; font-size: .55rem; color: var(--t3); } body.page-forhandling .fh-mail-em { font-size: .55rem; color: var(--t3); } body.page-forhandling .fh-mail-kr { margin-top: 6px; font-size: .68rem; line-height: 1.45; color: var(--t1); } body.page-forhandling .fh-mail-amb .fh-mail-kr { color: var(--green-txt); } body.page-forhandling .fh-mk-bund { padding: 11px 13px 13px; border-top: 1px solid #f2f0ec; } body.page-forhandling .fh-mk-spor { height: 2.5px; border-radius: 999px; background: #eceae5; overflow: hidden; } body.page-forhandling .fh-mk-spor-fyld { display: block; height: 100%; border-radius: inherit; background: var(--green-txt); transform: scaleX(0); transform-origin: left center; } body.page-forhandling .fh-mk-tal { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 9px; } body.page-forhandling .fh-mk-tk { display: flex; flex-direction: column; line-height: 1.25; } body.page-forhandling .fh-mk-tk small { font-size: .55rem; color: var(--t3); } body.page-forhandling .fh-mi-rnvk, body.page-forhandling .fh-mi-talvk, body.page-forhandling .fh-mi-dlvk { display: inline-grid; } body.page-forhandling .fh-mi-rnvk > *, body.page-forhandling .fh-mi-talvk > *, body.page-forhandling .fh-mi-dlvk > * { grid-area: 1 / 1; } body.page-forhandling .fh-mi-rnvk { vertical-align: baseline; justify-items: start; } body.page-forhandling .fh-mi-rn { font-style: normal; opacity: 0; } body.page-forhandling .fh-mi-talvk { justify-items: start; } body.page-forhandling .fh-mi-dlvk { justify-items: end; padding-top: 3px; } body.page-forhandling .fh-mi-tal { font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; } body.page-forhandling .fh-mi-dl { font-size: .6rem; font-style: normal; color: var(--t3); white-space: nowrap; opacity: 0; } body.page-forhandling .fh-mi-dl:not([style*="--i:0"]) { color: var(--green-txt); font-weight: 600; } /* Kortets tidslinje. Alle forskydninger ligger i keyframe-procenter, aldrig i animation-delay, saa hele kortet deler én cyklus. */ body.page-forhandling .fh-mail-kort { animation: fh-mk-kort 16s var(--sc-ud) infinite both; } @keyframes fh-mk-kort { 0% { opacity: 0; transform: translateY(10px); } 4%, 96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } /* Mailene: én ad gangen, den sidste bliver staaende cyklussen ud. */ body.page-forhandling .fh-mail[style*="--i:0"] { animation: fh-mk-m0 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m0 { 0%, 4% { opacity: 0; transform: translateY(7px); } 6%, 14% { opacity: 1; transform: translateY(0); } 16%, 100% { opacity: 0; transform: translateY(-7px); } } body.page-forhandling .fh-mail[style*="--i:1"] { animation: fh-mk-m1 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m1 { 0%, 14% { opacity: 0; transform: translateY(7px); } 16%, 25% { opacity: 1; transform: translateY(0); } 27%, 100% { opacity: 0; transform: translateY(-7px); } } body.page-forhandling .fh-mail[style*="--i:2"] { animation: fh-mk-m2 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m2 { 0%, 25% { opacity: 0; transform: translateY(7px); } 27%, 36% { opacity: 1; transform: translateY(0); } 38%, 100% { opacity: 0; transform: translateY(-7px); } } body.page-forhandling .fh-mail[style*="--i:3"] { animation: fh-mk-m3 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m3 { 0%, 36% { opacity: 0; transform: translateY(7px); } 38%, 47% { opacity: 1; transform: translateY(0); } 49%, 100% { opacity: 0; transform: translateY(-7px); } } body.page-forhandling .fh-mail[style*="--i:4"] { animation: fh-mk-m4 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m4 { 0%, 47% { opacity: 0; transform: translateY(7px); } 49%, 58% { opacity: 1; transform: translateY(0); } 60%, 100% { opacity: 0; transform: translateY(-7px); } } body.page-forhandling .fh-mail[style*="--i:5"] { animation: fh-mk-m5 16s var(--sc-ud) infinite both; } @keyframes fh-mk-m5 { 0%, 58% { opacity: 0; transform: translateY(7px); } 60%, 96% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } /* Kladde staar, mens Amber skriver svaret, og bliver til Sendt, naar mailen er afsted. Amber svarer ved 14, 36 og 58 %. */ body.page-forhandling .fh-mk-draft { animation: fh-mk-draft 16s var(--sc-ud) infinite both; } @keyframes fh-mk-draft { 0%, 9% { opacity: 0; } 10%, 14% { opacity: 1; } 16%, 31% { opacity: 0; } 32%, 36% { opacity: 1; } 38%, 53% { opacity: 0; } 54%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } } body.page-forhandling .fh-mk-sendt { animation: fh-mk-sendt 16s var(--sc-ud) infinite both; } @keyframes fh-mk-sendt { 0%, 15% { opacity: 0; } 17%, 31% { opacity: 1; } 33%, 37% { opacity: 0; } 39%, 53% { opacity: 1; } 55%, 59% { opacity: 0; } 61%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } } /* Forloebsspor og beloeb: tallet skifter i det oejeblik, det naevnes. */ body.page-forhandling .fh-mk-spor-fyld { animation: fh-mk-spor 16s var(--sc-ud) infinite both; } @keyframes fh-mk-spor { 0%, 4% { transform: scaleX(0); } 60%, 96% { transform: scaleX(1); } 99%, 100% { transform: scaleX(0); } } body.page-forhandling .fh-mi-tal[style*="--i:0"] { animation: fh-mk-t0 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-dl[style*="--i:0"] { animation: fh-mk-t0 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-rn[style*="--i:0"] { animation: fh-mk-t0 16s var(--sc-ud) infinite both; } @keyframes fh-mk-t0 { 0%, 5% { opacity: 0; transform: translateY(9px); } 7%, 27% { opacity: 1; transform: translateY(0); } 29%, 100% { opacity: 0; transform: translateY(-9px); } } body.page-forhandling .fh-mi-tal[style*="--i:1"] { animation: fh-mk-t1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-dl[style*="--i:1"] { animation: fh-mk-t1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-rn[style*="--i:1"] { animation: fh-mk-t1 16s var(--sc-ud) infinite both; } @keyframes fh-mk-t1 { 0%, 27% { opacity: 0; transform: translateY(9px); } 29%, 49% { opacity: 1; transform: translateY(0); } 51%, 100% { opacity: 0; transform: translateY(-9px); } } body.page-forhandling .fh-mi-tal[style*="--i:2"] { animation: fh-mk-t2 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-dl[style*="--i:2"] { animation: fh-mk-t2 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-mi-rn[style*="--i:2"] { animation: fh-mk-t2 16s var(--sc-ud) infinite both; } @keyframes fh-mk-t2 { 0%, 49% { opacity: 0; transform: translateY(9px); } 51%, 96% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } /* Beskederne: boblen lander, skriver kort, og teksten staar. */ body.page-forhandling .fh-msg[style*="--i:0"] { animation: fh-msg0 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:0"] .fh-boble::before { animation: fh-dots0 16s linear infinite both; } @keyframes fh-msg0 { 0%, 4% { opacity: 0; transform: translateY(8px); } 6%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots0 { 0%, 4% { opacity: 0; } 5%, 6.6% { opacity: 1; } 7.2%, 100% { opacity: 0; } } body.page-forhandling .fh-msg[style*="--i:1"] { animation: fh-msg1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:1"] .fh-boble::before { animation: fh-dots1 16s linear infinite both; } @keyframes fh-msg1 { 0%, 14% { opacity: 0; transform: translateY(8px); } 16%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots1 { 0%, 14% { opacity: 0; } 15%, 16.6% { opacity: 1; } 17.2%, 100% { opacity: 0; } } body.page-forhandling .fh-msg[style*="--i:2"] { animation: fh-msg2 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:2"] .fh-boble::before { animation: fh-dots2 16s linear infinite both; } @keyframes fh-msg2 { 0%, 25% { opacity: 0; transform: translateY(8px); } 27%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots2 { 0%, 25% { opacity: 0; } 26%, 27.6% { opacity: 1; } 28.2%, 100% { opacity: 0; } } body.page-forhandling .fh-msg[style*="--i:3"] { animation: fh-msg3 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:3"] .fh-boble::before { animation: fh-dots3 16s linear infinite both; } @keyframes fh-msg3 { 0%, 36% { opacity: 0; transform: translateY(8px); } 38%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots3 { 0%, 36% { opacity: 0; } 37%, 38.6% { opacity: 1; } 39.2%, 100% { opacity: 0; } } body.page-forhandling .fh-msg[style*="--i:4"] { animation: fh-msg4 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:4"] .fh-boble::before { animation: fh-dots4 16s linear infinite both; } @keyframes fh-msg4 { 0%, 47% { opacity: 0; transform: translateY(8px); } 49%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots4 { 0%, 47% { opacity: 0; } 48%, 49.6% { opacity: 1; } 50.2%, 100% { opacity: 0; } } body.page-forhandling .fh-msg[style*="--i:5"] { animation: fh-msg5 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-msg[style*="--i:5"] .fh-boble::before { animation: fh-dots5 16s linear infinite both; } @keyframes fh-msg5 { 0%, 58% { opacity: 0; transform: translateY(8px); } 60%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-dots5 { 0%, 58% { opacity: 0; } 59%, 60.6% { opacity: 1; } 61.2%, 100% { opacity: 0; } } body.page-forhandling .fh-status .a { animation: fh-st-a 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-status .b { animation: fh-st-b 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-status { animation: fh-st-bg 16s var(--sc-ud) infinite both; } @keyframes fh-st-a { 0%, 61% { opacity: 1; } 63%, 100% { opacity: 0; } } @keyframes fh-st-b { 0%, 61% { opacity: 0; transform: translateY(3px); } 63%, 100% { opacity: 1; transform: translateY(0); } } @keyframes fh-st-bg { 0%, 61% { background: var(--amber-bg); color: var(--amber-txt); } 63%, 100% { background: var(--green-bg); color: var(--green-txt); } } /* Priskortet: hvert tal skifter i samme oejeblik, som beloebet naevnes i samtalen. Runde 2 ved 27 % (msg 2), runde 3 ved 49 % (msg 4). */ body.page-forhandling .fh-pris { animation: fh-pris 16s var(--sc-ud) infinite both; } @keyframes fh-pris { 0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 5%, 94% { opacity: 1; transform: translateY(0); filter: blur(0); } 98%, 100% { opacity: 0; transform: translateY(0); filter: blur(0); } } body.page-forhandling .fh-tal:nth-child(1) { animation: fh-tal1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-tal:nth-child(2) { animation: fh-tal2 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-tal:nth-child(3) { animation: fh-tal3 16s var(--sc-ud) infinite both; } @keyframes fh-tal1 { 0%, 5% { opacity: 0; transform: translateY(10px); } 7%, 27% { opacity: 1; transform: translateY(0); } 29%, 100% { opacity: 0; transform: translateY(-10px); } } @keyframes fh-tal2 { 0%, 27% { opacity: 0; transform: translateY(10px); } 29%, 49% { opacity: 1; transform: translateY(0); } 51%, 100% { opacity: 0; transform: translateY(-10px); } } @keyframes fh-tal3 { 0%, 49% { opacity: 0; transform: translateY(10px); } 51%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } body.page-forhandling .fh-runde > span:nth-child(1) { animation: fh-tal1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-runde > span:nth-child(2) { animation: fh-tal2 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-runde > span:nth-child(3) { animation: fh-tal3 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-skala-gab { animation: fh-gab 16s var(--sc-ud) infinite both; } @keyframes fh-gab { 0%, 27% { transform: scaleX(1); background: #eeb3c5; } 31%, 49% { transform: scaleX(.681); background: #eeb3c5; } 53%, 100% { transform: scaleX(.12); background: var(--sc-mint-graa); } } body.page-forhandling .fh-skala-naal { animation: fh-naal 16s var(--sc-ud) infinite both; } @keyframes fh-naal { 0%, 27% { left: 91.4%; box-shadow: 0 0 0 3px #eeb3c5, 0 2px 6px rgba(26, 25, 22, .2); } 31%, 49% { left: 68.6%; box-shadow: 0 0 0 3px #eeb3c5, 0 2px 6px rgba(26, 25, 22, .2); } 53%, 100% { left: 28.6%; box-shadow: 0 0 0 3px var(--sc-mint-graa), 0 2px 6px rgba(26, 25, 22, .2); } } /* Markedsprisen fremhaeves praecis naar Amber naevner den i besked 2. */ body.page-forhandling .fh-skala-mark { animation: fh-mark 16s var(--sc-ud) infinite both; } @keyframes fh-mark { 0%, 16% { opacity: .55; transform: translateX(-50%) scale(1); } 18% { opacity: 1; transform: translateX(-50%) scale(1.1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 21%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } } body.page-forhandling .fh-log-rk[style*="--i:0"] { animation: fh-log0 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-log-rk[style*="--i:1"] { animation: fh-log1 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-log-rk[style*="--i:2"] { animation: fh-log2 16s var(--sc-ud) infinite both; } @keyframes fh-log0 { 0%, 7% { opacity: 0; transform: translateX(-6px); } 10%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } } @keyframes fh-log1 { 0%, 29% { opacity: 0; transform: translateX(-6px); } 32%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } } @keyframes fh-log2 { 0%, 51% { opacity: 0; transform: translateX(-6px); } 54%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } } body.page-forhandling .fh-delta { animation: fh-delta 16s var(--sc-ud) infinite both; } @keyframes fh-delta { 0%, 63% { opacity: 0; transform: translateY(6px); } 67%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } body.page-forhandling .fh-aar b { animation: fh-aar 16s var(--sc-ud) infinite both; } body.page-forhandling .fh-aar-tom { animation: fh-aartom 16s var(--sc-ud) infinite both; } @keyframes fh-aar { 0%, 67% { opacity: 0; transform: translateY(8px); } 72%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(8px); } } @keyframes fh-aartom { 0%, 67% { opacity: 1; } 70%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } } /* ══ 2 · Forhandlingsbriefen (14 s) ══════════════════════════════════ */ body.page-forhandling .fh-brief { position: relative; z-index: 2; width: 92%; display: flex; flex-direction: column; animation: fh-brief 14s var(--sc-ud) infinite both; } @keyframes fh-brief { 0% { opacity: 0; transform: scale(.965); filter: blur(4px); } 4%, 94% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(.985); filter: blur(3px); } } body.page-forhandling .fh-brief-ik { flex: none; width: 20px; height: 24px; display: grid; place-items: center; } body.page-forhandling .fh-brief-ik img { width: 100%; height: 100%; object-fit: contain; } body.page-forhandling .fh-brief-st { display: inline-grid; } body.page-forhandling .fh-brief-st > span { grid-area: 1 / 1; white-space: nowrap; text-align: center; } body.page-forhandling .fh-brief-st .b { opacity: 0; } body.page-forhandling .fh-brief-krop { position: relative; overflow: hidden; } body.page-forhandling .fh-brief .sc-kort-hd { border-bottom: 0; } body.page-forhandling .fh-br-rk:first-child { border-top: 0; } /* Groent laesesveb, samme greb som paa kontrakt- og oekonomisiderne. */ /* Laeselinjen er den samme som kontraktsidens: en blod, symmetrisk mint- glans uden haard kant, der glider ned over raekkerne. Den tidligere udgave havde en moerkegroen underkant, som laa som en streg hen over teksten. */ body.page-forhandling .fh-skan { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(200, 238, 221, 0), rgba(200, 238, 221, .7), rgba(200, 238, 221, 0)); } body.page-forhandling .fh-br-rk { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 14px; border-top: 1px solid #f4f2ee; opacity: .3; } body.page-forhandling .fh-br-ik { flex: none; width: 14px; height: 14px; color: var(--t3); display: grid; place-items: center; } body.page-forhandling .fh-br-ik svg { width: 14px; height: 14px; } body.page-forhandling .fh-br-k { font-size: .68rem; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-forhandling .fh-br-k em { font-style: normal; font-size: .56rem; color: var(--t3); margin-left: 5px; } body.page-forhandling .fh-br-vk { display: inline-grid; margin-left: auto; } body.page-forhandling .fh-br-vk > * { grid-area: 1 / 1; justify-self: end; align-self: center; } body.page-forhandling .fh-br-tom { width: 26px; height: 1.5px; border-radius: 1px; background: #ddd9d3; } body.page-forhandling .fh-br-v { font-size: .7rem; font-weight: 600; color: var(--t1); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; } body.page-forhandling .fh-br-graf { display: flex; align-items: flex-end; gap: 2px; height: 13px; margin-left: auto; } body.page-forhandling .fh-br-graf i { width: 3px; border-radius: 1px; background: #ddd9d3; height: var(--h); transform-origin: bottom; transform: scaleY(0); } body.page-forhandling .fh-br-graf i:last-child { background: #eeb3c5; } body.page-forhandling .fh-br-graf + .fh-br-vk { margin-left: 10px; } /* Analysen: afstanden fra markedet til den nuvaerende pris, med maalet sat ind som et tredje maerke, naar konklusionen er truffet. */ /* Kortet er hvidt hele vejen igennem. De graa felter og de to skillelinjer ved hoved og bund er fjernet - raekkernes egne streger baerer strukturen. */ body.page-forhandling .fh-br-analyse { padding: 14px 14px 22px; } body.page-forhandling .fh-br-an-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .62rem; color: var(--t2); } body.page-forhandling .fh-br-an-hd b { font-size: .74rem; font-weight: 600; color: var(--red-txt); font-variant-numeric: tabular-nums; opacity: 0; } body.page-forhandling .fh-br-akse { position: relative; height: 6px; border-radius: 3px; background: #f1efeb; margin-top: 26px; } body.page-forhandling .fh-br-spand { position: absolute; left: 20%; width: 71.4%; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(238, 179, 197, .4), rgba(238, 179, 197, .95)); transform-origin: left; transform: scaleX(0); } body.page-forhandling .fh-br-mrk { position: absolute; top: 0; width: 0; text-decoration: none; } body.page-forhandling .fh-br-mrk::before { content: ""; position: absolute; left: 0; top: -4px; width: 1.5px; height: 14px; border-radius: 1px; background: var(--t3); } body.page-forhandling .fh-br-mrk em { position: absolute; top: 12px; left: 0; transform: translateX(-50%); font-style: normal; font-size: .5rem; color: var(--t3); white-space: nowrap; } body.page-forhandling .fh-br-mrk { opacity: 0; } body.page-forhandling .fh-br-mrk-m { left: 20%; } body.page-forhandling .fh-br-mrk-m::before { background: var(--green-txt); } body.page-forhandling .fh-br-mrk-m em { color: var(--green-txt); font-weight: 600; } body.page-forhandling .fh-br-mrk-n { left: 91.4%; } body.page-forhandling .fh-br-mrk-t { left: 14.3%; opacity: 0; } body.page-forhandling .fh-br-mrk-t::before { background: var(--green-txt); top: -14px; } body.page-forhandling .fh-br-mrk-t em { top: -25px; color: var(--green-txt); font-weight: 600; } body.page-forhandling .fh-br-maal { display: flex; align-items: center; gap: 9px; padding: 9px 14px 12px; color: var(--t2); border-radius: 0 0 7px 7px; font-size: .64rem; } body.page-forhandling .fh-br-maal-ik { flex: none; width: 15px; height: 15px; display: grid; place-items: center; } body.page-forhandling .fh-br-maal-ik svg { width: 15px; height: 15px; } body.page-forhandling .fh-br-maal b { margin-left: auto; font-weight: 600; font-size: .73rem; white-space: nowrap; opacity: 0; } body.page-forhandling .fh-skan { animation: fh-skan 14s linear infinite both; } @keyframes fh-skan { 0%, 4% { opacity: 0; transform: translateY(-91%); } 7% { opacity: 1; transform: translateY(-50%); } 40% { opacity: 1; transform: translateY(404%); } 43.5% { opacity: 0; transform: translateY(452%); } 100% { opacity: 0; transform: translateY(452%); } } /* Sveben laeser én raekke ad gangen: raekken faar et kort mint-svoeb i samme oejeblik, sveben passerer den, og falder derefter tilbage til hvid. Det er dét, der goer det til en scanning frem for en liste, der bare toner frem. To animationer pr. raekke, én for opacity og én for baggrunden, saa de ikke overskriver hinanden. */ body.page-forhandling .fh-br-rk[style*="--i:0"] { animation: fh-brk0 14s var(--sc-ud) infinite both, fh-brm0 14s linear infinite both; } @keyframes fh-brm0 { 0%, 8.2% { background-color: rgba(200, 238, 221, 0); } 9.7%, 12.2% { background-color: rgba(200, 238, 221, .85); } 16.7%, 100% { background-color: rgba(200, 238, 221, 0); } } body.page-forhandling .fh-br-rk[style*="--i:1"] { animation: fh-brk1 14s var(--sc-ud) infinite both, fh-brm1 14s linear infinite both; } @keyframes fh-brm1 { 0%, 13.8% { background-color: rgba(200, 238, 221, 0); } 15.3%, 17.8% { background-color: rgba(200, 238, 221, .85); } 22.3%, 100% { background-color: rgba(200, 238, 221, 0); } } body.page-forhandling .fh-br-rk[style*="--i:2"] { animation: fh-brk2 14s var(--sc-ud) infinite both, fh-brm2 14s linear infinite both; } @keyframes fh-brm2 { 0%, 19.3% { background-color: rgba(200, 238, 221, 0); } 20.8%, 23.3% { background-color: rgba(200, 238, 221, .85); } 27.8%, 100% { background-color: rgba(200, 238, 221, 0); } } body.page-forhandling .fh-br-rk[style*="--i:3"] { animation: fh-brk3 14s var(--sc-ud) infinite both, fh-brm3 14s linear infinite both; } @keyframes fh-brm3 { 0%, 24.8% { background-color: rgba(200, 238, 221, 0); } 26.3%, 28.8% { background-color: rgba(200, 238, 221, .85); } 33.3%, 100% { background-color: rgba(200, 238, 221, 0); } } body.page-forhandling .fh-br-rk[style*="--i:4"] { animation: fh-brk4 14s var(--sc-ud) infinite both, fh-brm4 14s linear infinite both; } @keyframes fh-brm4 { 0%, 30.3% { background-color: rgba(200, 238, 221, 0); } 31.8%, 34.3% { background-color: rgba(200, 238, 221, .85); } 38.8%, 100% { background-color: rgba(200, 238, 221, 0); } } body.page-forhandling .fh-br-rk[style*="--i:5"] { animation: fh-brk5 14s var(--sc-ud) infinite both, fh-brm5 14s linear infinite both; } @keyframes fh-brm5 { 0%, 35.8% { background-color: rgba(200, 238, 221, 0); } 37.3%, 39.8% { background-color: rgba(200, 238, 221, .85); } 44.3%, 100% { background-color: rgba(200, 238, 221, 0); } } /* (opacity-sporene nedenfor er uaendrede) */ body.page-forhandling .fh-br-rk[style*="--i:0"] .fh-br-tom { animation: fh-brt0 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:0"] .fh-br-v { animation: fh-brv0 14s var(--sc-ud) infinite both; } @keyframes fh-brk0 { 0%, 7.7% { opacity: .3; } 9.7%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt0 { 0%, 7.7% { opacity: 1; } 9.7%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv0 { 0%, 9.7% { opacity: 0; transform: translateX(8px); } 10.7%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-rk[style*="--i:1"] .fh-br-tom { animation: fh-brt1 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:1"] .fh-br-v { animation: fh-brv1 14s var(--sc-ud) infinite both; } @keyframes fh-brk1 { 0%, 13.3% { opacity: .3; } 15.3%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt1 { 0%, 13.3% { opacity: 1; } 15.3%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv1 { 0%, 15.3% { opacity: 0; transform: translateX(8px); } 16.3%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-rk[style*="--i:2"] .fh-br-tom { animation: fh-brt2 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:2"] .fh-br-v { animation: fh-brv2 14s var(--sc-ud) infinite both; } @keyframes fh-brk2 { 0%, 18.8% { opacity: .3; } 20.8%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt2 { 0%, 18.8% { opacity: 1; } 20.8%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv2 { 0%, 20.8% { opacity: 0; transform: translateX(8px); } 21.8%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-rk[style*="--i:3"] .fh-br-tom { animation: fh-brt3 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:3"] .fh-br-v { animation: fh-brv3 14s var(--sc-ud) infinite both; } @keyframes fh-brk3 { 0%, 24.3% { opacity: .3; } 26.3%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt3 { 0%, 24.3% { opacity: 1; } 26.3%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv3 { 0%, 26.3% { opacity: 0; transform: translateX(8px); } 27.3%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-rk[style*="--i:4"] .fh-br-tom { animation: fh-brt4 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:4"] .fh-br-v { animation: fh-brv4 14s var(--sc-ud) infinite both; } @keyframes fh-brk4 { 0%, 29.8% { opacity: .3; } 31.8%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt4 { 0%, 29.8% { opacity: 1; } 31.8%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv4 { 0%, 31.8% { opacity: 0; transform: translateX(8px); } 32.8%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-rk[style*="--i:5"] .fh-br-tom { animation: fh-brt5 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-rk[style*="--i:5"] .fh-br-v { animation: fh-brv5 14s var(--sc-ud) infinite both; } @keyframes fh-brk5 { 0%, 35.3% { opacity: .3; } 37.3%, 66% { opacity: 1; } 70%, 94% { opacity: .62; } 99%, 100% { opacity: .3; } } @keyframes fh-brt5 { 0%, 35.3% { opacity: 1; } 37.3%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-brv5 { 0%, 37.3% { opacity: 0; transform: translateX(8px); } 38.3%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-br-graf i:nth-child(1) { animation: fh-sjl0 14s var(--sc-ud) infinite both; } @keyframes fh-sjl0 { 0%, 25.5% { transform: scaleY(0); } 27.5%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-br-graf i:nth-child(2) { animation: fh-sjl1 14s var(--sc-ud) infinite both; } @keyframes fh-sjl1 { 0%, 26.1% { transform: scaleY(0); } 28.1%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-br-graf i:nth-child(3) { animation: fh-sjl2 14s var(--sc-ud) infinite both; } @keyframes fh-sjl2 { 0%, 26.7% { transform: scaleY(0); } 28.7%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-br-graf i:nth-child(4) { animation: fh-sjl3 14s var(--sc-ud) infinite both; } @keyframes fh-sjl3 { 0%, 27.3% { transform: scaleY(0); } 29.3%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-br-graf i:nth-child(5) { animation: fh-sjl4 14s var(--sc-ud) infinite both; } @keyframes fh-sjl4 { 0%, 27.9% { transform: scaleY(0); } 29.9%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-br-graf i:nth-child(6) { animation: fh-sjl5 14s var(--sc-ud) infinite both; } @keyframes fh-sjl5 { 0%, 28.5% { transform: scaleY(0); } 30.5%, 94% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } } /* Analysen: baandet mellem marked og nu vokser, og maalet saettes ind. */ body.page-forhandling .fh-br-an-hd b { animation: fh-anb 14s var(--sc-ud) infinite both; } @keyframes fh-anb { 0%, 42% { opacity: 0; transform: translateY(4px); } 45%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(4px); } } body.page-forhandling .fh-br-spand { animation: fh-spand 14s var(--sc-ud) infinite both; } @keyframes fh-spand { 0%, 42% { transform: scaleX(0); } 50%, 94% { transform: scaleX(1); } 99%, 100% { transform: scaleX(0); } } body.page-forhandling .fh-br-mrk-m { animation: fh-mrkm 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-br-mrk-n { animation: fh-mrkm 14s var(--sc-ud) infinite both; } @keyframes fh-mrkm { 0%, 43% { opacity: 0; } 46%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } body.page-forhandling .fh-br-mrk-t { animation: fh-maalmrk 14s var(--sc-ud) infinite both; } @keyframes fh-maalmrk { 0%, 54% { opacity: 0; } 57%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } body.page-forhandling .fh-br-maal { animation: fh-maal 14s var(--sc-ud) infinite both; } /* Kun skriften skifter til moerkegroen. Foer blev hele bjaelken mint, og det laa som en groen klods under kortet. */ @keyframes fh-maal { 0%, 58% { color: var(--t2); } 61%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t2); } } body.page-forhandling .fh-br-maal b { animation: fh-maalb 14s var(--sc-ud) infinite both; } @keyframes fh-maalb { 0%, 59% { opacity: 0; transform: translateX(8px); } 62%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; transform: translateX(8px); } } body.page-forhandling .fh-brief-st .a { animation: fh-st-a2 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-brief-st .b { animation: fh-st-b2 14s var(--sc-ud) infinite both; } body.page-forhandling .fh-brief-st { animation: fh-st-bg2 14s var(--sc-ud) infinite both; } @keyframes fh-st-a2 { 0%, 61% { opacity: 1; } 63%, 100% { opacity: 0; } } @keyframes fh-st-b2 { 0%, 61% { opacity: 0; transform: translateY(3px); } 63%, 100% { opacity: 1; transform: translateY(0); } } @keyframes fh-st-bg2 { 0%, 61% { background: #f1efeb; color: var(--t2); } 63%, 100% { background: var(--green-bg); color: var(--green-txt); } } /* ══ 3 · Foer og efter (15 s) ════════════════════════════════════════ */ /* Modulet er ét kort med en hairline om, ikke to loese flader paa hvid. Midterkolonnen deler de to halvdele med sin egen lodrette streg, saa raekkerne flugter paa tvaers og forskellen staar i selve snittet. */ body.page-forhandling .fh-sml-omslag { max-width: 1040px; margin: 0 auto; border: 1px solid #ece9e3; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 18px 44px rgba(26, 25, 22, .06); } body.page-forhandling .fh-sml { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); gap: 0; align-items: stretch; } body.page-forhandling .fh-sml-kort { overflow: hidden; } body.page-forhandling .fh-sml-foer { background: #faf9f7; } body.page-forhandling .fh-sml-efter { background: #fff; } body.page-forhandling .fh-sml-hd { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 22px; border-bottom: 1px solid #f2f0ec; } body.page-forhandling .fh-sml-hd b { font-size: .92rem; font-weight: 600; color: var(--t1); } body.page-forhandling .fh-sml-rk { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 22px; border-top: 1px solid #f2f0ec; } body.page-forhandling .fh-sml-rk:first-of-type { border-top: 0; } body.page-forhandling .fh-sml-k { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--t2); min-width: 0; } body.page-forhandling .fh-sml-ik { flex: none; width: 15px; height: 15px; color: var(--t3); display: grid; place-items: center; } body.page-forhandling .fh-sml-ik svg { width: 15px; height: 15px; } body.page-forhandling .fh-sml-v { font-size: .92rem; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; } body.page-forhandling .fh-gl s { position: relative; text-decoration: none; color: var(--t1); } body.page-forhandling .fh-gl s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: var(--red-txt); transform: scaleX(.02); transform-origin: left; } /* Hoejre side starter tom: en stille streg staar, hvor vaerdien lander. */ body.page-forhandling .fh-sml-vk { display: inline-grid; } body.page-forhandling .fh-sml-vk > * { grid-area: 1 / 1; justify-self: end; align-self: center; } body.page-forhandling .fh-tom { width: 30px; height: 1.5px; border-radius: 1px; background: #ddd9d3; } body.page-forhandling .fh-ny { opacity: 0; color: var(--green-txt); } body.page-forhandling .fh-sml-midt { position: relative; display: grid; grid-template-rows: 60px repeat(5, 54px); align-items: center; justify-items: center; border-left: 1px solid #f2f0ec; border-right: 1px solid #f2f0ec; background: #faf9f7; } body.page-forhandling .fh-sml-pil { width: 30px; height: 30px; border-radius: 50%; background: #f1efeb; color: var(--t2); display: grid; place-items: center; } body.page-forhandling .fh-sml-pil svg { width: 15px; height: 15px; } /* Forskellen staar i neutral flade med moerkegroen skrift. Mint som baggrund fem gange i traek gjorde modulet til én groen blok. */ body.page-forhandling .fh-sml-d { margin: 0; opacity: 0; background: #f4f2ee; color: var(--green-txt); } body.page-forhandling .fh-sml-rk[style*="--i:0"] .fh-gl { animation: fh-gl0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:0"] .fh-gl s::after { animation: fh-streg0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:0"] .fh-tom { animation: fh-tom0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:0"] .fh-ny { animation: fh-ny0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:0"] .fh-sml-ik-ny { animation: fh-ikny0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-d[style*="--i:0"] { animation: fh-d0 15s var(--sc-ud) infinite both; } @keyframes fh-gl0 { 0%, 10% { opacity: 1; } 12%, 94% { opacity: .45; } 99%, 100% { opacity: 1; } } @keyframes fh-streg0 { 0%, 10% { transform: scaleX(.02); opacity: 0; } 10.5% { opacity: 1; } 12%, 94% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(.02); opacity: 0; } } @keyframes fh-tom0 { 0%, 10% { opacity: 1; } 11.5%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-ny0 { 0%, 11% { opacity: 0; transform: translateY(9px); } 13%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-ikny0 { 0%, 11% { color: var(--t3); } 13%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t3); } } @keyframes fh-d0 { 0%, 11% { opacity: 0; transform: scale(.6); } 13% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 14%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } } body.page-forhandling .fh-sml-rk[style*="--i:1"] .fh-gl { animation: fh-gl1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:1"] .fh-gl s::after { animation: fh-streg1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:1"] .fh-tom { animation: fh-tom1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:1"] .fh-ny { animation: fh-ny1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:1"] .fh-sml-ik-ny { animation: fh-ikny1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-d[style*="--i:1"] { animation: fh-d1 15s var(--sc-ud) infinite both; } @keyframes fh-gl1 { 0%, 20% { opacity: 1; } 22%, 94% { opacity: .45; } 99%, 100% { opacity: 1; } } @keyframes fh-streg1 { 0%, 20% { transform: scaleX(.02); opacity: 0; } 20.5% { opacity: 1; } 22%, 94% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(.02); opacity: 0; } } @keyframes fh-tom1 { 0%, 20% { opacity: 1; } 21.5%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-ny1 { 0%, 21% { opacity: 0; transform: translateY(9px); } 23%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-ikny1 { 0%, 21% { color: var(--t3); } 23%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t3); } } @keyframes fh-d1 { 0%, 21% { opacity: 0; transform: scale(.6); } 23% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 24%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } } body.page-forhandling .fh-sml-rk[style*="--i:2"] .fh-gl { animation: fh-gl2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:2"] .fh-gl s::after { animation: fh-streg2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:2"] .fh-tom { animation: fh-tom2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:2"] .fh-ny { animation: fh-ny2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:2"] .fh-sml-ik-ny { animation: fh-ikny2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-d[style*="--i:2"] { animation: fh-d2 15s var(--sc-ud) infinite both; } @keyframes fh-gl2 { 0%, 30% { opacity: 1; } 32%, 94% { opacity: .45; } 99%, 100% { opacity: 1; } } @keyframes fh-streg2 { 0%, 30% { transform: scaleX(.02); opacity: 0; } 30.5% { opacity: 1; } 32%, 94% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(.02); opacity: 0; } } @keyframes fh-tom2 { 0%, 30% { opacity: 1; } 31.5%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-ny2 { 0%, 31% { opacity: 0; transform: translateY(9px); } 33%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-ikny2 { 0%, 31% { color: var(--t3); } 33%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t3); } } @keyframes fh-d2 { 0%, 31% { opacity: 0; transform: scale(.6); } 33% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 34%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } } body.page-forhandling .fh-sml-rk[style*="--i:3"] .fh-gl { animation: fh-gl3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:3"] .fh-gl s::after { animation: fh-streg3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:3"] .fh-tom { animation: fh-tom3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:3"] .fh-ny { animation: fh-ny3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:3"] .fh-sml-ik-ny { animation: fh-ikny3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-d[style*="--i:3"] { animation: fh-d3 15s var(--sc-ud) infinite both; } @keyframes fh-gl3 { 0%, 40% { opacity: 1; } 42%, 94% { opacity: .45; } 99%, 100% { opacity: 1; } } @keyframes fh-streg3 { 0%, 40% { transform: scaleX(.02); opacity: 0; } 40.5% { opacity: 1; } 42%, 94% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(.02); opacity: 0; } } @keyframes fh-tom3 { 0%, 40% { opacity: 1; } 41.5%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-ny3 { 0%, 41% { opacity: 0; transform: translateY(9px); } 43%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-ikny3 { 0%, 41% { color: var(--t3); } 43%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t3); } } @keyframes fh-d3 { 0%, 41% { opacity: 0; transform: scale(.6); } 43% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 44%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } } body.page-forhandling .fh-sml-rk[style*="--i:4"] .fh-gl { animation: fh-gl4 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:4"] .fh-gl s::after { animation: fh-streg4 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:4"] .fh-tom { animation: fh-tom4 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:4"] .fh-ny { animation: fh-ny4 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-rk[style*="--i:4"] .fh-sml-ik-ny { animation: fh-ikny4 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-sml-d[style*="--i:4"] { animation: fh-d4 15s var(--sc-ud) infinite both; } @keyframes fh-gl4 { 0%, 50% { opacity: 1; } 52%, 94% { opacity: .45; } 99%, 100% { opacity: 1; } } @keyframes fh-streg4 { 0%, 50% { transform: scaleX(.02); opacity: 0; } 50.5% { opacity: 1; } 52%, 94% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(.02); opacity: 0; } } @keyframes fh-tom4 { 0%, 50% { opacity: 1; } 51.5%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-ny4 { 0%, 51% { opacity: 0; transform: translateY(9px); } 53%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(0); } } @keyframes fh-ikny4 { 0%, 51% { color: var(--t3); } 53%, 94% { color: var(--green-txt); } 99%, 100% { color: var(--t3); } } @keyframes fh-d4 { 0%, 51% { opacity: 0; transform: scale(.6); } 53% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 54%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } } /* Resultatet er ét kort: besparelsen oeverst, de fire oevrige gevinster som en raekke nedenunder med ikon, navn og fra-til. Erstatter fire loese piller, der laa som et halespor under kortet. */ body.page-forhandling .fh-resultat { margin: 24px auto 0; width: 100%; max-width: 1040px; border: 1px solid #ece9e3; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(26, 25, 22, .06); overflow: hidden; opacity: 0; animation: fh-res 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-res-top { display: flex; align-items: baseline; gap: 14px; padding: 20px 24px; border-bottom: 1px solid #f2f0ec; } body.page-forhandling .fh-res-top small { font-size: .72rem; color: var(--t3); } body.page-forhandling .fh-res-top b { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--green-txt); line-height: 1.1; } body.page-forhandling .fh-res-top span { margin-left: auto; font-size: .78rem; color: var(--t3); } body.page-forhandling .fh-res-gev { display: grid; grid-template-columns: repeat(4, 1fr); } body.page-forhandling .fh-res-g { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-left: 1px solid #f2f0ec; opacity: 0; } body.page-forhandling .fh-res-g:first-child { border-left: 0; } body.page-forhandling .fh-res-g i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: #f4f2ee; color: var(--t2); } body.page-forhandling .fh-res-g i svg { width: 15px; height: 15px; } body.page-forhandling .fh-res-g > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } body.page-forhandling .fh-res-g em { font-style: normal; font-size: .68rem; color: var(--t3); } body.page-forhandling .fh-res-g b { font-size: .84rem; font-weight: 600; color: var(--t1); white-space: nowrap; } body.page-forhandling .fh-res-g[style*="--i:0"] { animation: fh-gev0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-res-g[style*="--i:1"] { animation: fh-gev1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-res-g[style*="--i:2"] { animation: fh-gev2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-res-g[style*="--i:3"] { animation: fh-gev3 15s var(--sc-ud) infinite both; } @keyframes fh-gev0 { 0%, 62% { opacity: 0; transform: translateY(6px); } 66%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } } @keyframes fh-gev1 { 0%, 65% { opacity: 0; transform: translateY(6px); } 69%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } } @keyframes fh-gev2 { 0%, 68% { opacity: 0; transform: translateY(6px); } 72%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } } @keyframes fh-gev3 { 0%, 71% { opacity: 0; transform: translateY(6px); } 75%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } } @media (max-width: 760px) { body.page-forhandling .fh-res-gev { grid-template-columns: 1fr 1fr; } body.page-forhandling .fh-res-g:nth-child(3) { border-left: 0; } body.page-forhandling .fh-res-g:nth-child(n+3) { border-top: 1px solid #f2f0ec; } } /* ══ 4 · Processen (15 s) ═══════════════════════════════════════════ */ body.page-forhandling .fh-spor { position: relative; padding: 10px 0 0; } body.page-forhandling .fh-spor-linje { position: absolute; left: 12.5%; right: 12.5%; top: 24px; height: 3px; border-radius: 2px; background: #f1efeb; } body.page-forhandling .fh-spor-linje i { position: absolute; inset: 0; border-radius: 2px; background: var(--sc-mint-graa); transform-origin: left; transform: scaleX(.02); animation: fh-fyld 15s linear infinite both; } @keyframes fh-fyld { 0%, 8% { transform: scaleX(.02); } 66%, 94% { transform: scaleX(1); } 99%, 100% { transform: scaleX(.02); } } body.page-forhandling .fh-spor-trin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } body.page-forhandling .fh-trin { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } body.page-forhandling .fh-trin-prik { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); display: grid; place-items: center; } body.page-forhandling .fh-trin-prik b, body.page-forhandling .fh-trin-prik i { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; font-size: .78rem; font-weight: 600; color: var(--t2); } body.page-forhandling .fh-trin-prik i { color: var(--green-txt); opacity: 0; } body.page-forhandling .fh-trin-prik i svg { width: 14px; height: 14px; } body.page-forhandling .fh-trin-titel { font-size: .95rem; font-weight: 600; color: var(--t1); } /* Kortene er produktkort, ikke etiketter: ikon, meta, menu, status, tid. */ body.page-forhandling .fh-trin-kort { width: 100%; max-width: 268px; flex: 1; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; opacity: 0; } body.page-forhandling .fh-tk-hd { display: flex; align-items: center; gap: 9px; padding: 11px 13px; } body.page-forhandling .fh-tk-pdf { flex: none; width: 19px; height: 23px; display: grid; place-items: center; } body.page-forhandling .fh-tk-pdf img { width: 100%; height: 100%; object-fit: contain; } body.page-forhandling .fh-tk-ik { flex: none; width: 22px; height: 22px; color: var(--t2); display: grid; place-items: center; } body.page-forhandling .fh-tk-ik svg { width: 19px; height: 19px; } body.page-forhandling .fh-tk-ik img { width: 22px; height: 22px; border-radius: 50%; } body.page-forhandling .fh-tk-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } body.page-forhandling .fh-tk-tx b { font-size: .78rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-forhandling .fh-tk-tx small { font-size: .6rem; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-forhandling .fh-tk-mn { margin-left: auto; flex: none; width: 15px; height: 15px; color: var(--t3); display: grid; place-items: center; } body.page-forhandling .fh-tk-mn svg { width: 15px; height: 15px; } body.page-forhandling .fh-tk-fod, body.page-forhandling .fh-tk-krop { border-top: 1px solid #f4f2ee; padding: 10px 13px; flex: 1; } body.page-forhandling .fh-tk-fod { display: flex; align-items: center; gap: 8px; font-size: .62rem; color: var(--t2); } body.page-forhandling .fh-tk-fod .sc-pille { margin-left: auto; } body.page-forhandling .fh-tk-krop { display: flex; flex-direction: column; gap: 4px; } body.page-forhandling .fh-tk-krop small { font-size: .61rem; color: var(--t2); } body.page-forhandling .fh-tk-pris { display: flex; align-items: baseline; gap: 8px; } body.page-forhandling .fh-tk-pris b { font-size: 1.05rem; font-weight: 600; color: var(--t1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } body.page-forhandling .fh-tk-pris s { font-size: .68rem; color: var(--t3); text-decoration-color: var(--red-txt); } body.page-forhandling .fh-tk-pris em { font-style: normal; font-size: .62rem; color: var(--t3); } body.page-forhandling .fh-tk-cit { margin: 0; font-size: .66rem; line-height: 1.45; color: var(--t1); } body.page-forhandling .fh-tk-send { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: .58rem; color: var(--t3); } body.page-forhandling .fh-tk-send svg { width: 9px; height: 9px; color: var(--green-txt); } body.page-forhandling .fh-trin-kort-slut .fh-tk-krop { background: var(--green-bg); } body.page-forhandling .fh-trin-kort-slut .fh-tk-krop small, body.page-forhandling .fh-trin-kort-slut .fh-tk-pris b, body.page-forhandling .fh-trin-kort-slut .fh-tk-pris em { color: var(--green-txt); } body.page-forhandling .fh-trin[style*="--i:0"] .fh-trin-prik { animation: fh-prik0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:0"] .fh-trin-prik b { animation: fh-prikb0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:0"] .fh-trin-prik i { animation: fh-priki0 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:0"] .fh-trin-kort { animation: fh-tk0 15s var(--sc-ud) infinite both; } @keyframes fh-prik0 { 0%, 8% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 10% { background: var(--green-bg); box-shadow: 0 0 0 6px rgba(14, 102, 64, .12), 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1.12); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 12%, 94% { background: var(--green-bg); box-shadow: 0 0 0 3px #dff3e9, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 99%, 100% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } } @keyframes fh-prikb0 { 0%, 8% { opacity: 1; } 10%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-priki0 { 0%, 8% { opacity: 0; } 10%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } @keyframes fh-tk0 { 0%, 11% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 15%, 94% { opacity: 1; transform: translateY(0); filter: blur(0); } 99%, 100% { opacity: 0; transform: translateY(10px); filter: blur(4px); } } body.page-forhandling .fh-trin[style*="--i:1"] .fh-trin-prik { animation: fh-prik1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:1"] .fh-trin-prik b { animation: fh-prikb1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:1"] .fh-trin-prik i { animation: fh-priki1 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:1"] .fh-trin-kort { animation: fh-tk1 15s var(--sc-ud) infinite both; } @keyframes fh-prik1 { 0%, 25% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 27% { background: var(--green-bg); box-shadow: 0 0 0 6px rgba(14, 102, 64, .12), 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1.12); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 29%, 94% { background: var(--green-bg); box-shadow: 0 0 0 3px #dff3e9, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 99%, 100% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } } @keyframes fh-prikb1 { 0%, 25% { opacity: 1; } 27%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-priki1 { 0%, 25% { opacity: 0; } 27%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } @keyframes fh-tk1 { 0%, 28% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 32%, 94% { opacity: 1; transform: translateY(0); filter: blur(0); } 99%, 100% { opacity: 0; transform: translateY(10px); filter: blur(4px); } } body.page-forhandling .fh-trin[style*="--i:2"] .fh-trin-prik { animation: fh-prik2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:2"] .fh-trin-prik b { animation: fh-prikb2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:2"] .fh-trin-prik i { animation: fh-priki2 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:2"] .fh-trin-kort { animation: fh-tk2 15s var(--sc-ud) infinite both; } @keyframes fh-prik2 { 0%, 42% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 44% { background: var(--green-bg); box-shadow: 0 0 0 6px rgba(14, 102, 64, .12), 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1.12); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 46%, 94% { background: var(--green-bg); box-shadow: 0 0 0 3px #dff3e9, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 99%, 100% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } } @keyframes fh-prikb2 { 0%, 42% { opacity: 1; } 44%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-priki2 { 0%, 42% { opacity: 0; } 44%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } @keyframes fh-tk2 { 0%, 45% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 49%, 94% { opacity: 1; transform: translateY(0); filter: blur(0); } 99%, 100% { opacity: 0; transform: translateY(10px); filter: blur(4px); } } body.page-forhandling .fh-trin[style*="--i:3"] .fh-trin-prik { animation: fh-prik3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:3"] .fh-trin-prik b { animation: fh-prikb3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:3"] .fh-trin-prik i { animation: fh-priki3 15s var(--sc-ud) infinite both; } body.page-forhandling .fh-trin[style*="--i:3"] .fh-trin-kort { animation: fh-tk3 15s var(--sc-ud) infinite both; } @keyframes fh-prik3 { 0%, 59% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 61% { background: var(--green-bg); box-shadow: 0 0 0 6px rgba(14, 102, 64, .12), 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1.12); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 63%, 94% { background: var(--green-bg); box-shadow: 0 0 0 3px #dff3e9, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } 99%, 100% { background: #fff; box-shadow: 0 0 0 3px #f1efeb, 0 6px 14px rgba(26, 25, 22, .08); transform: scale(1); } } @keyframes fh-prikb3 { 0%, 59% { opacity: 1; } 61%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } } @keyframes fh-priki3 { 0%, 59% { opacity: 0; } 61%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } } @keyframes fh-tk3 { 0%, 62% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 66%, 94% { opacity: 1; transform: translateY(0); filter: blur(0); } 99%, 100% { opacity: 0; transform: translateY(10px); filter: blur(4px); } } /* ══ 5 · Sidens oevrige flader ═════════════════════════════════════ */ body.page-forhandling .fh-slut-stille { margin-bottom: 0; } body.page-forhandling .fh-slut-stille .sc-sub { margin-top: 0; } body.page-forhandling .fh-hoved-lille { margin-bottom: clamp(28px, 3.4vw, 44px); } body.page-forhandling .fh-intro { max-width: 720px; } body.page-forhandling .fh-intro .sc-sub { max-width: 60ch; } /* Problemet: fladen har samme maal som scenerne paa de oevrige sider. Det er selve briefen inde i den, der er skaaret ned, saa der er luft omkring animationen frem for at den fylder flade ud til kant. */ body.page-forhandling .fh-scene-graa { background: linear-gradient(160deg, #e4edf7, #d5e3f2); } body.page-forhandling .fh-scene-graa .fh-brief { width: 74%; } /* Samme maal som forsidens Amber-sektion: 1180 x 484 px ved 1440. */ body.page-forhandling .sc-panel { background: linear-gradient(160deg, #e3f4eb, #d3edde); width: 100%; max-width: 1150px; margin-inline: auto; min-height: 530px; align-content: center; } /* ══ Reduceret bevaegelse ══════════════════════════════════════════ scene-base slaar alle .sc-loop-animationer fra. Her saettes den sluttilstand, scenerne ellers kun naar gennem bevaegelsen. */ @media (prefers-reduced-motion: reduce) { body.page-forhandling :where(.fh-msg, .fh-boble, .fh-status, .fh-status > span, .fh-runde > span, .fh-skala-gab, .fh-skala-naal, .fh-skala-mark, .fh-tal, .fh-log-rk, .fh-pris, .fh-delta, .fh-aar, .fh-aar b, .fh-aar-tom, .fh-brief, .fh-brief-st, .fh-brief-st > span, .fh-skan, .fh-br-rk, .fh-br-tom, .fh-br-v, .fh-br-graf i, .fh-br-an-hd b, .fh-br-spand, .fh-br-mrk, .fh-br-maal, .fh-br-maal b, .fh-gl, .fh-tom, .fh-ny, .fh-sml-ik-ny, .fh-sml-d, .fh-resultat, .fh-res-g, .fh-spor-linje i, .fh-trin-prik, .fh-trin-prik b, .fh-trin-prik i, .fh-trin-kort)::before, body.page-forhandling :where(.fh-msg, .fh-boble, .fh-status, .fh-status > span, .fh-runde > span, .fh-skala-gab, .fh-skala-naal, .fh-skala-mark, .fh-tal, .fh-log-rk, .fh-pris, .fh-delta, .fh-aar, .fh-aar b, .fh-aar-tom, .fh-brief, .fh-brief-st, .fh-brief-st > span, .fh-skan, .fh-br-rk, .fh-br-tom, .fh-br-v, .fh-br-graf i, .fh-br-an-hd b, .fh-br-spand, .fh-br-mrk, .fh-br-maal, .fh-br-maal b, .fh-gl, .fh-gl s, .fh-tom, .fh-ny, .fh-sml-ik-ny, .fh-sml-d, .fh-resultat, .fh-res-g, .fh-spor-linje i, .fh-trin-prik, .fh-trin-prik b, .fh-trin-prik i, .fh-trin-kort)::after, body.page-forhandling :where(.fh-msg, .fh-boble, .fh-status, .fh-status > span, .fh-runde > span, .fh-skala-gab, .fh-skala-naal, .fh-skala-mark, .fh-tal, .fh-log-rk, .fh-pris, .fh-delta, .fh-aar, .fh-aar b, .fh-aar-tom, .fh-brief, .fh-brief-st, .fh-brief-st > span, .fh-skan, .fh-br-rk, .fh-br-tom, .fh-br-v, .fh-br-graf i, .fh-br-an-hd b, .fh-br-spand, .fh-br-mrk, .fh-br-maal, .fh-br-maal b, .fh-gl, .fh-tom, .fh-ny, .fh-sml-ik-ny, .fh-sml-d, .fh-resultat, .fh-res-g, .fh-spor-linje i, .fh-trin-prik, .fh-trin-prik b, .fh-trin-prik i, .fh-trin-kort) { animation: none !important; } body.page-forhandling :where(.fh-msg, .fh-pris, .fh-log-rk, .fh-delta, .fh-aar, .fh-aar b, .fh-status .b, .fh-brief, .fh-br-rk, .fh-br-v, .fh-br-an-hd b, .fh-br-mrk, .fh-br-maal b, .fh-brief-st .b, .fh-ny, .fh-sml-d, .fh-resultat, .fh-res-g, .fh-trin-kort, .fh-trin-prik i) { opacity: 1 !important; transform: none !important; filter: none !important; } body.page-forhandling :where(.fh-tal:nth-child(3), .fh-runde > span:nth-child(3)) { opacity: 1 !important; } body.page-forhandling :where(.fh-status .a, .fh-brief-st .a, .fh-trin-prik b, .fh-boble::before, .fh-skan, .fh-tom, .fh-br-tom, .fh-aar-tom) { opacity: 0 !important; } /* Det kompakte kort staar stille i sin slut-tilstand: sidste besked, aftalt pris og den samlede forskel. */ body.page-forhandling :where(.fh-mail-kort, .fh-mail, .fh-mi-tal, .fh-mi-dl, .fh-mi-rn, .fh-mk-draft, .fh-mk-sendt, .fh-mk-spor-fyld) { animation: none !important; transform: none !important; } body.page-forhandling :where(.fh-mail, .fh-mi-tal, .fh-mi-dl, .fh-mi-rn, .fh-mk-draft, .fh-mk-sendt) { opacity: 0 !important; } body.page-forhandling .fh-mail-kort { opacity: 1 !important; } body.page-forhandling .fh-mk-spor-fyld { transform: scaleX(1) !important; } body.page-forhandling :where(.fh-mail[style*="--i:5"], .fh-mi-tal[style*="--i:2"], .fh-mi-dl[style*="--i:2"], .fh-mi-rn[style*="--i:2"], .fh-mk-sendt) { opacity: 1 !important; } /* Trin-scenerne staar i deres slut-tilstand: arket udfyldt og sendt, markoeren nede ved den aftalte pris, stregen tegnet og stemplet sat. */ body.page-forhandling :where(.fhs-chip, .fhs-ark-linje > *, .fhs-ark-maal, .fhs-sendt, .fhs-akse-markoer, .fhs-akse-fyld, .fhs-mk-tal span, .fhs-mail, .fhs-sign-streg, .fhs-stempel, .fhs-fod) { animation: none !important; } body.page-forhandling :where(.fhs-chip, .fhs-ark-linje > *, .fhs-ark-maal, .fhs-sendt, .fhs-mail, .fhs-fod) { opacity: 1 !important; transform: none !important; } body.page-forhandling .fhs-chip { opacity: .38 !important; } body.page-forhandling .fhs-akse-markoer { opacity: 1 !important; transform: translateY(82%) !important; } body.page-forhandling .fhs-akse-fyld { transform: scaleY(.82) !important; } body.page-forhandling .fhs-mk-tal span:nth-child(3) { opacity: 1 !important; } body.page-forhandling .fhs-sign-streg path { stroke-dashoffset: 0 !important; animation: none !important; } body.page-forhandling .fhs-stempel { opacity: 1 !important; transform: rotate(-8deg) !important; } body.page-forhandling .fh-skala-mark { opacity: 1; } body.page-forhandling :where(.fh-status, .fh-brief-st) { background: var(--green-bg); color: var(--green-txt); } body.page-forhandling .fh-skala-gab { transform: scaleX(.12); background: var(--sc-mint-graa); } body.page-forhandling .fh-skala-naal { left: 28.6%; box-shadow: 0 0 0 3px var(--sc-mint-graa), 0 2px 6px rgba(26, 25, 22, .2); } body.page-forhandling .fh-br-graf i { transform: scaleY(1); } body.page-forhandling .fh-br-maal { color: var(--green-txt); } body.page-forhandling .fh-br-spand { transform: scaleX(1); } body.page-forhandling .fh-sml-ik-ny { color: var(--green-txt); } body.page-forhandling .fh-gl s::after { transform: scaleX(1); } body.page-forhandling .fh-gl { opacity: .45; } body.page-forhandling .fh-spor-linje i { transform: scaleX(1); } body.page-forhandling .fh-trin-prik { background: var(--green-bg); } } /* ── Tre trin ─────────────────────────────────────────────────────────── Samme opsaetning som kaedemodulets .km-trin paa de oevrige undersider: kvadratisk flade med et nummer i hjoernet, titel og linje under. CSS'en staar her frem for at hente hele kaedemodul.css ind for tre bokse, men maalene er de samme: radius 24, nummer 30 x 30 i hvid med bloed skygge, titel i DM Sans 600 / 1,2 rem, linje i 0,95 rem. Fladerne er neutrale. Mint er reserveret til det, der faktisk er en gevinst, og bruges ikke som baggrund. */ body.page-forhandling .fh-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); } body.page-forhandling .fh-trio-kort { margin: 0; } body.page-forhandling .fh-trio-vis { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; container-type: inline-size; background: #f6f5f3; } /* Trin 1 paa mint, samme gradient som .km-vis-mint paa de oevrige sider. */ body.page-forhandling .fh-trio-kort:nth-child(1) .fh-trio-vis { background: linear-gradient(160deg, #e3f4eb, #d3edde); } body.page-forhandling .fh-trio-kort:nth-child(2) .fh-trio-vis { background: #f2f1ee; } body.page-forhandling .fh-trio-kort:nth-child(3) .fh-trio-vis { background: #eef0f2; } body.page-forhandling .fh-trio-nr { position: absolute; left: 18px; top: 18px; z-index: 5; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--t1); font-size: .82rem; font-weight: 600; box-shadow: 0 1px 3px rgba(17, 24, 20, .08); } body.page-forhandling .fh-trio-kort figcaption { padding: 16px 6px 0; } body.page-forhandling .fh-trio-titel { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: -.015em; color: var(--t1); } body.page-forhandling .fh-trio-linje { display: block; margin-top: 4px; color: var(--t2); font-size: .95rem; line-height: 1.5; } @media (max-width: 900px) { body.page-forhandling .fh-trio { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } } /* ── Trin-scenerne ────────────────────────────────────────────────────── Samme opskrift som kaedemodulets kms-scener: scenen ligger absolut i fladen, alle maal er i cqw saa den skalerer med kortet, toppadding har et px-gulv fordi trinnummeret er 30 px i fast maal, og hver scene har sin egen --loop. Animationerne staar stille indtil .fh-trio-vis faar .inde af IntersectionObserveren i main.js. Forskydning ligger i keyframe- procenter, aldrig i animation-delay. De tre scener har hver sin bevaegelse: 1 samler vandret ind i et ark, 2 stiger ned ad en lodret akse, 3 tegner én streg og saetter ét stempel. */ body.page-forhandling .fhs { position: absolute; inset: 0; padding: max(54px, 12.5cqw) 6.4cqw 6cqw; display: flex; font-family: 'DM Sans', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } body.page-forhandling .fh-vis-1 .fhs { --loop: 15s; } body.page-forhandling .fh-vis-2 .fhs { --loop: 16s; } body.page-forhandling .fh-vis-3 .fhs { --loop: 14s; } /* 1 · Arket og chipsene */ body.page-forhandling .fhs--skriv { gap: 4cqw; align-items: stretch; } /* Arket fylder 80 % af scenens hoejde og staar lodret centreret, saa der er luft over og under det. Foer strakte det sig fra kant til kant. */ body.page-forhandling .fhs-ark { position: relative; display: flex; flex-direction: column; flex: 0 0 47%; align-self: center; height: 80%; background: #fff; border-radius: 1.2cqw; box-shadow: 0 1.6cqw 4cqw rgba(26, 25, 22, .09); overflow: hidden; } body.page-forhandling .fhs-ark-hd { display: flex; align-items: center; gap: 1.6cqw; padding: 2.1cqw 2.8cqw; border-bottom: 1px solid #f0eee9; font-size: 2.9cqw; font-weight: 600; color: var(--t1); } body.page-forhandling .fhs-ark-hd img { width: 4.2cqw; height: 4.2cqw; } /* min-height: 0 saa kroppen kan give plads til sidefoden, naar arket er lavere end sit indhold. Uden den blev foden klippet af overflow. */ body.page-forhandling .fhs-ark-krop { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.2cqw 2.6cqw; flex: 1; min-height: 0; } body.page-forhandling .fhs-ark-titel { font-size: 2.8cqw; font-weight: 600; color: var(--t1); margin-bottom: .6cqw; } body.page-forhandling .fhs-l { display: block; flex: none; height: 1.1cqw; border-radius: 999px; background: #e9e6e0; width: 88%; } body.page-forhandling .fhs-l--k { width: 58%; } body.page-forhandling .fhs-ark-linje { position: relative; display: flex; align-items: center; justify-content: space-between; height: 3.8cqw; flex: none; } body.page-forhandling .fhs-ark-linje::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.1cqw; margin-top: -.55cqw; border-radius: 999px; background: #e9e6e0; } body.page-forhandling .fhs-ark-linje em, body.page-forhandling .fhs-ark-linje b { position: relative; z-index: 1; padding: 0 .6cqw; background: #fff; font-size: 2.5cqw; opacity: 0; } body.page-forhandling .fhs-ark-linje em { font-style: normal; color: var(--t3); } body.page-forhandling .fhs-ark-linje b { font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; } body.page-forhandling .fhs-ark-maal { display: flex; align-items: center; justify-content: space-between; margin-top: auto; flex: none; padding: 1.5cqw 2cqw; border-radius: .9cqw; background: #f4f2ee; font-size: 2.7cqw; opacity: 0; } body.page-forhandling .fhs-ark-maal em { font-style: normal; color: var(--t3); } body.page-forhandling .fhs-ark-maal b { font-weight: 600; color: var(--t1); } body.page-forhandling .fhs-ark-fod { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 1.8cqw 2.6cqw; border-top: 1px solid #f0eee9; font-size: 2.5cqw; color: var(--t3); } body.page-forhandling .fhs-sendt { display: inline-flex; align-items: center; gap: 1cqw; padding: .8cqw 2cqw; border-radius: 999px; background: var(--green-bg); color: var(--green-txt); font-weight: 600; opacity: 0; } body.page-forhandling .fhs-sendt svg { width: 2.6cqw; height: 2.6cqw; } body.page-forhandling .fhs-fakta { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqw; } body.page-forhandling .fhs-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 2cqw; align-items: center; padding: 2cqw 2.4cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(26, 25, 22, .08); font-size: 2.7cqw; font-weight: 600; color: var(--t1); line-height: 1.2; opacity: 0; } body.page-forhandling .fhs-chip-ik { grid-row: 1 / 3; display: grid; place-items: center; width: 5cqw; height: 5cqw; color: var(--t2); } body.page-forhandling .fhs-chip-ik svg { width: 4.2cqw; height: 4.2cqw; } body.page-forhandling .fhs-chip em { font-style: normal; font-weight: 500; font-size: 2.5cqw; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 2 · Aksen og mailene */ body.page-forhandling .fhs--pres { gap: 5cqw; } body.page-forhandling .fhs-akse { position: relative; flex: 0 0 22cqw; } body.page-forhandling .fhs-akse-spor { position: absolute; left: 4cqw; top: 2cqw; bottom: 2cqw; width: .7cqw; border-radius: 999px; background: rgba(26, 25, 22, .1); } body.page-forhandling .fhs-akse-fyld { position: absolute; left: 4cqw; top: 2cqw; bottom: 2cqw; width: .7cqw; border-radius: 999px; background: var(--green-txt); transform: scaleY(0); transform-origin: top center; opacity: .75; } body.page-forhandling .fhs-akse-tick { position: absolute; left: 2.4cqw; top: calc(2cqw + (100% - 4cqw) * var(--p)); width: 3.9cqw; height: .5cqw; border-radius: 999px; background: rgba(26, 25, 22, .18); } body.page-forhandling .fhs-akse-marked { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; font-size: 2.5cqw; font-weight: 600; color: var(--t2); line-height: 1.1; } body.page-forhandling .fhs-akse-marked::before { content: ""; position: absolute; left: 4.35cqw; top: -.9cqw; width: 14cqw; border-top: 1px dashed rgba(26, 25, 22, .35); } body.page-forhandling .fhs-akse-marked em { font-style: normal; font-weight: 500; color: var(--t3); font-size: 2.2cqw; margin-bottom: .2cqw; } /* Markoeren spaender hele aksen, saa translateY i procent er procent af aksens laengde. Kun prikken og tallet i toppen tegnes. */ body.page-forhandling .fhs-akse-markoer { position: absolute; left: 4.35cqw; top: 2cqw; bottom: 2cqw; width: 0; } body.page-forhandling .fhs-akse-markoer::before { content: ""; position: absolute; left: -1.9cqw; top: -1.9cqw; width: 3.8cqw; height: 3.8cqw; border-radius: 999px; background: #fff; border: .7cqw solid var(--green-txt); box-shadow: 0 .8cqw 2cqw rgba(26, 25, 22, .18); } body.page-forhandling .fhs-mk-tal { position: absolute; left: 4cqw; top: -1.7cqw; display: grid; height: 3.4cqw; align-items: center; font-size: 3cqw; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; } body.page-forhandling .fhs-mk-tal span { grid-area: 1 / 1; opacity: 0; white-space: nowrap; } body.page-forhandling .fhs-mails { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } body.page-forhandling .fhs-mail { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.4cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(26, 25, 22, .08); opacity: 0; } body.page-forhandling .fhs-mail-av { display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; flex: 0 0 auto; border-radius: 999px; overflow: hidden; background: #efece7; } body.page-forhandling .fhs-mail-av img { width: 100%; height: 100%; object-fit: cover; } body.page-forhandling .fhs-mail--amb .fhs-mail-av { background: var(--green-bg); padding: 1.1cqw; } body.page-forhandling .fhs-mail-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } body.page-forhandling .fhs-mail-tx strong { font-size: 2.7cqw; font-weight: 600; color: var(--t1); } body.page-forhandling .fhs-mail-tx em { font-style: normal; font-size: 2.6cqw; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-forhandling .fhs-mail--amb .fhs-mail-tx em { color: var(--green-txt); } body.page-forhandling .fhs-mail-ok { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; margin-left: auto; flex: 0 0 auto; border-radius: 999px; background: var(--green-bg); color: var(--green-txt); } body.page-forhandling .fhs-mail-ok svg { width: 2.4cqw; height: 2.4cqw; } /* 3 · Kontrakten, stregen og stemplet */ body.page-forhandling .fhs--luk { flex-direction: column; gap: 3cqw; } body.page-forhandling .fhs-kontrakt { position: relative; display: flex; flex-direction: column; gap: 1.6cqw; padding: 3.2cqw 3.6cqw 3.4cqw; background: #fff; border-radius: 1.2cqw; box-shadow: 0 1.6cqw 4cqw rgba(26, 25, 22, .09); } body.page-forhandling .fhs-kontrakt-hd { display: flex; flex-direction: column; margin-bottom: 1cqw; } body.page-forhandling .fhs-kontrakt-hd span { font-size: 3.2cqw; font-weight: 600; color: var(--t1); } body.page-forhandling .fhs-kontrakt-hd em { font-style: normal; font-size: 2.5cqw; color: var(--t3); } body.page-forhandling .fhs-kontrakt-rk { display: flex; justify-content: space-between; align-items: baseline; padding: 1.2cqw 0; border-top: 1px solid #f0eee9; font-size: 2.7cqw; color: var(--t2); } body.page-forhandling .fhs-kontrakt-rk b { font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; } body.page-forhandling .fhs-sign { position: relative; height: 12cqw; margin-top: 2cqw; } body.page-forhandling .fhs-sign-streg { position: absolute; left: 0; bottom: 2.4cqw; width: 46cqw; height: auto; color: var(--t1); } body.page-forhandling .fhs-sign-streg path { stroke-dasharray: 100; stroke-dashoffset: 100; } body.page-forhandling .fhs-sign-linje { position: absolute; left: 0; right: 0; bottom: 3.2cqw; height: 1px; background: rgba(26, 25, 22, .3); } body.page-forhandling .fhs-sign-navn { position: absolute; left: 0; bottom: 0; font-size: 2.3cqw; color: var(--t3); } body.page-forhandling .fhs-stempel { position: absolute; right: 2.4cqw; bottom: 9cqw; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.6cqw; border: .5cqw solid var(--green-txt); border-radius: 1cqw; color: var(--green-txt); font-size: 3cqw; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-8deg) scale(1.6); opacity: 0; } body.page-forhandling .fhs-stempel i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; } body.page-forhandling .fhs-stempel svg { width: 3cqw; height: 3cqw; } body.page-forhandling .fhs-fod { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 2.6cqw 3.2cqw; border-radius: 1.2cqw; background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(26, 25, 22, .08); font-size: 2.9cqw; color: var(--t2); opacity: 0; } body.page-forhandling .fhs-fod strong { font-size: 3.6cqw; font-weight: 600; color: var(--green-txt); } /* ── Tidslinjer ────────────────────────────────────────────────────────── */ /* 1: chips flyver ind i arket ved 10, 24, 38 %. Chippen bliver siddende svagt til hoejre, saa man kan se hvor linjen kom fra. Sendt ved 56 %. */ body.page-forhandling .fh-vis-1.inde .fhs-chip[style*="--i:0"] { animation: fhs-chip0 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-1.inde .fhs-chip[style*="--i:1"] { animation: fhs-chip1 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-1.inde .fhs-chip[style*="--i:2"] { animation: fhs-chip2 var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-chip0 { 0%, 3% { opacity: 0; transform: translateX(6cqw); } 8%, 10% { opacity: 1; transform: none; } 15%, 86% { opacity: .38; transform: translateX(-2cqw) scale(.94); } 92%, 100% { opacity: 0; transform: translateX(6cqw); } } @keyframes fhs-chip1 { 0%, 17% { opacity: 0; transform: translateX(6cqw); } 22%, 24% { opacity: 1; transform: none; } 29%, 86% { opacity: .38; transform: translateX(-2cqw) scale(.94); } 92%, 100% { opacity: 0; transform: translateX(6cqw); } } @keyframes fhs-chip2 { 0%, 31% { opacity: 0; transform: translateX(6cqw); } 36%, 38% { opacity: 1; transform: none; } 43%, 86% { opacity: .38; transform: translateX(-2cqw) scale(.94); } 92%, 100% { opacity: 0; transform: translateX(6cqw); } } body.page-forhandling .fh-vis-1.inde .fhs-ark-linje[style*="--i:0"] > * { animation: fhs-linje0 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-1.inde .fhs-ark-linje[style*="--i:1"] > * { animation: fhs-linje1 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-1.inde .fhs-ark-linje[style*="--i:2"] > * { animation: fhs-linje2 var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-linje0 { 0%, 10% { opacity: 0; transform: translateX(3cqw); } 15%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-linje1 { 0%, 24% { opacity: 0; transform: translateX(3cqw); } 29%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-linje2 { 0%, 38% { opacity: 0; transform: translateX(3cqw); } 43%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } body.page-forhandling .fh-vis-1.inde .fhs-ark-maal { animation: fhs-maal var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-maal { 0%, 46% { opacity: 0; transform: translateY(1.6cqw); } 51%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(1.6cqw); } } body.page-forhandling .fh-vis-1.inde .fhs-sendt { animation: fhs-sendt var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-sendt { 0%, 56% { opacity: 0; transform: scale(.8); } 61%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.8); } } /* 2: markoeren staar oeverst ved 1.870, glider til 32 % ved 1.790 (28 %) og til 88 % ved 1.650 (52 %). Mailene traeder frem, naar de sendes: 8, 18, 28, 40, 52 %. Fyldet foelger markoeren. */ body.page-forhandling .fh-vis-2.inde .fhs-akse-markoer { animation: fhs-markoer var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-markoer { 0%, 6% { opacity: 0; transform: translateY(0); } 10%, 26% { opacity: 1; transform: translateY(0); } 31%, 50% { transform: translateY(32%); } 56%, 86% { opacity: 1; transform: translateY(82%); } 92%, 100% { opacity: 0; transform: translateY(82%); } } body.page-forhandling .fh-vis-2.inde .fhs-akse-fyld { animation: fhs-fyld var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-fyld { 0%, 26% { transform: scaleY(0); } 31%, 50% { transform: scaleY(.32); } 56%, 86% { transform: scaleY(.82); } 92%, 100% { transform: scaleY(0); } } body.page-forhandling .fh-vis-2.inde .fhs-mk-tal span:nth-child(1) { animation: fhs-mkt1 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mk-tal span:nth-child(2) { animation: fhs-mkt2 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mk-tal span:nth-child(3) { animation: fhs-mkt3 var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-mkt1 { 0%, 8% { opacity: 0; } 10%, 27% { opacity: 1; } 30%, 100% { opacity: 0; } } @keyframes fhs-mkt2 { 0%, 30% { opacity: 0; } 33%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes fhs-mkt3 { 0%, 55% { opacity: 0; } 58%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } } body.page-forhandling .fh-vis-2.inde .fhs-mail[style*="--i:0"] { animation: fhs-m0 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mail[style*="--i:1"] { animation: fhs-m1 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mail[style*="--i:2"] { animation: fhs-m2 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mail[style*="--i:3"] { animation: fhs-m3 var(--loop) var(--sc-ud) infinite both; } body.page-forhandling .fh-vis-2.inde .fhs-mail[style*="--i:4"] { animation: fhs-m4 var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-m0 { 0%, 8% { opacity: 0; transform: translateX(3cqw); } 13%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-m1 { 0%, 18% { opacity: 0; transform: translateX(3cqw); } 23%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-m2 { 0%, 28% { opacity: 0; transform: translateX(3cqw); } 33%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-m3 { 0%, 40% { opacity: 0; transform: translateX(3cqw); } 45%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } @keyframes fhs-m4 { 0%, 52% { opacity: 0; transform: translateX(3cqw); } 57%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(3cqw); } } /* 3: stregen tegnes 14-40 %, stemplet lander 46 % med overshoot, foden 58 %. */ body.page-forhandling .fh-vis-3.inde .fhs-sign-a { animation: fhs-streg-a var(--loop) linear infinite both; } body.page-forhandling .fh-vis-3.inde .fhs-sign-b { animation: fhs-streg-b var(--loop) linear infinite both; } @keyframes fhs-streg-a { 0%, 12% { stroke-dashoffset: 100; } 34%, 88% { stroke-dashoffset: 0; } 93%, 100% { stroke-dashoffset: 100; } } @keyframes fhs-streg-b { 0%, 36% { stroke-dashoffset: 100; } 52%, 88% { stroke-dashoffset: 0; } 93%, 100% { stroke-dashoffset: 100; } } body.page-forhandling .fh-vis-3.inde .fhs-stempel { animation: fhs-stempel var(--loop) cubic-bezier(.34, 1.56, .64, 1) infinite both; } @keyframes fhs-stempel { 0%, 55% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 60%, 88% { opacity: 1; transform: rotate(-8deg) scale(1); } 93%, 100% { opacity: 0; transform: rotate(-8deg) scale(1.6); } } body.page-forhandling .fh-vis-3.inde .fhs-fod { animation: fhs-fod3 var(--loop) var(--sc-ud) infinite both; } @keyframes fhs-fod3 { 0%, 64% { opacity: 0; transform: translateY(2cqw); } 70%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(2cqw); } } /* ══ Responsivt ════════════════════════════════════════════════════ */ @media (max-width: 1200px) { body.page-forhandling .fh-trin-kort { max-width: 230px; } body.page-forhandling .fh-spor-trin { gap: 12px; } } /* Under 1100 px giver hjoernet ikke plads: fotoet laegger sig som en blok oeverst, og animationen stables under i fuld stoerrelse. */ @media (max-width: 1100px) { body.page-forhandling .fh-panel { display: flex; flex-direction: column; gap: 20px; padding: clamp(16px, 3vw, 24px); min-height: 0; overflow: visible; } body.page-forhandling .fh-foto { position: static; } body.page-forhandling .fh-foto img { height: auto; aspect-ratio: 1454 / 1082; border-radius: 7px; } body.page-forhandling .fh-anim { position: static; transform: none; flex-direction: column; align-items: center; } body.page-forhandling .fh-traad { width: 100%; max-width: 430px; } body.page-forhandling .fh-pris { width: 100%; max-width: 306px; } } @media (max-width: 980px) { body.page-forhandling .fh-spor-trin { grid-template-columns: 1fr 1fr; gap: 28px 18px; } body.page-forhandling .fh-spor-linje { display: none; } body.page-forhandling .fh-trin-kort { max-width: 300px; } } @media (max-width: 900px) { body.page-forhandling .fh-sml { grid-template-columns: 1fr; } body.page-forhandling .fh-sml-midt { grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px; padding: 10px 0; justify-content: center; } body.page-forhandling .fh-resultat { width: auto; } } @media (max-width: 620px) { body.page-forhandling .fh-scene-graa { aspect-ratio: auto; max-width: none; padding: 20px; } body.page-forhandling .fh-brief { width: 100%; } body.page-forhandling .fh-br-rk { height: 30px; } body.page-forhandling .fh-br-analyse { padding-bottom: 22px; } } @media (max-width: 560px) { body.page-forhandling .fh-spor-trin { grid-template-columns: 1fr; } body.page-forhandling .fh-br-k em { display: none; } }