/* ============================================================
   KUNDEFLADEN I /ADVISOR-DESIGNET (P-576)

   Bilal 25/9-2026: foer den nye forside publiceres, skal kundens
   egne sider tale samme sprog som /advisor, som huset arbejder i
   hele dagen: Inter paa alt, Fraunces KUN i ordmaerket, farve-
   feltet bag det hele og glasruder oven paa det.

   Sider: /h (hent.html), /login med og uden invitation (login.html),
   /velkommen, /forbind (connect-v2.html), /pi-luk og /min-pension
   (kunde.html). Arket indlaeses SIDST i head, og alt er scopet under
   body.kundeflade, saa det vinder over klientflade.css, minpension.css
   og sidernes egne blokke uden !important.

   Tokens og maal er kopieret fra advisor-ny.html (glasblokken og
   knapperne), saa de to flader ikke kan glide fra hinanden i tone.

   ⚠ WHITELABEL: kundens farve kommer ind som --maerke og --handling
     (brandCssVars i server.ts, :root:root). Derfor er ALLE handlings-
     farver herunder skrevet som var(--handling) og var(--maerke), ogsaa
     skyerne i farvefeltet, og aldrig som #0b7f83. En kunde med roed
     farve faar et roedligt felt og roede knapper, ikke Pensias teal.
   ⚠ MitID-knappen er officiel blaa og farves ALDRIG om (MitIDs regler).
   ============================================================ */

body.kundeflade {
  --glas: rgba(255,255,255,.58);
  --glas-kant: rgba(255,255,255,.78);
  --glas-top: rgba(255,255,255,.95);
  --slor: blur(26px) saturate(1.7);
  --kf-skygge: 0 1px 2px rgba(12,34,48,.05), 0 12px 32px -12px rgba(12,34,48,.12);
  --kf-skygge-h: 0 2px 4px rgba(12,34,48,.06), 0 28px 60px -20px rgba(12,34,48,.22);
  --inter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Advisor-ny's graatoner. --dim og --svag blev maalt mod pixlen bag
     bogstavet paa farvefeltet; de gamle #5b6b76/#97a9b2 faldt under 4,5. */
  --tekst: #0c2230;
  --tekst-dim: #4f5f6a;
  --tekst-svag: #7b8b96;

  /* Fladerne bliver ruder. Siderne skriver var(--flade-kort) paa deres kort,
     saa ét token goer dem alle til glas; felterne faar deres egen hvide bund
     laengere nede, for et felt man skriver i skal vaere uigennemsigtigt. */
  --flade-side: transparent;
  --flade-kort: var(--glas);
  --flade-nedton: rgba(255,255,255,.42);
  --kant: rgba(255,255,255,.78);
  --kant-blod: rgba(12,34,48,.07);
  --mp-kant: rgba(255,255,255,.78);

  /* Én skrift. Alle de gamle navne peger paa Inter. */
  --sans: var(--inter);
  --serif: var(--inter);
  --font-ui: var(--inter);
  /* ⚠ Ogsaa --display og --font-display: sidernes egne regler for h2, h3 og
     hovedtallene hedder fx `body.kf-login .kort h2 { font-family: var(--display) }`
     og vinder paa specificitet over en regel paa h2 alene. Ordmaerket faar
     Fraunces skrevet ud laengere nede i stedet. Talt efter: kun ordmaerket
     staar i Fraunces paa de seks sider. */
  --display: var(--inter);
  --font-display: var(--inter);
  --font-tal: var(--inter);

  font-family: var(--inter);
  color: var(--tekst);
  background: #eaf1f3;
  background-image: none;
  -webkit-font-smoothing: auto;
}

/* Farvefeltet: samme fire skyer som /advisor, maalt i vmax, saa en telefon og
   et skrivebord faar samme billede. Skyerne haenger paa --handling og
   --maerke, saa whitelabel farver feltet med. */
body.kundeflade::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  height: auto; -webkit-mask-image: none; mask-image: none;
  background:
    linear-gradient(rgba(255,255,255,.44), rgba(255,255,255,.44)),
    radial-gradient(78vmax 58vmax at 4% -8%, color-mix(in srgb, var(--handling) 62%, transparent), transparent 58%),
    radial-gradient(66vmax 52vmax at 99% -2%, color-mix(in srgb, var(--maerke) 50%, transparent), transparent 60%),
    radial-gradient(62vmax 62vmax at 78% 104%, rgba(178,106,0,.38), transparent 58%),
    radial-gradient(58vmax 44vmax at 22% 64%, rgba(63,124,179,.38), transparent 62%),
    linear-gradient(160deg, #eaf1f3 0%, #e3edf0 50%, #efeae2 100%);
}

