/* ============================================================
   KLIENTFLADEN: /velkommen og /forbind

   Bygget 8/8-2026 saa de to sider taler SAMME sprog som de to
   flader Bilal selv har tegnet forlaeg til:

     /beregn      (beregn-flow.css)  -> app-opbygningen:
                  venstre skinne med trinnene, ét kort i midten
                  ad gangen, levende resultat til hoejre, fast
                  handlingsbjaelke i bunden.
     /min-pension (minpension.css)   -> stemmen: pille, Fraunces-
                  overskrift, rolige hvide kort (18 px radius,
                  1 px kant, bloed skygge), ét dybt petrol-felt
                  til hovedtallet, sektionslinje ud til kanten.

   Foer i dag laa begge sider paa kontrolrum.css, og efter at
   /beregn og /min-pension flyttede, var de to de eneste tilbage.
   Rejsen forbind -> beregn -> overblik saa altsaa ud som tre
   forskellige produkter. Den her fil er den faelles flade.

   FARVER OG SKRIFT kommer fra pensia-tokens.css. Intet hardkodet
   ud over de faa steder hvor et token ikke findes (og de er
   noteret der hvor de staar).

   Alt er scopet under body.klientflade, og arket indlaeses SIDST
   i head, saa reglerne vinder over sidernes egne style-blokke
   uden !important.
   ============================================================ */

/* ============================================================
   1. FLADE OG FAELLES VARIABLE
   ============================================================ */
body.klientflade {
  --kf-kant: var(--kant);
  --kf-kant-blod: var(--kant-blod);
  --kf-sunk: var(--flade-nedton);
  --kf-tint: var(--handling-lys);
  --kf-tint-kant: #d8ecec;   /* teal-tint har ingen kant-token */
  --kf-r: 18px;
  --kf-r-stor: 26px;
  --kf-r-md: 14px;
  --kf-r-sm: 10px;
  --kf-pad: 22px;
  --kf-hoved: 60px;          /* topbarens hoejde */
  --kf-sh: 0 1px 2px rgba(12,34,48,.04), 0 12px 28px -18px rgba(12,34,48,.22);
  --kf-sh-let: 0 1px 2px rgba(12,34,48,.05);
  --kf-ring: 0 0 0 3px rgba(11,127,131,.16);
  --kf-ease: cubic-bezier(.22,.9,.28,1);

  margin: 0;
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: var(--flade-side);
  background-image:
    radial-gradient(900px 460px at 88% -6%, rgba(11,127,131,.10) 0%, rgba(11,127,131,0) 62%),
    radial-gradient(760px 420px at 2% 2%, rgba(0,55,85,.08) 0%, rgba(0,55,85,0) 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
/* Velkommen havde sin egen faste gradient-flade i ::before. Den er
   erstattet af baggrunden ovenfor, ellers ligger der to lag paa hinanden. */
body.klientflade::before { content: none; }

/* Overskrifterne er Fraunces, som paa /min-pension. Det er den stemme
   klienten moeder hele vejen; /beregn er bevidst Inter, fordi den er en
   formular og ikke en fortaelling. */
body.klientflade h1,
body.klientflade h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
}
body.klientflade h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 1rem;
}
body.klientflade .tal,
body.klientflade .kf-tal {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   2. TOPBAR
   Ét baand: ordmaerke til venstre, rejsen i midten, kontoen til
   hoejre. Praecis som /beregn efter Bilals forlaeg.
   ============================================================ */
body.klientflade .topbar {
  position: sticky; top: 0; z-index: var(--z-topbar, 50);
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(226,233,238,.9);
  max-width: none; margin: 0; padding: 0;
}
body.klientflade .topbar-inner {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  max-width: none; margin: 0; padding: 0 28px;
  height: var(--kf-hoved);
}
body.klientflade .topbar .logo,
body.klientflade .topbar .logo.brand {
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  color: var(--maerke); letter-spacing: -.025em; line-height: 1;
  text-decoration: none;
}
body.klientflade .topbar .logo .prik { color: var(--handling); }
/* Broedkrummen og tastaturhintene hoerte til Kontrolrummet. */
body.klientflade .kr-sti,
body.klientflade .kr-tast { display: none; }

/* Rejsen (flow.js) staar aegte centreret i bjaelken. */
body.klientflade .flow-i-topbar {
  position: absolute; left: 50%; translate: -50% 0; margin: 0;
}
body.klientflade .flow-i-topbar .flow-rail-liste {
  background: none; border: 0; border-radius: 0; padding: 0;
}
body.klientflade .flow-i-topbar .flow-top { padding: 5px 10px; }
body.klientflade .flow-i-topbar .flow-trin.aktiv .flow-top { border-radius: 99px; }
/* Hintlinjen under rejsen hoerer til den brede udgave. I bjaelken er der
   ikke plads, og trinnene siger det samme. */
body.klientflade .flow-i-topbar .flow-hint { display: none; }
/* Er bjaelken endnu ikke flyttet op (fx foer flow.js har koert), skal den
   ikke staa som en loes stribe midt i indholdet. */
body.klientflade #flow-rail:not(.flow-i-topbar) { display: none; }

body.klientflade .topnav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
body.klientflade .bv-nav { position: relative; margin-left: auto; }
body.klientflade .topnav .bv-nav { margin-left: 0; }
body.klientflade .topbar .knap-ghost.knap-lille {
  height: 34px; min-height: 0; padding: 0 14px; border-radius: var(--kf-r-sm);
  border: 1px solid var(--kf-kant); background: #fff;
  font: 500 .82rem var(--sans); color: var(--tekst-dim);
  display: inline-flex; align-items: center; white-space: nowrap;
}
body.klientflade .topbar .knap-ghost.knap-lille:hover {
  border-color: var(--handling); color: var(--handling-tekst);
}
@media (max-width: 1250px) {
  body.klientflade .flow-i-topbar { position: static; translate: none; margin-left: auto; }
  body.klientflade .topbar .knap-ghost.knap-lille { display: none; }
}

/* ============================================================
   3. HILSEN: pille + Fraunces-overskrift + linje
   Samme aabning som hvert afsnit paa /min-pension.
   ============================================================ */
body.klientflade .kf-pille {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--handling-tekst); background: var(--handling-lys);
  padding: 5px 12px; border-radius: var(--r-pille);
}
body.klientflade .kf-hero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.3rem);
  margin: 12px 0 0; max-width: 20ch;
}
body.klientflade .kf-hero p {
  margin: 9px 0 0; font-size: .95rem; color: var(--tekst-dim); max-width: 62ch;
}

/* ============================================================
   4. KORT
   ============================================================ */
body.klientflade .kf-kort,
body.klientflade .kort {
  background: var(--flade-kort);
  border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r);
  box-shadow: var(--kf-sh);
  padding: var(--kf-pad) 24px;
}
body.klientflade .kf-kort > h3 + p,
body.klientflade .kort .under {
  font-size: .82rem; color: var(--tekst-dim); margin-top: 4px; line-height: 1.5;
}
/* Kortets overskrift med haarfin linje ud til hoejre kant. */
body.klientflade .kf-sh {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
body.klientflade .kf-sh b {
  flex: 0 0 auto; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-dim);
}
body.klientflade .kf-sh span { flex: 0 0 auto; max-width: 100%; font-size: .8rem; color: var(--tekst-dim); }
body.klientflade .kf-sh::after {
  content: ""; flex: 1 0 24px; height: 1px; background: var(--kf-kant); align-self: center;
}

