/* Hours — kædemodulet, sidespecifikt lag.
   Indlæses KUN af pages/kaedemodul.html, efter feature.css.

   Hvorfor filen findes: ni produktsider deler .prod-split, og kædesiden
   brugte den tre gange i træk med det samme doc-card. Denne fil giver
   kædesiden ét greb, ingen anden side kan genbruge.

   Designsprog: forsidens, ikke produktsidernes. Målt i browseren er begge
   siders overskrifter DM Sans 500; forskellen ligger i kickeren - forsiden
   bruger en stille grå, produktsiderne en grøn versal med streg.

   Målene er taget fra forsiden, ikke valgt: dens .fi-scene er 559 x 559 ved
   1440 px, og dens feature-sektioner bruger .fg-h-md = 38,88 px. 48 px er
   .fg-h-lg, som forsiden kun bruger til de store manifest-udsagn.

   Kortsprog og bevægelse følger de godkendte referencer: kortene SPILLER EN
   SCENE i loop frem for at tone ind én gang.

   Alle klasser er præfikset km- og scopet til body.page-modul, så
   intet slår igennem på de otte andre produktsider.
   Ingen nye farver: alt kommer fra tokens i style.css. */

body.page-modul {
  --km-ud: cubic-bezier(.16, 1, .3, 1);

  /* ÉN afstandsskala. Alt på siden bruger et trin herfra. */
  --km-1: 8px;  --km-2: 12px; --km-3: 16px; --km-4: 24px;
  --km-5: 32px; --km-6: 48px; --km-7: 64px;
  --km-sek: clamp(88px, 11vw, 158px);

  /* Mint-fladen er en tand lysere end --green-bg, så det hvide kort ovenpå
     stadig har kontrast at stå imod. */
  --km-flade: #eef8f3;
}

/* ── Sektionsopsætning ─────────────────────────────────────────────────── */
body.page-modul .km-sek { padding: var(--km-sek) 0 0; background: #fff; }

/* Forsidens .fi-modul er 56fr/44fr med figuren i den BREDE kolonne og et gab
   paa clamp(40px,5vw,80px). Det giver dens tekstspalte 563 px - præcis det,
   der er maalt paa forsiden. Kolonnen styrer altsaa tekstbredden; der er
   ingen max-width paa teksten. */
body.page-modul .km-kol {
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
}
/* Staar figuren foerst, byttes kolonnerne, saa den brede stadig er figurens. */
body.page-modul .km-kol:has(> .km-scene:first-child) { grid-template-columns: 52fr 48fr; }

/* ── Typografi ─────────────────────────────────────────────────────────── */
/* Samme behandling som forsidens .fg-kicker: versaler, kraftigere, i
   primaer tekstfarve. Bevidst uden gron farve og uden streg - det er
   produktsidernes .prod-eyebrow og en anden, hoejere tone. */
body.page-modul .km-kick {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t1);
}

body.page-modul .km-h2 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 560;          /* en anelse tungere end 500, langt fra bold */
  font-size: clamp(1.65rem, 2.7vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--t1);
  margin: var(--km-2) 0 0;
}

body.page-modul .km-liste {
  list-style: none;
  margin: var(--km-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-modul .km-liste li { font-size: 1.02rem; line-height: 1.55; color: #38342f; }

body.page-modul .km-pil {
  display: inline-flex;
  align-items: center;
  gap: var(--km-1);
  background: var(--mint);
  color: var(--mint-ink);
  border-radius: 999px;
  padding: 13px 28px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--km-4);
  transition: background-color .2s var(--km-ud), transform .2s var(--km-ud);
}
body.page-modul .km-pil:hover { background: #b3e5cf; transform: translateY(-1px); }
body.page-modul .km-pil:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 3px; }

/* ── Scenen: kvadratisk mint-flade med ét kort på ───────────────────────── */
/* Maalt paa forsiden: .fi-scene er 559 x 559 ved 1440 px viewport og
   hugger kolonnens ydre kant. Mine var 644 - 15 % for store. */
body.page-modul .km-scene {
  position: relative;
  width: 100%;
  max-width: 620px;
  /* Samme facon som forsidens flader. */
  aspect-ratio: 1.32 / 1;
  border-radius: 7px;
  background: var(--km-flade);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.8vw, 40px);
  overflow: hidden;
}
body.page-modul .km-kol > .km-scene:first-child { justify-self: start; }
body.page-modul .km-kol > .km-scene:last-child  { justify-self: end; }

/* ── Udbyttets talblok ─────────────────────────────────────────────────── */
body.page-modul .km-gevinst {
  margin-top: var(--km-6);
  padding-top: var(--km-5);
  border-top: 1px solid var(--border);
}
body.page-modul .km-gevinst-tal {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: .94;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--green-txt);
  margin-top: 6px;
}
body.page-modul .km-gevinst-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--prose);
  margin-top: var(--km-2);
}


/* ══════════════════════════════════════════════════════════════════════════
   TRE FIGURER — TRE FORMER, TRE BEVÆGELSER, TRE SLAGS INDHOLD

   Før var det det samme hvide kort tre gange. Nu:

     1  Kontrakterne ligger spredt   en vifte af dokumenter der lander skævt
     2  Amber læser kontrakten       én side der scannes, vilkår popper ud
     3  Fristerne, du skal handle på  rækker der åbner og lukker

   Indholdet er flyttet fra elpriser til dét, en franchisebutik faktisk skal
   have styr på: binding, opsigelsesvarsel, prisregulering og frister.
   Det er også præcis det, Amber læser.

   Regler lånt fra animate-skillen: udgange kører 75 % af indgangene, og kun
   transform/opacity animeres. Interaktioner ligger på 180-220 ms.
   ══════════════════════════════════════════════════════════════════════ */

/* ── FIGUR 1 · Bunken ────────────────────────────────────────────────────
   Fire kontrakter i portræt, som papir ligger: staaende, taette, med
   forskellige vinkler. De var foer brede, generiske kort uden noget
   kontrakt-agtigt ved sig.

   Vilkaaret nederst er SLOERET, ikke erstattet af et spoergsmaalstegn.
   Vaerdien findes - butikken kan bare ikke laese den. Det er praecis dét,
   "forhandler i blinde" betyder. */
body.page-modul .km-vifte { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }

body.page-modul .km-dok {
  position: absolute;
  width: 176px;
  min-height: 236px;
  padding: 15px 15px 16px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 18px 36px rgba(26, 25, 22, .14), 0 1px 3px rgba(26, 25, 22, .06), 0 0 0 1px rgba(26, 25, 22, .05);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
body.page-modul .km-dok-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: .54rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3);
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid #f2f0ec;
}
body.page-modul .km-dok-mrk { width: 5px; height: 5px; border-radius: 1px; background: var(--green); flex: 0 0 auto; }
body.page-modul .km-dok-t {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: .82rem; line-height: 1.2; color: var(--t1);
}
body.page-modul .km-dok-l { font-size: .58rem; color: var(--t3); margin-top: 2px; }
body.page-modul .km-dok-s { display: flex; flex-direction: column; gap: 5px; margin: 11px 0; }
body.page-modul .km-dok-s2 { margin: 12px 0 0; }
body.page-modul .km-dok-s i { display: block; height: 4px; border-radius: 2px; background: #f0eeea; }
body.page-modul .km-dok-s i.kort { width: 66%; }
body.page-modul .km-dok-p {
  font-size: .58rem; font-weight: 600; color: var(--t2);
  padding: 3px 6px; margin: 0 -6px 2px;
  background: #f7f5f2; border-radius: 3px;
}
body.page-modul .km-dok-v {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid #f2f0ec;
  font-size: .58rem; color: var(--t3);
}
/* Vaerdien er der - den kan bare ikke laeses. */
body.page-modul .km-slor {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .72rem; color: var(--t1);
  filter: blur(3.4px);
  user-select: none;
}

body.page-modul .km-ukendt {
  position: absolute; z-index: 9;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px;
  padding: 9px 17px 9px 10px;
  box-shadow: 0 14px 32px rgba(26, 25, 22, .18), 0 2px 5px rgba(26, 25, 22, .06);
  font-size: .76rem; font-weight: 600; color: var(--t1); white-space: nowrap;
}
body.page-modul .km-ukendt s {
  text-decoration: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber-bg); color: var(--amber-txt);
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
}

/* ── FIGUR 2 · Analysen ──────────────────────────────────────────────────
   Dokumentet fylder fladen frem for at staa som en tynd strimmel, og hver
   brik er forankret ud for SIN klausul i stedet for at svaeve frit. Det er
   forsidens eget annotationsgreb: kortet haenger ud over fladen det hoerer
   til, ikke ved siden af den. */
body.page-modul .km-analyse { position: relative; width: 100%; height: 100%; }

