/* Hours forside — designlag 2026-09 (Garba-reference: bredt grid, hvid flade,
   stor sentence-case grotesk, store billedpaneler, stor lodret rytme).
   Indlæses KUN af forsiden, efter style.css og forside-indhold.css.
   Header og footer røres ikke — kun bredden, som de deler med resten. */

/* ── Grid: 1200px → 1440px (+20 %), aldrig helt til kanten ─────────────── */
body.fg .container    { max-width: min(1440px, 100%); padding-left: clamp(20px, 3.2vw, 44px); padding-right: clamp(20px, 3.2vw, 44px); }

/* Headeren følger samme bredde som indholdet og footer-teksten.
   Kun bredden ændres — struktur, indhold og adfærd er urørt. */
body.fg .header-inner { max-width: min(1440px, 100%); }
body.fg .header-bar   { padding-left: clamp(20px, 3.2vw, 44px); padding-right: clamp(20px, 3.2vw, 44px); }
/* Logoet skaleres ned, saa det matcher "Prøv gratis"-knappens vaegt */
body.fg .nav-logo-svg { height: 26px; }
/* Lidt mere luft over headeren, saa den staar friere paa den groenne flade */
body.fg .site-header { top: 22px; }

/* ── Typografi: Figtree som gennemgående familie på forsiden ───────────── */
/* Én gennemgaaende skrift paa HELE siden (ogsaa header/footer via de to
   font-variabler). Hanken Grotesk er det naermeste frie modstykke til
   referencesidens Matter. Kun sektionsoverskrifter staar i fed. */
body.fg {
  font-family: 'DM Sans', 'Inter', sans-serif;
  --body: 'DM Sans', 'Inter', sans-serif;
  --display: 'DM Sans', 'Inter', sans-serif;
  background: #FFFFFF;
}
.fg-h {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 560;          /* en anelse tungere end 500, langt fra bold */
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-transform: none;
  color: var(--t1);
  margin: 0;
}
.fg-h-xl { font-size: clamp(2.8rem, 6.6vw, 5.9rem); line-height: 0.99; letter-spacing: -0.035em; }
.fg-h-lg { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.fg-h-md { font-size: clamp(1.65rem, 2.7vw, 2.5rem); }
/* Kategorilabelen efter referencen: versaler, kraftigere, i primaer
   tekstfarve. Bevidst UDEN gron farve og uden streg foran - det er
   produktsidernes .prod-eyebrow, og den er en anden og hoejere tone. */
.fg-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--t1); text-transform: uppercase;
}
.fg-sub { color: var(--prose); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; }