/* Maerkater */
body.klientflade .maerke,
body.klientflade .kf-maerke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 9px;
  font: 700 .72rem var(--sans); letter-spacing: 0; text-transform: none;
  background: var(--kf-sunk); color: var(--tekst-dim); white-space: nowrap;
}
body.klientflade .maerke-groen,
body.klientflade .kf-maerke.klar { background: var(--ok-lys); color: var(--ok); }
body.klientflade .maerke-guld,
body.klientflade .kf-maerke.henter { background: var(--fremhaev-lys); color: var(--fremhaev-tekst); }

/* Knapper: samme runding og hoejde overalt paa fladen. */
body.klientflade .knap {
  border-radius: var(--kf-r-sm); font-weight: 600; letter-spacing: 0;
  transition: background var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
body.klientflade .knap-primaer { background: var(--handling); color: #fff; border-color: transparent; }
body.klientflade .knap-primaer:hover:not(:disabled) { background: var(--handling-dyb); }
body.klientflade .knap-mitid { background: #0a589e; color: #fff; border-color: transparent; }
body.klientflade .knap-tekst { color: var(--tekst-dim); }
body.klientflade .knap-tekst:hover { color: var(--handling-tekst); }

/* ============================================================
   ============================================================
   /FORBIND
   ============================================================
   ============================================================ */

/* ---------- 5. SKALLEN: tre spalter som /beregn ---------- */
body.kf-forbind .wrap,
body.kf-forbind main.wrap {
  max-width: 1440px; margin: 0 auto; padding: 24px 28px 128px;
}
body.kf-forbind .ff {
  display: grid; grid-template-columns: 250px minmax(0,1fr) 348px;
  gap: 24px; align-items: start; margin-top: 16px;
}
body.kf-forbind .ff > * { min-width: 0; }

/* Heroen staar over de tre spalter og er holdt lav med vilje: hvert punkt den
   fylder, skubber tredje kildekorts knap taettere paa skaermkanten. */
body.kf-forbind .kf-hero { padding: 2px 0 0; }
body.kf-forbind .kf-hero h1 { max-width: 24ch; margin-top: 10px; }
body.kf-forbind .kf-hero p { margin-top: 7px; max-width: 96ch; }

/* Tryghedslinjen: tre smalle piller, ikke tre kasser. */
/* Én linje, ikke tre piller: piller fylder 36 px, linjen 20, og hver px her
   skubber tredje kildekorts knap taettere paa skaermkanten. */
/* Delt med /regnemaskine, som bruger den samme linje under sin hero. Reglerne
   staar i /forbind-afsnittet fordi det var her de blev tegnet foerst; de er
   ikke forbind-specifikke. Samme gaelder resultatpanelet og fakta-gitteret
   laengere nede, som ogsaa baerer begge flader. Udvidet 9/8-2026. */
body.kf-forbind .tryg,
body.kf-regne .tryg {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px;
  font-size: .82rem; color: var(--tekst-dim);
}
body.kf-forbind .tryg span,
body.kf-regne .tryg span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; background: none; border: 0;
}
body.kf-forbind .tryg svg,
body.kf-regne .tryg svg { width: 15px; height: 15px; color: var(--handling); flex: none; }

/* ---------- 6. VENSTRE: KILDE-SKINNEN ---------- */
body.kf-forbind .ff-rail { position: sticky; top: calc(var(--kf-hoved) + 18px); }
body.kf-forbind .ff-rail-h {
  margin: 0 0 12px 4px; font-size: 11px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--tekst-svag); font-weight: 700;
}
body.kf-forbind .ff-liste { display: flex; flex-direction: column; gap: 2px; position: relative; }
body.kf-forbind .ff-skinne {
  position: absolute; left: 19px; top: 26px; bottom: 26px; width: 2px;
  background: var(--kf-kant); border-radius: 2px;
}
body.kf-forbind .ff-skinne-fyld {
  position: absolute; left: 19px; top: 26px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--handling), #7fc4ba);
  border-radius: 2px; transition: height .5s var(--kf-ease);
}
body.kf-forbind .ff-t {
  position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 10px 12px; border: 1px solid transparent; background: transparent;
  border-radius: var(--kf-r-md); cursor: pointer; font: inherit; color: inherit; width: 100%;
  transition: background .25s var(--kf-ease);
}
body.kf-forbind .ff-t:hover { background: rgba(255,255,255,.7); }
body.kf-forbind .ff-t.nu {
  background: var(--flade-kort); box-shadow: var(--kf-sh-let); border-color: var(--kf-kant);
}
body.kf-forbind .ff-prik {
  flex: none; width: 16px; height: 16px; margin: 3px 0 0 3px; border-radius: 50%;
  background: var(--flade-kort); border: 2px solid var(--kant-staerk); z-index: 1;
  display: grid; place-items: center; transition: all .3s var(--kf-ease);
}
body.kf-forbind .ff-t.nu .ff-prik { border-color: var(--handling); box-shadow: 0 0 0 4px var(--handling-lys); }
body.kf-forbind .ff-t.klar .ff-prik { background: var(--handling); border-color: var(--handling); }
body.kf-forbind .ff-t.klar .ff-prik::after {
  content: ""; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg) translate(-1px,-1px);
}
/* Kilden er ved at blive hentet: prikken pulserer, saa skinnen ogsaa
   viser at der sker noget, selv om man kigger paa midterkortet. */