body.page-modul .km-side {
  position: absolute; inset: 0 auto 0 0;
  width: 62%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(26, 25, 22, .14), 0 2px 5px rgba(26, 25, 22, .05);
  padding: 16px 18px 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
body.page-modul .km-side-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3);
  padding-bottom: 10px; margin-bottom: 11px;
  border-bottom: 1px solid #f2f0ec;
}
body.page-modul .km-side-t {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: .8rem; color: var(--t1); margin-bottom: 12px;
}
body.page-modul .km-krop { display: flex; flex-direction: column; gap: 7px; flex: 1; }
body.page-modul .km-krop i { display: block; height: 4px; border-radius: 2px; background: #f0eeea; }
body.page-modul .km-krop i.kort { width: 62%; }

/* Klausulen er en tekstlinje i dokumentet, ikke en knap paa tvaers af det. */
body.page-modul .km-kl {
  margin: 3px 0; padding: 3px 6px;
  align-self: flex-start;
  border-radius: 4px;
  font-size: .62rem; font-weight: 600; color: var(--t3);
  background: transparent;
}
body.page-modul .km-kl em { font-style: normal; }

body.page-modul .km-scan {
  position: absolute; left: 0; right: 0; height: 38px;
  background: linear-gradient(180deg, rgba(31,157,85,0) 0%, rgba(31,157,85,.12) 55%, rgba(31,157,85,.46) 100%);
  border-bottom: 1.5px solid var(--green);
  pointer-events: none;
}

/* Brikkerne er forankret ud for hver sin klausul via --t. */
body.page-modul .km-chip {
  position: absolute;
  top: var(--t); left: 54%;
  display: flex; align-items: baseline; gap: 7px;
  background: #fff; border-radius: 9px;
  padding: 9px 14px;
  box-shadow: 0 12px 28px rgba(26, 25, 22, .16), 0 1px 3px rgba(26, 25, 22, .05);
  font-size: .66rem; color: var(--t2); white-space: nowrap;
}
body.page-modul .km-chip b {
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: .78rem; color: var(--t1);
}
body.page-modul .km-chip.varsel b { color: var(--red-txt); }

body.page-modul .km-knap {
  position: absolute; right: 0; bottom: 4px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 999px;
  padding: 9px 17px 9px 11px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .72rem;
  box-shadow: 0 12px 26px rgba(26, 25, 22, .24);
}
body.page-modul .km-ikon { position: relative; width: 15px; height: 15px; flex: 0 0 auto; }
body.page-modul .km-ring,
body.page-modul .km-flue { position: absolute; inset: 0; border-radius: 50%; }
body.page-modul .km-ring { border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; }
body.page-modul .km-flue { background: var(--green); color: #fff; display: grid; place-items: center; font-size: .54rem; }
body.page-modul .km-tekster { display: inline-grid; }
body.page-modul .km-tekster > span { grid-area: 1 / 1; white-space: nowrap; }

/* ── FIGUR 3 · Fristerne ─────────────────────────────────────────────────
   En liste der åbner og lukker. Ingen kolonner, ingen tabel - lodret
   bevægelse, så den adskiller sig fra begge de foregående. */
body.page-modul .km-frister {
  width: 100%;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(26, 25, 22, .10), 0 2px 5px rgba(26, 25, 22, .04);
  overflow: hidden;
}
body.page-modul .km-fr-hd {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px;
  background: var(--green-bg);
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .8rem;
  color: var(--green-txt);
}
body.page-modul .km-fr-hd em { font-style: normal; margin-left: auto; font-weight: 400; opacity: .72; font-size: .72rem; }

body.page-modul .km-fr { border-top: 1px solid #f2f0ec; }
body.page-modul .km-fr-top {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px;
}
body.page-modul .km-fr-navn {
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .8rem; color: var(--t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page-modul .km-fr-sted { font-size: .66rem; color: var(--t3); flex: 0 0 auto; }
body.page-modul .km-fr-st {
  margin-left: auto; flex: 0 0 auto;
  font-size: .64rem; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  background: var(--amber-bg); color: var(--amber-txt);
}
body.page-modul .km-fr.gjort .km-fr-st { background: var(--green-bg); color: var(--green-txt); }

/* Foldemekanikken: grid-template-rows 0fr -> 1fr er den eneste rene
   CSS-maade at animere en ukendt hoejde paa. */
body.page-modul .km-fr-ind { display: grid; grid-template-rows: 0fr; }
body.page-modul .km-fr-ind > div { overflow: hidden; min-height: 0; }
body.page-modul .km-fr-tekst {
  padding: 0 16px 14px 16px;
  font-size: .7rem; line-height: 1.55; color: var(--t2);
}
body.page-modul .km-fr-tekst b { font-weight: 600; color: var(--t1); }

/* ══ BEVÆGELSE ═══════════════════════════════════════════════════════════
   Sitets .reveal bruger 0,75 s "ease" og 32 px. Kurven starter og stopper
   hårdt. Her: kortere vej, længere tid, expo-udgang med lang hale.

   Fra animate-skillen: udgange kører 75 % af indgangene, og kun transform
   og opacity animeres. Interaktioner ligger på 180-220 ms. */

@keyframes km-rejs {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
@keyframes km-vip {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

body.page-modul .km-ind { animation: km-rejs .9s var(--km-ud) both; animation-play-state: paused; }
body.page-modul .km-ind.visible { animation-play-state: running; }

/* MÅLT FEJL: clip-path må IKKE ligge på scenen, før .visible er sat. Chrome
   regner elementets eget clip med i den geometri, IntersectionObserver måler
   på, så inset(0 0 100% 0) giver ratio 0, og tærsklen på 0.12 nås aldrig.
   Scenen ventede på en klasse, den selv forhindrede i at blive sat.
   Falsifikationstest: eneste ændrede variabel var clip-path, og scener med
   .visible gik fra 0 af 3 til 3 af 3. */
body.page-modul .km-scene.reveal { opacity: 0; transform: none; transition: none; }
body.page-modul .km-scene.reveal.visible { opacity: 1; animation: km-vip 1.1s var(--km-ud) both; }

/* Forskydningen ligger i CSS, ikke i observeren: js/main.js forskyder med
   i * 80, hvor i er indekset i den enkelte observer-batch, så to elementer
   der krydser tærsklen hver for sig begge får 0 ms. */
body.page-modul .km-t1 { animation-delay: .07s }
body.page-modul .km-t2 { animation-delay: .14s }
body.page-modul .km-t3 { animation-delay: .21s }
body.page-modul .km-t4 { animation-delay: .28s }
body.page-modul .km-t5 { animation-delay: .35s }
body.page-modul .km-t6 { animation-delay: .42s }

/* ── Figur 1 · dokumenterne lander skævt ───────────────────────────────
   Hver kontrakt flyver ind nedefra, roterer på plads og bliver liggende.
   Udgangen er kortere end indgangen, jf. animate-skillens regel. */
@keyframes km-dok-ind {
  0% {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 84px)) rotate(0deg) scale(.86);
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  11%, 90% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  100%     { opacity: 0; transform: translate(var(--x), calc(var(--y) + 30px)) rotate(0deg) scale(.94); }
}
@keyframes km-pop {
  0%, 52%  { opacity: 0; transform: scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  60%, 90% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.9); }
}

body.page-modul .km-s1 .km-ukendt { bottom: 12px; animation: km-pop 9s infinite both; }

/* ── Figur 2 · scanneren, klausulerne og de brikker der popper ud ───────
   Scanlinjen løber ned gennem siden. Hver klausul lyser op, når linjen
   passerer den, og det tilsvarende vilkår popper ud til højre. */
@keyframes km-scan {
  0%, 4%   { transform: translateY(-40px); opacity: 0; }
  8%       { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  46%      { transform: translateY(500px); opacity: 1; }
  52%, 100%{ transform: translateY(500px); opacity: 0; }
}
@keyframes km-lys {
  0%, 12%  { background: transparent; color: var(--t2); }
  18%, 88% { background: #d7f0e4; color: var(--green-txt); }
  100%     { background: transparent; color: var(--t2); }
}
@keyframes km-chip-ind {
  0%, 14%  { opacity: 0; transform: translateX(-18px) scale(.84); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  22%, 90% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateX(-10px) scale(.94); }
}
@keyframes km-snurr { to { transform: rotate(360deg) } }
/* Knappen skifter fra "analyserer" til resultatet, når scanningen er nede. */
@keyframes km-ring-ud  { 0%, 50% { opacity: 1 } 56%, 100% { opacity: 0 } }
@keyframes km-flue-ind { 0%, 50% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 58%, 100% { opacity: 1; transform: scale(1) } }
@keyframes km-tekst-a  { 0%, 50% { opacity: 1 } 55%, 100% { opacity: 0 } }
@keyframes km-tekst-b  { 0%, 52% { opacity: 0 } 58%, 100% { opacity: 1 } }

body.page-modul .km-s2 .km-scan { animation: km-scan 9s infinite both; }
body.page-modul .km-s2 .km-kl   { animation: km-lys 9s infinite both; animation-delay: var(--km-t); }
body.page-modul .km-s2 .km-chip { animation: km-chip-ind 9s infinite both; animation-delay: var(--km-t); }
body.page-modul .km-s2 .km-kl:nth-of-type(1),   body.page-modul .km-s2 .km-chip:nth-of-type(1) { --km-t: .55s }
body.page-modul .km-s2 .km-kl:nth-of-type(2),   body.page-modul .km-s2 .km-chip:nth-of-type(2) { --km-t: 1.25s }
body.page-modul .km-s2 .km-kl:nth-of-type(3),   body.page-modul .km-s2 .km-chip:nth-of-type(3) { --km-t: 1.95s }
body.page-modul .km-s2 .km-kl:nth-of-type(4),   body.page-modul .km-s2 .km-chip:nth-of-type(4) { --km-t: 2.65s }
body.page-modul .km-s2 .km-ring { animation: km-snurr .85s linear infinite, km-ring-ud 9s infinite both; }
body.page-modul .km-s2 .km-flue { animation: km-flue-ind 9s infinite both; }
body.page-modul .km-s2 .km-knap span[data-tekst="a"] { animation: km-tekst-a 9s infinite both; }
body.page-modul .km-s2 .km-knap span[data-tekst="b"] { animation: km-tekst-b 9s infinite both; }

/* ── Figur 3 · rækkerne der åbner og lukker ────────────────────────────
   Én ad gangen: rækken folder ud, viser fundet, folder sammen igen, og
   status skifter fra frist til genforhandlet. */
@keyframes km-fold {
  0%, 6%   { grid-template-rows: 0fr; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  14%, 26% { grid-template-rows: 1fr; }
  32%, 100%{ grid-template-rows: 0fr; }
}
@keyframes km-status {
  0%, 24%  { background: var(--amber-bg); color: var(--amber-txt); }
  30%, 100%{ background: var(--green-bg); color: var(--green-txt); }
}
/* De allerede handlede raekker skifter ikke - de er groenne fra start. */
body.page-modul .km-s3 .km-fr-st.km-fast { animation: none; background: var(--green-bg); color: var(--green-txt); }
body.page-modul .km-s3 .km-fr:nth-of-type(1) { --km-t: .3s }
body.page-modul .km-s3 .km-fr:nth-of-type(2) { --km-t: 2.4s }
body.page-modul .km-s3 .km-fr:nth-of-type(3) { --km-t: 4.5s }

/* Loopene står stille, indtil scenen er i viewport. :where() har nul
   specificitet, så .visible-reglen vinder uden at skulle overbydes. */
body.page-modul .km-scene :where(.km-dok, .km-ukendt, .km-scan, .km-kl, .km-chip, .km-ring, .km-flue, .km-knap span, .km-fr-ind, .km-fr-st:not(.km-fast)) { animation-play-state: paused; }
body.page-modul .km-scene.visible :where(.km-dok, .km-ukendt, .km-scan, .km-kl, .km-chip, .km-ring, .km-flue, .km-knap span, .km-fr-ind, .km-fr-st:not(.km-fast)) { animation-play-state: running; }

/* ── Mindre bevægelse: alt til sluttilstand, intet animeres. ──────────── */
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-ind,
  body.page-modul .km-scene,
  body.page-modul .km-scene * { animation: none !important; transition: none !important; }
  body.page-modul .km-ind { opacity: 1; transform: none; filter: none; }
  body.page-modul .km-scene.reveal { clip-path: none; }
  body.page-modul .km-scan, body.page-modul .km-ring { display: none; }
  body.page-modul .km-kl { background: #d7f0e4; color: var(--green-txt); }
  body.page-modul .km-fr-ind { grid-template-rows: 1fr; }
  body.page-modul .km-knap span[data-tekst="a"] { visibility: hidden; }
}

/* ══ RESPONSIVT ═════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.page-modul .km-kol,
  body.page-modul .km-kol:has(> .km-scene:first-child) { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  body.page-modul .km-tekst { order: 1; }
  body.page-modul .km-scene { order: 2; justify-self: center; }
}

@media (max-width: 620px) {
  body.page-modul .km-analyse { grid-template-columns: 140px 1fr; gap: 12px; }
  body.page-modul .km-dok { width: 132px; }
  body.page-modul .km-knap { font-size: .68rem; padding: 8px 14px 8px 10px; }
  body.page-modul .km-fr-sted { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGNRUNDE 2026-09-02 · variation inden for forsidens sprog

   Foer: tre split-moduler i traek. Nu roterer siden gennem fire af forsidens
   layoutfamilier: split-modul -> fuldbredde-panel -> manifest-linje ->
   3 lag-kort -> spejlet split-modul. Samme tokens, samme maal, samme kurve.
   Al bevaegelse er transform/opacity/filter. Loops staar stille indtil
   .visible. Intet clip i hviletilstand (IO-faelden, se ovenfor).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sektionshoved (forsidens centrerede hoved) ─────────────────────────── */
body.page-modul .km-hoved { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 4.4vw, 56px); }
body.page-modul .km-h2-lg { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; }
body.page-modul .km-sub { color: var(--prose); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; margin: var(--km-3) auto 0; max-width: 56ch; }

/* ── PANEL · Kaedeoverblikket ────────────────────────────────────────────
   Forsidens fuldbredde-panel: containerbredde, radius 24, ca. 1.9:1. Tre
   lag giver dybde: prikgitter bagest (scroll-drevet), linjer, enheder og
   nav forrest. */
body.page-modul .km-panel {
  position: relative;
  aspect-ratio: 1000 / 480;
  min-height: 420px;
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 18%, #e8f6ee 0%, #d6edde 55%, #c4e4d0 100%);
}
body.page-modul .km-panel.reveal { opacity: 0; transform: none; transition: opacity 1.1s var(--km-ud); }
body.page-modul .km-panel.reveal.visible { opacity: 1; }

/* Prikgitteret er kortets "papir": funktionelt som baggrund for et net. */
body.page-modul .km-gitter {
  position: absolute; inset: -12% -4%;
  background-image: radial-gradient(circle, rgba(14,102,64,.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 100%);
}
@supports (animation-timeline: view()) {
  body.page-modul .km-gitter { animation: km-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes km-parallax { from { transform: translateY(28px) } to { transform: translateY(-28px) } }
}

body.page-modul .km-net { position: absolute; inset: 0; width: 100%; height: 100%; }
body.page-modul .km-linje {
  stroke: rgba(14,102,64,.28); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}

/* Navet: hovedkontoret i midten, Hours-uret som kerne. */
body.page-modul .km-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 3;
}
body.page-modul .km-hub-kerne {
  width: 62px; height: 62px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 18px 44px rgba(17,24,20,.18), 0 0 0 1px rgba(14,102,64,.08);
  position: relative; z-index: 2;
}
body.page-modul .km-hub-navn {
  background: #fff; border-radius: 999px; padding: 5px 12px;
  font-size: .68rem; font-weight: 600; color: var(--t1);
  box-shadow: 0 8px 22px rgba(17,24,20,.12);
}
body.page-modul .km-hub-puls {
  position: absolute; left: 50%; top: 31px; width: 62px; height: 62px; margin-left: -31px; margin-top: -31px;
  border-radius: 50%; border: 1.5px solid rgba(31,157,85,.5); z-index: 1;
}

/* Enhederne ligger paa en ellipse via --x/--y (beregnet i markup). */
body.page-modul .km-butikker { position: absolute; inset: 0; }
body.page-modul .km-butik {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 132px; padding: 9px 11px 10px;
  background: #fff; border-radius: 11px;
  box-shadow: 0 10px 26px rgba(17,24,20,.11), 0 1px 2px rgba(17,24,20,.05);
  display: flex; flex-direction: column; gap: 1px; z-index: 2;
}
body.page-modul .km-butik b { font-size: .74rem; font-weight: 600; color: var(--t1); }
body.page-modul .km-butik small { font-size: .56rem; color: var(--t3); }
body.page-modul .km-pris { margin-top: 5px; font-size: .8rem; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
body.page-modul .km-pris i { font-style: normal; font-weight: 400; font-size: .58rem; color: var(--t3); margin-left: 2px; }
body.page-modul .km-flag {
  position: absolute; top: -9px; right: -8px;
  font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 999px;
  background: #f5cdd8; color: var(--red-txt);
  box-shadow: 0 6px 14px rgba(17,24,20,.14);
}
body.page-modul .km-bedst .km-flag { background: var(--green-bg); color: var(--green-txt); }
body.page-modul .km-over .km-pris { color: var(--red-txt); }
body.page-modul .km-bedst .km-pris { color: var(--green-txt); }

body.page-modul .km-sum {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  background: #fff; color: var(--t1); border-radius: 999px; padding: 10px 18px 10px 14px;
  font-size: .78rem; font-weight: 500; z-index: 4;
  box-shadow: 0 16px 36px rgba(17,24,20,.14), 0 1px 2px rgba(17,24,20,.05);
}
body.page-modul .km-sum b { font-weight: 600; color: var(--green-txt); }
body.page-modul .km-sum-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(31,157,85,.16); }
body.page-modul .km-sum-skille { width: 1px; height: 14px; background: #e8e5e0; }

/* ── Panelets koreografi (16 s, paused til .visible) ──────────────────────
   0.0-2.2 s  enheder toner ind, én ad gangen, med sloer
   1.4-3.8 s  linjer traekkes ind mod navet
   3.4 s      navet pulser
   4.2-5.2 s  de tre der betaler for meget flages, den billigste markeres
   5.6 s      summen lander
   13.5-16 s  alt toner blidt ud og starter forfra */
@keyframes km-butik-ind {
  0%       { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(.9); filter: blur(8px); }
  8%, 84%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100%     { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.96); filter: blur(6px); }
}
@keyframes km-linje-ind {
  0%, 9%   { stroke-dashoffset: 1; opacity: 0; }
  10%      { opacity: 1; }
  24%, 84% { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes km-hub-ind {
  0%, 18%  { opacity: 0; transform: translate(-50%, -50%) scale(.8); filter: blur(6px); }
  24%, 86% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100%     { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
}
@keyframes km-puls {
  0%, 21%  { transform: scale(1); opacity: 0; }
  22%      { opacity: .9; }
  36%      { transform: scale(3.4); opacity: 0; }
  100%     { transform: scale(3.4); opacity: 0; }
}
@keyframes km-flag-ind {
  0%, 27%  { opacity: 0; transform: scale(.4) translateY(6px); }
  31%      { opacity: 1; transform: scale(1.12) translateY(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  34%, 84% { opacity: 1; transform: scale(1) translateY(0); }
  100%     { opacity: 0; transform: scale(.9); }
}
@keyframes km-sum-ind {
  0%, 34%  { opacity: 0; transform: translate(-50%, 18px); filter: blur(8px); }
  40%, 86% { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
  100%     { opacity: 0; transform: translate(-50%, 8px); filter: blur(6px); }
}
body.page-modul .km-panel .km-butik   { animation: km-butik-ind 16s var(--km-ud) infinite both; animation-delay: calc(var(--i) * .16s); }
body.page-modul .km-panel .km-linje   { animation: km-linje-ind 16s var(--km-ud) infinite both; animation-delay: calc(1.2s + var(--i) * .14s); }
body.page-modul .km-panel .km-hub     { animation: km-hub-ind 16s var(--km-ud) infinite both; }
body.page-modul .km-panel .km-hub-puls   { animation: km-puls 16s cubic-bezier(.16,1,.3,1) infinite both; }
body.page-modul .km-panel .km-hub-puls-2 { animation-delay: .35s; }
body.page-modul .km-panel .km-flag    { animation: km-flag-ind 16s var(--km-ud) infinite both; animation-delay: calc(var(--i) * .12s); }
body.page-modul .km-panel .km-sum     { animation: km-sum-ind 16s var(--km-ud) infinite both; }
body.page-modul .km-panel :where(.km-butik, .km-linje, .km-hub, .km-hub-puls, .km-flag, .km-sum) { animation-play-state: paused; }
body.page-modul .km-panel.visible :where(.km-butik, .km-linje, .km-hub, .km-hub-puls, .km-flag, .km-sum) { animation-play-state: running; }

/* ── TRIN · forsidens trio-struktur ─────────────────────────────────────
   Samme maal som forsidens "Bygget paa det, tallene ikke selv fortaeller":
   tre kolonner, gap 14-24px, kvadratisk flade med radius 24, titel 600/1.2rem
   og én linje under fladen. Fladerne er mint / hvid / blaa (forsidens lag-kort). */
body.page-modul .km-trin { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
body.page-modul .km-trin-kort { margin: 0; }
body.page-modul .km-trin-kort figcaption { padding: 16px 6px 0; }
body.page-modul .km-trin-titel { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: -.015em; color: var(--t1); }
body.page-modul .km-trin-linje { display: block; margin-top: 4px; color: var(--t2); font-size: .95rem; line-height: 1.5; }

body.page-modul .km-vis {
  position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden;
  container-type: inline-size;
}
body.page-modul .km-vis-mint { background: linear-gradient(160deg, #e3f4eb, #d3edde); }
body.page-modul .km-vis-hvid { background: var(--fg-kort, #f9f9f9); }
body.page-modul .km-vis-blaa { background: linear-gradient(160deg, #e4edf7, #d5e3f2); }
body.page-modul .km-trin-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-modul .km-vis-chip {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  white-space: nowrap; background: var(--ink); color: #fff;
  border-radius: 999px; padding: 8px 14px; font-size: .74rem; font-weight: 500;
  box-shadow: 0 12px 28px rgba(17,24,20,.22); opacity: 0; z-index: 4;
}

/* Kort-reveal: sloer + forskudt (samme kurve som resten af siden) */
body.page-modul .km-trin-kort.reveal { opacity: 0; transform: none; transition: none; }
body.page-modul .km-trin-kort.reveal.visible { opacity: 1; animation: km-rejs 1s var(--km-ud) both; }
body.page-modul .km-trin-kort.km-t1.visible { animation-delay: 0s; }
body.page-modul .km-trin-kort.km-t2.visible { animation-delay: .1s; }
body.page-modul .km-trin-kort.km-t3.visible { animation-delay: .2s; }

/* Alle tre scener: 10 s loop, staar stille indtil kortet er synligt */
body.page-modul .km-vis :where(.km-arkiv, .km-papir, .km-ark-tx, .km-ark-st, .km-ark-ft, .km-vis-chip, .km-bar, .km-bar em, .km-snit, .km-pakke, .km-sat i, .km-sat b, .km-aftale) { animation-play-state: paused; }
body.page-modul .km-trin-kort.visible .km-vis :where(.km-arkiv, .km-papir, .km-ark-tx, .km-ark-st, .km-ark-ft, .km-vis-chip, .km-bar, .km-bar em, .km-snit, .km-pakke, .km-sat i, .km-sat b, .km-aftale) { animation-play-state: running; }

/* ── Scene 1 · Saml: arkivet fyldes op ─────────────────────────────────
   Et tomt arkivkort i midten. Seks dokumenter flyver ind fra kanterne, én
   ad gangen, og lander som raekker; teksten toner ind bag dem, status
   skifter til "laest", og bundlinjen taeller op til sidst. */
body.page-modul .km-arkiv {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84%; background: #fff; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(26,25,22,.10), 0 2px 5px rgba(26,25,22,.04);
  animation: km-arkiv 10s var(--km-ud) infinite both;
}
@keyframes km-arkiv {
  0%      { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(6px); }
  6%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100%    { opacity: 0; transform: translate(-50%, -50%) scale(.97); filter: blur(4px); }
}
body.page-modul .km-ark-hd { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; font-size: .72rem; color: var(--t3); border-bottom: 1px solid #f2f0ec; }
body.page-modul .km-ark-hd b { font-weight: 600; color: var(--t1); font-size: .82rem; align-self: center; }
body.page-modul .km-ark-hd em { font-style: normal; margin-left: auto; color: var(--t2); align-self: center; }
body.page-modul .km-ark-rk { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid #f2f0ec; }
body.page-modul .km-papir {
  flex: none; width: 15px; height: 19px; background: #fff; position: relative; z-index: 3;
  box-shadow: 0 2px 6px rgba(26,25,22,.14);
  background-image: linear-gradient(#e6e3de 0 0), linear-gradient(#e6e3de 0 0), linear-gradient(#e6e3de 0 0);
  background-size: 8px 1.5px, 6px 1.5px, 8px 1.5px; background-repeat: no-repeat; background-position: 3px 6px, 3px 9px, 3px 12px;
  animation: km-papir 10s var(--km-ud) infinite both; animation-delay: calc(.4s + var(--i) * .55s);
}
@keyframes km-papir {
  0%       { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(2.6); filter: blur(6px); box-shadow: 0 14px 30px rgba(26,25,22,.22); }
  2%       { opacity: 1; }
  11%      { transform: translate(0, 0) rotate(0) scale(1); filter: blur(0); box-shadow: 0 2px 6px rgba(26,25,22,.14); }
  90%      { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100%     { opacity: 0; transform: translate(0, 0) scale(1); }
}
body.page-modul .km-ark-tx { display: flex; flex-direction: column; line-height: 1.15; opacity: 0; animation: km-ark-tx 10s var(--km-ud) infinite both; animation-delay: calc(.4s + var(--i) * .55s); }
body.page-modul .km-ark-tx b { font-size: .72rem; font-weight: 600; color: var(--t1); }
body.page-modul .km-ark-tx small { font-size: .58rem; color: var(--t3); }
@keyframes km-ark-tx {
  0%, 9%   { opacity: 0; transform: translateX(6px); }
  15%, 90% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; }
}
body.page-modul .km-ark-st {
  margin-left: auto; font-style: normal; font-size: .58rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--green-bg); color: var(--green-txt); opacity: 0;
  animation: km-ark-st 10s var(--km-ud) infinite both; animation-delay: calc(.4s + var(--i) * .55s);
}
@keyframes km-ark-st {
  0%, 16%  { opacity: 0; transform: scale(.7); }
  20%      { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  23%, 90% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; }
}
body.page-modul .km-ark-ft { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; font-size: .68rem; font-weight: 600; color: var(--green-txt); opacity: 0; animation: km-ark-ft 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-ft i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,85,.18); }
@keyframes km-ark-ft { 0%, 44% { opacity: 0; transform: translateY(4px); } 50%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* ── Scene 2 · Sammenlign: tolv soejler, et snit, tre over, én billigst ─ */
body.page-modul .km-diagram {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84%; aspect-ratio: 1.08; background: #fff; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(26,25,22,.10), 0 2px 5px rgba(26,25,22,.04);
  display: flex; flex-direction: column;
}
body.page-modul .km-dia-hd { display: flex; align-items: center; gap: 8px; padding: 16px 18px 0; font-size: .72rem; color: var(--t3); }
body.page-modul .km-dia-hd b { font-weight: 600; color: var(--t1); font-size: .82rem; }
body.page-modul .km-dia-hd em { font-style: normal; margin-left: auto; color: var(--t2); }
body.page-modul .km-dia-felt { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 4.2%; padding: 34px 18px 20px; }
body.page-modul .km-bar {
  position: relative; flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px;
  background: var(--green-bg); transform-origin: bottom; transform: scaleY(.04);
  animation: km-bar 10s var(--km-ud) infinite both; animation-delay: calc(var(--i) * 60ms);
}
body.page-modul .km-bar-over  { animation-name: km-bar-over; }
body.page-modul .km-bar-bedst { animation-name: km-bar-bedst; }
@keyframes km-bar {
  0%, 4%   { transform: scaleY(.04); }
  20%, 88% { transform: scaleY(1); }
  100%     { transform: scaleY(.04); }
}
@keyframes km-bar-over {
  0%, 4%   { transform: scaleY(.04); background: var(--green-bg); }
  20%, 40% { transform: scaleY(1); background: var(--green-bg); }
  46%, 88% { transform: scaleY(1); background: #f2b8c8; }
  100%     { transform: scaleY(.04); background: var(--green-bg); }
}
@keyframes km-bar-bedst {
  0%, 4%   { transform: scaleY(.04); background: var(--green-bg); }
  20%, 40% { transform: scaleY(1); background: var(--green-bg); }
  46%, 88% { transform: scaleY(1); background: var(--green); }
  100%     { transform: scaleY(.04); background: var(--green-bg); }
}
body.page-modul .km-bar em {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%) translateY(4px);
  font-style: normal; font-size: .58rem; font-weight: 700; color: var(--red-txt); white-space: nowrap; opacity: 0;
  animation: km-em 10s var(--km-ud) infinite both; animation-delay: calc(var(--i) * 60ms);
}
body.page-modul .km-bar em.km-em-bedst { color: var(--green-txt); background: var(--green-bg); padding: 2px 6px; border-radius: 999px; font-weight: 600; top: -24px; }
@keyframes km-em {
  0%, 48%  { opacity: 0; transform: translateX(-50%) translateY(5px); }
  54%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(3px); }
}
body.page-modul .km-snit {
  position: absolute; left: 18px; right: 18px; top: calc(34px + (100% - 54px) * .38);
  border-top: 1.5px dashed rgba(14,102,64,.5); transform-origin: left; transform: scaleX(.02);
  animation: km-snit 10s var(--km-ud) infinite both;
}
body.page-modul .km-snit i { position: absolute; right: 0; top: -15px; font-style: normal; font-size: .56rem; color: var(--green-txt); background: #fff; padding: 0 4px; }
@keyframes km-snit {
  0%, 24%  { transform: scaleX(.02); opacity: 0; }
  26%      { opacity: 1; }
  38%, 88% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}

/* ── Scene 3 · Rul ud: aftalen i midten, pakker loeber ud til otte enheder ─ */
body.page-modul .km-net3 { position: absolute; inset: 0; width: 100%; height: 100%; }
body.page-modul .km-spor { stroke: rgba(14,58,122,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.page-modul .km-pakke {
  stroke: var(--blue-txt); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: .14 1; stroke-dashoffset: 1.14; opacity: 0;
  animation: km-pakke 10s linear infinite both; animation-delay: calc(var(--i) * .16s);
}
@keyframes km-pakke {
  0%, 24%   { stroke-dashoffset: 1.14; opacity: 0; }
  25%       { opacity: 1; }
  36%       { stroke-dashoffset: -.02; opacity: 1; }
  37%, 100% { stroke-dashoffset: -.02; opacity: 0; }
}
body.page-modul .km-aftale {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 3;
  width: 118px; padding: 11px 12px 12px; background: #fff; border-radius: 12px; text-align: center;
  box-shadow: 0 16px 40px rgba(14,58,122,.16), 0 0 0 1px rgba(14,58,122,.06);
  animation: km-aftale 10s var(--km-ud) infinite both;
}
body.page-modul .km-aftale small { font-size: .56rem; color: var(--t3); }
body.page-modul .km-aftale b { font-size: .8rem; font-weight: 600; color: var(--t1); }
body.page-modul .km-aftale > span { font-size: .78rem; font-weight: 600; color: var(--green-txt); margin-top: 3px; }
body.page-modul .km-aftale i { font-style: normal; font-weight: 400; font-size: .56rem; color: var(--t3); margin-left: 2px; }
@keyframes km-aftale {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  8%, 88%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100%     { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
body.page-modul .km-sat {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(36cqw) rotate(calc(var(--a) * -1));
}
body.page-modul .km-sat i {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14);
  display: grid; place-items: center;
  animation: km-sat 10s var(--km-ud) infinite both; animation-delay: calc(var(--i) * .16s);
}
body.page-modul .km-sat svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.page-modul .km-sat path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: km-hak 10s var(--km-ud) infinite both; animation-delay: calc(var(--i) * .16s); }
body.page-modul .km-sat b {
  position: absolute; left: 50%; top: 21px; transform: translateX(-50%);
  font-size: .56rem; font-weight: 600; color: var(--t2); white-space: nowrap;
  animation: km-sat-navn 10s var(--km-ud) infinite both; animation-delay: calc(var(--i) * .16s);
}
@keyframes km-sat {
  0%       { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  6%, 26%  { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  37%      { transform: scale(1.14); background: var(--green); box-shadow: 0 0 0 7px rgba(31,157,85,.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  41%, 88% { opacity: 1; transform: scale(1); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
  100%     { opacity: 0; transform: scale(.9); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
}
@keyframes km-hak { 0%, 36% { stroke-dashoffset: 1; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes km-sat-navn { 0%, 5% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
body.page-modul .km-vis-udrul .km-vis-chip { animation: km-chip 10s var(--km-ud) infinite both; animation-delay: 1.4s; }
body.page-modul .km-vis-chip-blaa { background: var(--blue-txt); }

/* ── UDBYTTET: mere luft over, gevinst + knap inde i det groenne felt ─── */
body.page-modul .km-sek-luft { padding-top: calc(var(--km-sek) + clamp(24px, 3vw, 48px)); }
body.page-modul .km-s3 {
  flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(18px, 2.4vw, 30px);
  max-width: 450px;     /* 30 % smalere end 620; kortene gaar 560 -> 390 */
  aspect-ratio: auto;   /* 450/1.32 = 341 px ville klippe de ~350 px indhold */
  min-height: 470px;    /* bevarer sektionens lodrette rytme */
}
body.page-modul .km-s3 .km-gevinst {
  width: 100%; margin: 0; padding: 16px 18px; border: 0; border-radius: 14px; background: #fff;
  box-shadow: 0 16px 40px rgba(26,25,22,.08), 0 2px 5px rgba(26,25,22,.04);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
body.page-modul .km-s3 .km-gevinst .km-kick { margin: 0; font-size: .72rem; }
body.page-modul .km-s3 .km-gevinst-tal { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 600; margin-top: 4px; }
body.page-modul .km-s3 .km-gevinst-sub { font-size: .8rem; line-height: 1.4; color: var(--t2); margin-top: 3px; }
body.page-modul .km-s3 .km-pil { flex: none; margin: 0; }

/* ── Reduceret bevaegelse: alt til sluttilstand ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-panel, body.page-modul .km-panel *,
  body.page-modul .km-trin-kort, body.page-modul .km-trin-kort * { animation: none !important; transition: none !important; }
  body.page-modul .km-panel, body.page-modul .km-trin-kort { opacity: 1; }
  body.page-modul .km-linje { stroke-dashoffset: 0; }
  body.page-modul .km-hub-puls { display: none; }
  body.page-modul .km-gitter { transform: none; }
  body.page-modul .km-arkiv { opacity: 1; transform: translate(-50%, -50%); filter: none; }
  body.page-modul .km-papir { opacity: 1; transform: none; filter: none; }
  body.page-modul .km-ark-tx, body.page-modul .km-ark-st, body.page-modul .km-ark-ft, body.page-modul .km-vis-chip, body.page-modul .km-bar em, body.page-modul .km-sat b { opacity: 1; }
  body.page-modul .km-bar { transform: scaleY(1); }
  body.page-modul .km-bar-over { background: #f2b8c8; }
  body.page-modul .km-bar-bedst { background: var(--green); }
  body.page-modul .km-snit { transform: scaleX(1); }
  body.page-modul .km-pakke { display: none; }
  body.page-modul .km-sat i { background: var(--green); box-shadow: 0 0 0 1.5px var(--green); }
  body.page-modul .km-sat path { stroke-dashoffset: 0; }
}

/* ── Responsivt ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.page-modul .km-butik { width: 118px; }
}
@media (max-width: 900px) {
  /* Panelet stables: nav oeverst, enhederne i et 2-kolonners gitter, ingen linjer */
  body.page-modul .km-panel { aspect-ratio: auto; min-height: 0; padding: 26px 18px 24px; }
  body.page-modul .km-net, body.page-modul .km-hub-puls { display: none; }
  body.page-modul .km-hub { position: static; transform: none; margin: 0 auto 18px; animation: none !important; opacity: 1; }
  body.page-modul .km-butikker { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.page-modul .km-butik { position: relative; left: auto; top: auto; transform: none; width: auto; animation: none !important; opacity: 1; filter: none; }
  body.page-modul .km-flag { animation: none !important; opacity: 1; transform: none; }
  body.page-modul .km-sum { position: static; transform: none; margin: 18px auto 0; white-space: normal; animation: none !important; opacity: 1; filter: none; }
  body.page-modul .km-trin { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  body.page-modul .km-s3 .km-gevinst { flex-direction: column; align-items: flex-start; }
  /* Stakket: feltet vokser med liste + gevinst i stedet for at klemme listen */
  body.page-modul .km-s3 { aspect-ratio: auto; max-width: 560px; }
}
@media (max-width: 560px) {
  body.page-modul .km-butik { padding: 8px 9px 9px; }
  /* Smalle kvadrater: kortene traekkes ind, saa tallet i hjoernet gaar fri */
  body.page-modul .km-arkiv, body.page-modul .km-diagram { width: 74%; }
  body.page-modul .km-trin-nr { left: 12px; top: 12px; }
  body.page-modul .km-sum { flex-direction: column; gap: 6px; border-radius: 16px; }
  body.page-modul .km-sum-skille { display: none; }
}

/* ── Knapper: variation inden for sitets par ─────────────────────────────
   Moerk pille (som headerens Proev gratis) til den primaere handling,
   mint pille til den sekundaere. Samme radius, samme hoejde. */
body.page-modul .km-knap-moerk, body.page-modul .km-knap-lys {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px;
  border-radius: 999px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .95rem;
  text-decoration: none; white-space: nowrap; transition: transform .2s var(--km-ud), background .2s var(--km-ud);
}
body.page-modul .km-knap-moerk { background: var(--ink); color: #fff; }
body.page-modul .km-knap-moerk:hover { background: #2c2a26; transform: translateY(-1px); }
body.page-modul .km-knap-lys { background: var(--green-bg); color: var(--green-txt); }
body.page-modul .km-knap-lys:hover { background: #b3e5cf; transform: translateY(-1px); }
body.page-modul .km-knap-moerk:focus-visible, body.page-modul .km-knap-lys:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 3px; }
body.page-modul .km-s3 .km-knap-moerk { flex: none; height: 40px; padding: 0 16px; font-size: .84rem; }

/* ── Afslutning: centreret, ingen telefon ─────────────────────────────── */
body.page-modul .km-sek-slut { padding-bottom: var(--km-sek); }
body.page-modul .km-hoved-slut { margin-bottom: 0; }
body.page-modul .km-knapper { display: flex; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 36px); flex-wrap: wrap; }

/* ══ DETALJERUNDE (Garba-anatomi) ═══════════════════════════════════════
   Faelles kort-header: ikon i afrundet felt, titel + meta-linje, pille til
   hoejre. Status-piller med ikon. Kilde-chips med link-ikon. Cursor der
   klikker. Ingen graa kantlinjer - kun bloede skygger. */
body.page-modul .km-kort-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f2f0ec; }
body.page-modul .km-kort-ik { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--green-bg); color: var(--green-txt); display: grid; place-items: center; }
body.page-modul .km-kort-ik svg { width: 15px; height: 15px; }
body.page-modul .km-kort-ik-blaa { background: #dfe9f5; color: var(--blue-txt); }
body.page-modul .km-kort-hdtx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
body.page-modul .km-kort-hdtx b { display: block; font-size: .8rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-modul .km-kort-hdtx small { font-size: .58rem; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-modul .km-pille { margin-left: auto; flex: none; font-style: normal; font-size: .6rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
body.page-modul .km-pille-graa { background: #f1efeb; color: var(--t2); }
body.page-modul .km-pille-amber { background: var(--amber-bg); color: var(--amber-txt, #7a6400); }

/* Scene 1: raekker med underlinje, status med hak, bundlinje med to led */
body.page-modul .km-ark-rk { height: 40px; padding: 0 14px; }
body.page-modul .km-ark-tx small { font-size: .55rem; }
body.page-modul .km-ark-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 5px; }
body.page-modul .km-ark-st i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
body.page-modul .km-ark-st i svg { width: 8px; height: 8px; }
body.page-modul .km-ark-ft { height: 44px; gap: 9px; color: var(--t1); }
body.page-modul .km-ark-ft b { font-weight: 600; font-size: .7rem; white-space: nowrap; }
body.page-modul .km-ark-ft small { margin-left: auto; font-weight: 400; font-size: .58rem; color: var(--t3); }
body.page-modul .km-ark-ft .km-fr-tjek { width: 18px; height: 18px; }
body.page-modul .km-ark-ft .km-fr-tjek svg { width: 10px; height: 10px; }

/* Scene 2: koder under soejlerne, status der skifter, forklaring i bunden */
body.page-modul .km-dia-felt { padding: 36px 16px 26px; }
body.page-modul .km-bar::after { content: attr(data-l); position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: .46rem; font-weight: 500; color: var(--t3); letter-spacing: .02em; }
body.page-modul .km-bar { transform-origin: bottom; }
body.page-modul .km-dia-ft { display: flex; gap: 14px; padding: 0 16px 14px; font-size: .58rem; color: var(--t2); }
body.page-modul .km-dia-ft span { display: inline-flex; align-items: center; gap: 5px; }
body.page-modul .km-prik { width: 7px; height: 7px; border-radius: 2px; }
body.page-modul .km-prik-mint { background: var(--green-bg); } body.page-modul .km-prik-rosa { background: #f2b8c8; } body.page-modul .km-prik-groen { background: var(--green); }
body.page-modul .km-dia-st { position: relative; display: inline-grid; }
body.page-modul .km-dia-st > span { grid-area: 1 / 1; }
body.page-modul .km-dia-st .b { color: var(--red-txt); opacity: 0; }
body.page-modul .km-diagram .km-dia-st .a { animation: km-st-a 10s var(--km-ud) infinite both; }
body.page-modul .km-diagram .km-dia-st .b { animation: km-st-b 10s var(--km-ud) infinite both; }
body.page-modul .km-diagram .km-dia-st { animation: km-st-bg 10s var(--km-ud) infinite both; }
@keyframes km-st-a { 0%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes km-st-b { 0%, 44% { opacity: 0; transform: translateY(3px); } 48%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes km-st-bg { 0%, 44% { background: #f1efeb; } 48%, 100% { background: #fbe3ea; } }

/* Scene 3: aftalekort med knap, cursor der klikker, pakker efter klik */
body.page-modul .km-aftale { width: 168px; padding: 10px 10px 10px; align-items: stretch; gap: 8px; text-align: left; overflow: visible; }
body.page-modul .km-aftale-hd { display: flex; align-items: center; gap: 8px; }
body.page-modul .km-aftale-tx { display: flex; flex-direction: column; line-height: 1.15; }
body.page-modul .km-aftale-tx b { font-size: .74rem; font-weight: 600; color: var(--t1); }
body.page-modul .km-aftale-tx small { font-size: .56rem; color: var(--t3); white-space: nowrap; }
body.page-modul .km-aftale-knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .62rem; font-weight: 600;
  animation: km-knap-klik 10s var(--km-ud) infinite both;
}
body.page-modul .km-aftale-knap i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; }
body.page-modul .km-aftale-knap i svg { width: 8px; height: 8px; color: #fff; }
@keyframes km-knap-klik { 0%, 20% { transform: scale(1); background: var(--ink); } 22% { transform: scale(.95); background: #2c2a26; } 25%, 100% { transform: scale(1); background: var(--ink); } }
body.page-modul .km-cursor {
  position: absolute; width: 22px; height: 22px; left: 118px; top: 56px; z-index: 6; filter: drop-shadow(0 3px 5px rgba(17,24,20,.3));
  animation: km-cursor 10s var(--km-ud) infinite both;
}
@keyframes km-cursor {
  0%, 8%   { opacity: 0; transform: translate(70px, 70px); }
  10%      { opacity: 1; }
  19%      { transform: translate(0, 0); }
  22%      { transform: translate(0, 0) scale(.86); }
  25%, 30% { transform: translate(0, 0) scale(1); opacity: 1; }
  36%, 100%{ opacity: 0; transform: translate(26px, 34px); }
}
body.page-modul .km-vis :where(.km-aftale-knap, .km-cursor, .km-dia-st, .km-dia-st .a, .km-dia-st .b) { animation-play-state: paused; }
body.page-modul .km-trin-kort.visible .km-vis :where(.km-aftale-knap, .km-cursor, .km-dia-st, .km-dia-st .a, .km-dia-st .b) { animation-play-state: running; }
body.page-modul .km-sat b { top: 20px; }

/* Udbyttet: frist-raekker med ikon, underlinje og status der handles */
body.page-modul .km-fr { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-top: 1px solid #f2f0ec; }
body.page-modul .km-fr-tjek { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-bg); color: var(--amber-txt, #7a6400); }
body.page-modul .km-fr-tjek i { grid-area: 1 / 1; font-style: normal; font-weight: 700; font-size: .68rem; display: grid; place-items: center; width: 100%; height: 100%; }
body.page-modul .km-fr-tjek i.b { opacity: 0; color: #fff; }
body.page-modul .km-fr-tjek svg { width: 11px; height: 11px; }
body.page-modul .km-fr-tjek-ok { background: var(--green); color: #fff; }
body.page-modul .km-fr-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
body.page-modul .km-fr-tx b { font-size: .8rem; font-weight: 600; color: var(--t1); }
body.page-modul .km-fr-tx b i { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--t3); margin-left: 4px; }
body.page-modul .km-fr-tx small { font-size: .62rem; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-modul .km-fr-st { margin-left: auto; flex: none; display: inline-grid; font-size: .62rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-txt, #7a6400); }
body.page-modul .km-fr-st > span { grid-area: 1 / 1; white-space: nowrap; text-align: center; }
body.page-modul .km-fr-st .b { opacity: 0; }
body.page-modul .km-fr-st.km-fast { background: var(--green-bg); color: var(--green-txt); }
/* koreografi: 9 s, én frist ad gangen bliver handlet */
body.page-modul .km-s3 :where(.km-fr-tjek, .km-fr-tjek i, .km-fr-st, .km-fr-st span) { animation-play-state: paused; }
body.page-modul .km-s3.visible :where(.km-fr-tjek, .km-fr-tjek i, .km-fr-st, .km-fr-st span) { animation-play-state: running; }

/* Gevinstkortet: kilde-chips med link-ikon */
body.page-modul .km-kilder { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
body.page-modul .km-kilde { display: inline-flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--t2); background: #f4f2ee; border-radius: 999px; padding: 4px 9px 4px 7px; white-space: nowrap; }
body.page-modul .km-kilde svg { width: 11px; height: 11px; color: var(--t3); }

@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-cursor { display: none; }
  body.page-modul .km-fr-tjek { background: var(--green); } body.page-modul .km-fr-tjek .a { opacity: 0; } body.page-modul .km-fr-tjek .b { opacity: 1; }
  body.page-modul .km-fr-st { background: var(--green-bg); color: var(--green-txt); } body.page-modul .km-fr-st .a { opacity: 0; } body.page-modul .km-fr-st .b { opacity: 1; }
  body.page-modul .km-dia-st .a { opacity: 0; } body.page-modul .km-dia-st .b { opacity: 1; }
}
@media (max-width: 560px) {
  body.page-modul .km-fr-tx small, body.page-modul .km-kort-hdtx small, body.page-modul .km-ark-ft small { display: none; }
}

/* ══ RUNDE 6 ═════════════════════════════════════════════════════════════ */
/* Intro efter heroen: overskrift + tre linjer */
body.page-modul .km-sek-intro { padding-top: clamp(96px, 12vw, 176px); }
body.page-modul .km-hoved-intro { margin-bottom: 0; max-width: 720px; }
body.page-modul .km-hoved-intro .km-sub { max-width: 60ch; margin-top: var(--km-4); }

/* Trin: indholdet i fladerne er mindre og mere diskret */
body.page-modul .km-arkiv, body.page-modul .km-diagram { zoom: .8; }
body.page-modul .km-aftale { zoom: .84; width: 180px; }
body.page-modul .km-sat { transform: rotate(var(--a)) translateX(35cqw) rotate(calc(var(--a) * -1)); }
body.page-modul .km-sat i { left: -14px; top: -14px; width: 28px; height: 28px; }
body.page-modul .km-sat svg { width: 14px; height: 14px; }
body.page-modul .km-sat b { top: 18px; font-size: .54rem; }
body.page-modul .km-cursor { left: 128px; top: 60px; }

/* Scene 3: knappen skal ligne en knap - mint pille, ikon, centreret, samme hoejde */
body.page-modul .km-aftale-knap {
  height: 28px; padding: 0 12px 0 8px; border-radius: 999px;
  background: var(--green-bg); color: var(--green-txt); font-size: .64rem; font-weight: 600; letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(14,102,64,.08); justify-content: center;
}
body.page-modul .km-aftale-knap i { background: var(--green); width: 14px; height: 14px; }
body.page-modul .km-aftale-knap i svg { width: 8px; height: 8px; color: #fff; }
@keyframes km-knap-klik { 0%, 20% { transform: scale(1); background: var(--green-bg); } 22% { transform: scale(.95); background: #a9dfc4; } 25%, 100% { transform: scale(1); background: var(--green-bg); } }

/* Udbyttet: indholdet i det groenne felt er vaesentligt mindre */
body.page-modul .km-s3 { align-items: center; gap: 12px; }
body.page-modul .km-frister, body.page-modul .km-s3 .km-gevinst { zoom: .78; }
body.page-modul .km-s3 .km-gevinst { padding: 14px 16px; }

/* Kilde-chips med partnerlogoer */
body.page-modul .km-kilde { padding: 4px 9px 4px 6px; gap: 6px; background: #f4f2ee; }
body.page-modul .km-kilde img { display: block; height: 12px; width: auto; max-width: 62px; object-fit: contain; }

/* ══ RUNDE 7 ═════════════════════════════════════════════════════════════ */

/* Pillen i headeren taeller ned i takt med raekkerne, og bliver groen til sidst */
body.page-modul .km-fr-count { display: inline-grid; animation: km-count-bg 9s var(--km-ud) infinite both; }
body.page-modul .km-fr-count > span { grid-area: 1 / 1; opacity: 0; white-space: nowrap; text-align: center; }
body.page-modul .km-fr-count .c3 { animation: km-c3 9s var(--km-ud) infinite both; }
body.page-modul .km-fr-count .c2 { animation: km-c2 9s var(--km-ud) infinite both; }
body.page-modul .km-fr-count .c1 { animation: km-c1 9s var(--km-ud) infinite both; }
body.page-modul .km-fr-count .c0 { animation: km-c0 9s var(--km-ud) infinite both; }

/* Gevinstkortet popper op, naar alle tre er handlet, og forsvinder foer genstart */
body.page-modul .km-s3 .km-gevinst { animation: km-gev 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 :where(.km-fr-count, .km-fr-count span, .km-gevinst) { animation-play-state: paused; }
body.page-modul .km-s3.visible :where(.km-fr-count, .km-fr-count span, .km-gevinst) { animation-play-state: running; }

/* Almindelige ikoner: intet farvet felt bag */
body.page-modul .km-kort-ik, body.page-modul .km-kort-ik-blaa { width: 22px; height: 22px; background: transparent; color: var(--t1); border-radius: 0; }
body.page-modul .km-kort-ik svg { width: 20px; height: 20px; }

/* Arkivets raekkeikoner: dokument-specifikke, uden papirkort */
body.page-modul .km-papir {
  width: 20px; height: 20px; background: none; box-shadow: none; background-image: none; color: var(--t2);
  display: grid; place-items: center;
}
body.page-modul .km-papir svg { width: 18px; height: 18px; }
@keyframes km-papir {
  0%       { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(2.2); filter: blur(6px); }
  2%       { opacity: 1; }
  11%      { transform: translate(0, 0) rotate(0) scale(1); filter: blur(0); }
  90%      { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100%     { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* Sammenlign: boksen er lavere og en anelse smallere */
body.page-modul .km-diagram { width: 78%; aspect-ratio: 1.32; }
body.page-modul .km-dia-felt { padding: 30px 16px 24px; }

/* Rul ud: konfetti ved klik, alt toner ud, Sikret staar tilbage */
body.page-modul .km-konfetti { position: absolute; left: 50%; top: 56%; width: 0; height: 0; z-index: 7; pointer-events: none; }
body.page-modul .km-konf {
  position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: km-konf 10s cubic-bezier(.16,1,.3,1) infinite both; animation-delay: var(--d);
}
@keyframes km-konf {
  0%, 22%  { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  23%      { opacity: 1; }
  34%      { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  42%, 100%{ opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)) scale(.9); }
}
body.page-modul .km-sikret {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); z-index: 8; opacity: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 14px; border-radius: 999px; background: #fff;
  font-size: 1.05rem; font-weight: 600; color: var(--t1); box-shadow: 0 22px 50px rgba(14,58,122,.16);
  animation: km-sikret 10s var(--km-ud) infinite both;
}
body.page-modul .km-sikret i { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
body.page-modul .km-sikret i svg { width: 14px; height: 14px; }
@keyframes km-sikret {
  0%, 64%  { opacity: 0; transform: translate(-50%, -50%) scale(.8); filter: blur(6px); }
  70%      { opacity: 1; transform: translate(-50%, -50%) scale(1.04); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  73%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.96); filter: blur(4px); }
}
/* alt andet i scene 3 toner ud fra 60 % */
@keyframes km-sat {
  0%       { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  6%, 34%  { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  37%      { transform: scale(1.14); background: var(--green); box-shadow: 0 0 0 7px rgba(31,157,85,.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  41%, 60% { opacity: 1; transform: scale(1); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
  66%, 100%{ opacity: 0; transform: scale(.9); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
}
@keyframes km-sat-navn { 0%, 5% { opacity: 0; } 12%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes km-aftale {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  8%, 60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  66%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
body.page-modul .km-net3 { animation: km-net3 10s var(--km-ud) infinite both; }
@keyframes km-net3 { 0% { opacity: 0; } 6%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
body.page-modul .km-vis :where(.km-konf, .km-sikret, .km-net3) { animation-play-state: paused; }
body.page-modul .km-trin-kort.visible .km-vis :where(.km-konf, .km-sikret, .km-net3) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-konf { display: none; }
  body.page-modul .km-sikret { display: none; }
  body.page-modul .km-net3, body.page-modul .km-s3 .km-gevinst { opacity: 1; }
  body.page-modul .km-fr-count .c3, .km-fr-count .c2, .km-fr-count .c1 { opacity: 0; } body.page-modul .km-fr-count .c0 { opacity: 1; }
  body.page-modul .km-fr-count { background: var(--green-bg); color: var(--green-txt); }
}

/* ══ RUNDE 8 ═════════════════════════════════════════════════════════════ */
/* Saml: raekkerne kommer ind nedefra i fast kadence, status lige efter, bundlinjen sidst. Intet flyver. */
body.page-modul .km-papir { animation: none !important; opacity: 1; transform: none; filter: none; }
body.page-modul .km-ark-tx { animation: none !important; opacity: 1; transform: none; }
body.page-modul .km-ark-st { animation: none; opacity: 0; }
body.page-modul .km-ark-rk { opacity: 0; }
body.page-modul .km-ark-rk[style*="--i:0"] { animation: km-rk0 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:0"] .km-ark-st { animation: km-rkst0 10s var(--km-ud) infinite both; }
@keyframes km-rk0 { 0%, 6.0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 10.0%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst0 { 0%, 11.0% { opacity: 0; transform: translateY(4px); } 14.0%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-rk[style*="--i:1"] { animation: km-rk1 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:1"] .km-ark-st { animation: km-rkst1 10s var(--km-ud) infinite both; }
@keyframes km-rk1 { 0%, 10.5% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 14.5%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst1 { 0%, 15.5% { opacity: 0; transform: translateY(4px); } 18.5%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-rk[style*="--i:2"] { animation: km-rk2 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:2"] .km-ark-st { animation: km-rkst2 10s var(--km-ud) infinite both; }
@keyframes km-rk2 { 0%, 15.0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 19.0%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst2 { 0%, 20.0% { opacity: 0; transform: translateY(4px); } 23.0%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-rk[style*="--i:3"] { animation: km-rk3 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:3"] .km-ark-st { animation: km-rkst3 10s var(--km-ud) infinite both; }
@keyframes km-rk3 { 0%, 19.5% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 23.5%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst3 { 0%, 24.5% { opacity: 0; transform: translateY(4px); } 27.5%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-rk[style*="--i:4"] { animation: km-rk4 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:4"] .km-ark-st { animation: km-rkst4 10s var(--km-ud) infinite both; }
@keyframes km-rk4 { 0%, 24.0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 28.0%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst4 { 0%, 29.0% { opacity: 0; transform: translateY(4px); } 32.0%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-rk[style*="--i:5"] { animation: km-rk5 10s var(--km-ud) infinite both; }
body.page-modul .km-ark-rk[style*="--i:5"] .km-ark-st { animation: km-rkst5 10s var(--km-ud) infinite both; }
@keyframes km-rk5 { 0%, 28.5% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 32.5%, 90% { opacity: 1; transform: translateY(0); filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(0); filter: blur(3px); } }
@keyframes km-rkst5 { 0%, 33.5% { opacity: 0; transform: translateY(4px); } 36.5%, 100% { opacity: 1; transform: translateY(0); } }
body.page-modul .km-ark-ft { animation: km-ark-ft2 10s var(--km-ud) infinite both; }
@keyframes km-ark-ft2 { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 90% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; } }
@keyframes km-arkiv { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.97); filter: blur(4px); } 5%, 94% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.985); filter: blur(3px); } }
body.page-modul .km-vis :where(.km-ark-rk) { animation-play-state: paused; }
body.page-modul .km-trin-kort.visible .km-vis :where(.km-ark-rk) { animation-play-state: running; }

/* Rul ud: alt toner helt ud (56-63 %), og foerst derefter kommer slutbeskeden alene (68 %) */
@keyframes km-sat {
  0%       { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  6%, 34%  { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  37%      { transform: scale(1.14); background: var(--green); box-shadow: 0 0 0 7px rgba(31,157,85,.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  41%, 56% { opacity: 1; transform: scale(1); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
  62%, 100%{ opacity: 0; transform: scale(.92); background: var(--green); box-shadow: 0 6px 14px rgba(31,157,85,.22); }
}
@keyframes km-sat-navn { 0%, 5% { opacity: 0; } 12%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes km-aftale {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  8%, 56%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  62%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-net3 { 0% { opacity: 0; } 6%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes km-cursor {
  0%, 8%   { opacity: 0; transform: translate(70px, 70px); }
  10%      { opacity: 1; }
  19%      { transform: translate(0, 0); }
  22%      { transform: translate(0, 0) scale(.86); }
  25%, 28% { transform: translate(0, 0) scale(1); opacity: 1; }
  34%, 100%{ opacity: 0; transform: translate(26px, 34px); }
}
body.page-modul .km-slut { flex-direction: column; gap: 10px; padding: 18px 26px 20px; border-radius: 18px; text-align: center; max-width: 78%; }
body.page-modul .km-slut i { width: 34px; height: 34px; }
body.page-modul .km-slut i svg { width: 18px; height: 18px; }
body.page-modul .km-slut b { font-size: .92rem; font-weight: 600; color: var(--t1); line-height: 1.25; }
@keyframes km-sikret {
  0%, 67%  { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(6px); }
  73%      { opacity: 1; transform: translate(-50%, -50%) scale(1.02); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  76%, 91% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  97%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.97); filter: blur(4px); }
}

/* Udbyttet: eget ikon pr. raekke, groent hak naar varslet; kortet toner blidt ud og ind ved genstart */
body.page-modul .km-fr-tjek { background: transparent; color: var(--t2); }
body.page-modul .km-fr-tjek i.a svg { width: 17px; height: 17px; }
body.page-modul .km-fr-tjek i.b { color: #fff; }
body.page-modul .km-fr-tjek-ok { background: var(--green); color: #fff; }
body.page-modul .km-frister { animation: km-frister 9s var(--km-ud) infinite both; }
@keyframes km-frister { 0% { opacity: 0; transform: translateY(8px); } 4%, 91% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(0); } }
/* gevinstkortet: ind nedefra naar alle er varslet, ud til siden foer genstart */
body.page-modul .km-s3 :where(.km-frister) { animation-play-state: paused; }
body.page-modul .km-s3.visible :where(.km-frister) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-ark-rk, body.page-modul .km-ark-st, body.page-modul .km-frister { opacity: 1; transform: none; filter: none; }
  body.page-modul .km-fr:not(.gjort) .km-fr-tjek { background: var(--green); }
}

/* ══ RUNDE 9 ═════════════════════════════════════════════════════════════ */
body.page-modul .km-s3 .km-fr[style*="--i:0"] .km-fr-tjek { animation: km-fr-ik0 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:0"] .a { animation: km-fr-a0 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:0"] .b { animation: km-fr-b0 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:0"] .km-fr-st { animation: km-fr-stbg0 9s var(--km-ud) infinite both; }
@keyframes km-fr-ik0 { 0%, 10% { background: transparent; transform: scale(1); } 12% { background: var(--green-bg); transform: scale(1.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 14%, 100% { background: var(--green-bg); transform: scale(1); } }
@keyframes km-fr-a0 { 0%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes km-fr-b0 { 0%, 10% { opacity: 0; transform: translateY(3px); } 12%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes km-fr-stbg0 { 0%, 10% { background: var(--amber-bg); color: var(--amber-txt); } 12%, 100% { background: var(--green-bg); color: var(--green-txt); } }
body.page-modul .km-s3 .km-fr[style*="--i:1"] .km-fr-tjek { animation: km-fr-ik1 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:1"] .a { animation: km-fr-a1 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:1"] .b { animation: km-fr-b1 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:1"] .km-fr-st { animation: km-fr-stbg1 9s var(--km-ud) infinite both; }
@keyframes km-fr-ik1 { 0%, 22% { background: transparent; transform: scale(1); } 24% { background: var(--green-bg); transform: scale(1.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 26%, 100% { background: var(--green-bg); transform: scale(1); } }
@keyframes km-fr-a1 { 0%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes km-fr-b1 { 0%, 22% { opacity: 0; transform: translateY(3px); } 24%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes km-fr-stbg1 { 0%, 22% { background: var(--amber-bg); color: var(--amber-txt); } 24%, 100% { background: var(--green-bg); color: var(--green-txt); } }
body.page-modul .km-s3 .km-fr[style*="--i:2"] .km-fr-tjek { animation: km-fr-ik2 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:2"] .a { animation: km-fr-a2 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:2"] .b { animation: km-fr-b2 9s var(--km-ud) infinite both; }
body.page-modul .km-s3 .km-fr[style*="--i:2"] .km-fr-st { animation: km-fr-stbg2 9s var(--km-ud) infinite both; }
@keyframes km-fr-ik2 { 0%, 34% { background: transparent; transform: scale(1); } 36% { background: var(--green-bg); transform: scale(1.16); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 38%, 100% { background: var(--green-bg); transform: scale(1); } }
@keyframes km-fr-a2 { 0%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes km-fr-b2 { 0%, 34% { opacity: 0; transform: translateY(3px); } 36%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes km-fr-stbg2 { 0%, 34% { background: var(--amber-bg); color: var(--amber-txt); } 36%, 100% { background: var(--green-bg); color: var(--green-txt); } }
@keyframes km-c3 { 0%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes km-c2 { 0%, 10% { opacity: 0; } 12%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes km-c1 { 0%, 22% { opacity: 0; } 24%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes km-c0 { 0%, 34% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes km-count-bg { 0%, 34% { background: var(--amber-bg); color: var(--amber-txt); } 36%, 100% { background: var(--green-bg); color: var(--green-txt); } }
@keyframes km-gev {
  0%, 40%  { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  47%, 88% { opacity: 1; transform: translateY(0) translateX(0); filter: blur(0); }
  95%, 100%{ opacity: 0; transform: translateY(0) translateX(48px); filter: blur(3px); }
}
/* hele kortet toner ud sidst i cyklus, saa nulstillingen af raekkerne sker usynligt */
@keyframes km-frister { 0% { opacity: 0; transform: translateY(8px); } 4%, 90% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(0); } }

/* ── Daempede flueben overalt: mint-cirkel med moerkegroent hak (som Laest/Varslet-pillerne) ── */
body.page-modul .km-fr-tjek i.b { color: var(--green-txt); }
body.page-modul .km-fr-tjek-ok { background: var(--green-bg); color: var(--green-txt); }
body.page-modul .km-ark-st i { background: var(--green-txt); }
body.page-modul .km-slut i { background: var(--green-bg); color: var(--green-txt); }
body.page-modul .km-sum-prik { background: var(--green-txt); box-shadow: 0 0 0 4px rgba(14,102,64,.12); }
body.page-modul .km-bar-bedst { background: #8fd3b1; }
@keyframes km-bar-bedst {
  0%, 4%   { transform: scaleY(.04); background: var(--green-bg); }
  20%, 40% { transform: scaleY(1); background: var(--green-bg); }
  46%, 88% { transform: scaleY(1); background: #8fd3b1; }
  100%     { transform: scaleY(.04); background: var(--green-bg); }
}
body.page-modul .km-prik-groen { background: #8fd3b1; }
body.page-modul .km-sat svg { stroke: var(--green-txt); }
@keyframes km-sat {
  0%       { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  6%, 30%  { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  33%      { transform: scale(1.14); background: var(--green-bg); box-shadow: 0 0 0 7px rgba(31,157,85,.14); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  36%, 90% { opacity: 1; transform: scale(1); background: var(--green-bg); box-shadow: 0 6px 14px rgba(14,102,64,.14); }
  96%, 100%{ opacity: 0; transform: scale(.94); background: var(--green-bg); box-shadow: 0 6px 14px rgba(14,102,64,.14); }
}
@keyframes km-hak { 0%, 32% { stroke-dashoffset: 1; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes km-sat-navn { 0%, 5% { opacity: 0; } 12%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes km-net3 { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes km-pakke {
  0%, 22%   { stroke-dashoffset: 1.14; opacity: 0; }
  23%       { opacity: 1; }
  32%       { stroke-dashoffset: -.02; opacity: 1; }
  33%, 100% { stroke-dashoffset: -.02; opacity: 0; }
}
/* Rul ud: efter klik og udrulning viger aftalekortet, og Ajour-boksen kommer med konfetti samtidig, som det sidste */
@keyframes km-aftale {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  8%, 38%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  43%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-sikret {
  0%, 43%  { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(6px); }
  48%      { opacity: 1; transform: translate(-50%, -50%) scale(1.03); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  51%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  96%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(.97); filter: blur(4px); }
}
@keyframes km-konf {
  0%, 44%  { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  45%      { opacity: 1; }
  57%      { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  66%, 100%{ opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 50px)) rotate(var(--r)) scale(.9); }
}
body.page-modul .km-konfetti { top: 50%; }
body.page-modul .km-slut { gap: 4px; padding: 16px 30px 18px; }
body.page-modul .km-slut b { font-size: 1.15rem; letter-spacing: -.01em; }
body.page-modul .km-slut small { font-size: .66rem; color: var(--t2); }
body.page-modul .km-slut i { margin-bottom: 4px; }


/* ── 1 · Fotoet i stedet for by-diagrammet ────────────────────────────────
   Maalt paa referencen med den gule figur: ca. 1,39:1 og klart under fuld
   bredde. Diagrammet var 1000/480 i fuld kolonnebredde med min-height 420. */
body.page-modul .km-foto {
  margin: 0 auto;
  width: 100%;
  /* Maalt paa referencen: 2,0:1 og ca. 75 % af viewportens bredde. */
  max-width: 1150px;
  /* Samme hoejde som forsidens Amber-foto - de to skal foelges ad. */
  height: 530px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--km-flade);
}
body.page-modul .km-foto-billede {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 7 · Overskriften som primaer vejviser ────────────────────────────────
   Ingen CTA-knap under split-sektionerne; overskriften er selv klikfladen.
   Understregningen vokser fra venstre ved hover. Ingen pil endnu. */
body.page-modul .km-h-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(var(--mint-ink), var(--mint-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .42s var(--km-ud), color .2s ease;
}
body.page-modul .km-h-link:hover,
body.page-modul .km-h-link:focus-visible { background-size: 100% 2px; color: var(--mint-ink); }
body.page-modul .km-h-link:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 6px; }
body.page-modul .km-h-link .km-h2 { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-h-link { transition: none; }
}


/* Underteksten: ét afsnit paa 3-4 linjer i stedet for tre korte punkter,
   saa sektionen balancerer og teksten gaar laengere ud i bredden. */
body.page-modul .km-brod {
  margin: var(--km-3) 0 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--prose);
  max-width: 40rem;
  text-wrap: pretty;
}


/* Referencens 2:1 gaelder desktop; under 900 px ville den give en for lav
   stribe til et foto af mennesker. Samme graense som paa forsiden. */
@media (max-width: 900px) {
  body.page-modul .km-foto { aspect-ratio: auto; height: 340px; }
}


/* ── Afslutningen lige foer footeren ─────────────────────────────────────
   Ingen sort knap saa taet paa footeren, og ingen "Se priser". Kun teksten
   og pilen; pilen glider frem ved hover. */
body.page-modul .km-tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 560;
  font-size: 1.05rem;
  color: var(--t1);
  text-decoration: none;
  margin-top: var(--km-4);
}
body.page-modul .km-tekstlink span {
  transition: transform .28s var(--km-ud);
}
body.page-modul .km-tekstlink:hover { color: var(--mint-ink); }
body.page-modul .km-tekstlink:hover span { transform: translateX(5px); }
body.page-modul .km-tekstlink:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 5px; border-radius: 4px; }

/* ══ RUL UD · rettet raekkefoelge ════════════════════════════════════════
   Filen indeholder flere dublerede @keyframes for de samme navne; den
   sidste vinder. Den gaeldende tidslinje var ude af trit:

     musen forsvandt ved 34 %, men satellitterne blev foerst groenne ved
     33 % og "Ajour" kom ved 48 % - altsaa laenge efter at markoeren var
     vaek. "Faelles aftale" laa endnu synlig til 43 %, 21 point EFTER
     klikket. Og konfettien kom ved 45 %, altsaa FOER "Ajour" ved 48 %.

   Ny raekkefoelge, samme design - kun timing:
     2-10 %   de otte cirkler popper frem
     15-21 %  aftalekortet kommer op
     20-26 %  markoeren glider ind
     27 %     der trykkes
     27-29 %  aftalekortet forsvinder MED DET SAMME
     27-36 %  pakkerne loeber ud
     28-38 %  cirklerne bliver groenne, forskudt
     29-33 %  markoeren forlader foerst NU
     42-47 %  "Ajour" popper op, naar alle er groenne
     47 %     konfettien kommer TIL SIDST                                */

@keyframes km-aftale {
  0%, 13%   { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  21%, 26%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  29%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-cursor {
  0%, 18%   { opacity: 0; transform: translate(70px, 70px); }
  20%       { opacity: 1; }
  25%       { transform: translate(0, 0); }
  27%       { transform: translate(0, 0) scale(.86); }
  29%       { transform: translate(0, 0) scale(1); opacity: 1; }
  33%, 100% { opacity: 0; transform: translate(26px, 34px); }
}
@keyframes km-knap-klik {
  0%, 26%   { transform: scale(1); background: var(--green-bg); }
  27.5%     { transform: scale(.95); background: #a9dfc4; }
  29%, 100% { transform: scale(1); background: var(--green-bg); }
}
@keyframes km-pakke {
  0%, 26%   { stroke-dashoffset: 1.14; opacity: 0; }
  27%       { opacity: 1; }
  36%       { stroke-dashoffset: -.02; opacity: 1; }
  37%, 100% { stroke-dashoffset: -.02; opacity: 0; }
}
@keyframes km-sat {
  0%        { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  2%, 27%   { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  30%       { transform: scale(1.14); background: var(--green-bg); box-shadow: 0 0 0 7px rgba(31,157,85,.14); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  34%, 88%  { transform: scale(1); background: var(--green-bg); box-shadow: 0 4px 12px rgba(31,157,85,.18); opacity: 1; }
  100%      { opacity: 0; transform: scale(.7); background: var(--green-bg); box-shadow: none; }
}
@keyframes km-hak { 0%, 28% { stroke-dashoffset: 1; } 34%, 100% { stroke-dashoffset: 0; } }
@keyframes km-sat-navn { 0%, 2% { opacity: 0; } 8%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes km-sikret {
  0%, 42%   { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(6px); }
  46%       { opacity: 1; transform: translate(-50%, -50%) scale(1.03); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  49%, 90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-konf {
  0%, 47%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  48%       { opacity: 1; }
  60%       { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  69%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 50px)) rotate(var(--r)) scale(.9); }
}

/* ══ RUL UD · anden rettelse ═════════════════════════════════════════════
   Foerste rettelse fik "Ajour" og konfettien i rigtig raekkefoelge, men
   selve handlingen var stadig forkert: fluebenene stod tomme, feltet kom,
   klikket kunne ikke ses, og saa var alt pludselig udfyldt.

   Raekkefoelgen skal foelge funktionen:
     1  cirklerne kommer
     2  de blaa pile loeber ud
     3  feltet kommer op
     4  markoeren klikker - SYNLIGT
     5  fluebenene kommer, ét ad gangen, hele vejen rundt
     6  foerst naar alle har flueben: "Ajour"
     7  og til allersidst konfettien

   De fire foerste har --i-forskydning (0-11 % over otte satellitter);
   de tre sidste er absolutte, saa de altid ligger efter det hele.       */

@keyframes km-sat {
  0%        { opacity: 0; transform: scale(.6); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  2%, 40%   { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 6px 14px rgba(14,58,122,.14); }
  43%       { transform: scale(1.16); background: var(--green-bg); box-shadow: 0 0 0 7px rgba(31,157,85,.14); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  47%, 88%  { transform: scale(1); background: var(--green-bg); box-shadow: 0 4px 12px rgba(31,157,85,.18); opacity: 1; }
  100%      { opacity: 0; transform: scale(.7); background: var(--green-bg); box-shadow: none; }
}
/* Fluebenet tegnes foerst EFTER klikket. */
@keyframes km-hak { 0%, 41% { stroke-dashoffset: 1; } 47%, 100% { stroke-dashoffset: 0; } }
@keyframes km-sat-navn { 0%, 2% { opacity: 0; } 8%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* De blaa pile loeber ud FOER feltet kommer. */
@keyframes km-pakke {
  0%, 6%    { stroke-dashoffset: 1.14; opacity: 0; }
  7%        { opacity: 1; }
  16%       { stroke-dashoffset: -.02; opacity: 1; }
  17%, 100% { stroke-dashoffset: -.02; opacity: 0; }
}

@keyframes km-aftale {
  0%, 27%   { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); }
  33%, 41%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  45%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
/* Klikket skal kunne SES: markoeren dykker tydeligt, og knappen giver efter. */
@keyframes km-cursor {
  0%, 30%   { opacity: 0; transform: translate(70px, 70px); }
  32%       { opacity: 1; }
  38%       { transform: translate(0, 0); }
  40%       { transform: translate(0, 0) scale(.78); }
  42%       { transform: translate(0, 0) scale(1); }
  44%, 47%  { transform: translate(0, 0) scale(1); opacity: 1; }
  52%, 100% { opacity: 0; transform: translate(26px, 34px); }
}
@keyframes km-knap-klik {
  0%, 39%   { transform: scale(1); background: var(--green-bg); }
  40.5%     { transform: scale(.92); background: #93d6b4; }
  43%, 100% { transform: scale(1); background: var(--green-bg); }
}

/* Foerst naar den sidste satellit har faaet sit flueben (47 % + 11 %
   forskydning = 58 %) maa "Ajour" komme - og konfettien efter den. */
@keyframes km-sikret {
  0%, 60%   { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(6px); }
  64%       { opacity: 1; transform: translate(-50%, -50%) scale(1.03); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  67%, 90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-konf {
  0%, 66%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  67%       { opacity: 1; }
  78%       { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  87%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 50px)) rotate(var(--r)) scale(.9); }
}

/* ── Problemet: ét dokument ad gangen ────────────────────────────────────
   Foer laa de fire spredt ud som en bunke. Nu ligger de i samme position og
   vises ét ad gangen i rotation, saa man naar at laese hvert enkelt.
   Fire dokumenter paa 9 s giver 2,25 s hver, altsaa 25 % af cyklussen. */
body.page-modul .km-s1 .km-vifte { display: grid; place-items: center; }
body.page-modul .km-s1 .km-dok {
  grid-area: 1 / 1;
  position: relative;
  transform: rotate(var(--r));
  animation: km-rotdok 9s var(--km-ud) infinite both;
  animation-delay: calc(var(--i) * 2.25s);
}
/* Stakken bagved, saa det stadig ligner flere dokumenter. */
body.page-modul .km-s1 .km-vifte::before,
body.page-modul .km-s1 .km-vifte::after {
  content: ""; grid-area: 1 / 1;
  width: 176px; height: 236px;        /* samme maal som .km-dok */
  border-radius: 0; background: #fff; /* kontrakterne er skarpe i hjoernerne */
  box-shadow: 0 8px 20px rgba(26, 25, 22, .09);
}
body.page-modul .km-s1 .km-vifte::before { transform: rotate(-5deg) translateY(6px); opacity: .55; }
body.page-modul .km-s1 .km-vifte::after  { transform: rotate(4deg) translateY(3px);  opacity: .75; }

/* Hvert dokument ejer 25 % af cyklussen. Foer var det synligt 4-21 % og
   naeste startede foerst ved 25 %, saa scenen stod TOM i 0,72 s fire gange
   pr. loop - det var forstyrrelsen. Nu falder det udgaaende fra 25 % til
   29 %, mens det naeste stiger i praecis samme vindue: en krydsfade uden
   tomme billeder. 100 % er identisk med 0 %, saa wrappet er en no-op. */
@keyframes km-rotdok {
  0%        { opacity: 0; transform: rotate(var(--r)) translateY(10px) scale(.97); }
  4%, 25%   { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(1); }
  29%       { opacity: 0; transform: rotate(var(--r)) translateY(-10px) scale(.98); }
  34%, 100% { opacity: 0; transform: rotate(var(--r)) translateY(10px) scale(.97); }
}

/* ── Rul ud: Ajour og konfetti foerst naar ALLE er groenne ───────────────
   Sidste satellit faar sit flueben ved 47 % + 11 % forskydning = 58 %.
   Ajour laa paa 60 %, altsaa kun to point efter, og konfettien kom
   yderligere seks point senere. Nu starter begge paa 63 %, saa de kommer
   samtidig og foerst naar hele ringen staar groen. */
@keyframes km-sikret {
  0%, 62%   { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(6px); }
  66%       { opacity: 1; transform: translate(-50%, -50%) scale(1.04); filter: blur(0); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  69%, 90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); }
}
@keyframes km-konf {
  0%, 62%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  63%       { opacity: 1; }
  76%       { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  86%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 50px)) rotate(var(--r)) scale(.9); }
}


/* ═══════════════════════════════════════════════════════════════════════
   MODULSIDERNE
   Kontrakter og dokumenter, Oekonomi og bogfoering, Loen og medarbejdere
   bruger samme strukturlag som kaedesiden. Herunder staar kun de to
   sektionstyper, kaedesiden ikke selv har: overbliksgitteret og de tre
   fremhaevede bokse. Alt andet arves ovenfra.
   Kortet er samme kort som paa jura- og hjaelpecentersiden: graa flade,
   7 px, hvid 34 px ikonbrik med 18 px ikon. Én kortfamilie paa hele sitet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sektion 3 · Overblik: seks korte omraader ───────────────────────── */
body.page-modul .km-omraader {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1150px;
  margin: 0 auto;
}
body.page-modul .km-omr {
  padding: 22px 22px 24px;
  border-radius: 7px;
  background: var(--fg-kort, #f9f9f9);
}
body.page-modul .km-omr-ik {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #fff;
  color: var(--t1);
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 20, .06);
}
body.page-modul .km-omr-ik svg { width: 18px; height: 18px; }
body.page-modul .km-omr h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--t1);
  margin: 0 0 6px;
}
body.page-modul .km-omr p {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--t2);
  margin: 0;
}

/* ── Sektion 6 · Tre fremhaevede bokse ───────────────────────────────────
   Samme kortgeometri, men paa mintfladen, saa den ikke laeses som en
   gentagelse af overbliksgitteret laengere oppe paa siden. */
body.page-modul .km-bokse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  max-width: 1150px;
  margin: 0 auto;
}
body.page-modul .km-boks {
  padding: clamp(26px, 2.4vw, 34px);
  border-radius: 7px;
  background: var(--km-flade);
}
body.page-modul .km-boks-ik {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #fff;
  color: var(--t1);
  margin-bottom: var(--km-3);
  box-shadow: 0 1px 3px rgba(17, 24, 20, .06);
}
body.page-modul .km-boks-ik svg { width: 18px; height: 18px; }
body.page-modul .km-boks h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--t1);
  margin: 0 0 8px;
}
body.page-modul .km-boks p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--t2);
  margin: 0;
}

/* ── Foto i scenepladsen (sektion 2 og 5) ────────────────────────────────
   Scenen beholder sin geometri fra kaedesiden: 1,32:1 og 7 px. Kun
   mintfladen og luften viger, saa billedet fylder rammen ud. */
body.page-modul .km-scene-foto { padding: 0; background: #f2f0ec; }
body.page-modul .km-scene-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Pladsholder i trinkortene ────────────────────────────────────────────
   Bruges nu kun paa loen-og-medarbejdere.html, som endnu ikke har faaet
   scener. Oekonomi og Kontrakter har deres egne under TRINSCENERNE nedenfor.
   Reglerne skal derfor blive staaende. */
body.page-modul .km-plads { display: grid; place-items: center; width: 100%; height: 100%; }
body.page-modul .km-plads-kort {
  display: grid;
  gap: 12px;
  place-items: center;
  width: 66%;
  min-width: 190px;
  background: #fff;
  border-radius: 7px;
  padding: clamp(24px, 3.4cqi, 34px) clamp(20px, 3cqi, 30px);
  box-shadow: 0 2px 10px rgba(17, 24, 20, .06);
}
body.page-modul .km-plads-ik {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  background: var(--km-flade);
  color: var(--t1);
}
body.page-modul .km-plads-ik svg { width: 22px; height: 22px; }
body.page-modul .km-plads-tx {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--t1);
  text-align: center;
}
body.page-modul .km-plads-sub {
  margin-top: -6px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--t3);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 900px) {
  body.page-modul .km-omraader { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-modul .km-bokse { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 560px) {
  body.page-modul .km-omraader { grid-template-columns: 1fr; max-width: 560px; }
}

/* ══ TRINSCENERNE ═══════════════════════════════════════════════════════
   Seks scener, én pr. trinkort paa de to modulsider. De deler kun grundlag
   og token-sprog - hver scene har sin egen komposition og sin egen
   bevaegelse, saa Saml, Forstaa og Handl kan skelnes uden at laese teksten.

   MAAL I cqw. .km-vis har container-type: inline-size, saa 1cqw = 1 % af
   fladens bredde. Hele scenen skalerer derfor med kortet i stedet for at
   have et desktop-layout, der falder fra hinanden ved 309 px.

   ÉN DELT TIDSLINJE PR. SCENE. Forskydning ligger i keyframe-PROCENTER,
   aldrig i animation-delay: en delay paa en uendelig animation forskyder
   elementets cyklus permanent i forhold til scenens, saa noget staar
   tilbage naar resten er tonet ud. 100 % er identisk med 0 %.

   .inde kommer fra .reveal-scroll-observeren i js/main.js, saa sekvenserne
   kun koerer mens kortet er i billedet. forside-garba.css er ikke indlaest
   paa modulsiderne, saa klassen har ingen anden virkning end den herunder. */
body.page-modul .km-vis {
  --sc-ud: cubic-bezier(.22, 1, .36, 1);
  --sc-blaek: #1d1d1b;
  --sc-tone: #77756f;
  --sc-flade: #fff;
  --sc-skygge: 0 1px 2px rgba(17,24,20,.05), 0 4px 12px rgba(17,24,20,.07);
}
body.page-modul .kms-sc {
  position: absolute; inset: 0;
  /* Trinnummeret er 30 px i fast maal og ligger 18 px inde. Toppadding maa
     derfor have et px-gulv - i cqw alene ville scenen kollidere med det,
     naar kortet er 309 px bredt. */
  padding: max(54px, 12.5cqw) 6.4cqw 6cqw;
  display: flex; flex-direction: column;
  font-family: 'DM Sans', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scene 1 · HENT IND ────────────────────────────────────────────────
   Tre kilder foroven taender ét ad gangen, og hver taending trykker sin
   post ind i listen nedenfor - skiftevis fra venstre og hoejre, saa
   bevaegelsen ikke bliver den samme tre gange. */
body.page-modul .kms-sc--hent { --loop: 14s; }
body.page-modul .kms-sc-kilder {
  display: flex; gap: 3.4cqw; justify-content: center;
  margin-bottom: 5.6cqw;
}
body.page-modul .kms-kilde {
  width: 11cqw; height: 11cqw;
  border-radius: 3cqw;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(17,24,20,.09);
  opacity: .4;
}
body.page-modul .kms-kilde img { width: 5.8cqw; height: 5.8cqw; object-fit: contain; }
body.page-modul .kms-kilde svg { width: 5.6cqw; height: 5.6cqw; color: #4a5a52; }
body.page-modul .kms-sc-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2.4cqw;
}
body.page-modul .kms-post {
  display: grid; grid-template-columns: 9.5cqw minmax(0,1fr) auto;
  align-items: center; gap: 2.8cqw;
  background: var(--sc-flade);
  border-radius: 2.6cqw;
  padding: 2.4cqw 2.8cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kms-post-ik {
  width: 9.5cqw; height: 9.5cqw;
  border-radius: 2.2cqw; background: #f3f5f4;
  display: grid; place-items: center;
}
body.page-modul .kms-post-ik img { width: 5.4cqw; height: 5.4cqw; object-fit: contain; }
body.page-modul .kms-post-ik--scan { color: #5b6b62; }
body.page-modul .kms-post-ik--scan svg { width: 5.2cqw; height: 5.2cqw; }
body.page-modul .kms-post-tx { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
body.page-modul .kms-post-tx strong {
  font-size: 3.1cqw; font-weight: 600; color: var(--sc-blaek);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-post-tx em {
  font-style: normal; font-size: 2.5cqw; color: var(--sc-tone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-tag {
  font-size: 2.2cqw; font-weight: 600; line-height: 1;
  padding: 1cqw 1.8cqw; border-radius: 99px;
  background: #eef1ef; color: #5b6b62; white-space: nowrap;
}
body.page-modul .kms-tag--pdf { background: #fdeceb; color: #b23a2f; }
body.page-modul .kms-sc-fod {
  margin: auto 0 0;
  display: flex; align-items: center; gap: 2.2cqw;
  font-size: 2.7cqw; color: #4a5a52;
  opacity: 0;
}
body.page-modul .kms-sc-fod strong { font-weight: 600; color: var(--sc-blaek); }
body.page-modul .kms-fod-tjek {
  width: 5cqw; height: 5cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kms-fod-tjek svg { width: 2.6cqw; height: 2.6cqw; }

body.page-modul .km-vis.inde .kms-kilde--1 { animation: kms-kilde1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-kilde--2 { animation: kms-kilde2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-kilde--3 { animation: kms-kilde3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-kilde1 { 0%,6%  { opacity:.4; transform:none } 11%,84% { opacity:1; transform:translateY(-1cqw) } 89%,100% { opacity:.4; transform:none } }
@keyframes kms-kilde2 { 0%,16% { opacity:.4; transform:none } 21%,84% { opacity:1; transform:translateY(-1cqw) } 89%,100% { opacity:.4; transform:none } }
@keyframes kms-kilde3 { 0%,26% { opacity:.4; transform:none } 31%,84% { opacity:1; transform:translateY(-1cqw) } 89%,100% { opacity:.4; transform:none } }

body.page-modul .km-vis.inde .kms-post--1 { animation: kms-post1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-post--2 { animation: kms-post2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-post--3 { animation: kms-post3 var(--loop) var(--sc-ud) infinite both; }
/* Skiftevis fra venstre og hoejre - samme retning tre gange ville laese som
   én liste der bare fader ind. */
@keyframes kms-post1 { 0%,8%  { opacity:0; transform:translateX(-14cqw) } 14%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translateX(-14cqw) } }
@keyframes kms-post2 { 0%,18% { opacity:0; transform:translateX(14cqw) }  24%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translateX(14cqw) } }
@keyframes kms-post3 { 0%,28% { opacity:0; transform:translateX(-14cqw) } 34%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translateX(-14cqw) } }
body.page-modul .km-vis.inde .kms-sc-fod { animation: kms-fod var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-fod { 0%,38% { opacity:0; transform:translateY(2cqw) } 44%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translateY(2cqw) } }

/* ── Scene 2 · KOBL SAMMEN ─────────────────────────────────────────────
   Betalingen foroven, fakturaen forneden, og imellem dem en bro der
   bygges: tre kriterier krydses af ét ad gangen, foerst derefter lukker
   linjerne sig og status skifter. Bevaegelsen er lodret og forbindende,
   ikke indflyvende som i scene 1. */
body.page-modul .kms-sc--kobl { --loop: 15s; justify-content: space-between; }
body.page-modul .kms-kort {
  background: var(--sc-flade);
  border-radius: 2.8cqw;
  padding: 2.6cqw 3cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kms-kort header { display: flex; align-items: center; gap: 2.2cqw; }
body.page-modul .kms-kort-ik {
  width: 7.6cqw; height: 7.6cqw; flex: none;
  border-radius: 1.9cqw; background: #f3f5f4;
  display: grid; place-items: center;
}
body.page-modul .kms-kort-ik img { width: 4.6cqw; height: 4.6cqw; object-fit: contain; }
body.page-modul .kms-kort-ik--pdf { background: #fdeceb; color: #b23a2f; }
body.page-modul .kms-kort-ik--pdf svg { width: 4.4cqw; height: 4.4cqw; }
body.page-modul .kms-kort-navn {
  font-size: 2.9cqw; font-weight: 600; color: var(--sc-blaek);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-kort-dato { margin-left: auto; font-size: 2.4cqw; color: var(--sc-tone); white-space: nowrap; }
body.page-modul .kms-kort-belob {
  margin: 1.6cqw 0 .3cqw;
  font-size: 4cqw; font-weight: 700; letter-spacing: -.02em; color: var(--sc-blaek);
  font-variant-numeric: tabular-nums;
}
body.page-modul .kms-kort-sub { margin: 0; font-size: 2.4cqw; color: var(--sc-tone); }

body.page-modul .kms-bro { position: relative; display: grid; place-items: center; padding: 1cqw 0; }
body.page-modul .kms-bro-linje {
  display: block; width: 0; height: 2.6cqw;
  border-left: .55cqw dashed #b9c5bf;
  transform-origin: top center;
  transform: scaleY(0);
}
body.page-modul .kms-bro-linje--ned { transform-origin: bottom center; }
body.page-modul .kms-krit {
  list-style: none; margin: 1cqw 0; padding: 0;
  display: flex; flex-direction: column; gap: 1cqw;
}
body.page-modul .kms-krit-r {
  display: flex; align-items: center; gap: 1.8cqw;
  font-size: 2.5cqw; color: #4a5a52;
  opacity: 0;
}
body.page-modul .kms-krit-tjek {
  width: 4cqw; height: 4cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kms-krit-tjek svg { width: 2.2cqw; height: 2.2cqw; }
body.page-modul .kms-status {
  margin-top: 1cqw;
  font-size: 2.4cqw; font-weight: 600; line-height: 1;
  padding: 1.3cqw 2.6cqw; border-radius: 99px;
  background: #c8eedd; color: #0e6640;
  opacity: 0;
}

body.page-modul .km-vis.inde .kms-kort--betaling { animation: kms-kortind var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-kort--faktura  { animation: kms-kortind2 var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-kortind  { 0%,4%  { opacity:0; transform:translateY(-3cqw) } 10%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(-3cqw) } }
@keyframes kms-kortind2 { 0%,8%  { opacity:0; transform:translateY(3cqw) }  14%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(3cqw) } }
body.page-modul .km-vis.inde .kms-bro-linje--op  { animation: kms-linje var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-bro-linje--ned { animation: kms-linje2 var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-linje  { 0%,18% { transform:scaleY(0) } 24%,86% { transform:scaleY(1) } 91%,100% { transform:scaleY(0) } }
@keyframes kms-linje2 { 0%,46% { transform:scaleY(0) } 52%,86% { transform:scaleY(1) } 91%,100% { transform:scaleY(0) } }
body.page-modul .km-vis.inde .kms-krit-r--1 { animation: kms-krit1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-krit-r--2 { animation: kms-krit2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-krit-r--3 { animation: kms-krit3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-krit1 { 0%,26% { opacity:0; transform:translateX(-2cqw) } 31%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-2cqw) } }
@keyframes kms-krit2 { 0%,32% { opacity:0; transform:translateX(-2cqw) } 37%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-2cqw) } }
@keyframes kms-krit3 { 0%,38% { opacity:0; transform:translateX(-2cqw) } 43%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-2cqw) } }
body.page-modul .km-vis.inde .kms-status { animation: kms-status var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-status { 0%,56% { opacity:0; transform:scale(.8) } 62%,86% { opacity:1; transform:scale(1) } 91%,100% { opacity:0; transform:scale(.8) } }

/* ── Scene 3 · LUK ─────────────────────────────────────────────────────
   En stroem der loeber opad. De tre foerste poster kvitteres og forlader
   billedet foroven; foerst naar de er ude, standser den fjerde sag og
   folder sig ud. Bevaegelsen er gennemloebende, ikke en enkelt indflyvning. */
body.page-modul .kms-sc--luk { --loop: 16s; }
body.page-modul .kms-stroem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5cqw; }
body.page-modul .kms-str {
  display: flex; align-items: center; gap: 2.4cqw;
  background: rgba(255,255,255,.72);
  border-radius: 2.4cqw;
  padding: 1.9cqw 2.6cqw;
  opacity: 0;
}
body.page-modul .kms-str-tx { display: flex; flex-direction: column; gap: .3cqw; min-width: 0; }
body.page-modul .kms-str-tx strong {
  font-size: 2.9cqw; font-weight: 600; color: var(--sc-blaek);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-str-tx em { font-style: normal; font-size: 2.4cqw; color: var(--sc-tone); font-variant-numeric: tabular-nums; }
body.page-modul .kms-str-ok {
  margin-left: auto; flex: none;
  font-size: 2.2cqw; font-weight: 600; line-height: 1;
  padding: 1cqw 1.8cqw; border-radius: 99px;
  background: #c8eedd; color: #0e6640;
  opacity: 0;
}
body.page-modul .kms-sag {
  margin-top: 1.4cqw;
  background: var(--sc-flade);
  border-radius: 2.8cqw;
  padding: 2.6cqw 3cqw 2.4cqw;
  box-shadow: 0 2px 6px rgba(17,24,20,.06), 0 12px 26px rgba(17,24,20,.12);
  opacity: 0;
}
body.page-modul .kms-sag-hd { display: flex; align-items: center; gap: 1.8cqw; }
body.page-modul .kms-sag-ik { width: 5.4cqw; height: 5.4cqw; flex: none; color: #b8860b; }
body.page-modul .kms-sag-ik svg { width: 5.4cqw; height: 5.4cqw; }
body.page-modul .kms-sag-hd-tx { font-size: 2.8cqw; font-weight: 600; color: var(--sc-blaek); letter-spacing: -.01em; }
body.page-modul .kms-sag-prik {
  width: .9cqw; height: .9cqw; border-radius: 99px; background: #c2c6c3;
}
body.page-modul .kms-sag-prik:first-of-type { margin-left: auto; }
body.page-modul .kms-sag-navn {
  margin: 1.3cqw 0 1.1cqw;
  font-size: 3.2cqw; font-weight: 600; color: var(--sc-blaek); letter-spacing: -.015em;
}
body.page-modul .kms-sag-fakta { margin: 0; display: flex; flex-direction: column; gap: .9cqw; }
body.page-modul .kms-sag-fakta > div { display: flex; align-items: baseline; gap: 2cqw; }
body.page-modul .kms-sag-fakta dt { flex: none; width: 16cqw; font-size: 2.4cqw; color: var(--sc-tone); }
body.page-modul .kms-sag-fakta dd {
  margin: 0; font-size: 2.5cqw; font-weight: 600; color: var(--sc-blaek);
  font-variant-numeric: tabular-nums;
}
body.page-modul .kms-sag-knapper { margin: 1.8cqw 0 0; display: flex; gap: 1.8cqw; }
body.page-modul .kms-knap {
  font-size: 2.4cqw; font-weight: 600; line-height: 1;
  padding: 1.7cqw 2.8cqw; border-radius: 1.8cqw;
  background: #f1f3f2; color: #40483f;
}
/* I varslet staar knapperne paa linje med overskriften og skal derfor vaere
   mindre end i oekonomiens sagskort, hvor de har deres egen raekke. */
body.page-modul .kms-varsel-knapper .kms-knap {
  font-size: 2.1cqw; padding: 1.3cqw 2.1cqw; border-radius: 1.4cqw; white-space: nowrap;
}
body.page-modul .kms-knap--primaer { background: #1d1d1b; color: #fff; }

body.page-modul .km-vis.inde .kms-str--1 { animation: kms-str1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-str--2 { animation: kms-str2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-str--3 { animation: kms-str3 var(--loop) var(--sc-ud) infinite both; }
/* Hver post kommer nedefra, kvitteres og glider ud foroven. */
@keyframes kms-str1 {
  0%,3%  { opacity:0; transform:translateY(7cqw) }
  8%,20% { opacity:1; transform:none }
  27%    { opacity:0; transform:translateY(-7cqw) }
  30%,100% { opacity:0; transform:translateY(7cqw) }
}
@keyframes kms-str2 {
  0%,9%   { opacity:0; transform:translateY(7cqw) }
  14%,26% { opacity:1; transform:none }
  33%     { opacity:0; transform:translateY(-7cqw) }
  36%,100% { opacity:0; transform:translateY(7cqw) }
}
@keyframes kms-str3 {
  0%,15%  { opacity:0; transform:translateY(7cqw) }
  20%,32% { opacity:1; transform:none }
  39%     { opacity:0; transform:translateY(-7cqw) }
  42%,100% { opacity:0; transform:translateY(7cqw) }
}
body.page-modul .km-vis.inde .kms-str--1 .kms-str-ok { animation: kms-ok1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-str--2 .kms-str-ok { animation: kms-ok2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-str--3 .kms-str-ok { animation: kms-ok3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-ok1 { 0%,12% { opacity:0; transform:scale(.7) } 16%,20% { opacity:1; transform:scale(1) } 27%,100% { opacity:0; transform:scale(.7) } }
@keyframes kms-ok2 { 0%,18% { opacity:0; transform:scale(.7) } 22%,26% { opacity:1; transform:scale(1) } 33%,100% { opacity:0; transform:scale(.7) } }
@keyframes kms-ok3 { 0%,24% { opacity:0; transform:scale(.7) } 28%,32% { opacity:1; transform:scale(1) } 39%,100% { opacity:0; transform:scale(.7) } }
body.page-modul .km-vis.inde .kms-sag { animation: kms-sag var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-sag {
  0%,44%   { opacity:0; transform:translateY(4cqw) }
  52%,86%  { opacity:1; transform:none }
  91%,100% { opacity:0; transform:translateY(4cqw) }
}

/* Mindre bevaegelse: hver scene staar paa sin sluttilstand med det samme.
   Sluk paa de FULDE selektorer - en kort regel taber paa specificitet mod
   .km-vis.inde .kms-post--1 og lignende, og elementet ville koere videre. */
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-vis.inde .kms-kilde--1,
  body.page-modul .km-vis.inde .kms-kilde--2,
  body.page-modul .km-vis.inde .kms-kilde--3,
  body.page-modul .km-vis.inde .kms-post--1,
  body.page-modul .km-vis.inde .kms-post--2,
  body.page-modul .km-vis.inde .kms-post--3,
  body.page-modul .km-vis.inde .kms-sc-fod,
  body.page-modul .km-vis.inde .kms-kort--betaling,
  body.page-modul .km-vis.inde .kms-kort--faktura,
  body.page-modul .km-vis.inde .kms-bro-linje--op,
  body.page-modul .km-vis.inde .kms-bro-linje--ned,
  body.page-modul .km-vis.inde .kms-krit-r--1,
  body.page-modul .km-vis.inde .kms-krit-r--2,
  body.page-modul .km-vis.inde .kms-krit-r--3,
  body.page-modul .km-vis.inde .kms-status,
  body.page-modul .km-vis.inde .kms-str--1,
  body.page-modul .km-vis.inde .kms-str--2,
  body.page-modul .km-vis.inde .kms-str--3,
  body.page-modul .km-vis.inde .kms-str--1 .kms-str-ok,
  body.page-modul .km-vis.inde .kms-str--2 .kms-str-ok,
  body.page-modul .km-vis.inde .kms-str--3 .kms-str-ok,
  body.page-modul .km-vis.inde .kms-sag { animation: none; }
  body.page-modul .kms-kilde { opacity: 1; }
  body.page-modul .kms-post,
  body.page-modul .kms-sc-fod,
  body.page-modul .kms-kort,
  body.page-modul .kms-krit-r,
  body.page-modul .kms-status,
  body.page-modul .kms-str,
  body.page-modul .kms-str-ok,
  body.page-modul .kms-sag { opacity: 1; transform: none; }
  body.page-modul .kms-bro-linje { transform: scaleY(1); }
}

/* ── Scene 4 · SAML (kontrakter) ───────────────────────────────────────
   Hovedaftalen ligger bagerst og staar der hele vejen. Tre dokumenter
   laegger sig ind foran den, hver med SIT RIGTIGE FILTYPEIKON - PDF, Excel
   og Outlook som i appen, ikke tegnede erstatninger. Maalene foelger
   forsidens .ka-fund: kompakt raekke, lille ikon, ingen farvet flade bag. */
body.page-modul .kms-sc--saml { --loop: 15s; }
body.page-modul .kms-vifte { position: relative; flex: 1; }
body.page-modul .kms-dok {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: 5.4cqw minmax(0,1fr) auto auto;
  align-items: center; gap: 2.2cqw;
  background: var(--sc-flade);
  border-radius: 2cqw;
  padding: 1.7cqw 2.2cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kms-dok--bag { top: 0; }
body.page-modul .kms-dok--a   { top: 11.6cqw; }
body.page-modul .kms-dok--b   { top: 23.2cqw; }
body.page-modul .kms-dok--c   { top: 34.8cqw; }
/* Filtypeikonet staar rent - intet farvet felt bagved. */
body.page-modul .kms-dok-ik { width: 5.4cqw; height: 5.4cqw; display: grid; place-items: center; }
body.page-modul .kms-dok-ik img { width: 100%; height: 100%; object-fit: contain; }
/* Filnavn og undertekst skal laeses som ÉN blok, der hoerer til dokumentet:
   stram linjeafstand og en tydeligt mindre undertekst. */
body.page-modul .kms-dok-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kms-dok-tx strong {
  font-size: 2.6cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-dok-tx em {
  font-style: normal; font-size: 2cqw; line-height: 1.3; color: var(--sc-tone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-dok-v {
  font-size: 1.9cqw; font-weight: 600; line-height: 1;
  padding: .8cqw 1.3cqw; border-radius: 99px;
  background: #f1f3f2; color: #77756f; white-space: nowrap;
}
body.page-modul .kms-dok-aabn {
  font-size: 1.9cqw; font-weight: 600; line-height: 1;
  padding: 1cqw 1.8cqw; border-radius: 1.2cqw;
  background: #1d1d1b; color: #fff; white-space: nowrap;
}
body.page-modul .kms-baand {
  margin: 0;
  display: flex; align-items: center; gap: 1.8cqw;
  font-size: 2.3cqw; color: #4a5a52;
  opacity: 0;
}
body.page-modul .kms-baand strong { font-weight: 600; color: var(--sc-blaek); }
/* De fire fundne dokumenttyper skiftes til at staa i samme plads. Fast
   bredde og absolut placering, saa "· 4 dokumenter" ikke hopper naar ordet
   skifter laengde (aftale vs. prisbilag). */
/* Ordet centreres LODRET i rotoren, og rotoren er selv et flex-item i
   baandets linje. Foer var ordet absolut med top:0 i en flade, der var
   lavere end ordets egen linjehoejde, saa det haengte 4,6 px under ikonet
   og "· 4 dokumenter". */
body.page-modul .kms-baand > span:last-child { display: inline-flex; align-items: center; }
body.page-modul .kms-rotor {
  position: relative; flex: none;
  width: 12.2cqw; align-self: stretch; min-height: 1.2em;
}
body.page-modul .kms-rot {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-style: normal; font-weight: 600; color: var(--sc-blaek);
  white-space: nowrap; opacity: 0;
}
body.page-modul .km-vis.inde .kms-rot--1 { animation: kms-rot1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-rot--2 { animation: kms-rot2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-rot--3 { animation: kms-rot3 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-rot--4 { animation: kms-rot4 var(--loop) var(--sc-ud) infinite both; }
/* Vinduerne ligger inden for baandets levetid (48-89 %), ca. 9 % hver. */
@keyframes kms-rot1 { 0%,48% { opacity:0 } 50%,56% { opacity:1 } 58%,100% { opacity:0 } }
@keyframes kms-rot2 { 0%,58% { opacity:0 } 60%,65% { opacity:1 } 67%,100% { opacity:0 } }
@keyframes kms-rot3 { 0%,67% { opacity:0 } 69%,74% { opacity:1 } 76%,100% { opacity:0 } }
@keyframes kms-rot4 { 0%,76% { opacity:0 } 78%,86% { opacity:1 } 89%,100% { opacity:0 } }
body.page-modul .kms-baand-ik {
  width: 4.4cqw; height: 4.4cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kms-baand-ik svg { width: 2.5cqw; height: 2.5cqw; }

body.page-modul .km-vis.inde .kms-dok--bag { animation: kms-dokbag var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-dok--a { animation: kms-doka var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-dok--b { animation: kms-dokb var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-dok--c { animation: kms-dokc var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-dokbag { 0%,4%  { opacity:0; transform:scale(.96) }            10%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:scale(.96) } }
@keyframes kms-doka   { 0%,14% { opacity:0; transform:translate(7cqw,-3cqw) } 21%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translate(7cqw,-3cqw) } }
@keyframes kms-dokb   { 0%,22% { opacity:0; transform:translate(7cqw,-3cqw) } 29%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translate(7cqw,-3cqw) } }
@keyframes kms-dokc   { 0%,30% { opacity:0; transform:translate(7cqw,-3cqw) } 37%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translate(7cqw,-3cqw) } }
body.page-modul .km-vis.inde .kms-baand { animation: kms-baand var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-baand { 0%,42% { opacity:0; transform:translateY(2cqw) } 48%,84% { opacity:1; transform:none } 89%,100% { opacity:0; transform:translateY(2cqw) } }

/* ── Scene 5 · LÆS (Amber) ─────────────────────────────────────────────
   Dokumentet er hoejt, ikke kvadratisk, saa scanneren har en strækning at
   vandre. Hver gang laesebjaelken passerer en passage, taendes markeringen,
   og FOERST DEREFTER springer vilkaaret UD AF DOKUMENTET og flyver paa
   plads i hoejre spalte. Udtrækkets startpunkt peger tilbage paa netop den
   markering, saa bevaegelsen laeses som "fundet her, lagt derover".

   Graat ligger paa RAEKKEN, ikke paa ikonet - som .ka-fund paa forsiden.
   Ikonerne er rigtige symboler: kroner, haengelaas, ur, kurve. */
body.page-modul .kms-sc--laes { --loop: 17s; }
body.page-modul .kms-laes { flex: 1; display: grid; grid-template-columns: 40% 1fr; gap: 3.2cqw; align-items: stretch; }
body.page-modul .kms-venstre { display: flex; flex-direction: column; min-width: 0; }
body.page-modul .kms-hoejre { display: flex; flex-direction: column; min-width: 0; }
body.page-modul .kms-ark {
  position: relative; overflow: hidden;
  background: var(--sc-flade);
  border-radius: 1cqw;
  box-shadow: 0 1px 2px rgba(17,24,20,.06), 0 6px 16px rgba(17,24,20,.10);
  display: flex; flex-direction: column;
  /* Fast hoejde, ca. en tredjedel kortere end da arket fyldte hele spalten -
     det skulle vaere lidt laengere end kvadratisk, ikke en hoej strimmel. */
  flex: none; height: 53cqw;
}
body.page-modul .kms-ark-hd {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 1.6cqw 1.8cqw;
  border-bottom: 1px solid #ecefed;
}
body.page-modul .kms-ark-ik { width: 4.6cqw; height: 4.6cqw; flex: none; object-fit: contain; }
body.page-modul .kms-ark-navn {
  font-size: 2.1cqw; font-weight: 600; color: var(--sc-blaek);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-ark-krop {
  flex: 1;
  display: flex; flex-direction: column; gap: 1.05cqw;
  padding: 1.5cqw 1.8cqw;
}
body.page-modul .kms-ark-para {
  font-size: 1.8cqw; font-weight: 700; color: var(--sc-tone);
  letter-spacing: .04em; margin-bottom: .3cqw;
}
body.page-modul .kms-ark-fod {
  display: flex; justify-content: space-between;
  padding: 1.3cqw 1.8cqw;
  border-top: 1px solid #ecefed;
  font-size: 1.8cqw; color: #9a9893;
}
body.page-modul .kms-l { display: block; height: 1.3cqw; border-radius: 99px; background: #e8eae9; }
body.page-modul .kms-l--k { width: 62%; }
body.page-modul .kms-l--mark { background: #dfe2e0; }
body.page-modul .km-vis.inde .kms-l--m1 { animation: kms-mark1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-l--m2 { animation: kms-mark2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-l--m3 { animation: kms-mark3 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-l--m4 { animation: kms-mark4 var(--loop) var(--sc-ud) infinite both; }
/* Markeringen taender lige FOER sit vilkaar springer ud. */
@keyframes kms-mark1 { 0%,26% { background:#dfe2e0 } 28%,86% { background:#c8eedd } 91%,100% { background:#dfe2e0 } }
@keyframes kms-mark2 { 0%,31.7% { background:#dfe2e0 } 33.7%,86% { background:#c8eedd } 91%,100% { background:#dfe2e0 } }
@keyframes kms-mark3 { 0%,37.5% { background:#dfe2e0 } 39.5%,86% { background:#c8eedd } 91%,100% { background:#dfe2e0 } }
@keyframes kms-mark4 { 0%,43.3% { background:#dfe2e0 } 45.3%,86% { background:#c8eedd } 91%,100% { background:#dfe2e0 } }
body.page-modul .kms-skanner {
  position: absolute; left: 0; right: 0; top: 0; height: 14cqw;
  background: linear-gradient(180deg, rgba(200,238,221,0), rgba(200,238,221,.85), rgba(200,238,221,0));
  opacity: 0;
}
body.page-modul .km-vis.inde .kms-skanner { animation: kms-skan var(--loop) linear infinite both; }
@keyframes kms-skan {
  0%,12%   { transform:translateY(-14cqw); opacity:0 }
  14%      { transform:translateY(-6cqw);  opacity:1 }
  56%      { transform:translateY(53cqw);  opacity:1 }
  59%      { transform:translateY(60cqw);  opacity:0 }
  60%,100% { transform:translateY(-14cqw); opacity:0 }
}

body.page-modul .kms-vilkaar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.8cqw; }
/* Raekken er graa, ikonet rent - modsat foer, hvor ikonet bar fladen. */
body.page-modul .kms-vil {
  display: grid; grid-template-columns: 4cqw minmax(0,1fr) auto;
  align-items: center; gap: 2cqw;
  background: var(--sc-flade);
  border-radius: 1.6cqw;
  padding: 1.6cqw 2cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kms-vil-ik { width: 4cqw; height: 4cqw; display: grid; place-items: center; color: #4a5a52; }
body.page-modul .kms-vil-ik svg { width: 4cqw; height: 4cqw; }
/* Vaerdien staar OVER sit navn og i lettere vaegt end foer. */
body.page-modul .kms-vil-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kms-vil-vaerdi {
  font-size: 2.5cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kms-vil-navn { font-style: normal; font-size: 2cqw; line-height: 1.3; color: var(--sc-tone); }
body.page-modul .kms-vil-kilde {
  font-size: 1.8cqw; font-weight: 600; line-height: 1;
  padding: .7cqw 1.2cqw; border-radius: 99px;
  background: #eaece9; color: #77756f; white-space: nowrap;
}
body.page-modul .km-vis.inde .kms-vil--1 { animation: kms-vil1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-vil--2 { animation: kms-vil2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-vil--3 { animation: kms-vil3 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kms-vil--4 { animation: kms-vil4 var(--loop) var(--sc-ud) infinite both; }
/* Startpunktet peger tilbage paa markeringen i arket: mod venstre (ind over
   dokumentet) og lodret op eller ned til netop den linje. Vilkaaret er lille
   og gennemsigtigt dér og vokser til fuld stoerrelse paa sin plads. */
@keyframes kms-vil1 { 0%,27.5% { opacity:0; transform:translate(-45cqw, 13.2cqw) scale(.7) } 33.5%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translate(-45cqw, 13.2cqw) scale(.7) } }
@keyframes kms-vil2 { 0%,33.2% { opacity:0; transform:translate(-45cqw, 10.6cqw) scale(.7) } 39.2%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translate(-45cqw, 10.6cqw) scale(.7) } }
@keyframes kms-vil3 { 0%,39% { opacity:0; transform:translate(-45cqw, 8cqw) scale(.7) } 45%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translate(-45cqw, 8cqw) scale(.7) } }
@keyframes kms-vil4 { 0%,44.8% { opacity:0; transform:translate(-45cqw, 5.4cqw) scale(.7) } 50.8%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translate(-45cqw, 5.4cqw) scale(.7) } }
body.page-modul .kms-amber {
  margin: auto 0 0;
  /* Hoejrestillet, saa noten flugter med vilkaarskortenes hoejrekant.
     Venstrestillet saa den ud som om den stod midt i scenen, fordi hoejre
     spalte foerst begynder 45 % inde. */
  display: flex; align-items: center; justify-content: flex-end; gap: 1.8cqw;
  font-size: 2.2cqw; color: #4a5a52;
  opacity: 0;
}
body.page-modul .kms-amber > span:last-child { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kms-amber strong { font-weight: 600; color: var(--sc-blaek); font-size: 2.3cqw; line-height: 1.25; }
body.page-modul .kms-amber em { font-style: normal; font-size: 2cqw; line-height: 1.3; color: var(--sc-tone); white-space: nowrap; }
body.page-modul .kms-amber-ik { width: 4.6cqw; height: 4.6cqw; flex: none; display: grid; place-items: center; }
body.page-modul .kms-amber-ik img { width: 4.6cqw; height: 4.6cqw; object-fit: contain; }
body.page-modul .km-vis.inde .kms-amber { animation: kms-amber var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-amber { 0%,54% { opacity:0; transform:translateY(2cqw) } 60%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(2cqw) } }

/* ── Scene 6 · REAGÉR ──────────────────────────────────────────────────
   Den eneste af de seks med en VANDRET, tidsbaaren bevaegelse. Markoeren og
   fyldet deler NOEJAGTIG samme keyframe-tider og easing - havde markoeren et
   ekstra mellemstop, ville proppen glide bagud i forhold til den sorte bar,
   og det var praecis fejlen foer.

   Alt blaek er sort. Ingen gyldne klokker eller roede pile: en opadpil
   laeses som noget positivt, og en prisstigning er det modsatte, saa tallet
   staar i loebende tekst frem for som et farvet noegletal. */
body.page-modul .kms-sc--reager { --loop: 16s; }
body.page-modul .kms-aftale { margin: 0 0 1cqw; display: flex; flex-direction: column; gap: .2cqw; opacity: 0; }
body.page-modul .kms-aftale-navn { font-size: 2.9cqw; font-weight: 600; color: var(--sc-blaek); letter-spacing: -.015em; line-height: 1.25; }
body.page-modul .kms-aftale-sub { font-size: 2.2cqw; color: var(--sc-tone); line-height: 1.3; }
body.page-modul .kms-tid { position: relative; height: 13cqw; margin: 3cqw 0 1cqw; }
body.page-modul .kms-tid-spor {
  position: absolute; left: 0; right: 0; top: 3.4cqw; height: .6cqw;
  border-radius: 99px; background: rgba(29,29,27,.11);
}
body.page-modul .kms-tid-fyld {
  position: absolute; left: 0; top: 3.4cqw; height: .6cqw; width: 100%;
  border-radius: 99px; background: #1d1d1b;
  transform-origin: left center; transform: scaleX(0);
}
body.page-modul .kms-tid-markoer {
  position: absolute; top: 2.2cqw; left: 0;
  width: 2.4cqw; height: 2.4cqw; margin-left: -1.2cqw;
  border-radius: 99px; background: #fff;
  box-shadow: 0 0 0 .6cqw #1d1d1b;
  opacity: 0;
}
body.page-modul .kms-tid-maerke {
  position: absolute; top: 6.4cqw;
  display: flex; flex-direction: column; gap: .1cqw;
  font-size: 2cqw; color: var(--sc-tone); line-height: 1.3;
}
body.page-modul .kms-tid-maerke em { font-style: normal; font-size: 2.3cqw; font-weight: 600; color: var(--sc-blaek); }
body.page-modul .kms-tid-maerke--a { left: 0; }
body.page-modul .kms-tid-maerke--b { right: 0; text-align: right; }
body.page-modul .km-vis.inde .kms-aftale { animation: kms-aftale var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-aftale { 0%,3% { opacity:0; transform:translateY(-2cqw) } 9%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(-2cqw) } }
body.page-modul .km-vis.inde .kms-tid-fyld { animation: kms-fyld var(--loop) cubic-bezier(.4,0,.2,1) infinite both; }
body.page-modul .km-vis.inde .kms-tid-markoer { animation: kms-mark var(--loop) cubic-bezier(.4,0,.2,1) infinite both; }
/* SAMME tider, SAMME kurve. left og scaleX naar 62 % paa samme oejeblik,
   saa proppen sidder paa fyldets forkant hele vejen. */
@keyframes kms-fyld { 0%,12% { transform:scaleX(0) } 46%,86% { transform:scaleX(.62) } 91%,100% { transform:scaleX(0) } }
@keyframes kms-mark { 0%,12% { left:0; opacity:0 } 15% { opacity:1 } 46%,86% { left:62%; opacity:1 } 91%,100% { left:0; opacity:0 } }
body.page-modul .kms-varsel {
  margin-top: auto;
  background: var(--sc-flade);
  border-radius: 2.4cqw;
  padding: 2.2cqw 2.4cqw;
  box-shadow: 0 2px 6px rgba(17,24,20,.06), 0 12px 26px rgba(17,24,20,.12);
  opacity: 0;
}
body.page-modul .kms-varsel-hd { display: flex; align-items: flex-start; gap: 1.6cqw; }
body.page-modul .kms-varsel-tx { flex: 1; }
body.page-modul .kms-varsel-ik { width: 4cqw; height: 4cqw; flex: none; color: var(--sc-blaek); margin-top: .2cqw; }
body.page-modul .kms-varsel-ik svg { width: 4cqw; height: 4cqw; }
/* Hele konsekvensen staar med smaat paa én linje efter "14 dage", saa baren
   bliver lav i stedet for tre etager hoej. */
body.page-modul .kms-varsel-tx { display: flex; flex-direction: column; gap: .2cqw; min-width: 0; }
body.page-modul .kms-varsel-tx strong { font-size: 2.7cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek); letter-spacing: -.01em; }
body.page-modul .kms-varsel-tx em { font-style: normal; font-size: 2.1cqw; line-height: 1.35; color: var(--sc-tone); }
body.page-modul .kms-varsel-knapper { margin: 0; margin-left: auto; display: flex; gap: 1.2cqw; flex: none; }
body.page-modul .km-vis.inde .kms-varsel { animation: kms-varsel var(--loop) var(--sc-ud) infinite both; }
@keyframes kms-varsel { 0%,50% { opacity:0; transform:translateY(4cqw) } 58%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(4cqw) } }

/* Mindre bevaegelse for de tre kontraktscener: sluttilstanden med det
   samme. Sluk paa de FULDE selektorer af hensyn til specificiteten. */
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-vis.inde .kms-dok--bag,
  body.page-modul .km-vis.inde .kms-dok--a,
  body.page-modul .km-vis.inde .kms-dok--b,
  body.page-modul .km-vis.inde .kms-dok--c,
  body.page-modul .km-vis.inde .kms-baand,
  body.page-modul .km-vis.inde .kms-rot--1,
  body.page-modul .km-vis.inde .kms-rot--2,
  body.page-modul .km-vis.inde .kms-rot--3,
  body.page-modul .km-vis.inde .kms-rot--4,
  body.page-modul .km-vis.inde .kms-l--m1,
  body.page-modul .km-vis.inde .kms-l--m2,
  body.page-modul .km-vis.inde .kms-l--m3,
  body.page-modul .km-vis.inde .kms-l--m4,
  body.page-modul .km-vis.inde .kms-skanner,
  body.page-modul .km-vis.inde .kms-vil--1,
  body.page-modul .km-vis.inde .kms-vil--2,
  body.page-modul .km-vis.inde .kms-vil--3,
  body.page-modul .km-vis.inde .kms-vil--4,
  body.page-modul .km-vis.inde .kms-amber,
  body.page-modul .km-vis.inde .kms-aftale,
  body.page-modul .km-vis.inde .kms-tid-fyld,
  body.page-modul .km-vis.inde .kms-tid-markoer,
  body.page-modul .km-vis.inde .kms-varsel { animation: none; }
  body.page-modul .kms-dok,
  body.page-modul .kms-baand,
  body.page-modul .kms-vil,
  body.page-modul .kms-amber,
  body.page-modul .kms-aftale,
  body.page-modul .kms-varsel { opacity: 1; transform: none; }
  body.page-modul .kms-l--mark { background: #c8eedd; }
  body.page-modul .kms-rot { opacity: 0; }
  body.page-modul .kms-rot--1 { opacity: 1; }
  body.page-modul .kms-vil-tx, body.page-modul .kms-varsel-tx { opacity: 1; }
  body.page-modul .kms-skanner { opacity: 0; }
  body.page-modul .kms-tid-fyld { transform: scaleX(.62); }
  body.page-modul .kms-tid-markoer { opacity: 1; left: 62%; }
}

/* ══ TRINSCENERNE · LOEN OG MEDARBEJDERE ════════════════════════════════
   Tre scener til Laeg til grund / Saml op / Koer. De deler grundlag og
   token-sprog med kontrakt- og oekonomisiden, men har hver sin mekanik:

     1  opbygning   - medarbejderen staar oeverst, grundlaget kobles paa
     2  indstroemning - maanedens haendelser lander i en stroem
     3  passage     - posterne gaar gennem en kontrol, én standser

   Egne kml-klasser, saa intet arver fra kms-scenerne paa de andre
   modulsider - de er scopet til samme body.page-modul.

   Ikonerne foelger sitets egne familier: Lucide-streg (1,7) til UI,
   Material-filtypeikoner til dokumenter og Mastercards officielle maerke
   til firmakortet. Ingen hjemmelavede erstatninger.

   Samme tidslinjeregler som de oevrige scener: ÉN delt tidslinje pr.
   scene, forskydning i keyframe-PROCENTER (aldrig animation-delay), og
   100 % identisk med 0 %. */

/* ── Scene 1 · LAEG TIL GRUND ──────────────────────────────────────────
   Medarbejderen kommer foerst og bliver staaende. Derefter kobles
   kontrakten paa, og de tre vilkaar lander ét ad gangen med hver sit
   flueben - en opbygning, ikke en liste der fades ind. */
body.page-modul .kml-sc--grund { --loop: 16s; }
body.page-modul .kml-med {
  display: grid; grid-template-columns: 10cqw minmax(0,1fr) auto;
  align-items: center; gap: 2.6cqw;
  background: var(--sc-flade);
  border-radius: 2.2cqw;
  padding: 2cqw 2.4cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kml-med-av {
  width: 10cqw; height: 10cqw;
  border-radius: 99px; overflow: hidden; background: #eee;
}
body.page-modul .kml-med-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-modul .kml-med-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-med-tx strong {
  font-size: 2.9cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-med-tx em {
  font-style: normal; font-size: 2.1cqw; line-height: 1.3; color: var(--sc-tone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-med-badge {
  font-size: 1.9cqw; font-weight: 600; line-height: 1;
  padding: .9cqw 1.6cqw; border-radius: 99px;
  background: #c8eedd; color: #0e6640; white-space: nowrap;
}

body.page-modul .kml-kontrakt {
  margin-top: 2.4cqw;
  display: grid; grid-template-columns: 5.6cqw minmax(0,1fr) auto;
  align-items: center; gap: 2.2cqw;
  background: var(--sc-flade);
  border-radius: 2cqw;
  padding: 1.7cqw 2.2cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kml-kontrakt-ik { width: 5.6cqw; height: 5.6cqw; display: grid; place-items: center; }
body.page-modul .kml-kontrakt-ik img { width: 100%; height: 100%; object-fit: contain; }
body.page-modul .kml-kontrakt-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-kontrakt-tx strong {
  font-size: 2.5cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-kontrakt-tx em {
  font-style: normal; font-size: 1.95cqw; line-height: 1.3; color: var(--sc-tone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-kontrakt-tjek,
body.page-modul .kml-vk-tjek {
  width: 4.2cqw; height: 4.2cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center; opacity: 0;
}
body.page-modul .kml-kontrakt-tjek svg,
body.page-modul .kml-vk-tjek svg { width: 2.3cqw; height: 2.3cqw; }

body.page-modul .kml-vk-liste {
  list-style: none; margin: 2cqw 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.6cqw;
}
body.page-modul .kml-vk {
  display: grid; grid-template-columns: 4.4cqw minmax(0,1fr) auto 4.2cqw;
  align-items: center; gap: 2cqw;
  background: #f6f7f6;
  border-radius: 1.6cqw;
  padding: 1.5cqw 2cqw;
  opacity: 0;
}
body.page-modul .kml-vk-ik { width: 4.4cqw; height: 4.4cqw; display: grid; place-items: center; color: #4a5a52; }
body.page-modul .kml-vk-ik svg { width: 4.4cqw; height: 4.4cqw; }
body.page-modul .kml-vk-navn { font-size: 2.2cqw; color: var(--sc-tone); }
body.page-modul .kml-vk-val {
  font-size: 2.4cqw; font-weight: 600; color: var(--sc-blaek);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.page-modul .kml-grundfod {
  margin: auto 0 0;
  display: flex; align-items: center; gap: 1.8cqw;
  font-size: 2.2cqw; color: #4a5a52; opacity: 0;
}
body.page-modul .kml-grundfod strong { font-weight: 600; color: var(--sc-blaek); }
body.page-modul .kml-grundfod-tjek {
  width: 4.4cqw; height: 4.4cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kml-grundfod-tjek svg { width: 2.4cqw; height: 2.4cqw; }

body.page-modul .km-vis.inde .kml-med { animation: kml-med var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-med { 0%,3% { opacity:0; transform:translateY(-3cqw) } 9%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(-3cqw) } }
body.page-modul .km-vis.inde .kml-kontrakt { animation: kml-kontrakt var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-kontrakt { 0%,13% { opacity:0; transform:translateY(2.5cqw) } 19%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(2.5cqw) } }
body.page-modul .km-vis.inde .kml-kontrakt-tjek { animation: kml-ktjek var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-ktjek { 0%,22% { opacity:0; transform:scale(.7) } 26%,86% { opacity:1; transform:scale(1) } 91%,100% { opacity:0; transform:scale(.7) } }
/* De tre vilkaar kobles paa ét ad gangen, og fluebenet lander lige efter
   raekken selv - saa det laeses som en godkendelse, ikke som dekoration. */
body.page-modul .km-vis.inde .kml-vk--1 { animation: kml-vk1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-vk--2 { animation: kml-vk2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-vk--3 { animation: kml-vk3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-vk1 { 0%,29% { opacity:0; transform:translateX(-3cqw) } 34%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-3cqw) } }
@keyframes kml-vk2 { 0%,37% { opacity:0; transform:translateX(-3cqw) } 42%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-3cqw) } }
@keyframes kml-vk3 { 0%,45% { opacity:0; transform:translateX(-3cqw) } 50%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-3cqw) } }
body.page-modul .km-vis.inde .kml-vk--1 .kml-vk-tjek { animation: kml-vt1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-vk--2 .kml-vk-tjek { animation: kml-vt2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-vk--3 .kml-vk-tjek { animation: kml-vt3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-vt1 { 0%,36% { opacity:0; transform:scale(.7) } 39%,86% { opacity:1; transform:scale(1) } 91%,100% { opacity:0; transform:scale(.7) } }
@keyframes kml-vt2 { 0%,44% { opacity:0; transform:scale(.7) } 47%,86% { opacity:1; transform:scale(1) } 91%,100% { opacity:0; transform:scale(.7) } }
@keyframes kml-vt3 { 0%,52% { opacity:0; transform:scale(.7) } 55%,86% { opacity:1; transform:scale(1) } 91%,100% { opacity:0; transform:scale(.7) } }
body.page-modul .km-vis.inde .kml-grundfod { animation: kml-gfod var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-gfod { 0%,60% { opacity:0; transform:translateY(2cqw) } 66%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(2cqw) } }

/* ── Scene 2 · SAML OP ─────────────────────────────────────────────────
   Haendelserne lander nedefra i den raekkefoelge, de sker i maaneden, og
   taelleren foroven foelger med. Modsat scene 1's opbygning ovenfra. */
body.page-modul .kml-sc--opsaml { --loop: 15s; }
body.page-modul .kml-maaned {
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding-bottom: 2.2cqw; margin-bottom: 2.4cqw;
  border-bottom: 1px solid #e8eae9;
  opacity: 0;
}
body.page-modul .kml-maaned-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-maaned-tx strong { font-size: 2.7cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek); letter-spacing: -.01em; }
body.page-modul .kml-maaned-tx em { font-style: normal; font-size: 2.1cqw; line-height: 1.3; color: var(--sc-tone); }
body.page-modul .kml-maaned-tael { font-size: 2.1cqw; color: var(--sc-tone); white-space: nowrap; }
body.page-modul .kml-maaned-tael b { font-weight: 700; color: var(--sc-blaek); font-variant-numeric: tabular-nums; }

body.page-modul .kml-stroem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.8cqw; }
body.page-modul .kml-hp {
  display: grid; grid-template-columns: 6.4cqw minmax(0,1fr) auto;
  align-items: center; gap: 2.2cqw;
  background: var(--sc-flade);
  border-radius: 2cqw;
  padding: 1.8cqw 2.2cqw;
  box-shadow: var(--sc-skygge);
  opacity: 0;
}
body.page-modul .kml-hp-ik { width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; }
body.page-modul .kml-hp-ik img { width: 100%; height: 100%; object-fit: contain; }
body.page-modul .kml-hp-ik--ur { color: #4a5a52; }
body.page-modul .kml-hp-ik--ur svg { width: 5cqw; height: 5cqw; }
/* Mastercards maerke er bredere end hoejt - lidt luft, saa det ikke
   fylder mere optisk end de kvadratiske filtypeikoner. */
body.page-modul .kml-hp-ik--kort img { width: 6.4cqw; height: 4.4cqw; }
body.page-modul .kml-hp-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-hp-tx strong {
  font-size: 2.5cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-hp-tx em {
  font-style: normal; font-size: 1.95cqw; line-height: 1.3; color: var(--sc-tone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-modul .kml-hp-hoejre { display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; flex: none; }
body.page-modul .kml-hp-hoejre b {
  font-size: 2.4cqw; font-weight: 600; color: var(--sc-blaek);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.page-modul .kml-mrk {
  font-size: 1.8cqw; font-weight: 600; line-height: 1;
  padding: .8cqw 1.4cqw; border-radius: 99px; white-space: nowrap;
}
body.page-modul .kml-mrk--ok   { background: #c8eedd; color: #0e6640; }
body.page-modul .kml-mrk--vent { background: #fdf0d9; color: #8a6216; }
/* Summen ankrer bunden af scenen, saa maanedens poster ikke staar med et
   tomt felt under sig - og den siger hvad der faktisk er samlet op. */
body.page-modul .kml-sum {
  margin: auto 0 0;
  display: flex; align-items: center; gap: 1.8cqw;
  padding-top: 2.2cqw; border-top: 1px solid #e8eae9;
  font-size: 2.2cqw; color: var(--sc-tone);
  opacity: 0;
}
body.page-modul .kml-sum-ik { width: 4.2cqw; height: 4.2cqw; flex: none; color: #4a5a52; }
body.page-modul .kml-sum-ik svg { width: 4.2cqw; height: 4.2cqw; }
body.page-modul .kml-sum-val {
  margin-left: auto; font-weight: 600; color: var(--sc-blaek);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.page-modul .km-vis.inde .kml-sum { animation: kml-sum var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-sum { 0%,53% { opacity:0; transform:translateY(2cqw) } 59%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(2cqw) } }

body.page-modul .km-vis.inde .kml-maaned { animation: kml-maaned var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-maaned { 0%,3% { opacity:0; transform:translateY(-2cqw) } 9%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(-2cqw) } }
/* Posterne kommer NEDEFRA, som noget der loeber ind i maaneden. */
body.page-modul .km-vis.inde .kml-hp--1 { animation: kml-hp1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-hp--2 { animation: kml-hp2 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-hp--3 { animation: kml-hp3 var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-hp1 { 0%,14% { opacity:0; transform:translateY(5cqw) scale(.97) } 21%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(5cqw) scale(.97) } }
@keyframes kml-hp2 { 0%,27% { opacity:0; transform:translateY(5cqw) scale(.97) } 34%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(5cqw) scale(.97) } }
@keyframes kml-hp3 { 0%,40% { opacity:0; transform:translateY(5cqw) scale(.97) } 47%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(5cqw) scale(.97) } }
/* Taelleren skifter 1 -> 2 -> 3 i takt med at posterne lander. Tallene
   ligger oven paa hinanden i fast bredde, saa "poster" ikke hopper.
   content: paa et almindeligt element goer intet - kun ::before/::after
   kan det - saa tallene er rigtige elementer, der skiftes imellem. */
body.page-modul .kml-tael { position: relative; display: inline-block; width: 1.7cqw; align-self: stretch; min-height: 1.2em; }
body.page-modul .kml-t {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-weight: 700; color: var(--sc-blaek); font-variant-numeric: tabular-nums;
  opacity: 0;
}
body.page-modul .km-vis.inde .kml-t--1 { animation: kml-t1 var(--loop) steps(1) infinite both; }
body.page-modul .km-vis.inde .kml-t--2 { animation: kml-t2 var(--loop) steps(1) infinite both; }
body.page-modul .km-vis.inde .kml-t--3 { animation: kml-t3 var(--loop) steps(1) infinite both; }
@keyframes kml-t1 { 0%,20% { opacity:0 } 21%,33% { opacity:1 } 34%,100% { opacity:0 } }
@keyframes kml-t2 { 0%,33% { opacity:0 } 34%,46% { opacity:1 } 47%,100% { opacity:0 } }
@keyframes kml-t3 { 0%,46% { opacity:0 } 47%,86% { opacity:1 } 91%,100% { opacity:0 } }

/* ── Scene 3 · KOER ────────────────────────────────────────────────────
   Posterne passerer en kontrol og forlader billedet mod hoejre. Den
   tredje standser, og handlingsfladen folder sig ud under den. Vandret
   passage - modsat scene 1's opbygning og scene 2's indstroemning. */
body.page-modul .kml-sc--koer { --loop: 17s; }
body.page-modul .kml-kontrol {
  margin: 0 0 2.4cqw;
  display: flex; align-items: center; gap: 1.8cqw;
  font-size: 2.3cqw; font-weight: 600; color: var(--sc-blaek);
  opacity: 0;
}
body.page-modul .kml-kontrol-ik { width: 4.6cqw; height: 4.6cqw; flex: none; color: var(--sc-blaek); }
body.page-modul .kml-kontrol-ik svg { width: 4.6cqw; height: 4.6cqw; }
body.page-modul .kml-koe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
body.page-modul .kml-kp {
  display: flex; align-items: center; gap: 2cqw;
  background: rgba(255,255,255,.72);
  border-radius: 1.8cqw;
  padding: 1.6cqw 2.2cqw;
  opacity: 0;
}
body.page-modul .kml-kp-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-kp-tx strong { font-size: 2.4cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek); font-variant-numeric: tabular-nums; }
body.page-modul .kml-kp-tx em { font-style: normal; font-size: 1.95cqw; line-height: 1.3; color: var(--sc-tone); }
body.page-modul .kml-kp-tjek {
  margin-left: auto; flex: none;
  width: 4.2cqw; height: 4.2cqw;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kml-kp-tjek svg { width: 2.3cqw; height: 2.3cqw; }

body.page-modul .kml-stop {
  margin-top: 2cqw;
  background: var(--sc-flade);
  border-radius: 2.2cqw;
  padding: 2cqw 2.2cqw;
  box-shadow: 0 2px 6px rgba(17,24,20,.06), 0 12px 26px rgba(17,24,20,.12);
  opacity: 0;
}
body.page-modul .kml-stop-hd { display: flex; align-items: center; gap: 1.8cqw; }
body.page-modul .kml-stop-tx { flex: 1; }
body.page-modul .kml-stop-ik { width: 4.6cqw; height: 4.6cqw; flex: none; color: var(--sc-blaek); }
body.page-modul .kml-stop-ik svg { width: 4.6cqw; height: 4.6cqw; }
body.page-modul .kml-stop-tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.page-modul .kml-stop-tx strong { font-size: 2.5cqw; font-weight: 600; line-height: 1.25; color: var(--sc-blaek); }
body.page-modul .kml-stop-tx em { font-style: normal; font-size: 1.95cqw; line-height: 1.3; color: var(--sc-tone); font-variant-numeric: tabular-nums; }
/* Knapperne staar paa linje med overskriften i stedet for i en egen
   raekke nedenunder - det holder kortet lavt. */
body.page-modul .kml-stop-knapper { margin: 0; margin-left: auto; display: flex; gap: 1.2cqw; flex: none; }
body.page-modul .kml-stop-knapper .kms-knap { font-size: 1.95cqw; padding: 1.1cqw 1.8cqw; border-radius: 1.2cqw; white-space: nowrap; }
body.page-modul .kml-klar {
  margin: auto 0 0;
  display: flex; align-items: center; gap: 1.8cqw;
  font-size: 2.2cqw; color: #4a5a52; opacity: 0;
}
body.page-modul .kml-klar strong { font-weight: 600; color: var(--sc-blaek); }
body.page-modul .kml-klar-tjek {
  width: 4.4cqw; height: 4.4cqw; flex: none;
  border-radius: 99px; background: #c8eedd; color: #0e6640;
  display: grid; place-items: center;
}
body.page-modul .kml-klar-tjek svg { width: 2.4cqw; height: 2.4cqw; }

body.page-modul .km-vis.inde .kml-kontrol { animation: kml-kontrol var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-kontrol { 0%,3% { opacity:0; transform:translateY(-2cqw) } 9%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(-2cqw) } }
/* De to godkendte glider ind FRA VENSTRE - gennem kontrollen. */
body.page-modul .km-vis.inde .kml-kp--1 { animation: kml-kp1 var(--loop) var(--sc-ud) infinite both; }
body.page-modul .km-vis.inde .kml-kp--2 { animation: kml-kp2 var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-kp1 { 0%,12% { opacity:0; transform:translateX(-8cqw) } 19%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-8cqw) } }
@keyframes kml-kp2 { 0%,22% { opacity:0; transform:translateX(-8cqw) } 29%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-8cqw) } }
/* Den tredje standser: den kommer samme vej, men bliver staaende og
   folder handlingen ud i stedet for at gaa igennem. */
body.page-modul .km-vis.inde .kml-stop { animation: kml-stop var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-stop { 0%,34% { opacity:0; transform:translateX(-8cqw) } 42%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateX(-8cqw) } }
body.page-modul .km-vis.inde .kml-klar { animation: kml-klar var(--loop) var(--sc-ud) infinite both; }
@keyframes kml-klar { 0%,58% { opacity:0; transform:translateY(2cqw) } 64%,86% { opacity:1; transform:none } 91%,100% { opacity:0; transform:translateY(2cqw) } }

/* Mindre bevaegelse: hver scene staar paa sin sluttilstand. Sluk paa de
   FULDE nummererede selektorer - en kort regel taber paa specificitet. */
@media (prefers-reduced-motion: reduce) {
  body.page-modul .km-vis.inde .kml-med,
  body.page-modul .km-vis.inde .kml-kontrakt,
  body.page-modul .km-vis.inde .kml-kontrakt-tjek,
  body.page-modul .km-vis.inde .kml-vk--1,
  body.page-modul .km-vis.inde .kml-vk--2,
  body.page-modul .km-vis.inde .kml-vk--3,
  body.page-modul .km-vis.inde .kml-vk--1 .kml-vk-tjek,
  body.page-modul .km-vis.inde .kml-vk--2 .kml-vk-tjek,
  body.page-modul .km-vis.inde .kml-vk--3 .kml-vk-tjek,
  body.page-modul .km-vis.inde .kml-grundfod,
  body.page-modul .km-vis.inde .kml-maaned,
  body.page-modul .km-vis.inde .kml-hp--1,
  body.page-modul .km-vis.inde .kml-hp--2,
  body.page-modul .km-vis.inde .kml-hp--3,
  body.page-modul .km-vis.inde .kml-t--1,
  body.page-modul .km-vis.inde .kml-t--2,
  body.page-modul .km-vis.inde .kml-t--3,
  body.page-modul .km-vis.inde .kml-sum,
  body.page-modul .km-vis.inde .kml-kontrol,
  body.page-modul .km-vis.inde .kml-kp--1,
  body.page-modul .km-vis.inde .kml-kp--2,
  body.page-modul .km-vis.inde .kml-stop,
  body.page-modul .km-vis.inde .kml-klar { animation: none; }
  body.page-modul .kml-med,
  body.page-modul .kml-kontrakt,
  body.page-modul .kml-kontrakt-tjek,
  body.page-modul .kml-vk,
  body.page-modul .kml-vk-tjek,
  body.page-modul .kml-grundfod,
  body.page-modul .kml-maaned,
  body.page-modul .kml-hp,
  body.page-modul .kml-sum,
  body.page-modul .kml-kontrol,
  body.page-modul .kml-kp,
  body.page-modul .kml-stop,
  body.page-modul .kml-klar { opacity: 1; transform: none; }
  body.page-modul .kml-t { opacity: 0; }
  body.page-modul .kml-t--3 { opacity: 1; }
}