/* ============================================================
   /beregn: DET NYE TRE-SPALTEDE FLOW
   Forlaeg: redesign/beregn-nyt-flow-reference.html (Bilals egen
   mockup, valgt 8/8-2026). Denne fil er den 1:1-udfoerelse.

   Venstre: trin-skinne med hvad der er svaret paa hvert afsnit.
   Midt:    ét kort med formularen, ét trin ad gangen.
   Hoejre:  resultatet mens man skriver.
   Bund:    fast handlingsbjaelke med fremdriftsstreg.

   /beregn forlod Kontrolrummet 8/8-2026 og henter IKKE laengere
   kontrolrum.css. Samme greb som /min-pension gjorde med
   minpension.css: den flade har sin egen identitet, og de sidste
   uger var kontrolrum.css alligevel mest lappet for /beregn.

   FARVER kommer fra pensia-tokens.css. Forlaegget havde sin egen
   groenne palette (#0E6E63); den er mappet til --handling (teal
   #0b7f83), saa siden bliver Pensia og ikke en tredje palette.
   Kun seriefarverne til diagrammet er taget ordret fra forlaegget:
   de er farveblind-validerede (CVD dE 11,7 / normal dE 22,3).
   ============================================================ */

body.beregn-flow {
  /* Flader */
  --bf-bg: var(--flade-side);
  --bf-flade: var(--flade-kort);
  --bf-flade-2: #fafcfb;
  --bf-sunk: #f1f5f4;

  /* Blaek */
  --bf-ink: var(--tekst);
  --bf-ink-2: var(--tekst-dim);
  --bf-svag: #849490;

  /* Linjer */
  --bf-linje: var(--kant);
  --bf-linje-staerk: var(--kant-staerk);

  /* Maerke */
  --bf-brand: var(--handling);
  --bf-brand-dyb: var(--handling-dyb);
  --bf-brand-tekst: var(--handling-tekst);
  --bf-brand-300: #7fc4ba;
  --bf-brand-blod: var(--handling-lys);
  --bf-brand-taage: #f2f9f7;

  /* Serier (ordret fra forlaegget, farveblind-valideret) */
  --bf-serie-1: #0f9b8e;  /* arbejdsmarkedspension */
  --bf-serie-2: #3a5ccc;  /* folkepension */
  --bf-serie-3: #eb6834;  /* frie midler */

  /* Status */
  --bf-god: #0ca30c;
  --bf-god-ink: #046104;
  --bf-krit: var(--fejl);

  /* Form */
  --bf-r-sm: 10px; --bf-r-md: 14px; --bf-r-lg: 20px; --bf-r-xl: 28px;
  --bf-sh-1: 0 1px 2px rgba(11,26,23,.05), 0 1px 1px rgba(11,26,23,.03);
  --bf-sh-2: 0 2px 4px rgba(11,26,23,.04), 0 12px 28px -14px rgba(11,26,23,.22);
  --bf-ring: 0 0 0 3px rgba(11,127,131,.16);
  --bf-ease: cubic-bezier(.22,.9,.28,1);
  /* Forlaegget saetter Inter som brugerflade. Inter er allerede
     selvhostet via pensia-design.css, saa ingen ekstra hentning. */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  margin: 0;
  font-family: var(--sans);
  color: var(--bf-ink);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  background:
    radial-gradient(900px 460px at 88% -8%, #e7f3f0 0%, rgba(231,243,240,0) 62%),
    radial-gradient(760px 420px at 4% 4%, #eef4ff 0%, rgba(238,244,255,0) 58%),
    var(--bf-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body.beregn-flow h1, body.beregn-flow h2, body.beregn-flow h3 {
  font-family: var(--sans); font-weight: 650; letter-spacing: -.022em;
}
/* Ordmaerket BLIVER Fraunces: det er logoet, ikke brugerflade. */
body.beregn-flow .logo { font-family: var(--display, 'Fraunces', Georgia, serif); }

/* ---------- TOPBAR ----------
   SAMME bjaelke som paa /login, /velkommen, /forbind og /min-pension: en
   klaebrig fuldbreddes blok med et indre baand paa 1180 px, logoet i venstre
   kant af baandet, rejsen i midten og kontoen yderst til hoejre.
   Foer laa /beregns logo helt ude i skaermkanten mens de andre sider havde
   det inde i kolonnen, og der var ingen .topbar-inner, saa konto-ikonet
   klaebede til ordmaerket paa en telefon i stedet for at staa til hoejre. */
body.beregn-flow .topbar {
  position: sticky; top: 0; z-index: 60;
  display: block; max-width: none; margin: 0; padding: 0;
  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);
}
/* GEOMETRIEN ER KOPIERET FRA klientflade.css (/forbind og /velkommen), som
   er kilden efter omlaegningen 8/8-2026. Aendrer du bjaelken dér, skal den
   rettes her og i minpension.css med. */
body.beregn-flow .topbar-inner {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  max-width: none; margin: 0; padding: 0 28px;
  height: 60px;
}
body.beregn-flow .topbar .logo {
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  color: var(--maerke); letter-spacing: -.025em; line-height: 1; margin-right: 0;
}
body.beregn-flow .topbar .logo .prik { color: var(--bf-brand); }
/* Kontoen yderst til hoejre, ogsaa paa en telefon hvor rejsen er skjult.
   KUN ÉT auto-margin ad gangen i baandet. Med auto paa baade .bf-gemt og
   .bv-nav delte flexboxen den frie plads mellem dem, saa "Gemmer automatisk"
   landede midt i bjaelken, praecis dér hvor den absolut centrerede rejse
   ligger: maalt 8/8-2026 laa rejsen 445 til 979 px og gemt-boksen 648 til 803.
   Kontoen faar derfor kun sit auto-margin naar gemt-boksen er skjult. */
body.beregn-flow .topbar-inner .bv-nav { margin-left: 0; }
/* Rejsen (flow.js) staar aegte centreret i baandet som i forlaegget. */
body.beregn-flow .flow-i-topbar { position: absolute; left: 50%; translate: -50% 0; margin: 0; }
body.beregn-flow .flow-i-topbar .flow-rail-liste { background: none; border: 0; border-radius: 0; padding: 0; }
body.beregn-flow .flow-i-topbar .flow-top { padding: 5px 10px; }
body.beregn-flow .flow-i-topbar .flow-trin.aktiv .flow-top { border-radius: 99px; }
/* "Gemmer automatisk" yderst til hoejre, foran konto-ikonet. */
body.beregn-flow .bf-gemt {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--bf-svag); white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bf-flade); border: 1px solid var(--bf-linje);
}
body.beregn-flow .bf-gemt i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--bf-god);
  box-shadow: 0 0 0 3px rgba(12,163,12,.14); animation: bf-puls 2.6s infinite;
}
@keyframes bf-puls { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
body.beregn-flow .topbar .sikker { display: none; }
/* 1420 og ikke 1250: rejsen er 534 px bred og staar centreret, saa den naar
   ud til 979 px paa en 1440 px skaerm. Gemt-boksen er 155 px og skal ligge
   foran kontoen, altsaa fra ca. 1180 px. Under 1420 px moedes de, og saa
   viger gemt-boksen: den er en kvittering, rejsen er navigation. */
@media (max-width: 1420px) {
  body.beregn-flow .bf-gemt { display: none; }
  body.beregn-flow .topbar-inner .bv-nav { margin-left: auto; }
}
@media (max-width: 1250px) {
  /* Rejsen viger foer kontoen goer: den er en oversigt, kontoen er en udgang. */
  body.beregn-flow .flow-i-topbar { display: none; }
}

/* ---------- SKAL ---------- */
body.beregn-flow .wizard {
  max-width: 1440px; margin: 0 auto; padding: 26px 28px 132px;
}
body.beregn-flow .k-hero { display: none; }
/* Rejsen flyttes af flow.js op i topbaren. Ligger den stadig i siden
   (fx foer scriptet er koert), skal den ikke vises som en stribe. */
body.beregn-flow #flow-rail:not(.flow-i-topbar) { display: none; }
body.beregn-flow #trin-rail { display: none; }
body.beregn-flow .prefill-banner {
  max-width: 1440px; margin: 0 auto 16px; border-radius: var(--bf-r-md);
  background: var(--bf-brand-taage); border: 1px solid #dcede9; color: var(--bf-ink-2);
}
body.beregn-flow .prefill-banner b { color: var(--bf-ink); }
body.beregn-flow .velkomst { display: none; }

body.beregn-flow .nf {
  display: grid; grid-template-columns: 236px minmax(0,1fr) 348px;
  gap: 24px; align-items: start; margin-top: 0;
}
body.beregn-flow .nf > * { min-width: 0; }

/* ---------- VENSTRE: TRIN-SKINNEN ---------- */
body.beregn-flow .nf-rail { position: sticky; top: 88px; }
body.beregn-flow .nf-rail-h {
  margin: 0 0 12px 4px; font-size: 11px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--bf-svag); font-weight: 650;
}
body.beregn-flow .nf-liste { display: flex; flex-direction: column; gap: 2px; position: relative; }
body.beregn-flow .nf-skinne {
  position: absolute; left: 19px; top: 26px; bottom: 26px; width: 2px;
  background: var(--bf-linje); border-radius: 2px;
}
body.beregn-flow .nf-skinne-fyld {
  position: absolute; left: 19px; top: 26px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--bf-brand), var(--bf-brand-300));
  border-radius: 2px; transition: height .5s var(--bf-ease);
}
body.beregn-flow .nf-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(--bf-r-md); cursor: pointer; font: inherit; color: inherit;
  transition: background .25s var(--bf-ease);
}
body.beregn-flow .nf-t:hover { background: rgba(255,255,255,.7); }
body.beregn-flow .nf-t.nu { background: var(--bf-flade); box-shadow: var(--bf-sh-1); border-color: var(--bf-linje); }
body.beregn-flow .nf-prik {
  flex: none; width: 16px; height: 16px; margin: 3px 0 0 3px; border-radius: 50%;
  background: var(--bf-flade); border: 2px solid var(--bf-linje-staerk); z-index: 1;
  display: grid; place-items: center; transition: all .3s var(--bf-ease);
}
body.beregn-flow .nf-t.nu .nf-prik { border-color: var(--bf-brand); box-shadow: 0 0 0 4px var(--bf-brand-blod); }
body.beregn-flow .nf-t.klar .nf-prik { background: var(--bf-brand); border-color: var(--bf-brand); }
body.beregn-flow .nf-t.klar .nf-prik::after {
  content: ""; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg) translate(-1px,-1px);
}
body.beregn-flow .nf-t-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.beregn-flow .nf-t-tekst b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
body.beregn-flow .nf-t-tekst span { font-size: 12px; color: var(--bf-svag); line-height: 1.35; }
body.beregn-flow .nf-t.klar .nf-t-tekst span { color: var(--bf-brand-tekst); }
body.beregn-flow .nf-hjaelp {
  margin-top: 18px; padding: 14px; border-radius: var(--bf-r-md); background: var(--bf-flade);
  border: 1px solid var(--bf-linje); box-shadow: var(--bf-sh-1);
  font-size: 12.5px; color: var(--bf-ink-2);
}
body.beregn-flow .nf-hjaelp b { display: block; font-size: 13px; color: var(--bf-ink); margin-bottom: 4px; }
body.beregn-flow .nf-hjaelp i { font-style: normal; color: var(--bf-krit); font-weight: 700; }