body.kf-forbind .ff-t.henter .ff-prik {
  border-color: var(--fremhaev); box-shadow: 0 0 0 4px var(--fremhaev-lys);
  animation: kf-puls 1.4s var(--kf-ease) infinite;
}
@keyframes kf-puls { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
body.kf-forbind .ff-t-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.kf-forbind .ff-t-tekst b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
/* --tekst-dim, IKKE --tekst-svag. Linjen baerer kildens status og dens beloeb,
   altsaa information, og --tekst-svag maaler 2,2:1 mod kortet. Maalt 8/8-2026. */
body.kf-forbind .ff-t-tekst span {
  font-size: 12px; color: var(--tekst-dim); line-height: 1.35;
  font-variant-numeric: tabular-nums lining-nums;
}
body.kf-forbind .ff-t.klar .ff-t-tekst span { color: var(--handling-tekst); font-weight: 600; }
body.kf-forbind .ff-t.henter .ff-t-tekst span { color: var(--fremhaev-tekst); }

body.kf-forbind .ff-hjaelp {
  margin-top: 18px; padding: 14px; border-radius: var(--kf-r-md); background: var(--flade-kort);
  border: 1px solid var(--kf-kant); box-shadow: var(--kf-sh-let);
  font-size: 12.5px; color: var(--tekst-dim); line-height: 1.5;
}
body.kf-forbind .ff-hjaelp b { display: block; font-size: 13px; color: var(--tekst); margin-bottom: 4px; }

/* ---------- 7. MIDT: DE TRE KILDEKORT ----------
   Alle tre staar paa foerste skaerm med hver sin knap. Kortene er kompakte:
   hoved, status og knap altid, mens den lange forklaring og punkterne kun
   staar paa det kort man er ved (.nu). Uden den begraensning skubbede tredje
   kort under skaermkanten, og saa kunne man alligevel ikke starte alle tre
   uden at rulle. Maalt paa 1440x950 8/8-2026. */
body.kf-forbind .ff-midt {
  display: flex; flex-direction: column; gap: 13px;
  background: none; border: 0; box-shadow: none; padding: 0;
}
body.kf-forbind .kilde-rk {
  background: var(--flade-kort); border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r-stor);
  box-shadow: 0 2px 4px rgba(12,34,48,.04), 0 12px 28px -14px rgba(12,34,48,.22);
  padding: 18px 24px; cursor: pointer;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
/* Kortet man er ved: teal kant og en tynd ring, saa markeringen ses uden at
   kortet hopper i hoejden. */
body.kf-forbind .kilde-rk.nu {
  cursor: default; border-color: var(--handling);
  box-shadow: 0 0 0 3px rgba(11,127,131,.10), 0 2px 4px rgba(12,34,48,.04), 0 12px 28px -14px rgba(12,34,48,.22);
}
body.kf-forbind .kilde-rk:not(.nu):hover { border-color: var(--kant-staerk); }
/* Forklaringen og punkterne foldes ud paa det kort man er ved. Knappen under
   dem staar ALTID, saa enhver kilde kan startes med ét klik uden at folde ud
   foerst. */
body.kf-forbind .kilde-rk:not(.nu) .kilde-hjaelp,
body.kf-forbind .kilde-rk:not(.nu) .kilde-punkter { display: none; }
body.kf-forbind .kilde-rk.nu .kilde-mere { display: none; }
body.kf-forbind .kilde-rk:not(.nu) .kilde-krop { margin-top: 10px; }
body.kf-forbind .kilde-mere {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 .84rem var(--sans); color: var(--tekst-dim);
  text-decoration: underline; text-underline-offset: 4px;
  display: block; margin-bottom: 14px;
}
body.kf-forbind .kilde-mere:hover { color: var(--handling-tekst); }

/* Kildens hoved: ikon, nummer, navn, undertekst, maerkat. */
body.kf-forbind .kilde-h {
  display: flex; gap: 15px; align-items: center; margin-bottom: 4px;
}
body.kf-forbind .kilde-ik {
  width: 46px; height: 46px; border-radius: var(--kf-r-md); flex: none;
  background: var(--handling-lys); color: var(--handling-tekst);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--kf-ease), color .25s var(--kf-ease);
}
body.kf-forbind .kilde-ik svg { width: 23px; height: 23px; }
body.kf-forbind .kilde-rk.klar .kilde-ik { background: var(--handling); color: #fff; }
body.kf-forbind .kilde-n { min-width: 0; }
body.kf-forbind .kilde-n h3 {
  font-family: var(--display); font-weight: 500; font-size: 1.42rem;
  letter-spacing: -.028em; line-height: 1.15;
}
body.kf-forbind .kilde-n .under { font-size: .86rem; color: var(--tekst-dim); margin-top: 4px; }
body.kf-forbind .kilde-h .maerke { margin-left: auto; flex: none; }
body.kf-forbind .kilde-pil { display: none; }
body.kf-forbind .kilde-krop { margin-top: 16px; }
body.kf-forbind .kilde-hjaelp {
  color: var(--tekst-dim); font-size: .92rem; line-height: 1.6;
  margin: 0 0 18px; max-width: 62ch;
}

/* Hvad kilden leverer: tre punkter under hjaelpeteksten. */
body.kf-forbind .kilde-punkter {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 9px; font-size: .88rem; color: var(--tekst-dim);
}
body.kf-forbind .kilde-punkter li { position: relative; padding-left: 26px; line-height: 1.5; }
body.kf-forbind .kilde-punkter li::before {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 5px; height: 9px; border: solid var(--handling); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* Handlingsraekken i kildekortet */
body.kf-forbind .hand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
body.kf-forbind .hand .under { font-size: .84rem; color: var(--tekst-dim); }
body.kf-forbind .knap-mitid img { height: 15px; display: block; }

/* Hentningen: bane + log */
body.kf-forbind .hent-bane {
  height: 8px; border-radius: 99px; background: var(--kf-sunk);
  overflow: hidden; margin-bottom: 16px;
}
body.kf-forbind .hent-fyld { background: var(--handling); }
body.kf-forbind .log {
  font-size: .88rem; color: var(--tekst-dim); display: flex; flex-direction: column; gap: 8px;
}
body.kf-forbind .log b { color: var(--handling-tekst); }

/* Fakta-gitteret: samme sunkne felter som regnestykket paa /min-pension. */
body.kf-forbind .fakta,
body.kf-regne .fakta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; margin-top: 0;
}
body.kf-forbind .fakta > div,
body.kf-regne .fakta > div {
  background: var(--kf-sunk); border: 1px solid var(--kf-kant-blod);
  border-radius: 13px; padding: 15px 16px;
}
/* display:block staar HER, ikke kun i connect-v2's egen style-blok. Uden det
   loeb etiket, tal og undertekst sammen paa én linje paa /regnemaskine, som
   ikke har den blok. Reglen aendrer intet for /forbind, der satte det i
   forvejen. Maalt 9/8-2026. */
body.kf-forbind .fakta span,
body.kf-regne .fakta span {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tekst-dim);
}
body.kf-forbind .fakta b,
body.kf-regne .fakta b {
  display: block;
  font-family: var(--display); font-weight: 500; font-size: 1.6rem;
  line-height: 1.1; letter-spacing: -.03em; margin-top: 7px;
  font-variant-numeric: tabular-nums lining-nums;
}
body.kf-forbind .fakta small,
body.kf-regne .fakta small { display: block; font-size: .76rem; color: var(--tekst-dim); margin-top: 4px; }

/* Boligkortet: friværdien i det dybe petrol-felt, grundlagene ved siden af.
   Spalten er bredere og tallet mindre end paa den gamle flade: i midterkortet
   er der kun ~670 px at dele, og med .88fr braekkede "2.700.000 kr." om, saa
   "kr." stod alene paa anden linje. Maalt 8/8-2026. */
body.kf-forbind .bk {
  border-radius: var(--kf-r); border-color: var(--kf-kant);
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1.05fr);
}
/* KORTET, ikke vinduet, afgoer hvornaar de to spalter bliver til én.
   Sidens egen regel @media (max-width: 700px) { .bk { grid-template-columns:
   1fr } } tabte til reglen herover, som er mere specifik og gaelder ved alle
   bredder. Resultatet var at boligkortet BLEV todelt hele vejen ned: paa en
   390 px telefon var kortet 320 px bredt, mens de to spalter kraevede over
   490, og hele hoejre side (grundlagene, boligens vaerdi og restgaelden) laa
   uden for kortets overflow:hidden og kunne slet ikke ses. Maalt 9/8-2026.
   En container-forespoergsel rammer rigtigt, fordi kortet ogsaa er smalt paa
   en bred skaerm: det ligger i midterspalten af en tre-spaltet side. */