/* ---------- Skriften ----------
   ⚠ pensia-tokens.css saetter baade color og font-family paa h1-h4, saa
   begge skal skrives ud her (samme faelde som i advisor-ny). */
body.kundeflade h1,
body.kundeflade h2,
body.kundeflade h3,
body.kundeflade h4 {
  font-family: var(--inter);
  font-weight: 650;
  letter-spacing: -.025em;
  color: inherit;
  font-variant-numeric: lining-nums;
}
body.kundeflade h1 { letter-spacing: -.032em; line-height: 1.12; }
body.kundeflade h3 { letter-spacing: -.015em; }
/* Et farvet ord i en overskrift er et kendetegn for genereret design (Bilal).
   Overskriften staar i én farve. */
body.kundeflade h1 .accent,
body.kundeflade h1 em,
body.kundeflade h2 em { color: inherit; font-style: normal; }

/* Ordmaerket er det ENESTE sted Fraunces staar. */
/* ⚠ Specificiteten er hoejnet med vilje: sidernes egne regler for ordmaerket
   hedder fx `body.klientflade .topbar .logo` (0,3,1) og peger paa --display,
   som her er Inter. Uden html + dobbelt klasse stod ordmaerket i Inter. */
html body.kundeflade.kundeflade :is(.ordmaerke, .logo, .brand, .ltr, .prik) {
  font-family: 'Fraunces', Georgia, serif;
}

/* Versalmaerkater er ogsaa et kendetegn (Bilal). Maerkater staar med
   almindelige bogstaver og uden spaerret skrift. De konkrete klasser er
   fundet ved at taelle hvilke elementer der faktisk stod i versaler. */
html body.kundeflade.kundeflade :is(
  .kf-pille, .kf-sh b, .ff-rail-h, .kicker, .mp-kicker, .flise-h, .etiket, .eyebrow, .vk-maerkat, .hilsen, .k, th, .invite-pil, .invite-pil *, .kf-inviteret
) {
  text-transform: none;
  letter-spacing: -.005em;
}

/* ---------- Ruderne ----------
   Lyskanten i toppen er det, der goer forskellen paa gennemsigtig og bare
   lysere. INTET slor paa kortene: de ligger over et bloedt felt, og et slor
   dér aendrer ingenting, men koster billeder i hver rulning (maalt i P-353). */
body.kundeflade .kort,
body.kundeflade .kf-kort,
body.kundeflade .kilde-rk,
body.kundeflade .ff-res-kort,
body.kundeflade .ff-hjaelp,
body.kundeflade .flise:not(.dyb),
body.kundeflade .k-kort {
  background: var(--glas);
  border: 1px solid var(--glas-kant);
  box-shadow: inset 0 1px 0 var(--glas-top), var(--kf-skygge);
}

/* De dybe felter (hovedtallet) beholder petrol, men faar samme lyskant som
   ruderne, saa de ligger i samme materiale. Solid bund under gradienten,
   ellers maaler en kontrastkontrol hvid tekst paa hvidt. */
body.kundeflade .dyb,
body.kundeflade .kort.dyb,
body.kundeflade .flise.dyb {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px -18px rgba(0,43,67,.45);
  border-color: rgba(255,255,255,.10);
}

/* Topbaren ligger OVEN PAA indhold der ruller, og husets regel er at en fast
   bjaelke over indhold i bevaegelse skal vaere (naesten) uigennemsigtig
   (P-474): ved .62 koerte kildekortenes tekst synligt igennem den paa /forbind. */
body.kundeflade .topbar {
  background: rgba(247,250,251,.94);
  -webkit-backdrop-filter: var(--slor);
  backdrop-filter: var(--slor);
  border-bottom: 1px solid var(--glas-kant);
  box-shadow: inset 0 -1px 0 rgba(12,34,48,.04);
}