/* ---------- MIDT: FORMULARKORTET ---------- */
body.beregn-flow .nf-midt {
  background: var(--bf-flade); border: 1px solid var(--bf-linje);
  border-radius: var(--bf-r-xl); box-shadow: var(--bf-sh-2); overflow: hidden;
  padding: 0;
}
body.beregn-flow .k-panel { padding: 30px 34px 34px; }
body.beregn-flow .k-panel[hidden] { display: none; }
body.beregn-flow .k-panel:not([hidden]) { animation: bf-op .45s var(--bf-ease); }
@keyframes bf-op { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

body.beregn-flow .k-titel { margin-bottom: 26px; }
body.beregn-flow .nf-pille, body.beregn-flow .k-titel .k-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-brand-tekst); background: var(--bf-brand-blod);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
body.beregn-flow .k-titel h2 {
  margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -.028em; font-weight: 650;
}
body.beregn-flow .k-titel p { margin: 8px 0 0; color: var(--bf-ink-2); font-size: 14.5px; max-width: 56ch; }

/* Felt-gitteret: to spalter, som i forlaegget */
body.beregn-flow .k-kort {
  padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px;
}
/* pensia-tokens.css bruger .felt som klasse paa selve INPUTTET (kant,
   baggrund, polstring). Her er .felt en BEHOLDER om etiket + felt + hint,
   saa hver etiket fik sin egen kasse. Beholderen nulstilles. */