/* Ensartet sektionsafstand (Garba-rytme) — rigelig luft mellem kapitlerne */
.fg-sek { background: #fff; padding: clamp(100px, 11vw, 180px) 0 0; }

/* Pilleknapper */
body.fg .btn, body.fg .btn-lg { border-radius: 999px; }

/* Punktlister i modulerne: rene tekstlinjer uden flueben */
.fg-liste { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fg-liste li { font-size: 1.02rem; line-height: 1.55; color: #38342f; }

/* ── Hero: fuldflade-panel med tynd hvid ramme hele vejen rundt ─────────
   Panelet går helt op bag navigationen (som referencen); rammen er de
   12 px luft rundt om. dark-hero på sektionen giver hvid nav-tekst. */
.fg-hero { background: #fff; padding: 12px; }
.fg-hero-panel {
  position: relative;
  border-radius: 7px;
  min-height: calc(100svh - 24px);
  background: #cfe4d4 url('../images/forside-hero-figur-v2.webp') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 64px);
}
/* Motivet har en solbeskinnet stribe oeverst, hvor den hvide navigation ellers
   maaler 1,6:1. Samme greb som .media-hero::after, men kun som et baand i
   toppen bag headeren: fotoet er uroert derunder. */
.fg-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(26, 25, 22, .62) 0%, rgba(26, 25, 22, .47) 30%, rgba(26, 25, 22, .19) 62%, rgba(26, 25, 22, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Overskriften ligger over den hvide papirstak og maalte 1,1:1. Samme scrim
   spejlet i bunden, saa faldet laeses som naturligt lysfald og ikke som baand. */
.fg-hero-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(0deg, rgba(26, 25, 22, .62) 0%, rgba(26, 25, 22, .50) 32%, rgba(26, 25, 22, .20) 68%, rgba(26, 25, 22, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.fg-hero-bund {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}
.fg-hero-h1 { position: relative; max-width: 13ch; color: #fff; font-family: 'Hanken Grotesk', 'DM Sans', sans-serif; font-weight: 800; }
.fg-hero-side { max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fg-hero-side p { margin: 0; color: rgba(255,255,255,.92); font-size: 1.02rem; line-height: 1.55; }
.fg-hero .btn-primary { background: #fff; color: var(--ink); }
.fg-hero .btn-primary:hover { background: rgba(255,255,255,.9); }

/* ── Moduler (økonomi / løn / kontrakter) ──────────────────────────────── */
.fg-scene { background: linear-gradient(160deg, #e3f4eb, #d3edde); border-radius: 7px; }

/* ── Amber-sektionen: stort foto med svaevende fund-cirkler (referencens
   avatar-komposition oversat til Hours: fundene kredser om hverdagen) ──── */
/* Maalt paa referencen med den gule figur: billedet er ca. 1,39:1 og fylder
   klart under fuld bredde. Fladen var 1,9:1 i fuld kolonnebredde med
   min-height 420 - for dominerende. Nu strammere og centreret. */
.fg-amber-foto {
  position: relative; border-radius: 7px; overflow: hidden;
  /* Maalt paa referencen: 1492 x 744 = 2,0:1, og ca. 75 % af viewportens
     bredde. Foerste forsoeg var 1,4:1 i 920 px - for hoejt og for smalt. */
  min-height: 530px;
  width: 100%; max-width: 1150px; margin: 0 auto;
}
/* .fg-amber-foto er nu en <button> (video-pladsholder): nulstil native
   knap-styling, behold layoutet uaendret. */
.fg-amber-video {
  display: block; padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer;
}
.fg-amber-video:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.fg-amber-foto-billede { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.fg-orbit {
  position: absolute; border-radius: 50%;
  background: #fff; box-shadow: 0 14px 34px rgba(17,24,20,.24);
  display: grid; place-items: center;
  font-weight: 600; color: var(--t1); white-space: nowrap;
  animation: floatUp 4.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .fg-orbit { animation: none; } }
/* Manifest: frit tekststykke efter Amber-sektionen */
.fg-manifest {
  max-width: 900px; margin: 0 auto; text-align: center;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.4;
  color: var(--t1);
}

/* Loen-telefonens fordelingsbar animeres ved reveal (js) */
.lon-bar { transform-origin: left center; }

/* ── Trio-sektionen (tre sammenhængende billedfortællinger) ────────────── */
.fg-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.fg-trio-kort { margin: 0; }
.fg-trio-billede {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #dcefe3;
}
.fg-trio-billede img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Fælles minttone hen over alle tre billeder, så de læses som én serie */
.fg-trio-billede::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(203,232,215,.22);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fg-trio-kort figcaption { padding: 16px 6px 0; }
.fg-trio-titel { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--t1); }
.fg-trio-linje { display: block; margin-top: 4px; color: var(--t2); font-size: .95rem; line-height: 1.5; }

/* ── Brancher: fire rolige nedslag, navn og linje under billedet ───────── */
.fg-brancher { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.fg-branchekort { display: block; text-decoration: none; color: inherit; }
.fg-branchebillede { position: relative; display: block; border-radius: 7px; overflow: hidden; aspect-ratio: 4 / 3; background: #f3f2ef; }
.fg-branchebillede::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(203,232,215,.26);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fg-branchebillede img { filter: grayscale(.15) brightness(1.04) saturate(.92); }
.fg-branchebillede img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.fg-branchekort:hover .fg-branchebillede img { transform: scale(1.035); }
.fg-branchenavn { display: block; margin-top: 14px; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--t1); }
.fg-branchelinje { display: block; margin-top: 3px; color: var(--t2); font-size: .92rem; line-height: 1.5; }

/* ── Undervejs: fire linjer om sikkerhed, uden graa felt ────────────────
   Samme indhold som jura-sidens .ju-badge, men uden kortet bag: ikon,
   udsagn, linje og til sidst statuslinjen. Den er graa og lille med vilje -
   den baerer enten en attestering der er paa vej, eller en drift der koerer,
   og maa i ingen af tilfaeldene laese som et flueben. */
.fg-undervejs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.8vw, 48px); }
.fg-uv-ik { display: block; width: 24px; height: 24px; color: var(--t1); }
.fg-uv-ik svg { width: 100%; height: 100%; display: block; }
.fg-uv b { display: block; margin-top: 16px; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--t1); }
.fg-uv p { margin: 4px 0 0; color: var(--t2); font-size: .92rem; line-height: 1.5; }
.fg-uv-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #8b857e;
}
.fg-uv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c9c5be; flex: none; }
.fg-uv-link { font-size: .85rem; font-weight: 600; color: var(--t1); text-decoration: none; border-bottom: 1px solid rgba(30,43,34,.22); padding-bottom: 2px; }
.fg-uv-link:hover { border-bottom-color: var(--t1); }
@media (max-width: 900px) { .fg-undervejs { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }
@media (max-width: 560px) { .fg-undervejs { grid-template-columns: 1fr; } }

/* ── Videosektionen som rent visuelt break ─────────────────────────────── */
.fg-video { background: #fff; padding: clamp(100px, 11vw, 180px) 0 clamp(120px, 11vw, 190px); }

/* Soegepillen paa smalle skaerme: chippen skjules og hoejre-padding normaliseres */
@media (max-width: 760px) {
  .fg-soegepille { padding-right: 26px !important; }
  #jur-chip { display: none; }
}

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fi-modul .fg-scene { width: 100% !important; justify-self: stretch !important; }
  .fg-hero { padding: 8px; }
  /* Cover paa en hoej, smal skaerm skaerer figuren af. Figuren staar ved ca.
     35 % af billedets bredde; 30 % centrerer den i udsnittet. */
  .fg-hero-panel { min-height: calc(100svh - 16px); border-radius: 7px; background-position: 30% center; }
  .fg-hero-panel::before { height: 200px; }
  .fg-hero-h1 { max-width: none; }
  .fg-trio { grid-template-columns: 1fr; }
  .fg-brancher { grid-template-columns: repeat(2, 1fr); }
  .fg-trio-billede { aspect-ratio: 1 / 1; }
  /* Referencens 2:1 gaelder desktop. Paa en 390 px skaerm ville 2:1 give
     175 px hoejde, og saa er ansigterne paa fotoet ulaeselige. 3:2 under
     900 px. Samme regel paa kaedesiden. */
  .fg-amber-foto { aspect-ratio: 3 / 2; min-height: 0; }
  .fg-orbit { animation: none; transform: scale(.82); }
}
@media (max-width: 560px) { .fg-brancher { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .fg-trio-kort:hover .fg-trio-billede img { transform: none; }
  .fg-branchekort:hover .fg-branchebillede img { transform: none; }
}


/* ── Overskriften som primaer vejviser ────────────────────────────────────
   Der er ingen CTA-knap under split-sektionerne laengere; overskriften er
   selv klikfladen. Understregningen vokser fra venstre ved hover, saa det
   er tydeligt interaktivt uden at blive en knap. Ingen pil endnu. */
.fg-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 cubic-bezier(.16, 1, .3, 1), color .2s ease;
}
.fg-h-link:hover,
.fg-h-link:focus-visible { background-size: 100% 2px; color: var(--mint-ink); }
.fg-h-link:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 6px; }
.fg-h-link .fg-h { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .fg-h-link { transition: none; }
}


/* ── Underteksten i split-sektionerne ─────────────────────────────────────
   Var tre korte punkter uden punkttegn; er nu ét afsnit paa 3-4 linjer, der
   gaar laengere ud i bredden og balancerer sektionen. Referencen har samme
   anatomi: kort label, todelt overskrift, og et afsnit derunder. */
.fg-brod {
  margin: 20px 0 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--prose);
  max-width: 40rem;
  text-wrap: pretty;
}

/* ── Scroll-baseret bevaegelse ────────────────────────────────────────────
   .reveal er envejs: den saetter .visible og holder op med at observere.
   Elementer her skal ogsaa kunne gaa UD igen, naar sektionen forlades, saa
   siden foles levende. Egen klasse, saa .reveal er uroert paa alle andre
   sider. */
.reveal-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal-scroll.inde { opacity: 1; transform: none; }
/* Udgangen koerer 75 % af indgangen. */
.reveal-scroll:not(.inde) { transition-duration: .52s; }

.fg-svaev { transition-delay: .12s; }

/* Kvitteringen svajer let, naar sektionen er i billedet - diskret, ikke
   en vippende bevaegelse. */
/* Kvitteringen haenger i klipsen og GYNGER fra side til side. Foerste
   forsoeg lagde en translateY ind, saa den hoppede op og ned - forkert.
   Kun rotation, og drejepunktet ligger oppe ved klipsen. */
@keyframes fgSvaj {
  0%, 100% { transform: rotate(calc(var(--r, 2deg) - 1.2deg)) scale(.8); }
  50%      { transform: rotate(calc(var(--r, 2deg) + 1.2deg)) scale(.8); }
}
.fg-kvit { transform-origin: 46% 0; }
.fg-kvit.inde { animation: fgSvaj 4.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal-scroll { opacity: 1; transform: none; transition: none; }
  .fg-kvit.inde { animation: none; }
}


/* ── QR- og stregkodezonen nederst paa kvitteringen ──────────────────────
   En rigtig kvittering slutter her, ikke ved "tak for besoeget". Begge er
   tegnet med gradienter, saa de er skarpe ved enhver pixeltaethed. */



/* ── Sektionshoejder: samme bredde, mindre hoejde ────────────────────────
   Amber-fotoet og videosektionen skal beholde bredden, men vaere lavere. */
.fg-video { padding: clamp(72px, 7.6vw, 124px) 0 clamp(84px, 8vw, 132px); }


/* ── Vedhaefte-symbolet ───────────────────────────────────────────────────
   Praecis den lille boejle, der er live paa siden - ikke en knappenaal og
   ikke en stor buet boejle. Den griber om kvitteringens overkant, som
   ligger oppe ved mint-fladens kant, saa den holder papiret paa siden. */
.fg-klips {
  position: absolute;
  left: 44%; top: -7px;
  width: 22px; height: 8px;
  transform: rotate(45deg);
  border: 2px solid #9a958e;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  z-index: 5;
}

/* ── Ét faelles kort til alle tre badges ──────────────────────────────────
   "Afvigelse mod kontrakt", "Loenkoersel" og fristkortet havde tre
   forskellige opbygninger. De deler nu anatomi: etiket og handling paa
   oeverste linje, enheden foran tallet, en bar, og en noegle med to
   punkter - roedt for det, der sker uden handling, groent for det, der
   kan hentes. Tallene foelger DM Sans, ikke Barlow 800. */
/* Var glas-agtig: gennemsigtig baggrund + backdrop-filter. Kortene sidder i
   .fi-scene--tel, som har .reveal (opacity/transform-transition ved scroll
   ind). backdrop-filter paa et element inde i en foraelder, der animerer
   opacity/transform, giver et kendt Chromium/WebKit-kompositerings-glitch:
   en moerk/graa loddret smøring midt i kortet, mens overgangen koerer -
   praecis den fejl, der blev rapporteret. Roden er backdrop-filter selv;
   fjernet helt i stedet for at daempe det, saa fejlen ikke kan opstaa paa
   noget tidspunkt (load, animation, hover). Baggrunden er naesten opak, saa
   kortet stadig laeses som en let flade uden at afhaenge af det, der ligger
   bagved. */
.fg-kort {
  position: absolute;
  padding: 16px 18px 15px;
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 34px rgba(26,25,22,.15);
  z-index: 5;
}
.fg-kort-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .66rem; color: var(--t2);
}
.fg-kort-top b { font-weight: 600; color: var(--t1); }

/* Handlingen sidder i kortets oeverste hoejre hjoerne og er lille. */
.fg-kort-knap {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  border-radius: 999px; padding: 4px 11px;
  font-size: .58rem; font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.fg-kort-knap:hover { background: #33322e; color: #fff; transform: translateY(-1px); }

.fg-kort-tal {
  display: flex; align-items: baseline; gap: 8px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--t1);
  margin-top: 9px;
}
.fg-kort-enh { font-size: .88rem; font-weight: 500; color: var(--t2); }

.fg-kort-spor {
  position: relative; height: 7px; border-radius: 999px;
  background: rgba(26,25,22,.08);
  margin-top: 13px; overflow: hidden;
}
/* Lysere roed og lysere groen end de raa statusfarver. */
.fg-kort-fyld { position: absolute; inset: 0; border-radius: 999px; background: #f0a9b4; }
.fg-kort-maal { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #7fd0a6; }

.fg-kort-noegle {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 11px;
  font-size: .62rem; color: var(--t2);
}
.fg-kort-pkt { display: inline-flex; align-items: center; gap: 6px; }
.fg-kort-pkt::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.fg-pkt-roed::before  { background: #e2707f; }
.fg-pkt-groen::before { background: #4fb886; }
.fg-kort-pkt:empty { display: none; }

/* Placering af de tre kort. */
/* Samme forankring paa alle tre: hoejre side, samme margen, samme afstand
   til kanten. Loen-kortet laa foer i venstre side under billedet - det var
   ikke bedt om. */
.fg-konsekvens,
.fg-kort--afvigelse,
.fg-kort--lon { right: 4%; bottom: 6%; width: 37%; }

/* ── Hoejder: samme bredde, mindre hoejde ────────────────────────────── */
.fg-amber-foto { }

/* ── Stregkoden nederst paa kvitteringen ─────────────────────────────────
   Reglen blev slettet af en oprydning, og spannet stod tilbage tomt paa
   0 x 0 px. align-self:stretch er noedvendig, fordi foraeldreren er en
   flex-kolonne med align-items:center; ellers har width:100 % intet at
   maale imod. */
.fg-stregkode {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 26px;
  background-image: repeating-linear-gradient(90deg,
    #2b2926 0 1px, transparent 1px 3px, #2b2926 3px 5px, transparent 5px 6px,
    #2b2926 6px 7px, transparent 7px 10px, #2b2926 10px 12px, transparent 12px 13px);
}

/* ── Oekonomikortet ──────────────────────────────────────────────────────
   Bredere, lavere og lidt laengere nede, med mindre skrift. Noeglens to
   punkter skal staa paa ÉN linje med groen foerst; derfor nowrap og en
   bredde, der giver plads til begge. */
.fg-kort--afvigelse,
.fg-kort--lon,
.fg-konsekvens {
  width: 56%;
  bottom: 3%;
  padding: 13px 16px 12px;
}
.fg-kort--afvigelse .fg-kort-top,
.fg-kort--lon .fg-kort-top,
.fg-konsekvens .fg-kort-top  { font-size: .62rem; }
.fg-kort--afvigelse .fg-kort-knap,
.fg-kort--lon .fg-kort-knap,
.fg-konsekvens .fg-kort-knap { font-size: .55rem; padding: 3px 9px; }
.fg-kort--afvigelse .fg-kort-tal,
.fg-kort--lon .fg-kort-tal,
.fg-konsekvens .fg-kort-tal  { font-size: 1.5rem; margin-top: 6px; }
.fg-kort--afvigelse .fg-kort-enh,
.fg-kort--lon .fg-kort-enh,
.fg-konsekvens .fg-kort-enh  { font-size: .74rem; }
.fg-kort--afvigelse .fg-kort-spor,
.fg-kort--lon .fg-kort-spor,
.fg-konsekvens .fg-kort-spor { margin-top: 10px; height: 6px; }
.fg-kort--afvigelse .fg-kort-noegle,
.fg-kort--lon .fg-kort-noegle,
.fg-konsekvens .fg-kort-noegle {
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 9px;
  font-size: .58rem;
  white-space: nowrap;
}

/* ── Symmetri i split-sektionerne ────────────────────────────────────────
   Scenen er 620 px i en kolonne paa 677, saa der er 57 px slup. Uden
   justify-self laa den i kolonnens start, og figuren havde derfor 102 px
   til hoejre kant mod tekstens 44 til venstre. Loen laa rigtigt, fordi
   dens figur staar i FOERSTE kolonne.
   Nu hugger figuren altid den ydre kant, uanset side. */
.fi-modul > .fi-scene:last-child  { justify-self: end; }
.fi-modul > .fi-scene:first-child { justify-self: start; }

/* ── De to badges ved telefonen ──────────────────────────────────────────
   De havde deres egen opbygning med Barlow-tal og en fri tekstlinje. De
   bruger nu praecis samme struktur som oekonomikortet: etiket, enhed foran
   tallet, bar, og to punkter med groen foerst. Samme gennemsigtighed. */
.fg-kort--tel1, .fg-kort--tel2 { width: 252px; }
.fg-kort--tel1 .fg-kort-top, .fg-kort--tel2 .fg-kort-top { font-size: .62rem; }
.fg-kort--tel1 .fg-kort-tal, .fg-kort--tel2 .fg-kort-tal { font-size: 1.5rem; margin-top: 6px; }
.fg-kort--tel1 .fg-kort-enh, .fg-kort--tel2 .fg-kort-enh { font-size: .74rem; }
.fg-kort--tel1 .fg-kort-spor, .fg-kort--tel2 .fg-kort-spor { margin-top: 10px; height: 6px; }
.fg-kort--tel1 .fg-kort-noegle, .fg-kort--tel2 .fg-kort-noegle {
  flex-wrap: nowrap; gap: 12px; margin-top: 9px; font-size: .56rem; white-space: nowrap;
}
/* "Afvigelse fundet" laa oven paa den stiplede forbindelseslinje, saa den
   ikke kunne ses. Flyttet fri af den. */
/* Maalt: telefonen spaender 584-856 px. Kortet laa 254-506, altsaa 78 px
   helt uden for telefonen. Nu ca. 40 px ind over den, samme som tel2. */
.fg-kort--tel1 { position: absolute; left: 328px; top: 196px; z-index: 2; }
/* Laa 58 px ind over telefonen - lidt for langt. Nu ca. 40 px, saa de to
   kort gaar lige langt ind fra hver sin side. */
.fg-kort--tel2 { position: absolute; right: calc(50% - 348px); top: 14%; z-index: 2; }

/* ── Klipsen skal gribe om mint-fladens OEVERSTE kant ────────────────────
   Kvitteringen starter nu i toppen af fladen, saa boejlen straddler
   kanten frem for at sidde midt paa papiret. */
.fg-klips { top: -11px; }

/* ══ FORBINDELSEN · "Stroemmen" ══════════════════════════════════════════
   Den gamle sektion havde tolv tynde kurver, ti logokort og seks
   udfaldskort, hvor hver linje taendte og slukkede paa sit eget skema.
   Der var meget der bevaegede sig, og ingen af bevaegelserne betoed noget.

   Her er der ÉN bevaegelse paa hele sektionen: logostriben glider roligt
   forbi. Den skal ikke laeses brik for brik - den skal signalere maengde.
   Udfaldene under staar helt stille. */

.fl-stroem { max-width: 1180px; margin: 0 auto; }

.fl-baand {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* Enderne toner ud, saa striben ikke starter og stopper med en hard kant. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Striben indeholder logoerne TO gange. Den glider praecis 50 %, saa den
   anden halvdel staar hvor den foerste stod, og loopet er soemloest. */
.fl-stribe {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: fl-glid 34s linear infinite;
}
@keyframes fl-glid { to { transform: translateX(-50%); } }

.fl-brik { width: 74px; height: 74px; flex: 0 0 auto; background: #fff;
  /* Rammen var #eeece8 og tegnede et tydeligt gitter hen over baandet.
     Nu baerer skyggen kortene, og stregen ligger kun som en antydning. */
  border: 1px solid #f4f2ef; border-radius: 7px; box-shadow: 0 4px 16px rgba(26,25,22,.055);
  display: grid; place-items: center; }
.fl-brik img { width: 44px; height: 44px; object-fit: contain; }



@media (prefers-reduced-motion: reduce) {
  .fl-stribe { animation: none; }
}

@media (max-width: 900px) {
    .fl-brik { width: 62px; height: 62px; }
  .fl-brik img { width: 36px; height: 36px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DANMARKSKORTET · kunder markeret med naale paa en vippet flade
   Kortfladen ligger bagover i perspektiv, landet er et diagonalt prikgitter,
   og hver kunde staar som en lodret naal med portraet. Naalene er boern af
   den vippede flade, men drejes tilbage med praecis samme vinkel
   (--dk-haeld), saa de staar op fra kortet i stedet for at ligge ned med
   det. Derfor er der kun ét koordinatsystem: alt placeres i kortets egne
   procenter.
   ══════════════════════════════════════════════════════════════════════════ */

.dk-sek {
  background: #fff; padding: clamp(140px, 14.5vw, 232px) 0 0;
  --dk-ud: cubic-bezier(.22, 1, .36, 1);
  --dk-haeld: 62deg;
}

.dk-blok { max-width: 1180px; margin: 0 auto; }

/* ── Taelleren over kortet ── */
.dk-taeller {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.dk-tal-rk { position: relative; display: inline-block; }
.dk-tal {
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
  color: var(--t1); font-variant-numeric: tabular-nums;
  transition: color .7s var(--dk-ud);
}
/* Kort groent glimt i det oejeblik tallet skifter, derefter roligt tilbage. */
.dk-tal.dk-tik { color: var(--green-txt); transition-duration: .12s; }
.dk-etiket { font-size: .95rem; color: var(--t2); }

/* Tilgangen staar uden boks: et lille stigningsikon og en linje tekst, sat
   lodret midt for tallet i stedet for oppe i hjoernet. */
.dk-plus {
  position: absolute; left: 100%; top: 50%; margin-left: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--green-txt);
  font-family: var(--body); font-size: .8rem; font-weight: 600;
  line-height: 1; white-space: nowrap;
  opacity: 0; transform: translateY(-50%);
}
.dk-plus svg { width: 14px; height: 14px; flex: none; }
.dk-plus.dk-vis { animation: dk-plus-ind 1.6s var(--dk-ud) both; }
@keyframes dk-plus-ind {
  0%   { opacity: 0; transform: translateY(calc(-50% + 7px)); }
  16%  { opacity: 1; transform: translateY(-50%); }
  66%  { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% - 9px)); }
}

/* ── Fladen ──
   .dk-scene holder perspektivet og reserverer hoejden. Selve fladen ligger
   i bunden og foldes bagover om sin egen underkant, saa Sjaelland staar
   naermest og Skagen laengst vaek. Ingen overflow: hidden noget sted i
   kaeden - det ville fladtrykke 3D-laget og laegge naalene ned. */
.dk-scene {
  position: relative; width: 100%;
  max-width: 720px; margin: 0 auto;
  aspect-ratio: 720 / 425;
  perspective: 1150px;
  perspective-origin: 50% 46%;
}
.dk-plan {
  position: absolute; left: 50%; bottom: 0;
  width: 100%; aspect-ratio: 573 / 660;
  transform: translateX(-50%) rotateX(var(--dk-haeld));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.dk-lag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ── Landet som prikker ──
   Prikkerne tegnes i 14 baand sydfra, saa kortet ruller op mod beskueren
   foerste gang sektionen kommer i billedet. Ét <path> pr. baand, ikke
   2823 <circle>. --o er baandets hvilende gennemsigtighed; keyframen
   ender paa den, saa "both" holder den bagefter. */
.dk-land { fill: var(--green); --o: .28; }
.dk-kyst { fill: var(--green); --o: .46; }
.dk-baand { opacity: 0; }
.dk-bygget .dk-baand {
  animation: dk-baand-ind .8s var(--dk-ud) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes dk-baand-ind {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: var(--o, .3); transform: translateY(0); }
}

/* ── Byens fod og dens loebende puls ──
   Foden er foerste trin i naalens flow: den kommer frem, saa vokser stangen,
   saa traeder hovedet ind. Reveal ligger paa <g class="dk-by">, saa .dk-fod
   selv er fri til at reagere paa en forbindelse - to lag, saa de to
   bevaegelser ikke slaar hinanden ud. */
.dk-by { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.dk-naale-inde .dk-by {
  animation: dk-by-ind .5s var(--dk-ud) both;
  animation-delay: var(--d, 0ms);
}
@keyframes dk-by-ind {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
.dk-fod {
  fill: var(--green); opacity: .55;
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity .7s var(--dk-ud), transform .7s var(--dk-ud);
}
.dk-fod.dk-aktiv { opacity: 1; transform: scale(1.5); }

/* Buen faar sin farve fra en gradient sat i JS, saa den toner ud i begge
   ender. Derfor maa der IKKE staa stroke her - CSS ville slaa attributten. */
.dk-bue { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.dk-ring {
  fill: none; stroke: var(--green); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: dk-puls-ind 1.8s var(--dk-ud) both;
}
@keyframes dk-puls-ind {
  0%   { transform: scale(.6);  opacity: 0; }
  12%  {                        opacity: .55; }
  100% { transform: scale(5);   opacity: 0; }
}

/* ── Naalene ──
   .dk-naal er et punkt uden stoerrelse paa kortet. .dk-op drejes tilbage
   med hele haeldningen om sin underkant, saa den rejser sig fra netop det
   punkt, og skaleres med --m, der ophaever perspektivets forkortning. */
.dk-naal {
  position: absolute; left: var(--x); top: var(--y);
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.dk-op {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  /* .dk-naal er 0 px bred, saa en absolut placeret .dk-op ellers falder
     tilbage paa min-content og klemmer portraetraekken sammen, mens
     avatarerne bliver tegnet i fuld stoerrelse og flyder ud over kanten.
     max-content binder bredden til det, der faktisk staar i naalen. */
  width: max-content;
  transform: translateX(-50%) rotateX(calc(-1 * var(--dk-haeld))) scale(var(--m, 1));
  transform-origin: 50% 100%;
}

/* Trin 2: stangen vokser op af kortet, 300 ms efter byens fod kom frem.
   .dk-faerdig nulstiller forsinkelsen, naar opbygningen er ovre - ellers
   ville loeftet ved en forbindelse arve den samme ventetid. */
.dk-stang {
  width: 1.5px; height: 0;
  background: linear-gradient(to bottom, var(--green), rgba(31, 157, 85, .18));
  transition: height .75s var(--dk-ud);
}
.dk-naale-inde .dk-stang {
  height: var(--h, 60px);
  transition-delay: calc(var(--d, 0ms) + 300ms);
}
.dk-faerdig .dk-stang { transition-delay: 0ms; }
.dk-naal.dk-aktiv .dk-stang { height: calc(var(--h, 60px) + 9px); }

/* Trin 3: hovedet traeder ind, naar stangen staar. .dk-hoved staar for
   indflyvningen, .dk-flok for loeftet naar en forbindelse lander. */
.dk-hoved { opacity: 0; display: flex; flex-direction: column; align-items: center; width: max-content; }
.dk-naale-inde .dk-hoved {
  animation: dk-hoved-ind .55s var(--dk-ud) both;
  animation-delay: calc(var(--d, 0ms) + 800ms);
}
@keyframes dk-hoved-ind {
  from { opacity: 0; transform: translateY(9px) scale(.86); }
  to   { opacity: 1; transform: none; }
}

/* Portraetterne ligger i en bundle med let overlap, praecis som avatar-stakken
   i "Mindre administration. Mere kontrol." (.final-cta-avatar: -7px paa 34px).
   Overlappet er ca. en femtedel af bredden, saa hvert ansigt stadig er helt. */
.dk-flok { display: flex; align-items: center; transition: transform .7s var(--dk-ud); }
.dk-flok > * + * { margin-left: -7px; }
/* Stakken laeses forfra: den foerste ligger oeverst. */
.dk-flok > :nth-child(1) { z-index: 4; }
.dk-flok > :nth-child(2) { z-index: 3; }
.dk-flok > :nth-child(3) { z-index: 2; }
.dk-flok > :nth-child(4) { z-index: 1; }
.dk-av, .dk-flere { position: relative; }
.dk-naal.dk-aktiv .dk-flok { transform: translateY(-5px); }
.dk-av { position: relative; display: block; flex: 0 0 auto; }
.dk-av img, .dk-flere {
  display: block; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 6px 16px rgba(26, 25, 22, .16);
  background: #eceae6;
}
.dk-av img { object-fit: cover; }
.dk-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4fb886; border: 2px solid #fff;
}
.dk-flere {
  display: grid; place-items: center;
  background: var(--green-bg); color: var(--green-txt);
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: -.01em;
}

/* Bynavnet under portraettet: diskret, men laeseligt over prikkerne. */
.dk-bynavn {
  margin-top: 6px; padding: 2px 8px 3px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 8px rgba(26, 25, 22, .12);
  font-family: var(--body); font-size: .6rem; font-weight: 600;
  letter-spacing: .01em; color: var(--t2); white-space: nowrap;
  transition: color .5s var(--dk-ud);
}
.dk-naal.dk-aktiv .dk-bynavn { color: var(--green-txt); }


/* Mindre bevaegelse: kortet staar stille med et roligt net af forbindelser. */
.dk-sek.dk-stille .dk-fod { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .dk-plus, .dk-ring, .dk-baand, .dk-hoved, .dk-by { animation: none; }
  .dk-plus { opacity: 0; }
  .dk-baand { opacity: var(--o, .3); }
  .dk-hoved, .dk-by { opacity: 1; }
  .dk-stang { transition: none; }
}

/* Under 900 px er en vippet flade for flad til at kunne laeses. Kortet
   rettes op, portraetterne bliver mindre, og kun det foerste pr. by bliver
   staaende: floekkene ville ellers stoede sammen paa tvaers af naalene. */
@media (max-width: 900px) {
  .dk-sek { --dk-haeld: 40deg; }
  .dk-scene { aspect-ratio: 1180 / 1120; perspective: 1000px; }
  .dk-av img, .dk-flere,
  .dk-flok--sm .dk-av img, .dk-flok--sm .dk-flere,
    .dk-online, .dk-flok--lg .dk-online,   .dk-flere, .dk-flok--lg .dk-flere,   .dk-flok { gap: 4px; }
  .dk-flok > .dk-av ~ .dk-av { display: none; }
  .dk-bynavn { font-size: .54rem; padding: 1px 6px 2px; margin-top: 4px; }
  .dk-naale-inde .dk-stang { height: calc(var(--h, 60px) * .6); }
  .dk-naal.dk-aktiv .dk-stang { height: calc(var(--h, 60px) * .6 + 6px); }
}

/* Live-prikken skal slaa som et hjerte, saa man kan se at kunden er paa.
   VIGTIGT: prikken er position:absolute i hjoernet af avataren. Skriver man
   position:relative her, falder den ind i flowet og skubber avatarerne
   skaevt - det var praecis den fejl, der brod symmetrien. Kun animationen
   tilfoejes; placeringen roeres ikke. */
.dk-online { animation: dk-hjerte 2.6s var(--dk-ud) infinite both; }
.dk-online::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid #4fb886;
  animation: dk-hjerte-ring 2.6s var(--dk-ud) infinite both;
}
@keyframes dk-hjerte {
  0%, 12%, 24%, 100% { transform: scale(1); }
  6%, 18%            { transform: scale(1.22); }
}
@keyframes dk-hjerte-ring {
  0%       { transform: scale(.7); opacity: .55; }
  40%, 100%{ transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-online, .dk-online::after { animation: none; }
  .dk-online::after { opacity: 0; }
}

/* ══ KONTRAKTANALYSE-KORT (Vilkårene) ═══════════════════════════════════
   Rigtig DOM, rigtige CSS-keyframes og inline Lucide-SVG - ingen canvas,
   GIF eller rastergrafik, saa tekst og ikoner er knivskarpe. Sitet har
   intet build-step, saa React/Motion-specen er oversat til DOM + CSS;
   struktur, koreografi og 4/8 px-systemet er uaendret.

   Kortet sidder i NEDERSTE VENSTRE HJOERNE og fylder under halvdelen af
   fotoet, saa motivet stadig dominerer.
   FAST bredde. Kun hoejden vokser (46 -> 300).
   Hele sekvensen LOOPER: bygges op, holdes, toner ud, forfra.
   Ingen blur, ingen glassmorphism, ingen scale-popping.
   Startes af .visible fra .reveal-observeren i js/main.js. */

/* Faelles vaert for begge animerede kort, saa trioen staar lige. */
.fg-trio-billede { min-height: 436px; }
@media (max-width: 900px) { .fg-trio-billede { aspect-ratio: auto; min-height: 436px; } }
/* height:100% kan ikke oploeses mod en foraelder hvis hoejde kun kommer fra
   min-height - fotoet stoppede derfor foer bunden. */
.fg-trio-billede img { position: absolute; inset: 0; }

.ka-ramme {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  pointer-events: none;
  --ka-loop: 9s;
  --ka-ud: cubic-bezier(.22, 1, .36, 1);
}

.ka-kort {
  width: 210px;
  height: 40px;                    /* kun denne vaerdi animeres */
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e3de;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(20,20,18,.03), 0 10px 24px rgba(20,20,18,.07);
  color: #1d1d1b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}
.fg-trio-kort.visible .ka-kort { animation: ka-kort var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-kort {
  /* 100 % er IDENTISK med 0 %, saa selve loop-wrappet ikke aendrer noget.
     Kollapset sker ved 82-86 %, mens kortet er helt usynligt. Ellers sprang
     height og transform i wrappet og gav et glimt. */
  0%       { opacity: 0; transform: translateY(8px); height: 40px; }
  4%       { opacity: 1; transform: none;            height: 40px; }
  11%, 76% { opacity: 1; transform: none;            height: 266px; }
  82%      { opacity: 0; transform: none;            height: 266px; }
  86%,100% { opacity: 0; transform: translateY(8px); height: 40px; }
}

/* ── Hoved ───────────────────────────────────────────────────────────── */
.ka-hoved {
  height: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.ka-titelgruppe { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ka-fil-ik { width: 14px; height: 14px; flex: 0 0 auto; color: #494945; }
.ka-titel {
  font-size: 9.5px; line-height: 1; font-weight: 600;   /* hele filnavnet skal kunne staa uden afkortning */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ka-handlinger { display: flex; align-items: center; gap: 9px; margin-left: 12px; opacity: 0; }
.fg-trio-kort.visible .ka-handlinger { animation: ka-hoejre var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-hoejre {
  0%, 5%   { opacity: 0; transform: translateX(5px); }
  8%, 76%  { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateX(5px); }
}
.ka-ik-knap { width: 17px; height: 17px; display: grid; place-items: center; color: #4c4c48; }
.ka-ik-knap svg { width: 13px; height: 13px; }

/* ── Seere ───────────────────────────────────────────────────────────── */
.ka-seere {
  min-height: 32px; margin: 0 12px 5px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
}
.fg-trio-kort.visible .ka-seere { animation: ka-op var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-op {
  0%, 5%   { opacity: 0; transform: translateY(5px); }
  10%, 76% { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateY(5px); }
}
.ka-avatarer { display: flex; align-items: center; padding-left: 2px; }
.ka-avatar {
  position: relative; width: 22px; height: 22px; margin-left: -6px;
  border: 1.5px solid #fff; border-radius: 999px; background: #eeeeeb;
}
.ka-avatar:first-child { margin-left: 0; }
.ka-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.ka-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 7px; height: 7px;
  border: 1.5px solid #fff; border-radius: 999px; background: #34c759;
}
.ka-seere-tekst { display: flex; flex-direction: column; gap: 2px; }
.ka-seere-tekst strong { font-size: 9px; line-height: 1.15; font-weight: 600; }
.ka-seere-tekst span  { color: #77756f; font-size: 7.5px; line-height: 1.2; }

/* ── Analysefladen: INGEN graa flade her - kun de tre fund er graa ────── */
.ka-analyse { margin: 0 12px 10px; opacity: 0; }
.fg-trio-kort.visible .ka-analyse { animation: ka-op var(--ka-loop) var(--ka-ud) infinite both; }
.ka-analyse-hoved { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ka-amber { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ka-amber-ik { width: 14px; height: 14px; flex: 0 0 auto; color: #638654; }
.ka-amber-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ka-amber-tekst strong { font-size: 8.5px; line-height: 1.15; font-weight: 600; }
.ka-amber-tekst span   { color: #77756f; font-size: 7px; line-height: 1.15; }
.ka-meta { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ka-pdf {
  color: #506e9d; font-size: 7px; font-weight: 600; line-height: 1;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.ka-draft {
  min-width: 34px; height: 19px; padding: 0 8px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #0a84ff; color: #fff;
  font-size: 7px; line-height: 1; font-weight: 600;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.08);
}

/* Progress: venstre mod hoejre */
.ka-spor {
  height: 2.5px; margin: 8px 0 7px;
  border-radius: 999px; background: #e6e5e0; overflow: hidden;
}
.ka-spor-fyld {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; background: #91b17f;
  transform: scaleX(0); transform-origin: left center;
}
.fg-trio-kort.visible .ka-spor-fyld { animation: ka-spor var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-spor {
  0%, 9%   { transform: scaleX(0); }
  25%, 82% { transform: scaleX(1); }
  86%,100% { transform: scaleX(0); }
}

/* ── Fund: den graa flade ligger HER, uden yderramme, naesten firkantet ─ */
.ka-fundliste { display: flex; flex-direction: column; gap: 4px; }
.ka-fund {
  min-height: 31px; padding: 5px 8px;
  display: grid; grid-template-columns: 15px minmax(56px,1fr) auto 14px;
  align-items: center; column-gap: 7px;
  background: #f9f9f9;            /* samme graa som integrationer og jura-GDPR */
  border: 0;
  border-radius: 4px;             /* naesten firkantet i siderne */
  opacity: 0;
}
/* Forskydningen ligger i keyframes, IKKE i animation-delay: en delay paa en
   uendelig animation forskyder elementets cyklus permanent i forhold til
   kortets, saa et fund stod tilbage paa fuld opacity efter kortet var fadet
   ud - det gav et glimt ved hver loop-overgang. Nu deler alt én tidslinje. */
.fg-trio-kort.visible .ka-fund:nth-child(1) { animation: ka-fund1 var(--ka-loop) var(--ka-ud) infinite both; }
.fg-trio-kort.visible .ka-fund:nth-child(2) { animation: ka-fund2 var(--ka-loop) var(--ka-ud) infinite both; }
.fg-trio-kort.visible .ka-fund:nth-child(3) { animation: ka-fund3 var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-fund1 { 0%,11% { opacity:0; transform:translateY(6px) } 15%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:translateY(6px) } }
@keyframes ka-fund2 { 0%,15.2% { opacity:0; transform:translateY(6px) } 19.2%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:translateY(6px) } }
@keyframes ka-fund3 { 0%,19.4% { opacity:0; transform:translateY(6px) } 23.4%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:translateY(6px) } }
.ka-fund-ik { width: 13px; height: 13px; color: #595954; }
.ka-fund-ik.warning { color: #886329; }
.ka-fund-tekst { display: flex; flex-direction: column; gap: 1px; }
.ka-fund-par    { color: #8a8882; font-size: 6px; line-height: 1; font-weight: 600; }
.ka-fund-navn   { color: #6f6d67; font-size: 7px; line-height: 1.15; }
.ka-fund-vaerdi { color: #222220; font-size: 8.5px; line-height: 1; font-weight: 600; white-space: nowrap; }
.ka-fund-tjek, .ka-res-tjek {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border-radius: 999px; background: #e6f1df; color: #4a723d;
}
.ka-fund-tjek svg, .ka-res-tjek svg { width: 9px; height: 9px; }
.ka-fund-tjek { opacity: 0; }
.fg-trio-kort.visible .ka-fund:nth-child(1) .ka-fund-tjek { animation: ka-tjek1 var(--ka-loop) var(--ka-ud) infinite both; }
.fg-trio-kort.visible .ka-fund:nth-child(2) .ka-fund-tjek { animation: ka-tjek2 var(--ka-loop) var(--ka-ud) infinite both; }
.fg-trio-kort.visible .ka-fund:nth-child(3) .ka-fund-tjek { animation: ka-tjek3 var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-tjek1 { 0%,14% { opacity:0; transform:scale(.72) } 17%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:scale(.72) } }
@keyframes ka-tjek2 { 0%,18.2% { opacity:0; transform:scale(.72) } 21.2%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:scale(.72) } }
@keyframes ka-tjek3 { 0%,22.4% { opacity:0; transform:scale(.72) } 25.4%,76% { opacity:1; transform:none } 82% { opacity:0; transform:none } 86%,100% { opacity:0; transform:scale(.72) } }

/* Resultatet kommer efter tredje fund */
.ka-resultat {
  min-height: 23px; margin-top: 6px; padding: 5px 8px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 4px; background: #e6f1df;
  color: #496c3f; font-size: 8px; line-height: 1; font-weight: 600;
  opacity: 0;
}
.fg-trio-kort.visible .ka-resultat { animation: ka-res var(--ka-loop) var(--ka-ud) infinite both; }
@keyframes ka-res {
  0%, 26%  { opacity: 0; transform: translateY(5px); }
  30%, 76% { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateY(5px); }
}

@media (max-width: 520px) {
  .ka-kort { width: min(210px, calc(100vw - 60px)); }
  .ka-meta { gap: 6px; }
  .ka-fund { grid-template-columns: 14px minmax(50px,1fr) auto 14px; column-gap: 6px; }
}

/* Mindre bevaegelse: sluttilstanden med det samme, ingen loop */
@media (prefers-reduced-motion: reduce) {
  .ka-kort { height: 266px; opacity: 1; }
  .fg-trio-kort.visible .ka-kort,
  .fg-trio-kort.visible .ka-handlinger,
  .fg-trio-kort.visible .ka-seere,
  .fg-trio-kort.visible .ka-analyse,
  .fg-trio-kort.visible .ka-fund,
  .fg-trio-kort.visible .ka-fund:nth-child(1),
  .fg-trio-kort.visible .ka-fund:nth-child(2),
  .fg-trio-kort.visible .ka-fund:nth-child(3),
  .fg-trio-kort.visible .ka-fund-tjek,
  .fg-trio-kort.visible .ka-fund:nth-child(1) .ka-fund-tjek,
  .fg-trio-kort.visible .ka-fund:nth-child(2) .ka-fund-tjek,
  .fg-trio-kort.visible .ka-fund:nth-child(3) .ka-fund-tjek,
  .fg-trio-kort.visible .ka-resultat,
  .fg-trio-kort.visible .ka-spor-fyld { animation: none; opacity: 1; transform: none; }
  .fg-trio-kort.visible .ka-spor-fyld { transform: scaleX(1); }
}

/* ══ PRISNIVEAUER (Forhandlingen) ═══════════════════════════════════════
   Bevidst en ANDEN FORM end kontraktanalyse-kortet, ikke samme anatomi med
   nyt indhold. Referencen er et hoejt, smalt kort med graa raekker, mint-
   footer og voksende hoejde. Denne er:

     - et BREDT, LAVT panel (258 x 146) i stedet for hoejt og smalt
     - et DIAGRAM med tre prisniveauer paa faelles skala, ikke en raekkeliste
     - INGEN graa raekkeflader, INGEN mint-footer, INGEN voksende hoejde
     - hairline-skillelinjer og et maalt gab i stedet for kortflader

   Den kommer ind fra HOEJRE og staar i hoejre hjoerne.
   Fortaellingen: jeres pris ligger over baade markedet og den bedste
   aftale i branchen, og gabet er det konkrete, der kan forhandles om.
   Samme 9s-rytme som referencen, saa de laeses som ét system.
   Hver keyframes 100 % er identisk med dens 0 %, saa wrappet er en no-op. */

.fp-lag {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  pointer-events: none;
  --fp-loop: 9s;
  --fp-ud: cubic-bezier(.22, 1, .36, 1);
}

.fp-panel {
  width: 210px;
  padding: 13px 13px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(20,20,18,.035), 0 10px 26px rgba(20,20,18,.08);
  color: #1d1d1b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}
.fg-trio-kort.visible .fp-panel { animation: fp-panel var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-panel {
  0%       { opacity: 0; transform: translateX(22px); }
  5%, 76%  { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateX(22px); }
}

/* ── Toplinje: ren tekst, ingen ikonbrik ─────────────────────────────── */
/* Ingen skillelinjer: rytmen baeres af spacing alene. */
.fp-top { margin-bottom: 12px; opacity: 0; }
.fp-hoved { display: flex; align-items: center; gap: 7px; }
.fp-hoved-ik { width: 14px; height: 14px; flex: 0 0 auto; color: #494945; }
.fp-mere { width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; color: #b0aea8; }
.fg-trio-kort.visible .fp-top { animation: fp-ind var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-ind {
  0%, 6%   { opacity: 0; transform: translateX(8px); }
  11%, 76% { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateX(8px); }
}
.fp-titel {
  display: block;
  font-size: 11.5px; line-height: 1.15; font-weight: 600;
  letter-spacing: -.01em; color: #1d1d1b;
}
.fp-lev {
  display: block; margin-top: 2px; margin-left: 21px;   /* = ikon 14 + gap 7 */
  font-size: 9px; line-height: 1.15; font-weight: 500; color: #6f6d67;
}
.fp-brod {
  margin: 6px 0 0;
  font-size: 8px; line-height: 1.45; color: #86847e;
}

/* ── Diagrammet: tre niveauer paa faelles skala ──────────────────────── */
.fp-plot { position: relative; }
.fp-niv {
  position: relative;
  display: grid; grid-template-columns: 13px 64px 57px 32px;
  align-items: center; column-gap: 6px;
  height: 22px;
}
.fp-niv::before {
  content: ""; position: absolute; inset: 1.5px -8px;
  background: #f9f9f9;            /* samme graa som .ka-fund */
  border-radius: 4px;             /* naesten firkantet i siderne */
}
.fp-niv > * { position: relative; }   /* maler over feltet, uden z-index */
.fp-ik { width: 12px; height: 12px; color: #1d1d1b; }
.fp-navn { font-size: 7px; line-height: 1; color: #6f6d67; white-space: nowrap; }
.fp-spor { position: relative; height: 3px; border-radius: 999px; background: #f0efeb; }
.fp-fyld {
  display: block; height: 100%; width: var(--w);
  border-radius: 999px; transform-origin: left center; transform: scaleX(0);
}
.fp-prik {
  position: absolute; top: 50%; left: var(--w);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 999px; border: 1.5px solid #fff;
  opacity: 0;
}
.fp-tal {
  font-size: 9px; line-height: 1; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; opacity: 0;
}
/* Farverne baerer betydningen: for hoejt, marked, maal */
.fp-hoej .fp-fyld, .fp-hoej .fp-prik { background: #d8938c; }
.fp-hoej .fp-tal   { color: #a4413a; }
.fp-mid  .fp-fyld, .fp-mid  .fp-prik { background: #c2c0ba; }
.fp-lav  .fp-fyld, .fp-lav  .fp-prik { background: #a9c497; }
.fp-lav  .fp-tal   { color: #4a723d; }

.fg-trio-kort.visible .fp-niv:nth-child(1) .fp-fyld { animation: fp-str1 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(2) .fp-fyld { animation: fp-str2 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(3) .fp-fyld { animation: fp-str3 var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-str1 { 0%,13%   { transform:scaleX(0) } 22%,82% { transform:scaleX(1) } 86%,100% { transform:scaleX(0) } }
@keyframes fp-str2 { 0%,17%   { transform:scaleX(0) } 26%,82% { transform:scaleX(1) } 86%,100% { transform:scaleX(0) } }
@keyframes fp-str3 { 0%,21%   { transform:scaleX(0) } 30%,82% { transform:scaleX(1) } 86%,100% { transform:scaleX(0) } }

.fg-trio-kort.visible .fp-niv:nth-child(1) .fp-prik { animation: fp-prik1 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(2) .fp-prik { animation: fp-prik2 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(3) .fp-prik { animation: fp-prik3 var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-prik1 { 0%,21%   { opacity:0; transform:scale(.5) } 24% { opacity:1; transform:scale(1.25) } 27%,82% { opacity:1; transform:scale(1) } 86%,100% { opacity:0; transform:scale(.5) } }
@keyframes fp-prik2 { 0%,25%   { opacity:0; transform:scale(.5) } 28% { opacity:1; transform:scale(1.25) } 31%,82% { opacity:1; transform:scale(1) } 86%,100% { opacity:0; transform:scale(.5) } }
@keyframes fp-prik3 { 0%,29%   { opacity:0; transform:scale(.5) } 32% { opacity:1; transform:scale(1.25) } 35%,82% { opacity:1; transform:scale(1) } 86%,100% { opacity:0; transform:scale(.5) } }

.fg-trio-kort.visible .fp-niv:nth-child(1) .fp-tal { animation: fp-tal1 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(2) .fp-tal { animation: fp-tal2 var(--fp-loop) var(--fp-ud) infinite both; }
.fg-trio-kort.visible .fp-niv:nth-child(3) .fp-tal { animation: fp-tal3 var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-tal1 { 0%,22% { opacity:0; transform:translateX(4px) } 26%,82% { opacity:1; transform:none } 86%,100% { opacity:0; transform:translateX(4px) } }
@keyframes fp-tal2 { 0%,26% { opacity:0; transform:translateX(4px) } 30%,82% { opacity:1; transform:none } 86%,100% { opacity:0; transform:translateX(4px) } }
@keyframes fp-tal3 { 0%,30% { opacity:0; transform:translateX(4px) } 34%,82% { opacity:1; transform:none } 86%,100% { opacity:0; transform:translateX(4px) } }

/* Gabet mellem markedet og jeres pris: selve forhandlingsrummet */
.fp-gab {
  /* Klammen spaender fra markeds-prikken til jeres-pris-prikken INDE i
     sporet. Kolonnerne er faste px, saa kanterne regnes eksakt og behoever
     ikke blande procent og px: plottets indre bredde er 184 px
     (13+6+64+6+57+6+32), sporet starter 89 px inde og er 57 px bredt.
     Venstre kant = 89 + 62 % x 57 = 124,3 px. Hoejre = 184-146 = 38 px. */
  position: absolute;
  left: 124.3px; right: 38px;
  top: 11px; height: 22px;
  opacity: 0;
}
.fp-gab i {
  position: absolute; inset: 0;
  border-left: 1px dashed #c9b0ad;
  border-right: 1px dashed #c9b0ad;
  border-bottom: 1px dashed #c9b0ad;
  border-radius: 0 0 3px 3px;
}
.fg-trio-kort.visible .fp-gab { animation: fp-gab var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-gab {
  0%, 36%  { opacity: 0; transform: scaleY(.6); }
  41%, 82% { opacity: 1; transform: none; }
  86%,100% { opacity: 0; transform: scaleY(.6); }
}

/* ── Summen: tallet taeller op, ingen mint-flade ─────────────────────── */
.fp-sum {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: 11px;
  opacity: 0;
}
.fg-trio-kort.visible .fp-sum { animation: fp-sum var(--fp-loop) var(--fp-ud) infinite both; }
@keyframes fp-sum {
  0%, 44%  { opacity: 0; transform: translateX(8px); }
  49%, 76% { opacity: 1; transform: none; }
  82%      { opacity: 0; transform: none; }
  86%,100% { opacity: 0; transform: translateX(8px); }
}
.fp-sum-tal { display: inline-grid; }
.fp-sum-tal > b {
  grid-area: 1 / 1;
  font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: -.01em;
  color: #4a723d; font-variant-numeric: tabular-nums; opacity: 0;
}
.fg-trio-kort.visible .fp-sum-tal > b:nth-child(1) { animation: fp-s1 var(--fp-loop) steps(1) infinite both; }
.fg-trio-kort.visible .fp-sum-tal > b:nth-child(2) { animation: fp-s2 var(--fp-loop) steps(1) infinite both; }
.fg-trio-kort.visible .fp-sum-tal > b:nth-child(3) { animation: fp-s3 var(--fp-loop) steps(1) infinite both; }
@keyframes fp-s1 { 0%,48% { opacity:0 } 49%,52% { opacity:1 } 53%,100% { opacity:0 } }
@keyframes fp-s2 { 0%,52% { opacity:0 } 53%,56% { opacity:1 } 57%,100% { opacity:0 } }
@keyframes fp-s3 { 0%,56% { opacity:0 } 57%,82% { opacity:1 } 86%,100% { opacity:0 } }
.fp-sum-tekst { font-size: 8px; line-height: 1; font-weight: 500; color: #6f6d67; }

@media (max-width: 520px) {
  .fp-panel { width: min(210px, calc(100vw - 48px)); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-panel { opacity: 1; }
  .fg-trio-kort.visible .fp-panel,
  .fg-trio-kort.visible .fp-top,
  .fg-trio-kort.visible .fp-gab,
  .fg-trio-kort.visible .fp-sum,
  .fg-trio-kort.visible .fp-niv:nth-child(1) .fp-fyld,
  .fg-trio-kort.visible .fp-niv:nth-child(2) .fp-fyld,
  .fg-trio-kort.visible .fp-niv:nth-child(3) .fp-fyld,
  .fg-trio-kort.visible .fp-niv:nth-child(1) .fp-prik,
  .fg-trio-kort.visible .fp-niv:nth-child(2) .fp-prik,
  .fg-trio-kort.visible .fp-niv:nth-child(3) .fp-prik,
  .fg-trio-kort.visible .fp-niv:nth-child(1) .fp-tal,
  .fg-trio-kort.visible .fp-niv:nth-child(2) .fp-tal,
  .fg-trio-kort.visible .fp-niv:nth-child(3) .fp-tal,
  .fg-trio-kort.visible .fp-sum-tal > b,
  .fg-trio-kort.visible .fp-sum-tal > b:nth-child(1),
  .fg-trio-kort.visible .fp-sum-tal > b:nth-child(2),
  .fg-trio-kort.visible .fp-sum-tal > b:nth-child(3) { animation: none; opacity: 1; transform: none; }
  .fg-trio-kort.visible .fp-niv .fp-fyld { transform: scaleX(1); }
  .fg-trio-kort.visible .fp-sum-tal > b:nth-child(1),
  .fg-trio-kort.visible .fp-sum-tal > b:nth-child(2) { opacity: 0; }
}