body.kf-forbind .kilde-rk { container-type: inline-size; }
/* To spalter kraever at BEGGE kan vaere der. Under 620 px bliver hoejre side saa
   smal at beloebet falder ned under sin egen etiket i hver eneste raekke, og saa
   er kortet bedre tjent med at staa i én spalte. Graensen gik foer ved 560, hvor
   det stadig var i klemme. Selve knap-opstillingen (etiket + beloeb oeverst,
   forklaringen under) er nu standard og staar i connect-v2.html, fordi raekken
   heller ikke kunne holde sig indenfor ved de brede bredder. */
@container (max-width: 620px) {
  body.kf-forbind .bk { grid-template-columns: 1fr; }
  body.kf-forbind .bk-adr { padding-top: 9px; }
  /* Etiket og felt maa braekke, hellere end at feltet skubbes ud over kanten. */
  body.kf-forbind .bk-gaeld { flex-wrap: wrap; row-gap: 4px; }
}
body.kf-forbind .bk-v {
  background-color: var(--flade-dyb);
  background-image:
    radial-gradient(520px 240px at 84% -30%, rgba(11,127,131,.85) 0%, rgba(11,127,131,0) 62%),
    linear-gradient(155deg, var(--flade-dyb), var(--flade-dyb-2));
  color: var(--tekst-paa-dyb); padding: 20px 22px;
}
body.kf-forbind .bk-v > span { color: var(--handling-paa-dyb); }
body.kf-forbind .bk-v > b { color: #fff; font-size: 1.85rem; }
body.kf-forbind .bk-h { padding: 16px 18px; }
body.kf-forbind .bk-valg button[aria-pressed="true"] {
  border-color: var(--kf-tint-kant); background: var(--kf-tint);
}
body.kf-forbind .bk-gaeld input:focus { border-bottom-color: var(--handling); }
body.kf-forbind .mk { border-top-color: var(--kf-kant); }
body.kf-forbind .mk-linje input,
body.kf-forbind .mk-linje select { border-radius: var(--kf-r-sm); }

/* Adressefeltet og forslagene */
body.kf-forbind .felt {
  height: 48px; padding: 0 14px; border-radius: var(--kf-r-md);
  border: 1.5px solid var(--kf-kant); background: #fafcfb; font-size: 15px;
  transition: border-color .2s var(--kf-ease), box-shadow .2s var(--kf-ease), background .2s var(--kf-ease);
}
body.kf-forbind .felt:focus { background: #fff; border-color: var(--handling); box-shadow: var(--kf-ring); }
body.kf-forbind .forslag { border-radius: var(--kf-r-md); border-color: var(--kf-kant); box-shadow: var(--kf-sh); }

/* Bankvaelgeren */
body.kf-forbind .bank-kort { border-radius: var(--kf-r-md); border-color: var(--kf-kant); }
body.kf-forbind .bank-kort:hover { border-color: var(--handling); }

/* ---------- 8. HOEJRE: GRUNDLAGET LIGE NU ---------- */
body.kf-forbind .ff-res,
body.kf-regne .ff-res {
  position: sticky; top: calc(var(--kf-hoved) + 18px);
  display: flex; flex-direction: column; gap: 16px;
}
body.kf-forbind .ff-res-kort,
body.kf-regne .ff-res-kort {
  background: var(--flade-kort); border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r); box-shadow: var(--kf-sh); padding: 20px 22px;
}
/* Hovedtallet i det dybe felt, som paa /min-pension. */
body.kf-forbind .ff-sum,
body.kf-regne .ff-sum {
  position: relative; overflow: hidden;
  border-radius: var(--kf-r-stor); padding: 24px 24px 22px; color: var(--tekst-paa-dyb);
  background-color: var(--flade-dyb);
  background-image:
    radial-gradient(560px 260px at 84% -22%, rgba(11,127,131,.85) 0%, rgba(11,127,131,0) 62%),
    linear-gradient(155deg, var(--flade-dyb), var(--flade-dyb-2));
  box-shadow: 0 2px 6px rgba(12,34,48,.06), 0 24px 56px -26px rgba(0,39,60,.6);
}
body.kf-forbind .ff-sum > *,
body.kf-regne .ff-sum > * { position: relative; z-index: 1; }
body.kf-forbind .ff-sum .kicker,
body.kf-regne .ff-sum .kicker {
  display: block; font-size: .69rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--handling-paa-dyb);
}
body.kf-forbind .ff-sum .n,
body.kf-regne .ff-sum .n {
  font-family: var(--display); font-weight: 500; font-size: 2.5rem; line-height: 1;
  letter-spacing: -.035em; color: #fff; margin-top: 12px;
  font-variant-numeric: tabular-nums lining-nums;
}
body.kf-forbind .ff-sum .n small,
body.kf-regne .ff-sum .n small { font-size: .95rem; color: var(--tekst-dim-dyb); margin-left: 4px; }
body.kf-forbind .ff-sum .under,
body.kf-regne .ff-sum .under { margin-top: 10px; font-size: .84rem; color: var(--tekst-dim-dyb); }
/* Stakken: én stribe pr. forbundet kilde. Solid bundfarve, aldrig
   rgba paa det dybe felt, se minpension.css afsnit 7. */
body.kf-forbind .ff-stak,
body.kf-regne .ff-stak {
  display: flex; height: 12px; border-radius: 99px; overflow: hidden;
  background-color: #10405a; gap: 2px; margin-top: 18px;
}
body.kf-forbind .ff-stak i,
body.kf-regne .ff-stak i { display: block; height: 100%; transition: width .6s var(--kf-ease); }
body.kf-forbind .ff-stak.tom,
body.kf-regne .ff-stak.tom { background-color: #10405a; }

/* Kilde-linjer under stakken */
body.kf-forbind .ff-linjer,
body.kf-regne .ff-linjer { display: flex; flex-direction: column; gap: 12px; }
body.kf-forbind .ff-linje,
body.kf-regne .ff-linje { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
body.kf-forbind .ff-linje .sw,
body.kf-regne .ff-linje .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
body.kf-forbind .ff-linje .nm,
body.kf-regne .ff-linje .nm { color: var(--tekst-dim); flex: 1; min-width: 0; }
body.kf-forbind .ff-linje .vl,
body.kf-regne .ff-linje .vl {
  font-family: var(--font-tal); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
body.kf-forbind .ff-linje.venter .vl,
body.kf-regne .ff-linje.venter .vl { color: var(--tekst-dim); font-weight: 500; }
/* Nutidskronerne under det nominelle beloeb (husreglen). Kun de kilder der
   ER nominelle faar linjen: folkepension og ATP staar allerede i dagens
   satser. Jf. fund E4, eftersynet 23/8-2026. */
body.kf-forbind .ff-linje .vl,
body.kf-regne .ff-linje .vl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
body.kf-forbind .ff-linje .vl em,
body.kf-regne .ff-linje .vl em {
  font-style: normal; font-size: .78em; font-weight: 500; color: var(--tekst-dim);
}

/* Naeste skridt */
body.kf-forbind .ff-naeste { font-size: .86rem; color: var(--tekst-dim); }
body.kf-forbind .ff-naeste li {
  list-style: none; position: relative; padding-left: 18px; margin-top: 9px; line-height: 1.5;
}
body.kf-forbind .ff-naeste li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--kant-staerk);
}
body.kf-forbind .ff-naeste li.klar::before { background: var(--handling); }
body.kf-forbind .ff-naeste li.klar { color: var(--handling-tekst); }
body.kf-forbind .ff-naeste ul { margin: 0; padding: 0; }

/* ---------- 9. DEN FASTE BUNDBJAELKE ---------- */
body.kf-forbind .fortsaet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fast, 40);
  margin: 0; padding: 10px 28px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--kf-kant);
}
/* Fremdriftsstregen ligger PAA bjaelkens overkant, som paa /beregn. */
body.kf-forbind .fortsaet::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px;
  width: var(--kf-fremdrift, 0%);
  background: linear-gradient(90deg, var(--maerke), var(--handling));
  transition: width .5s var(--kf-ease);
}
body.kf-forbind .fortsaet .info { font-size: .88rem; color: var(--tekst-dim); }
body.kf-forbind .fortsaet .info b { color: var(--tekst); }
body.kf-forbind .fortsaet .knap { margin-left: auto; }
body.kf-forbind .fortsaet .knap-primaer {
  background: var(--maerke); height: 42px; min-height: 0; padding: 0 22px; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 8px;
}
body.kf-forbind .fortsaet .knap-primaer:hover:not(:disabled) { background: var(--maerke-dyb); }