body.beregn-flow .felt {
  padding: 0; min-height: 0; background: none; border: 0; border-radius: 0;
  box-shadow: none; font-size: inherit;
}
body.beregn-flow .k-kort .felt { margin: 0; min-width: 0; display: block; }
body.beregn-flow .k-kort .felt.fuld { grid-column: 1 / -1; }
/* Skyderen og opsparings-grupperne fylder hele bredden */
body.beregn-flow .k-kort .felt:has(.bf-alder) { grid-column: 1 / -1; }

body.beregn-flow .felt > label {
  display: block; font-size: 13.5px; font-weight: 560; margin-bottom: 7px; color: var(--bf-ink);
}
body.beregn-flow .felt > label .hint { font-weight: 400; color: var(--bf-svag); font-size: 12.5px; }
body.beregn-flow .felt .stjerne { color: var(--bf-krit); font-size: 15px; line-height: 1; }

/* Feltet: én beholder med input + enhed, som i forlaegget */
body.beregn-flow .kr-felt, body.beregn-flow .bf-ctrl {
  display: flex; align-items: center; gap: 8px; position: static;
  background: var(--bf-flade-2); border: 1.5px solid var(--bf-linje);
  border-radius: var(--bf-r-md); padding: 0 14px; height: 52px;
  transition: border-color .2s var(--bf-ease), box-shadow .2s var(--bf-ease), background .2s var(--bf-ease);
}
body.beregn-flow .kr-felt:focus-within, body.beregn-flow .bf-ctrl:focus-within {
  background: #fff; border-color: var(--bf-brand); box-shadow: var(--bf-ring);
}
body.beregn-flow .kr-felt.udfyldt, body.beregn-flow .bf-ctrl.udfyldt { background: #fff; }
body.beregn-flow .kr-felt > input, body.beregn-flow .bf-ctrl > input,
body.beregn-flow .bf-ctrl > select {
  flex: 1; min-width: 0; width: auto; border: 0; background: transparent; outline: none;
  height: 100%; padding: 0; font-size: 16px; letter-spacing: -.01em; box-shadow: none;
  background-image: none;
}
body.beregn-flow .kr-felt > input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 560; }
body.beregn-flow .kr-felt .suffix, body.beregn-flow .bf-ctrl .enhed {
  position: static; transform: none; flex: none;
  font-size: 13px; color: var(--bf-svag); font-weight: 520;
}
/* Fritstaaende felter (dato, tal, tekst) faar samme kasse */
body.beregn-flow .felt > input[type="text"],
body.beregn-flow .felt > input[type="date"],
body.beregn-flow .felt > input[type="number"],
body.beregn-flow .felt > select {
  width: 100%; height: 52px; padding: 0 14px;
  background: var(--bf-flade-2); background-image: none;
  border: 1.5px solid var(--bf-linje); border-radius: var(--bf-r-md);
  font-size: 16px; letter-spacing: -.01em; color: var(--bf-ink);
  transition: border-color .2s var(--bf-ease), box-shadow .2s var(--bf-ease), background .2s var(--bf-ease);
}
body.beregn-flow .felt > input:focus, body.beregn-flow .felt > select:focus {
  background: #fff; border-color: var(--bf-brand); box-shadow: var(--bf-ring);
}
body.beregn-flow input::placeholder { color: #b3c1bd; }
body.beregn-flow .felt.fejl-felt > label { color: var(--bf-krit); }
body.beregn-flow .felt.fejl-felt .kr-felt,
body.beregn-flow .felt.fejl-felt > input { border-color: var(--bf-krit); background: #fdf5f3; }

/* ---------- HENTET AUTOMATISK ----------
   Felter udfyldt af PensionsInfo, Open Banking eller boligopslaget.

   Foer satte .er-hentet baggrund og kant paa selve INPUTTET. I det her flow
   er inputtet gennemsigtigt og ligger inde i en kasse (.kr-felt), saa
   markeringen blev en lysere firkant INDE i feltet, forskudt fra kanten, og
   den stoppede foer enheden ("kr"). Den saa derfor forskellig ud fra felt til
   felt: maalt paa Ratepension og Livrente 9/8-2026. Nu markeres KASSEN, og
   markeringen er den samme uanset om feltet har en enhed ved siden af, er en
   drop-down eller staar bart (fx ÅOP).

   Tre ting siger det samme: tonet flade, maerkekant og en fast stribe i
   venstre kant. Striben virker ogsaa paa et bart input, hvor vi ikke kan
   saette et ekstra element ind. */
body.beregn-flow input.er-hentet,
body.beregn-flow select.er-hentet {
  background: transparent !important; border-color: transparent !important;
}
body.beregn-flow .kr-felt:has(.er-hentet),
body.beregn-flow .bf-ctrl:has(.er-hentet),
body.beregn-flow .tal-rk:has(.er-hentet),
body.beregn-flow .felt > input.er-hentet,
body.beregn-flow .felt > select.er-hentet {
  background: var(--bf-brand-taage) !important;
  border-color: var(--bf-brand-300) !important;
  box-shadow: inset 3px 0 0 var(--bf-brand);
}
/* Under redigering vinder fokusringen: saa arbejder man i feltet, og
   markeringen fjernes alligevel af scriptet ved foerste tastetryk. */
body.beregn-flow .kr-felt:has(.er-hentet):focus-within,
body.beregn-flow .bf-ctrl:has(.er-hentet):focus-within,
body.beregn-flow .tal-rk:has(.er-hentet):focus-within,
body.beregn-flow .felt > input.er-hentet:focus,
body.beregn-flow .felt > select.er-hentet:focus {
  background: #fff !important; border-color: var(--bf-brand) !important;
  box-shadow: var(--bf-ring);
}

body.beregn-flow .info-linje, body.beregn-flow .bf-hint {
  margin: 7px 2px 0; font-size: 12.5px; color: var(--bf-svag);
}
body.beregn-flow .bf-hint.god { color: var(--bf-god-ink); }
body.beregn-flow .info-linje b { color: var(--bf-ink); font-weight: 600; }

/* Segmenteret vaelger: ÉN saenket beholder med hvid pille indeni */
body.beregn-flow .seg {
  display: flex; gap: 6px; background: var(--bf-sunk); padding: 5px;
  border-radius: var(--bf-r-md); border: 0;
}
body.beregn-flow .seg > button {
  flex: 1 1 0; min-width: 0; height: 42px; border: 0; border-radius: 10px;
  background: transparent; box-shadow: none; cursor: pointer;
  font: 530 14px var(--sans); color: var(--bf-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all .25s var(--bf-ease);
}
body.beregn-flow .seg > button:hover { color: var(--bf-ink); }
body.beregn-flow .seg > button.valgt {
  background: #fff; color: var(--bf-ink); font-weight: 600; box-shadow: var(--bf-sh-1);
}
@media (max-width: 1400px) { body.beregn-flow .seg > button { font-size: 13px; } }

/* Procent-chips under indbetalingen */
body.beregn-flow .bf-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
body.beregn-flow .bf-chip {
  border: 1px solid var(--bf-linje); background: #fff; border-radius: 999px; padding: 6px 12px;
  font: 400 12.5px var(--sans); color: var(--bf-ink-2); cursor: pointer;
  transition: all .2s var(--bf-ease);
}
body.beregn-flow .bf-chip:hover { border-color: var(--bf-brand-300); color: var(--bf-brand-tekst); }
body.beregn-flow .bf-chip.paa {
  background: var(--bf-brand-blod); border-color: var(--bf-brand-300);
  color: var(--bf-brand-tekst); font-weight: 560;
}

/* Alders-skyderen: stort tal + bane + trin-knapper i tonet kasse */
body.beregn-flow .bf-alder {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  padding: 20px 22px; border-radius: var(--bf-r-lg);
  background: linear-gradient(180deg, #fff, var(--bf-brand-taage));
  border: 1px solid var(--bf-linje);
}
body.beregn-flow .bf-alder-tal { display: flex; align-items: baseline; gap: 6px; }
body.beregn-flow .bf-alder-tal b {
  font-size: 52px; font-weight: 640; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; font-family: var(--sans);
}
body.beregn-flow .bf-alder-tal span { font-size: 14px; color: var(--bf-svag); }
body.beregn-flow .slider-rk {
  display: flex; align-items: center; gap: 14px; background: none;
  border-radius: 0; padding: 0; box-shadow: none;
}
body.beregn-flow .slider-vis { display: none; }
body.beregn-flow .trin-knap {
  width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--bf-linje);
  background: #fff; cursor: pointer; font-size: 19px; color: var(--bf-ink-2);
  box-shadow: var(--bf-sh-1); transition: all .2s var(--bf-ease);
  display: inline-flex; align-items: center; justify-content: center;
}
body.beregn-flow .trin-knap:hover:not(:disabled) { border-color: var(--bf-brand-300); color: var(--bf-brand-tekst); transform: translateY(-1px); }
body.beregn-flow .trin-knap:active { transform: translateY(0) scale(.96); }
body.beregn-flow .trin-knap:disabled { opacity: .4; cursor: not-allowed; }
body.beregn-flow input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 8px; border-radius: 99px;
  outline: none; padding: 0;
  background: linear-gradient(90deg, var(--bf-brand) 0 var(--p,50%), var(--bf-linje-staerk) var(--p,50%) 100%);
}
body.beregn-flow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  cursor: grab; border: 2.5px solid var(--bf-brand); box-shadow: 0 4px 12px -3px rgba(11,90,81,.5);
  transition: transform .18s var(--bf-ease);
}
body.beregn-flow input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
body.beregn-flow input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2.5px solid var(--bf-brand); cursor: grab;
}
body.beregn-flow .bf-taeller {
  display: flex; justify-content: space-between; margin-top: 9px; padding: 0 54px;
  font-size: 11.5px; color: var(--bf-svag); font-variant-numeric: tabular-nums;
}
body.beregn-flow .bf-alder .info-linje { margin-left: 54px; }