/* ---------- Felterne ---------- */
body.kundeflade input:not([type=checkbox]):not([type=radio]),
body.kundeflade select,
body.kundeflade textarea,
body.kundeflade .felt {
  background: rgba(255,255,255,.9);
  border-color: rgba(12,34,48,.12);
  font-family: var(--inter);
}
/* P-586: paa /beregn er .felt BEHOLDEREN om etiket, felt og hint, og .k-kort er
   felt-gitteret INDE i den runde rude (.nf-midt). Reglerne ovenfor og ruderne gav
   hver beholder sin egen hvide, kantede kasse oven paa glasset. Kun selve
   inputtet har bund; beregn-flow.css nulstiller, men denne fil indlaeses efter. */
body.kundeflade.beregn-flow .k-kort,
body.kundeflade.beregn-flow .felt {
  background: none;
  border: 0;
  box-shadow: none;
}
/* Kronefelterne og stepperne: rammen (.kr-felt, .bf-ctrl) ER feltet, inputtet i
   den er gennemsigtigt. Ellers stod en hvid kasse inde i rammen. */
body.kundeflade.beregn-flow :is(.kr-felt, .bf-ctrl) > :is(input, select),
body.kundeflade.beregn-flow :is(.kr-felt, .bf-ctrl) > :is(input, select):focus {
  background: transparent;
  box-shadow: none;
}
body.kundeflade input:focus,
body.kundeflade select:focus,
body.kundeflade textarea:focus,
body.kundeflade .felt:focus {
  background: #fff;
  border-color: var(--handling);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--handling) 18%, transparent);
}

/* ---------- Knapperne ----------
   Som .knp.fyld i advisor-ny: en fyldt knap med lyskant i toppen laeses som et
   objekt, ikke som et farvet felt. Farven er --handling, saa whitelabel virker. */