body.kf-forbind .k-bund,
body.kf-regne .k-bund {
  text-align: center; color: var(--tekst-dim); font-size: .82rem;
  padding: 34px 0 6px; max-width: 70ch; margin: 0 auto;
}

/* ---------- 10. FORBIND PAA SMALLE SKAERME ---------- */
@media (max-width: 1180px) {
  body.kf-forbind .ff { grid-template-columns: 220px minmax(0,1fr); }
  body.kf-forbind .ff-res { position: static; grid-column: 1 / -1; }
  /* Uden spalten ved siden af laeses de tre kort bedst som en raekke. */
  body.kf-forbind .ff-res { flex-direction: row; flex-wrap: wrap; }
  body.kf-forbind .ff-res > * { flex: 1 1 280px; }
}
@media (max-width: 820px) {
  body.kf-forbind .wrap, body.kf-forbind main.wrap { padding: 18px 16px 156px; }
  body.kf-forbind .ff { grid-template-columns: 1fr; gap: 18px; }
  /* Skinnen bliver tre lige brede felter, ALLE synlige paa én gang.
     Foerste udgave lod dem rulle vandret, og saa stod kun den foerste kilde
     paa skaermen: man kunne hverken se hvor mange kilder der var, eller
     hvilken man stod paa. Maalt paa 390 px 8/8-2026.
     Statuslinjen falder vaek her; prikken siger stadig forbundet/henter, og
     beloebene staar i resultatpanelet lige nedenunder. */
  body.kf-forbind .ff-rail { position: static; }
  body.kf-forbind .ff-rail-h { display: none; }
  body.kf-forbind .ff-liste { flex-direction: row; gap: 8px; }
  body.kf-forbind .ff-skinne, body.kf-forbind .ff-skinne-fyld { display: none; }
  body.kf-forbind .ff-t {
    flex: 1 1 0; min-width: 0; padding: 9px 10px; gap: 8px; align-items: center;
    background: var(--flade-kort); border-color: var(--kf-kant);
  }
  body.kf-forbind .ff-prik { margin: 0; }
  body.kf-forbind .ff-t-tekst b {
    font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.kf-forbind .ff-t-tekst span { display: none; }
  body.kf-forbind .ff-hjaelp { display: none; }
  body.kf-forbind .ff-midt { padding: 0; }
  body.kf-forbind .kilde-rk { padding: 16px 18px; border-radius: var(--kf-r); }
  body.kf-forbind .kilde-n h3 { font-size: 1.24rem; }
  /* Maerkatet paa sin EGEN linje under navnet. Stod det i samme raekke, blev
     navnespalten paa 390 px presset ned til godt 120 px, og undertitlen brak
     om paa fire linjer bag maerkatet. Maalt 8/8-2026. */
  body.kf-forbind .kilde-h { gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  /* basis 0, IKKE auto. Med wrap slaaet til placeres flex-boern efter deres
     INDHOLDSBREDDE foerst og krymper foerst bagefter, saa navnespalten sprang
     ned under ikonet i stedet for at staa ved siden af det. */
  body.kf-forbind .kilde-n { flex: 1 1 0; min-width: 0; }
  /* Linjeskiftet foer maerkatet laves med et tomt flex-barn, ikke med
     basis 100 % paa maerkatet selv: det ville straekke pillen ud i hele
     kortets bredde, og med en margin oveni gav det 17 px vandret rul. */
  body.kf-forbind .kilde-h::after { content: ""; flex: 0 0 100%; height: 0; order: 2; }
  body.kf-forbind .kilde-h .maerke { order: 3; flex: 0 0 auto; margin: 10px 0 0; }
  body.kf-forbind .fortsaet { padding: 12px 16px; }
  body.kf-forbind .fortsaet .info { flex: 1 1 100%; order: 2; }
  body.kf-forbind .fortsaet .knap { margin-left: 0; width: 100%; justify-content: center; }
}

/* ============================================================
   ============================================================
   /VELKOMMEN
   ============================================================
   ============================================================ */
body.kf-velkommen .vk-wrap {
  max-width: 1040px; margin: 0 auto; padding: 46px 24px 80px;
}
body.kf-velkommen .vk-hero { margin-bottom: 30px; }
body.kf-velkommen .vk-hero h1 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 2.8rem); max-width: 18ch; }
body.kf-velkommen .vk-hero .lead {
  margin-top: 12px; font-size: 1.02rem; color: var(--tekst-dim); max-width: 58ch;
}
/* Gammel eyebrow -> samme pille som resten af fladen. */
body.kf-velkommen .eyebrow {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--handling-tekst); background: var(--handling-lys);
  padding: 5px 12px; border-radius: var(--r-pille);
}

/* ---------- 11. (fokus-blokken er fjernet, fokus vaelges i /beregn) ---------- */

/* ---------- 12. DE TRE VEJE ----------
   Den anbefalede vej er det dybe petrol-felt, praecis som hovedtallet
   paa /min-pension. De oevrige er rolige hvide kort. Saa er der ét
   tydeligt foerstevalg i stedet for tre ligevaerdige kasser. */