/* Folkepensionsalderen: tal-raekke i samme kasse som beloebsfelterne */
body.beregn-flow .tal-rk {
  display: flex; align-items: center; gap: 8px;
  background: var(--bf-flade-2); border: 1.5px solid var(--bf-linje);
  border-radius: var(--bf-r-md); padding: 0 8px; height: 52px;
}
body.beregn-flow .tal-rk:focus-within { background: #fff; border-color: var(--bf-brand); box-shadow: var(--bf-ring); }
body.beregn-flow .tal-rk > input {
  flex: 1; min-width: 0; width: auto; height: 100%; border: 0; background: transparent;
  background-image: none; outline: none; padding: 0; text-align: center;
  font-size: 16px; font-weight: 560; font-variant-numeric: tabular-nums; box-shadow: none;
}
body.beregn-flow .tal-rk .trin-knap { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }

/* ---------- TRIN 3: GRUPPEOVERSKRIFT MED SUM ---------- */
body.beregn-flow .bf-gruppe-h {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--bf-linje);
}
/* -.01em som i forlaegget, ikke sidens -.022em: ved 14 px klemte den
   "Frie midler" saa taet sammen at det laeste som ét ord. */
body.beregn-flow .bf-gruppe-h h3 { margin: 0; font-size: 14px; font-weight: 620; letter-spacing: -.005em; }
body.beregn-flow .bf-gruppe-h h3 span { font-weight: 400; color: var(--bf-svag); }
/* nowrap: paa en telefon braekkede "I alt 475.000 kr." mellem tal og enhed. */
body.beregn-flow .bf-sum { font-size: 13px; color: var(--bf-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.beregn-flow .bf-sum b { color: var(--bf-ink); font-weight: 620; }
body.beregn-flow .k-kort .felt.mini > label {
  font-size: 13px; font-weight: 520; color: var(--bf-ink-2);
  display: flex; align-items: center; gap: 7px; min-height: 0;
}
body.beregn-flow .felt.mini .kr-felt { height: 48px; }
/* To bogstaver, saa forkortelsen kan laeses som ordet ved siden af (Ra =
   Ratepension, Ad = Aktiedepot). Ét bogstav gav B for "Kontant / bank" og
   AE for "Aktiesparekonto", som ikke passede til teksten. Kassen er lidt
   bredere og skriften mindre, ellers roerer bogstaverne kanten. */
body.beregn-flow .bf-ik {
  width: 27px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--bf-brand-blod); color: var(--bf-brand-tekst);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0; font-variant-numeric: normal;
}
body.beregn-flow .bf-ik.fri { background: #fcefe9; color: #b34a1e; }
/* Luft foer "Frie midler"-gruppen, som i forlaegget */
body.beregn-flow .bf-gruppe-h + .felt { margin-top: 0; }
body.beregn-flow .bf-gruppe-h.anden { margin-top: 22px; }

/* ---------- INFOSTRIBE I BUNDEN AF HVERT TRIN ---------- */
body.beregn-flow .bf-info {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 26px; padding: 15px 17px;
  border-radius: var(--bf-r-md); background: var(--bf-brand-taage); border: 1px solid #dcede9;
}
body.beregn-flow .bf-info .bf-info-ik {
  width: 30px; height: 30px; border-radius: 10px; background: var(--bf-brand); color: #fff;
  display: grid; place-items: center; flex: none; font-size: 15px; font-weight: 700;
}
body.beregn-flow .bf-info .bf-info-ik svg { width: 17px; height: 17px; }
body.beregn-flow .bf-info b { display: block; font-size: 13.5px; margin-bottom: 2px; }
body.beregn-flow .bf-info p { margin: 0; font-size: 13px; color: var(--bf-ink-2); }

/* ---------- TRIN 4: HARMONIKAER ---------- */
body.beregn-flow .gruppe {
  border: 1px solid var(--bf-linje); border-radius: var(--bf-r-md); overflow: hidden;
  background: var(--bf-flade-2); margin-bottom: 10px; box-shadow: none;
  transition: box-shadow .25s var(--bf-ease);
}
body.beregn-flow .gruppe:hover { border-color: var(--bf-linje); box-shadow: none; }
body.beregn-flow .gruppe.aaben { background: #fff; box-shadow: var(--bf-sh-1); border-color: var(--bf-linje); }
body.beregn-flow .gruppe-h { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; }
body.beregn-flow .gruppe.aaben .gruppe-h { background: none; }
body.beregn-flow .gruppe-h .ik {
  width: 38px; height: 38px; border-radius: 12px; background: #fff;
  border: 1px solid var(--bf-linje); color: var(--bf-ink-2); flex: none;
}
body.beregn-flow .gruppe.aaben .gruppe-h .ik { background: var(--bf-brand-blod); border-color: transparent; color: var(--bf-brand-tekst); }
body.beregn-flow .gruppe-h .titel { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
body.beregn-flow .gruppe-h .titel > span { font-size: 12.5px; color: var(--bf-svag); font-weight: 400; }
body.beregn-flow .gruppe-h .bf-maerkat {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: var(--bf-sunk); color: var(--bf-svag); white-space: nowrap;
}
body.beregn-flow .gruppe-h .bf-maerkat.sat { background: var(--bf-brand-blod); color: var(--bf-brand-tekst); }
body.beregn-flow .gruppe-h .tilfoej, body.beregn-flow .gruppe-h .chip { display: none; }
body.beregn-flow .gruppe-h .caret { margin-left: 6px; color: var(--bf-svag); }
body.beregn-flow .gruppe.aaben .caret { color: var(--bf-brand-tekst); }
body.beregn-flow .gruppe-krop { padding: 2px 18px 20px 70px; border-top: 0; }
body.beregn-flow .gruppe.aaben .gruppe-krop { animation: bf-op .35s var(--bf-ease); }
body.beregn-flow .gruppe-krop .to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.beregn-flow .gruppe-krop .felt { margin-bottom: 14px; }
body.beregn-flow .gruppe-krop .to-kol .felt { margin-bottom: 0; }
@media (max-width: 900px) {
  body.beregn-flow .gruppe-krop { padding-left: 18px; }
  body.beregn-flow .gruppe-krop .to-kol { grid-template-columns: 1fr; }
}
/* Bolig-opslaget beholder sin egen raekke */
body.beregn-flow .opslag-rk { display: flex; gap: 9px; align-items: stretch; }
body.beregn-flow .opslag-rk input { flex: 1; }
body.beregn-flow .opslag-knap {
  white-space: nowrap; font: 600 13.5px var(--sans); padding: 0 16px; border-radius: var(--bf-r-md);
  border: 1px solid var(--bf-brand-300); background: var(--bf-brand-blod); color: var(--bf-brand-tekst);
  cursor: pointer;
}
body.beregn-flow .opslag-knap:hover { background: var(--bf-brand); color: #fff; border-color: var(--bf-brand); }

/* ---------- BOLIGENS GRUNDLAG ----------
   Ét adresseopslag giver tre tal: den offentlige vurdering, markedsvurderingen
   ud fra realiserede handler i postnummeret og boligens egen seneste frie
   handel. Klienten vaelger hvilket friværdien hviler paa, eller skriver sit
   eget. Samme fire valg som boligkortet paa /forbind, men i beregnerens
   smallere spalte, saa hver mulighed er en raekke og ikke en kolonne. */
body.beregn-flow .bg {
  margin: 14px 0 16px; padding: 14px 16px;
  background: var(--bf-flade-2); border: 1px solid var(--bf-linje);
  border-radius: var(--bf-r-md);
}
body.beregn-flow .bg[hidden] { display: none; }
body.beregn-flow .bg-adr { font-size: 12.5px; color: var(--bf-svag); margin-bottom: 13px; }
body.beregn-flow .bg-adr b {
  display: block; font-size: 14px; color: var(--bf-ink); font-weight: 620;
  letter-spacing: -.01em; margin-bottom: 1px;
}
body.beregn-flow .bg-h {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 650; color: var(--bf-svag); margin-bottom: 9px;
}
body.beregn-flow .bg-liste { display: flex; flex-direction: column; gap: 7px; }
body.beregn-flow .bg-valg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 2px 14px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--bf-linje); border-radius: var(--bf-r-sm);
  padding: 10px 14px; font: inherit; color: inherit;
  transition: border-color .2s var(--bf-ease), background .2s var(--bf-ease);
}
body.beregn-flow .bg-valg:hover:not(:disabled) { border-color: var(--bf-brand-300); }
body.beregn-flow .bg-valg[aria-pressed="true"] {
  border-color: var(--bf-brand); background: var(--bf-brand-blod);
}
body.beregn-flow .bg-valg:disabled { cursor: not-allowed; background: var(--bf-sunk); opacity: .6; }
body.beregn-flow .bg-l { grid-column: 1; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
body.beregn-flow .bg-n { grid-column: 1; font-size: 12px; color: var(--bf-svag); line-height: 1.35; }
body.beregn-flow .bg-valg[aria-pressed="true"] .bg-n { color: var(--bf-brand-tekst); }
body.beregn-flow .bg-t {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
  font-size: 14.5px; font-weight: 620; font-variant-numeric: tabular-nums;
}
body.beregn-flow .bg-areal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 13px; font-size: 12.5px; color: var(--bf-ink-2);
}
body.beregn-flow .bg-areal label { font-weight: 560; }
body.beregn-flow .bg-areal-felt {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 11px;
  background: #fff; border: 1.5px solid var(--bf-linje); border-radius: var(--bf-r-sm);
}
body.beregn-flow .bg-areal-felt:focus-within { border-color: var(--bf-brand); box-shadow: var(--bf-ring); }
body.beregn-flow .bg-areal-felt input {
  width: 66px; height: 100%; padding: 0; border: 0; background: transparent;
  background-image: none; outline: none; box-shadow: none; text-align: right;
  font-size: 16px; font-weight: 560; font-variant-numeric: tabular-nums; color: var(--bf-ink);
}
body.beregn-flow .bg-areal-felt i { font-style: normal; font-size: 12.5px; color: var(--bf-svag); }
body.beregn-flow .bg-areal-sag { flex: 1 1 140px; min-width: 0; color: var(--bf-svag); }
body.beregn-flow .bg-kilde { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--bf-svag); }

/* ---------- HOEJRE: LEVENDE RESULTAT ---------- */
body.beregn-flow .nf-res { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.beregn-flow .nf-kort {
  background: var(--bf-flade); border: 1px solid var(--bf-linje);
  border-radius: var(--bf-r-lg); box-shadow: var(--bf-sh-2); overflow: hidden; min-width: 0;
}
body.beregn-flow .nf-kort-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--bf-linje);
  background: none; font-size: 13px; font-weight: 620;
}
body.beregn-flow .nf-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 400 11.5px var(--sans); color: var(--bf-svag);
}
body.beregn-flow .nf-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bf-god);
  animation: bf-puls 2.6s infinite;
}
body.beregn-flow .nf-kort-k { padding: 20px 18px; }
body.beregn-flow .nf-stor { display: flex; align-items: baseline; gap: 8px; }
body.beregn-flow .nf-stor b {
  font-family: var(--sans); font-size: 40px; font-weight: 640; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
body.beregn-flow .nf-stor small { font-size: 15px; color: var(--bf-svag); font-weight: 520; }
body.beregn-flow .nf-note { margin: 8px 0 0; font-size: 12.5px; color: var(--bf-svag); }
body.beregn-flow .nf-delta {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; margin-top: 12px;
}
body.beregn-flow .nf-delta.op { background: rgba(12,163,12,.10); color: var(--bf-god-ink); }
body.beregn-flow .nf-delta.ned { background: rgba(208,59,59,.10); color: var(--bf-krit); }
body.beregn-flow .nf-delta[hidden] { display: none; }
/* ---------- SOEJLER PR. KILDE ----------
   Afloeser den stablede bar med tegnforklaring. Én vandret soejle pr. kilde,
   skaleret mod den stoerste, saa stoerrelsesforholdet kan aflaeses direkte.
   Vandret og ikke lodret: spalten er 348 px, og "Arbejdsmarkedspension" kan
   ikke staa under en 60 px kolonne. */
body.beregn-flow .nf-soejler { margin-top: 20px; }
body.beregn-flow .nf-soejler[hidden] { display: none; }
body.beregn-flow .nf-soejler-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bf-svag); padding-bottom: 9px; margin-bottom: 13px;
  border-bottom: 1px solid var(--bf-linje);
}
body.beregn-flow .nf-soejler-h span {
  text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap;
}
body.beregn-flow .nf-soejle + .nf-soejle { margin-top: 13px; }
body.beregn-flow .nf-soejle-t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; margin-bottom: 6px;
}
body.beregn-flow .nf-soejle-t span {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  color: var(--bf-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.beregn-flow .nf-soejle-t u {
  text-decoration: none; width: 9px; height: 9px; border-radius: 3px; flex: none;
}
body.beregn-flow .nf-soejle-t b {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--bf-ink);
}
/* Navnet tager slaekken, saa andelen og beloebet staar samlet i hoejre kant.
   Uden det spredte space-between de tre dele, og andelen svaevede i midten. */
body.beregn-flow .nf-soejle-t span { flex: 1 1 auto; }
body.beregn-flow .nf-soejle-t em {
  flex: none; font-style: normal; white-space: nowrap;
  font-size: 11.5px; font-weight: 620; color: var(--bf-svag);
  font-variant-numeric: tabular-nums;
}
/* Nutidskronerne under beloebet (husreglen: et fremtidigt beloeb staar aldrig
   alene). Beloebs-kolonnen bliver en lille stak, saa de to tal staar hoejre-
   justeret over hinanden i stedet for at loebe ud i én linje. <small> og ikke
   <u>/<em>/<span>, som alle tre allerede er taget af farveprikken, andelen og
   navnet i .nf-soejle-t. Jf. fund E3, eftersynet 23/8-2026. */
body.beregn-flow .nf-soejle-t b,
body.beregn-flow .nf-soejle-sum b {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.28;
}
body.beregn-flow .nf-soejle-nu {
  font-size: 11px; font-weight: 500; color: var(--bf-svag);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
body.beregn-flow .nf-soejle-bane {
  height: 10px; border-radius: 99px; background: var(--bf-sunk); overflow: hidden;
}
body.beregn-flow .nf-soejle-bane i {
  display: block; height: 100%; border-radius: 99px; width: 0;
  transition: width .6s var(--bf-ease);
}
body.beregn-flow .nf-soejle-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--bf-linje);
  font-size: 12.5px; color: var(--bf-ink-2);
}
body.beregn-flow .nf-soejle-sum b {
  font-variant-numeric: tabular-nums; font-weight: 620; color: var(--bf-ink); white-space: nowrap;
}
body.beregn-flow .nf-tegn { display: flex; flex-direction: column; gap: 9px; margin-top: 0; }
body.beregn-flow .nf-tegn span { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
body.beregn-flow .nf-tegn u { text-decoration: none; width: 9px; height: 9px; border-radius: 3px; flex: none; }
body.beregn-flow .nf-tegn em { font-style: normal; color: var(--bf-ink-2); flex: 1; }
body.beregn-flow .nf-tegn b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
body.beregn-flow .nf-daek {
  margin-top: 6px; padding: 16px 18px; border-top: 1px solid var(--bf-linje);
  background: var(--bf-flade-2);
}
/* ---------- DAEKNINGSGRAD SOM KPI-MAALER ---------- */
body.beregn-flow .nf-kpi { position: relative; }
body.beregn-flow .nf-kpi svg { display: block; width: 100%; height: auto; }
body.beregn-flow .nf-kpi .kpi-tal {
  font-family: var(--sans); font-size: 29px; font-weight: 650; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
body.beregn-flow .nf-kpi .kpi-etiket {
  font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--bf-ink-2);
  letter-spacing: 0;
}
body.beregn-flow .nf-kpi .kpi-ende,
body.beregn-flow .nf-kpi .kpi-maal {
  font-family: var(--sans); font-size: 9.5px; font-weight: 500; fill: var(--bf-svag);
  font-variant-numeric: tabular-nums;
}
body.beregn-flow .nf-kpi .kpi-maal { fill: var(--bf-ink-2); font-weight: 620; }
body.beregn-flow .nf-daek .nf-note { margin: 10px 0 0; font-size: 11.5px; text-align: center; }
body.beregn-flow .nf-daek .nf-note b { color: var(--bf-ink); font-weight: 620; }

/* ---------- FAST HANDLINGSBJAELKE ---------- */
body.beregn-flow .beregn-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  margin: 0; padding: 0; border-top: 1px solid rgba(227,234,232,.9);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  display: block;
}
body.beregn-flow .bf-fremdrift {
  position: absolute; top: 0; left: 0; height: 2px; width: 12%;
  background: linear-gradient(90deg, var(--bf-brand-300), var(--bf-brand));
  transition: width .5s var(--bf-ease);
}
body.beregn-flow .bf-bar-inder {
  max-width: 1440px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 18px;
}
body.beregn-flow .beregn-bar .info {
  flex: 1; text-align: center; font-size: 13.5px; color: var(--bf-ink-2);
}
body.beregn-flow .beregn-bar .info b { color: var(--bf-ink); font-weight: 620; }
body.beregn-flow .beregn-bar .info.ok b { color: var(--bf-god-ink); }
body.beregn-flow .beregn-bar .knap {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px;
  border-radius: 14px; border: 1px solid transparent; cursor: pointer;
  font: 580 14.5px var(--sans); white-space: nowrap; width: auto;
  transition: all .22s var(--bf-ease);
}
body.beregn-flow .beregn-bar .knap-tekst { background: transparent; color: var(--bf-ink-2); }
body.beregn-flow .beregn-bar .knap-tekst:hover { background: var(--bf-sunk); color: var(--bf-ink); }
body.beregn-flow .beregn-bar .knap-primaer,
body.beregn-flow .beregn-bar .knap-guld {
  background: linear-gradient(180deg, #12897b, var(--bf-brand-dyb)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px -10px rgba(11,90,81,.85);
}
body.beregn-flow .beregn-bar .knap-primaer:hover,
body.beregn-flow .beregn-bar .knap-guld:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 26px -10px rgba(11,90,81,.9);
}
body.beregn-flow .sikker-linje {
  max-width: 1440px; margin: 0 auto; padding: 0 28px 12px;
  display: flex; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--bf-svag);
}
body.beregn-flow .fejl-boks {
  position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 80;
  margin: 0; max-width: min(560px, calc(100vw - 40px));
  box-shadow: 0 18px 40px -18px rgba(11,26,23,.4);
}