body.kundeflade .knap-primaer,
body.kundeflade button.primaer,
body.kundeflade .primaer-knap,
body.kundeflade .kf-knap {
  background: linear-gradient(180deg, color-mix(in srgb, var(--handling) 86%, #fff) 0%, var(--handling) 100%);
  border: 1px solid color-mix(in srgb, var(--handling) 88%, #000);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(12,34,48,.16);
  font-family: var(--inter);
  font-weight: 600;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
body.kundeflade .knap-primaer:hover:not(:disabled),
body.kundeflade .kf-knap:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--handling) 80%, #fff) 0%, color-mix(in srgb, var(--handling) 92%, #fff) 100%);
  transform: translateY(-1px);
}
body.kundeflade .knap-primaer:active:not(:disabled) { transform: translateY(0); }
body.kundeflade .knap-primaer:disabled {
  background: rgba(12,34,48,.16); border-color: transparent; box-shadow: none; color: rgba(255,255,255,.95);
}
body.kundeflade .knap-ghost,
body.kundeflade .knap-sekundaer {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--glas-kant);
  box-shadow: inset 0 1px 0 var(--glas-top), 0 1px 2px rgba(12,34,48,.08);
  font-family: var(--inter);
}
/* MitID: officiel blaa, men samme form og lyskant som husets knapper. */
body.kundeflade .mitid,
body.kundeflade .knap-mitid {
  background: linear-gradient(180deg, #1466b0 0%, #0a589e 100%);
  border: 1px solid #084a86;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(12,34,48,.18);
  font-family: var(--inter);
}
body.kundeflade .mitid:hover:not(:disabled),
body.kundeflade .knap-mitid:hover:not(:disabled) { background: linear-gradient(180deg, #1872c2 0%, #0b5fa9 100%); }

:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.kundeflade .topbar { background: rgba(255,255,255,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  body.kundeflade { --glas: rgba(255,255,255,.94); }
  body.kundeflade .topbar { background: rgba(255,255,255,.96); }
}

/* ---------- /h: hent-linkets side ----------
   Siden havde en petrol-bue i toppen med et hvidt ordmaerke. Buen er erstattet
   af farvefeltet, saa ordmaerket staar nu i maerkefarven paa det lyse felt. */
body.kundeflade .top .ordmaerke { color: var(--maerke); }
body.kundeflade .top .ordmaerke .prik { color: var(--handling); }
body.kundeflade .top-org { color: var(--tekst-dim); }

/* "Anbefalet" paa /velkommen: reglen i klientflade.css er (0,5,1), saa den
   skal moedes med samme vaegt. Et roligt maerke med almindelige bogstaver. */
body.kf-velkommen.kundeflade .valg .kort.dyb .vk-maerkat {
  text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600;
}

/* ---------- Rejsen i topbaren paa en telefon ----------
   Paa 390 px brak perlekaeden, og trin 4 hoppede ned paa en linje for sig
   under de andre. Paa smal skaerm staar den paa én linje: kun det aktive trin
   har sit navn, de andre er tal, og stregerne imellem er kortere. */
@media (max-width: 560px) {
  body.kundeflade .flow-i-topbar .flow-rail-liste { flex-wrap: nowrap; padding: 3px 4px; }
  body.kundeflade .flow-i-topbar .flow-trin + .flow-trin { padding-left: 8px; }
  body.kundeflade .flow-i-topbar .flow-trin + .flow-trin::before { width: 8px; }
  body.kundeflade .flow-i-topbar .flow-top { padding: 4px 6px; gap: 6px; font-size: .8rem; }
  body.kundeflade .flow-i-topbar .flow-trin.aktiv .flow-top { padding: 4px 10px 4px 5px; }
}
body.kundeflade .flow-rail-liste {
  background: var(--glas); border-color: var(--glas-kant);
  box-shadow: inset 0 1px 0 var(--glas-top);
}

/* Formularens hovedknap paa /login er husets handlingsknap, ikke petrol. */
body.kundeflade #submit-btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--handling) 86%, #fff) 0%, var(--handling) 100%);
  border: 1px solid color-mix(in srgb, var(--handling) 88%, #000);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(12,34,48,.16);
  font-family: var(--inter); font-weight: 600;
}
body.kundeflade #submit-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--handling) 80%, #fff) 0%, color-mix(in srgb, var(--handling) 92%, #fff) 100%);
}
body.kundeflade .kort h2 { font-weight: 650; }

/* ---------- /login paa en telefon ----------
   Foer stod kortet foerst med "Opret adgang", og lige under det samme ord
   igen som sidens h1 ("Opret din adgang."). Paa en telefon laeses siden
   oppefra, saa det blev sagt to gange, og den vigtigste tryghed, HVEM der har
   inviteret, kom foerst efter formularen.
   Nu: invitationen staar oeverst, saa kortet, saa de tre tryghedslinjer.
   Fortaellingens h1 og ingress er skjult, fordi kortet siger det samme. */
@media (max-width: 900px) {
  body.kf-login.kundeflade .login-flade { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; }
  body.kf-login.kundeflade .login-tekst { display: contents; }
  body.kf-login.kundeflade .login-tekst > .kf-pille,
  body.kf-login.kundeflade .login-tekst > h1,
  body.kf-login.kundeflade .login-tekst > p { display: none; }
  body.kf-login.kundeflade .invite-pil { order: 0; align-self: flex-start; margin: 0; }
  body.kf-login.kundeflade .login-boks { order: 1; }
  body.kf-login.kundeflade .login-tekst > .tryg { order: 2; margin: 4px 6px 0; display: grid; gap: 8px; justify-content: start; justify-items: start; }
}

/* ---------- /forbind: banken, naar forbindelsen ikke er slaaet til ----------
   Et roligt, graat maerke og én saetning. Ikke en advarsel: der er ikke noget
   galt, kilden findes bare ikke endnu. */
body.kundeflade .maerke-lukket {
  background: rgba(12,34,48,.06); color: var(--tekst-dim); font-weight: 600;
}
body.kundeflade .kilde-lukket {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.5); border: 1px dashed rgba(12,34,48,.14);
  font-size: .86rem; line-height: 1.5; color: var(--tekst-dim);
}

/* Vaegten foelger skriften (samme regel som advisor-ny, P-359): 500 i Fraunces
   baerer sig selv, 500 i Inter er slapt. Sidernes egne regler for h1-h3 er op
   til (0,4,1), saa vaegten skrives med samme greb som ordmaerket. */
html body.kundeflade.kundeflade :is(h1, h2, h3) { font-weight: 650; }
html body.kundeflade.kundeflade h1 { letter-spacing: -.032em; }

/* "Ikke forbundet": stod med en inline-stil paa et token (--papir-2), som ikke
   findes, og fik derfor ingen bund paa nogle kort. Nu en klasse. */
body.kundeflade .maerke-ikke { background: rgba(12,34,48,.06); color: var(--tekst-dim); }

/* Bundbjaelken paa /forbind: en rude som topbaren, og en inaktiv knap der kan
   LAESES. Hvid tekst paa lysegraat maalte under 1,5; en inaktiv knap er
   undtaget fra kontrastkravet, men den siger stadig hvad der sker bagefter. */
body.kf-forbind.kundeflade .fortsaet {
  background: rgba(247,250,251,.95);
  -webkit-backdrop-filter: var(--slor); backdrop-filter: var(--slor);
  border-top: 1px solid var(--glas-kant);
  box-shadow: 0 -10px 30px -18px rgba(12,34,48,.25);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
body.kf-forbind.kundeflade .fortsaet .knap-primaer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--handling) 86%, #fff) 0%, var(--handling) 100%);
}
body.kf-forbind.kundeflade .fortsaet .knap-primaer:disabled {
  background: rgba(12,34,48,.07); border-color: rgba(12,34,48,.08); color: var(--tekst-dim);
  box-shadow: none; opacity: 1;
}

@media (max-width: 820px) {
  /* Maerket stod paa en linje for sig med 22 px luft over sig (raekkeafstand +
     egen margin), saa kortet fik et hul midt i. Nu flugter det med teksten
     under navnet, taet paa beskrivelsen. */
  body.kf-forbind.kundeflade .kilde-h { row-gap: 0; }
  body.kf-forbind.kundeflade .kilde-h .maerke { margin: 8px 0 0 58px; }
  body.kf-forbind.kundeflade .kilde-rk:not(.nu) .kilde-krop { margin-top: 12px; }
}

/* /min-pension: milepaelstabellen havde min-width 380 px i et kort, der er
   godt 310 px indvendigt paa en telefon, saa sidste kolonne ("I dagens
   koebekraft") stod halvt uden for og skulle rulles frem. Fire korte kolonner
   kan godt staa i 310 px, naar overskrifterne maa bryde. */
@media (max-width: 480px) {
  body.minpension.kundeflade table.dt { min-width: 0; font-size: .82rem; }
  body.minpension.kundeflade table.dt th,
  body.minpension.kundeflade table.dt td { padding: 10px 5px; }
  body.minpension.kundeflade table.dt th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
}
body.minpension.kundeflade table.dt th { letter-spacing: 0; font-size: .74rem; font-weight: 600; }

/* Paa en smal telefon er ordmaerket og rejsen for meget til én bjaelke, isaer
   paa et whitelabel-domaene, hvor ordmaerket er kundens eget, laengere navn
   ("Nordisk Pension." brak i to linjer, og trin 4 gled ud over kanten). Under
   420 px er rejsen fire tal; sidens egen overskrift siger hvilket trin man er paa. */
body.kundeflade .topbar .logo { white-space: nowrap; }
@media (max-width: 420px) {
  body.kundeflade .flow-i-topbar .flow-trin.aktiv .flow-lbl { display: none; }
  body.kundeflade .flow-i-topbar .flow-trin.aktiv .flow-top { padding: 4px 5px; }
}

/* /gennemgang havde en petrol topbar med hvid tekst. Topbaren er nu lys som paa
   de andre flader, saa teksten og knapperne i den skal vaere moerke. */
body.kundeflade .topbar .ordmaerke { color: var(--maerke); }
body.kundeflade .topbar .ordmaerke .prik { color: var(--handling); }
body.kundeflade .topbar .titel { color: var(--tekst-dim); text-transform: none; letter-spacing: 0; border-left-color: rgba(12,34,48,.12); }
body.kundeflade .topbar { color: var(--tekst); }
body.kundeflade .tb-knap { color: var(--tekst); background: rgba(255,255,255,.7); border-color: rgba(12,34,48,.12); }
body.kundeflade .tb-knap:hover { border-color: var(--handling); }

/* Versalmaerkater paa /beregn og /regnemaskine (talt i browseren). */
html body.kundeflade.kundeflade :is(.nf-rail-h, .nf-pille, .rg-rk-h, .rg-rk-h *, .ff-sum .kicker, .k) {
  text-transform: none; letter-spacing: 0;
}
body.kundeflade .topbar .klientpille { color: var(--tekst); background: rgba(255,255,255,.7); border-color: rgba(12,34,48,.12); }
body.kundeflade .tb-knap:hover { color: var(--tekst); background: #fff; }