body.kf-velkommen .valg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px; align-items: stretch;
}
body.kf-velkommen .valg .kort {
  padding: 26px 24px; cursor: pointer; display: flex; flex-direction: column;
  border-radius: var(--kf-r); border: 1px solid var(--kf-kant);
  background: var(--flade-kort); box-shadow: var(--kf-sh);
  transition: border-color .2s var(--kf-ease), transform .2s var(--kf-ease), box-shadow .2s var(--kf-ease);
}
body.kf-velkommen .valg .kort:hover,
body.kf-velkommen .valg .kort:focus-visible {
  border-color: var(--kant-staerk); transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(12,34,48,.06), 0 26px 52px -24px rgba(12,34,48,.34);
  outline: none;
}
body.kf-velkommen .valg .kort h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.42rem;
  letter-spacing: -.03em; margin-bottom: 7px;
}
body.kf-velkommen .valg .kort > p {
  font-size: .9rem; color: var(--tekst-dim); margin: 0 0 16px; line-height: 1.55;
}
body.kf-velkommen .vk-ikon {
  width: 44px; height: 44px; border-radius: var(--kf-r-md);
  display: grid; place-items: center; margin-bottom: 16px;
}
body.kf-velkommen .vk-ikon svg { width: 22px; height: 22px; }
body.kf-velkommen .vk-ikon.auto { background: rgba(78,199,203,.16); color: var(--handling-paa-dyb); }
body.kf-velkommen .vk-ikon.manuel { background: var(--kf-sunk); color: var(--tekst); }
body.kf-velkommen .vk-ikon.overblik { background: var(--handling-lys); color: var(--handling-tekst); }
body.kf-velkommen .punkter {
  list-style: none; margin: 0 0 20px; padding: 0; font-size: .85rem;
  color: var(--tekst-dim); display: grid; gap: 8px;
}
body.kf-velkommen .punkter li { padding-left: 24px; position: relative; line-height: 1.45; }
body.kf-velkommen .punkter li::before {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 5px; height: 9px; border: solid var(--handling); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
body.kf-velkommen .valg .knap {
  width: 100%; margin-top: auto; height: 46px; border-radius: var(--kf-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Den anbefalede vej: dybt petrol-felt. */
body.kf-velkommen .valg .kort.dyb {
  color: var(--tekst-paa-dyb); border-color: transparent;
  background-color: var(--flade-dyb);
  background-image:
    radial-gradient(600px 280px at 84% -18%, rgba(11,127,131,.85) 0%, rgba(11,127,131,0) 62%),
    linear-gradient(155deg, var(--flade-dyb), var(--flade-dyb-2));
  box-shadow: 0 2px 6px rgba(12,34,48,.06), 0 24px 56px -26px rgba(0,39,60,.6);
}
body.kf-velkommen .valg .kort.dyb h2 { color: #fff; }
body.kf-velkommen .valg .kort.dyb > p,
body.kf-velkommen .valg .kort.dyb .punkter { color: var(--tekst-dim-dyb); }
body.kf-velkommen .valg .kort.dyb .punkter li::before { border-color: var(--handling-paa-dyb); }
body.kf-velkommen .valg .kort.dyb .knap-primaer { background: #fff; color: var(--maerke); }
body.kf-velkommen .valg .kort.dyb .knap-primaer:hover { background: var(--flade-side); }
body.kf-velkommen .valg .kort.dyb:hover { border-color: transparent; }
/* Pillen paa det dybe felt skal have SOLID bundfarve, ikke rgba: en
   gennemsigtig flade maaler som naesten-hvid, og saa laeser enhver
   kontrastkontrol den hvide tekst som staaende paa hvid. Se minpension.css. */
body.kf-velkommen .valg .kort.dyb .vk-maerkat {
  align-self: flex-start; margin-bottom: 14px;
  padding: 5px 12px; border-radius: var(--r-pille);
  background-color: #10405a; border: 1px solid rgba(255,255,255,.2);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--handling-paa-dyb);
}
/* Det gemte overblik er den vej en tilbagevendende klient skal se foerst. */
body.kf-velkommen .valg .kort.fremhaev { border-color: var(--kf-tint-kant); }

body.kf-velkommen .vk-note {
  font-size: .86rem; color: var(--tekst-dim); text-align: center; margin-top: 26px;
}

@media (max-width: 700px) {
  body.kf-velkommen .vk-wrap { padding: 30px 16px 60px; }
  body.kf-velkommen .valg { grid-template-columns: 1fr; }
}

/* ============================================================
   ============================================================
   /LOGIN, trin 1 i rejsen
   ============================================================
   ============================================================
   To spalter: fortaellingen til venstre, kortet til hoejre, saa
   siden ligner resten af klientfladen i stedet for det
   offentlige site. Den delte marketing-menu og footeren
   (site-nav.js) er derfor VÆK herfra: naar man logger ind, er
   man paa vej ind i produktet, ikke rundt paa hjemmesiden.
   Ordmaerket i topbaren linker stadig til forsiden.
   ============================================================ */
body.kf-login {
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.6;
}
body.kf-login .login-flade {
  flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 56px 24px 64px;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 56px; align-items: center;
}
body.kf-login .login-tekst { max-width: 46ch; }
body.kf-login .login-tekst h1 {
  font-size: clamp(2rem, 4vw, 2.7rem); margin: 14px 0 0;
}
body.kf-login .login-tekst p {
  margin: 12px 0 0; font-size: 1.02rem; color: var(--tekst-dim);
}
body.kf-login .tryg {
  display: flex; flex-direction: column; gap: 11px; margin-top: 26px;
  font-size: .88rem; color: var(--tekst-dim);
}
body.kf-login .tryg span { display: inline-flex; align-items: center; gap: 10px; }
body.kf-login .tryg svg { width: 16px; height: 16px; color: var(--handling); flex: none; }

/* Invitationens maerkat: staar i venstre spalte, over tryghedslinjerne. */
body.kf-login .invite-pil {
  margin: 22px 0 0; border-radius: var(--r-pille);
  border: 1px solid var(--kf-tint-kant); background: var(--handling-lys);
  color: var(--handling-tekst); box-shadow: none;
  padding: 8px 15px 8px 12px;
}
body.kf-login .invite-pil b { color: var(--handling-tekst); }
body.kf-login .invite-pil svg { color: var(--handling); }

/* ---------- Kortet ---------- */
body.kf-login .login-boks { width: 100%; }
body.kf-login .kort {
  background: var(--flade-kort); border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r-stor); box-shadow: var(--kf-sh);
  overflow: hidden; padding: 0;
}
body.kf-login .kort h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.5rem;
  letter-spacing: -.03em; line-height: 1.2;
}
body.kf-login .under { font-size: .875rem; color: var(--tekst-dim); margin: 6px 0 22px; }
/* :not(.vilkaar) er ikke pynt. Samtykke-etiketten skjules af .vilkaar og vises
   foerst i signup-tilstand, og `body.kf-login label` er mere specifik end
   `.vilkaar`, saa uden undtagelsen stod samtykket fremme paa den almindelige
   login-side, hvor der ikke oprettes noget. */
body.kf-login label:not(.vilkaar) {
  display: block; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--tekst);
  margin-bottom: 7px;
}
body.kf-login .vilkaar { font-size: 13px; color: var(--tekst-dim); }
/* Felterne er beregnerens: 52 px hoeje, 1,5 px kant, teal fokusring. */
body.kf-login input[type="email"],
body.kf-login input[type="password"],
body.kf-login input[type="text"] {
  width: 100%; height: 52px; padding: 0 14px; margin-bottom: 16px;
  font: inherit; font-size: 16px; color: var(--tekst);
  background: #fafcfb; border: 1.5px solid var(--kf-kant); border-radius: var(--kf-r-md);
  outline: none;
  transition: border-color .2s var(--kf-ease), box-shadow .2s var(--kf-ease), background .2s var(--kf-ease);
}
body.kf-login input:focus { background: #fff; border-color: var(--handling); box-shadow: var(--kf-ring); }
body.kf-login .kode-rk input { padding-right: 46px; }
body.kf-login .kode-oeje {
  position: absolute; top: 11px; right: 9px; width: 30px; height: 30px;
  background: none; border: 0; border-radius: 8px; color: var(--tekst-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
body.kf-login .kode-oeje:hover { background: var(--kf-sunk); color: var(--tekst); }
body.kf-login form > button[type="submit"] {
  width: 100%; height: 50px; min-height: 0; padding: 0 22px;
  font: 600 .98rem var(--sans); color: #fff; cursor: pointer;
  background: var(--maerke); border: 1px solid transparent; border-radius: var(--kf-r-sm);
  transition: background var(--overgang);
}
body.kf-login form > button[type="submit"]:hover { background: var(--maerke-dyb); }
body.kf-login form > button[type="submit"]:disabled { opacity: .55; cursor: progress; }
body.kf-login .vilkaar a { color: var(--handling-tekst); }
body.kf-login .vilkaar input { accent-color: var(--handling); }
body.kf-login .raadgiver-link,
body.kf-login .note { font-size: .84rem; color: var(--tekst-dim); }
body.kf-login .raadgiver-link a { color: var(--handling-tekst); font-weight: 600; }
body.kf-login .note { margin-top: 16px; text-align: center; }
/* Raadgiverkortet i bunden af kortet. */
body.kf-login .hjaelp { background: var(--kf-sunk); border-top-color: var(--kf-kant); padding: 18px 28px 20px; }
body.kf-login .hjaelp img,
body.kf-login .hjaelp .ini {
  border-radius: 16px;
  background: linear-gradient(150deg, var(--handling), var(--maerke));
}
body.kf-login .hjaelp .kontakt a { color: var(--handling-tekst); }
body.kf-login .invite-banner {
  border-radius: var(--kf-r-md); max-width: none;
  background: var(--handling-lys); border-color: var(--kf-tint-kant); color: var(--handling-tekst);
}

@media (max-width: 900px) {
  /* Kortet foerst: paa en telefon er man kommet for at logge ind, ikke for at
     laese om produktet. Fortaellingen staar under som baggrund. */
  body.kf-login .login-flade {
    grid-template-columns: 1fr; gap: 32px; padding: 30px 16px 48px;
  }
  body.kf-login .login-boks { order: 1; }
  body.kf-login .login-tekst { order: 2; max-width: none; }
  body.kf-login .login-tekst h1 { font-size: 1.7rem; }
}

/* ============================================================
   14. TOAST
   ============================================================ */
body.klientflade .c-toast {
  background: var(--flade-dyb); color: #fff; border-radius: var(--kf-r-md);
  box-shadow: 0 18px 40px -18px rgba(0,39,60,.7);
}

/* ============================================================
   ============================================================
   /REGNEMASKINE, test-beregningen

   Sandkassen hvor man traekker i ét tal og ser hele motoren regne
   om. Den laa som den sidste side paa den gamle graa flade med sin
   egen header, sine egne farver og sin egen skattetrappe. Nu taler
   den samme sprog som /forbind og /velkommen: samme topbar, samme
   hero med pille, samme dybe petrol-felt til hovedtallet, samme
   rolige hvide kort.

   Tre spalter, som paa /beregn og /forbind:
     venstre  dine tal (klaeber, ruller selv naar den er hoej)
     midten   trinnene, ét kort pr. trin
     hoejre   svaret lige nu, og spring til et trin
   Bygget 9/8-2026.
   ============================================================ */
body.kf-regne .wrap,
body.kf-regne main.wrap {
  max-width: 1440px; margin: 0 auto; padding: 24px 28px 72px;
}
body.kf-regne .kf-hero { padding: 2px 0 0; }
body.kf-regne .kf-hero h1 { max-width: 22ch; margin-top: 10px; }
body.kf-regne .kf-hero p { margin-top: 7px; max-width: 92ch; }

body.kf-regne .rg {
  display: grid; grid-template-columns: 300px minmax(0,1fr) 336px;
  gap: 24px; align-items: start; margin-top: 20px;
}
body.kf-regne .rg > * { min-width: 0; }

/* ---------- VENSTRE: DINE TAL ----------
   Elleve felter er for mange til at klaebe frit: paa en 950 px hoej skaerm
   ville de nederste ligge under kanten uden at kunne rulles til. Spalten
   klaeber derfor MED sin egen rulning, saa alle felter kan naas mens man
   kigger paa et trin langt nede i midten. */
body.kf-regne .rg-input {
  position: sticky; top: calc(var(--kf-hoved) + 18px);
  max-height: calc(100vh - var(--kf-hoved) - 36px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--kant-staerk) transparent;
}
body.kf-regne .rg-kort {
  background: var(--flade-kort); border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r); box-shadow: var(--kf-sh); padding: 18px 18px 16px;
}
body.kf-regne .rg-felt + .rg-felt { margin-top: 14px; }
body.kf-regne .rg-felt-h {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
body.kf-regne .rg-felt-h label { font-size: .84rem; color: var(--tekst-dim); flex: 1; min-width: 0; }
body.kf-regne .rg-tal-boks { display: inline-flex; align-items: baseline; gap: 5px; flex: none; }
body.kf-regne .rg-tal {
  width: 92px; padding: 5px 9px; text-align: right;
  font: 600 .86rem var(--font-tal); font-variant-numeric: tabular-nums lining-nums;
  color: var(--tekst); background: #fafcfb;
  border: 1.5px solid var(--kf-kant); border-radius: var(--kf-r-sm);
  transition: border-color .2s var(--kf-ease), box-shadow .2s var(--kf-ease), background .2s var(--kf-ease);
}
body.kf-regne .rg-tal:focus {
  outline: none; background: #fff; border-color: var(--handling); box-shadow: var(--kf-ring);
}
body.kf-regne select.rg-tal { width: 136px; text-align: left; font-family: var(--sans); }
/* Et felt hvor vaerdien skal have hele bredden (civilstanden). */
body.kf-regne .rg-felt-bred > label {
  display: block; font-size: .84rem; color: var(--tekst-dim); margin-bottom: 6px;
}
body.kf-regne .rg-felt-bred select.rg-tal { width: 100%; padding: 8px 10px; }
body.kf-regne .rg-enhed { font-size: .78rem; color: var(--tekst-dim); }
/* Traekkeren. Banen er det sunkne felt, knappen er handlingsfarven. */
body.kf-regne input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px;
  background: none; cursor: pointer; display: block;
}
body.kf-regne input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px; background: var(--kf-sunk); border: 1px solid var(--kf-kant-blod);
}
body.kf-regne input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 99px; background: var(--kf-sunk); border: 1px solid var(--kf-kant-blod);
}
body.kf-regne input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--handling); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(12,34,48,.3);
  transition: box-shadow .2s var(--kf-ease);
}
body.kf-regne input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--handling); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(12,34,48,.3);
}
body.kf-regne input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--kf-ring); }
body.kf-regne input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--kf-ring); }
body.kf-regne .rg-kilde {
  font-size: .78rem; color: var(--tekst-dim); line-height: 1.55;
  background: var(--kf-sunk); border: 1px solid var(--kf-kant-blod);
  border-radius: var(--kf-r-md); padding: 13px 14px;
}
body.kf-regne .rg-kilde b { display: block; color: var(--tekst); font-size: .82rem; margin-bottom: 4px; }
body.kf-regne .rg-kilde a { color: var(--handling-tekst); font-weight: 600; }