/* Den offentlige proeve (/rapport-klient) faar den delte site-nav injiceret
   oeverst. Sidens egen topbar er skjult af body.demo i sidens inline-CSS,
   men den her fil laeses SENERE og med samme vaegt, saa reglen skal
   gentages her. Ellers staar ordmaerket to gange paa proeven. */
body.beregn-flow.demo .topbar,
body.beregn-flow.demo .bf-gemt,
body.beregn-flow.demo .beregn-bar { display: none !important; }

/* Konto-foden er skjult HELE vejen paa /beregn. Under formularen laa den midt
   paa siden med en knap videre til en anden flade, og under rapporten sagde
   den praecis det samme som "Sidste trin: Dit overblik er klar" lige ovenover,
   med den samme knap. To identiske veje ud lige efter hinanden. */
body.beregn-flow #konto-foot { display: none !important; }

/* ---------- RESULTATET: bjaelken og skallen viger ---------- */
body.beregn-flow.viser-resultat .beregn-bar,
body.beregn-flow.viser-resultat .sikker-linje { display: none; }
body.beregn-flow .res-wrap, body.beregn-flow .res-flow, body.beregn-flow .side-ver {
  max-width: 1180px; margin-left: auto; margin-right: auto;
}

/* ---------- RESPONSIVT ---------- */
@media (max-width: 1240px) {
  body.beregn-flow .nf { grid-template-columns: 216px minmax(0,1fr); }
  body.beregn-flow .nf-res {
    grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap;
  }
  body.beregn-flow .nf-res .nf-kort { flex: 1; min-width: 280px; }
}
@media (max-width: 900px) {
  body.beregn-flow .k-kort { grid-template-columns: 1fr; }
  body.beregn-flow .bf-alder { grid-template-columns: 1fr; }
  body.beregn-flow .bf-taeller, body.beregn-flow .bf-alder .info-linje { padding: 0; margin-left: 0; }
}
@media (max-width: 820px) {
  body.beregn-flow .wizard { padding: 18px 16px 150px; }
  body.beregn-flow .nf { grid-template-columns: 1fr; gap: 16px; }
  body.beregn-flow .nf-rail { position: static; }
  body.beregn-flow .nf-liste { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  body.beregn-flow .nf-liste::-webkit-scrollbar { display: none; }
  body.beregn-flow .nf-skinne, body.beregn-flow .nf-skinne-fyld { display: none; }
  body.beregn-flow .nf-t { flex: none; }
  body.beregn-flow .nf-hjaelp { display: none; }
  body.beregn-flow .k-panel { padding: 24px 20px; }
  body.beregn-flow .k-titel h2 { font-size: 22px; }
  body.beregn-flow .bf-bar-inder { padding: 11px 16px; gap: 10px; }
  body.beregn-flow .beregn-bar .info { font-size: 12.5px; text-align: left; }
  body.beregn-flow .beregn-bar .knap { height: 44px; padding: 0 16px; font-size: 14px; }
  body.beregn-flow .sikker-linje { padding: 0 16px 10px; text-align: center; }
}
@media (max-width: 560px) {
  body.beregn-flow .kr-felt > input, body.beregn-flow .felt > input,
  body.beregn-flow .felt > select, body.beregn-flow .tal-rk > input { font-size: 16px; }
  body.beregn-flow .bf-alder-tal b { font-size: 40px; }
  body.beregn-flow .nf-stor b { font-size: 32px; }

  /* ---- Bolig-opslaget paa en telefon ----
     Maalt 8/8-2026 paa 390 px: adressefeltet og knappen delte 282 px, saa
     feltet stod paa 143 px og "Vigerslev Allé 118, 2500 Valby" blev klippet
     til "Vigerslev Allé" mens der blev skrevet. Knappen faar sin egen linje. */
  body.beregn-flow .opslag-rk { flex-direction: column; }
  body.beregn-flow .opslag-rk input { flex: none; width: 100%; }
  body.beregn-flow .opslag-knap { height: 46px; width: 100%; }

  /* Harmonika-hovedet: maerkaten under titlen i stedet for ved siden af.
     Ved siden af var der 83 px tilbage til teksten, og "Friværdi indgår i
     din samlede formue" braekkede over fire linjer. */
  body.beregn-flow .gruppe-h {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ik titel caret" "ik maerkat maerkat";
    gap: 5px 12px; align-items: center; padding: 14px 16px;
  }
  body.beregn-flow .gruppe-h .ik { grid-area: ik; align-self: start; }
  body.beregn-flow .gruppe-h .titel { grid-area: titel; }
  body.beregn-flow .gruppe-h .caret { grid-area: caret; margin-left: 0; align-self: start; margin-top: 9px; }
  body.beregn-flow .gruppe-h .bf-maerkat { grid-area: maerkat; justify-self: start; }
  body.beregn-flow .gruppe-krop { padding: 2px 16px 18px; }

  /* Grundlaget: beloebet under teksten. Ved siden af skulle etiket + beloeb
     dele 222 px, og "Offentlig vurdering 2022" alene bruger 150. */
  body.beregn-flow .bg { padding: 13px; }
  body.beregn-flow .bg-valg { grid-template-columns: minmax(0, 1fr); }
  body.beregn-flow .bg-t { grid-column: 1; grid-row: auto; align-self: start; margin-top: 3px; }
}

@media print {
  body.beregn-flow .topbar, body.beregn-flow .beregn-bar,
  body.beregn-flow .nf-rail, body.beregn-flow .nf-res, body.beregn-flow .sikker-linje { display: none !important; }
  body.beregn-flow { background: #fff; }
}

/* P-182: outline:none paa slideren slukkede tastaturets fokusring. Nu en tydelig ring om knappen. */
body.beregn-flow input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--handling, #0b7f83); }
body.beregn-flow input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--handling, #0b7f83); }