/* ---------- MIDTEN: TRINNENE ---------- */
body.kf-regne .rg-midt { display: flex; flex-direction: column; gap: 16px; }
body.kf-regne .rg-trin {
  background: var(--flade-kort); border: 1px solid var(--kf-kant);
  border-radius: var(--kf-r-stor); box-shadow: var(--kf-sh);
  padding: 20px 24px 22px; scroll-margin-top: calc(var(--kf-hoved) + 18px);
}
body.kf-regne .rg-trin-h { display: flex; align-items: center; gap: 14px; }
body.kf-regne .rg-nr {
  flex: none; width: 34px; height: 34px; border-radius: var(--kf-r-sm);
  display: grid; place-items: center;
  background: var(--handling-lys); color: var(--handling-tekst);
  font: 700 .92rem var(--font-tal);
}
body.kf-regne .rg-trin h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.34rem;
  letter-spacing: -.028em; line-height: 1.15; flex: 1; min-width: 0;
}
body.kf-regne .rg-trin > p.rg-ind {
  font-size: .86rem; color: var(--tekst-dim); margin: 10px 0 0 48px; max-width: 68ch;
}
/* Ét regnestykke: sunket felt med teal kant i venstre side. */
body.kf-regne .rg-rk {
  background: var(--kf-sunk); border: 1px solid var(--kf-kant-blod);
  border-left: 3px solid var(--handling);
  border-radius: 4px var(--kf-r-md) var(--kf-r-md) 4px;
  padding: 13px 16px; margin-top: 14px;
}
body.kf-regne .rg-rk-h {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--handling-tekst); margin-bottom: 8px;
}
body.kf-regne .rg-formel {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: .78rem; color: var(--tekst-dim); line-height: 1.6; margin: 3px 0;
}
body.kf-regne .rg-formel b { color: var(--tekst); font-weight: 600; }
body.kf-regne .rg-ud {
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--kf-kant);
}
body.kf-regne .rg-ud + .rg-ud { margin-top: 6px; }
body.kf-regne .rg-ud .l { font-size: .84rem; color: var(--tekst-dim); }
body.kf-regne .rg-ud .l small { display: block; font-size: .74rem; color: var(--tekst-dim); }
body.kf-regne .rg-ud .v {
  font-family: var(--font-tal); font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600; font-size: 1rem; color: var(--tekst); white-space: nowrap; text-align: right;
}
/* Trinnets svar: samme raekke, men fremhaevet. */
body.kf-regne .rg-ud.svar { border-top-color: var(--handling); }
body.kf-regne .rg-ud.svar .l { color: var(--tekst); font-weight: 600; }
body.kf-regne .rg-ud.svar .v { font-size: 1.16rem; color: var(--handling-tekst); }
body.kf-regne .rg-nutid {
  display: block; font-size: .76rem; font-weight: 500;
  color: var(--tekst-dim); margin-top: 2px; white-space: nowrap;
}
body.kf-regne .rg-note {
  font-size: .8rem; color: var(--tekst-dim); line-height: 1.55; margin-top: 14px;
}
/* Et trin motoren ikke har sendt tal til (plan eller session raekker ikke). */
body.kf-regne .rg-laast {
  margin-top: 14px; padding: 13px 16px; border-radius: var(--kf-r-md);
  background: var(--fremhaev-lys); border: 1px solid #ecdcc0;
  font-size: .84rem; color: var(--fremhaev-tekst); line-height: 1.55;
}

/* ---------- HOEJRE: SVARET LIGE NU ---------- */
body.kf-regne .ff-res {
  max-height: calc(100vh - var(--kf-hoved) - 36px);
  overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--kant-staerk) transparent;
}
/* flex: 0 0 auto, ellers KRYMPER kortene. En flex-beholder med max-height
   skrumper sine boern for at faa dem til at passe, og hovedtallet blev
   klippet midt over af sit eget overflow:hidden: der stod "20 6" og saa
   sluttede det dybe felt. Samme gaelder venstre spalte. Maalt 9/8-2026. */
body.kf-regne .ff-res > *,
body.kf-regne .rg-input > * { flex: 0 0 auto; }
body.kf-regne .rg-spring { display: flex; flex-direction: column; gap: 1px; }
body.kf-regne .rg-spring a {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 9px;
  border-radius: var(--kf-r-sm); text-decoration: none; color: inherit;
  transition: background var(--overgang);
}
body.kf-regne .rg-spring a:hover { background: var(--kf-sunk); }
body.kf-regne .rg-spring a.nu { background: var(--handling-lys); }
body.kf-regne .rg-spring i {
  flex: none; width: 18px; font-style: normal; font-size: .74rem; font-weight: 700;
  color: var(--tekst-dim); font-family: var(--font-tal);
}
body.kf-regne .rg-spring a.nu i { color: var(--handling-tekst); }
body.kf-regne .rg-spring span { flex: 1; min-width: 0; font-size: .84rem; color: var(--tekst-dim); }
body.kf-regne .rg-spring a.nu span { color: var(--handling-tekst); font-weight: 600; }
body.kf-regne .rg-spring b {
  font-family: var(--font-tal); font-variant-numeric: tabular-nums lining-nums;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
/* Beregningen er i gang: hovedtallet toner ned i stedet for at hoppe. */
body.kf-regne .ff-sum.arbejder .n,
body.kf-regne .ff-sum.arbejder .under { opacity: .45; transition: opacity .2s var(--kf-ease); }
body.kf-regne .ff-sum .fejl { color: #ffd7d0; }

/* ---------- SMALLE SKAERME ---------- */
@media (max-width: 1240px) {
  body.kf-regne .rg { grid-template-columns: 280px minmax(0,1fr); }
  body.kf-regne .ff-res {
    position: static; max-height: none; overflow: visible;
    grid-column: 1 / -1; order: -1;
    flex-direction: row; flex-wrap: wrap;
    /* flex-start, ellers straekkes de tre kort til samme hoejde, og det dybe
       felt bliver en halvtom soejle ved siden af den lange trin-liste. */
    align-items: flex-start;
  }
  body.kf-regne .ff-res > * { flex: 1 1 300px; }
}
@media (max-width: 900px) {
  body.kf-regne .wrap, body.kf-regne main.wrap { padding: 18px 16px 56px; }
  body.kf-regne .rg { grid-template-columns: 1fr; gap: 18px; }
  body.kf-regne .rg-input { position: static; max-height: none; overflow: visible; padding-right: 0; }
  body.kf-regne .rg-trin { padding: 17px 18px 19px; border-radius: var(--kf-r); }
  body.kf-regne .rg-trin h2 { font-size: 1.18rem; }
  body.kf-regne .rg-trin > p.rg-ind { margin-left: 0; }
  /* Etiket og beloeb maa braekke frem for at skubbe kortet ud over kanten. */
  body.kf-regne .rg-ud { flex-wrap: wrap; row-gap: 2px; }
  body.kf-regne .rg-ud .v { text-align: left; }
}