/* ============================================================
   PENSIA DESIGNTOKENS, én kilde til farve, skrift og geometri.
   ------------------------------------------------------------
   Serveres på /pensia-tokens.css. Skal indlæses SOM DET FØRSTE
   stylesheet på enhver Pensia-side, før sidens egne regler.

   Navngivningen beskriver ROLLE, ikke farve. Derfor hedder det
   --maerke og --handling, ikke --groen og --guld. De gamle navne
   levede videre efter petrol-skinnet og fik enhver ny udvikler
   til at gætte forkert.

   Alle kontrasttal i kommentarerne er regnet efter WCAG 2.1 mod
   den flade der står nævnt. AA kræver 4,5:1 for brødtekst,
   3:1 for store overskrifter og grafiske elementer.

   Se docs/8-Design/DESIGNGUIDE.md for reglerne bag tallene og
   docs/8-Design/MIGRERING.md for hvordan siderne flyttes hertil.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* Fraunces og Inter er selvhostede (ingen tredjepartskald).
   Variable woff2, hele vægtintervallet i én fil pr. familie. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ==========================================================
     1. FLADER
     ========================================================== */
  --flade-side:    #f4f6f8;  /* sidens bund */
  --flade-nedton:  #eef2f4;  /* nedtonet zone inde på en lys side */
  --flade-kort:    #ffffff;  /* kort, paneler, modaler, felter */
  --flade-dyb:     #003755;  /* petrol: sidebar, footer, premium-sektioner */
  --flade-dyb-2:   #002639;  /* bunden af petrol-gradienten */

  /* ==========================================================
     2. TEKST
     ========================================================== */
  --tekst:          #0c2230;  /* brødtekst på lys flade, 15,1:1 */
  --tekst-dim:      #5b6b76;  /* sekundær tekst på lys flade, 5,1:1 */
  --tekst-svag:     #97a9b2;  /* KUN ikke-informativ tekst, ikke AA */
  --tekst-paa-dyb:  #eaf1f5;  /* tekst på petrol, 11,4:1 */
  --tekst-dim-dyb:  #9fb6c4;  /* sekundær tekst på petrol, 5,9:1 */

  /* ==========================================================
     3. MÆRKE (identitet, petrol)
     Whitelabel overskriver --maerke, --maerke-dyb og --maerke-lys.
     ========================================================== */
  --maerke:      #003755;  /* primærknap, aktiv navigation, logo */
  --maerke-dyb:  #002b43;  /* hover og aktiv tilstand */
  --maerke-lys:  #e6f0f5;  /* tint-flade bag mærkeindhold */

  /* ==========================================================
     4. HANDLING (teal)
     Den farve brugeren skal klikke på. Bevidst adskilt fra
     mærkefarven, så "hvor er vi" og "hvad kan jeg gøre" ikke
     er samme signal.
     ========================================================== */
  --handling:       #0b7f83;  /* fyld med hvid tekst, 4,8:1 */
  --handling-dyb:   #075c5f;  /* hover, 6,9:1 */
  --handling-lys:   #e4f3f4;  /* tint-flade */
  --handling-tekst: #0a6e72;  /* teal SOM TEKST på lys flade, 6,0:1 */
  --handling-paa-dyb: #4ec7cb; /* teal på petrol, 6,2:1 */

  /* ==========================================================
     5. FREMHÆVNING (messing)
     Til det der skal fortjene opmærksomhed: Max-tier, anbefalet
     plan, Pensia Score. Aldrig til almindelige knapper.
     ========================================================== */
  --fremhaev:       #b08d4a;  /* fyld og streger, 2,9:1: ALDRIG tekst */
  --fremhaev-lys:   #f4ecdd;  /* tint-flade */
  --fremhaev-tekst: #7d6230;  /* messing SOM TEKST på lys flade, 5,3:1 */

  /* ==========================================================
     6. STATUS
     ========================================================== */
  --ok:            #1c7a52;  /* 4,9:1 */
  --ok-lys:        #e4f1e9;
  --advarsel:      #8a6d2f;  /* 4,5:1, lige på grænsen */
  --advarsel-lys:  #f7edda;
  --fejl:          #c0392b;  /* 5,0:1 */
  --fejl-lys:      #f9e9e7;

  /* ==========================================================
     7. KANTER
     ========================================================== */
  --kant:        #e2e9ee;  /* standard skillelinje og feltkant */
  --kant-blod:   #eef2f4;  /* svag inddeling inde i et kort */
  --kant-staerk: #c7d4dc;  /* kant der skal ses, fx fokuseret felt */
  --kant-paa-dyb: rgba(255,255,255,.14);

  /* ==========================================================
     8. DATAVISUALISERING
     Kategorisk palet, maskinelt valideret med dataviz-skillens
     validate_palette.js. Rækkefølgen er bindende: en graf med
     to serier bruger 1 og 2, ikke 1 og 4.
     ========================================================== */
  --serie-1: #003755;  /* petrol,     12,5:1 */
  --serie-2: #0b7f83;  /* teal,        4,8:1 */
  --serie-3: #2f6fb5;  /* blå,         4,8:1 */
  --serie-4: #9c4221;  /* terracotta,  6,1:1 */
  --serie-5: #b3801a;  /* okker,       3,3:1: kun fyld, mørk etiket */
  --serie-6: #6b4d8f;  /* violet,      6,5:1 */

  /* Udbetalingsplaner, fast kobling (må ikke byttes rundt) */
  --plan-skattesmart: #b3801a;
  --plan-jaevnest:    #17724d;
  --plan-standard:    #2f6fb5;
  --plan-mest:        #9c4221;

  /* Kilde-stak i formuegrafen, én rampe fra dyb til lys */
  --kilde-folkepension: #0a3d2c;
  --kilde-atp:          #16644a;
  --kilde-livrente:     #2d8a63;
  --kilde-rate:         #63a88c;

  /* ==========================================================
     9. SKRIFT
     Fraunces = display (offentlige overskrifter + store tal).
     Hanken Grotesk = alt brugerflade.
     Inter = tal i tabeller, fordi tabular-nums er garanteret.
     ========================================================== */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-tal:     'Inter', 'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Trinskala. Alt tekst i produktet skal ramme et af disse trin. */
  --t-display:  clamp(2.4rem, 5vw, 3.6rem);  /* kun offentlige h1 */
  --t-h1:       clamp(1.7rem, 3.2vw, 2.3rem);
  --t-h2:       1.5rem;
  --t-h3:       1.15rem;
  --t-brod:     1rem;
  --t-lille:    .875rem;
  --t-mikro:    .75rem;
  --t-tal-stor: clamp(2rem, 4vw, 2.9rem);

  --lh-tight: 1.15;
  --lh-brod:  1.6;

  /* ==========================================================
     10. GEOMETRI
     ========================================================== */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-lille: 10px;   /* felt, knap, lille badge */
  --r:       14px;   /* kort, panel */
  --r-stor:  20px;   /* modal, hero-flade */
  --r-pille: 999px;  /* pille-knap, chip */

  --skygge-1: 0 1px 2px rgba(12,34,48,.05);
  --skygge-2: 0 1px 2px rgba(12,34,48,.05), 0 12px 32px -12px rgba(12,34,48,.14);
  --skygge-3: 0 2px 4px rgba(12,34,48,.06), 0 28px 60px -20px rgba(12,34,48,.24);

  --bredde:      1180px;  /* indholdsbredde, samme som topbaren */
  --bredde-smal: 760px;   /* læsespalte: metode, privatliv, guider */
  --gutter:      24px;
  --topbar-h:    72px;
  --beroering:   44px;    /* mindste klikmål */

  --overgang: 180ms cubic-bezier(.2,.6,.2,1);

  --z-fast: 40; --z-topbar: 50; --z-menu: 60; --z-modal: 80; --z-toast: 90;

  /* ==========================================================
     11. BAGUDKOMPATIBILITET
     Gamle navne peger på de nye værdier, så en side kan flyttes
     hertil uden at al dens CSS skal skrives om samme dag.
     Skriv ALDRIG nye regler mod disse. Se MIGRERING.md.
     ========================================================== */
  --papir: var(--flade-side);
  --papir-2: var(--flade-nedton);
  --hvid: var(--flade-kort);
  --blaek: var(--tekst);
  --dim: var(--tekst-dim);
  --dim-moerk: var(--tekst-dim-dyb);
  --moerk: var(--flade-dyb);
  --moerk-2: var(--flade-dyb-2);
  --groen: var(--maerke);
  --groen-dyb: var(--maerke-dyb);
  --groen-lys: var(--maerke-lys);
  --guld: var(--handling);
  --guld-lys: var(--handling-lys);
  --guld-dyb: var(--handling-dyb);
  --guld-tekst: var(--handling-tekst);
  --linje: var(--kant);
  --linje-moerk: var(--kant-paa-dyb);
  --roed: var(--fejl);
  --serif: var(--font-display);
  --sans: var(--font-ui);
  /* Ordmaerket "Pensia." SKAL altid staa i Fraunces, uanset hvad --serif
     ellers er sat til paa den enkelte side (flere sider overskriver --serif
     til Hanken Grotesk, og saa blev logoet til almindelig sans-tekst).
     Brug var(--display) i logo-reglerne, aldrig var(--serif). */
  --display: var(--font-display);
  --radius: var(--r);
  --radius-s: var(--r-lille);
  --maxw: var(--bredde);
  --skygge: var(--skygge-2);
  --skygge-stor: var(--skygge-3);
  --pn-wrap: var(--bredde);
  --pn-pad: var(--gutter);
}

/* ============================================================
   BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-brod);
  line-height: var(--lh-brod);
  color: var(--tekst);
  background: var(--flade-side);
  -webkit-font-smoothing: antialiased;
}

/* Overskrifter er sans i produktet. Fraunces sættes bevidst
   på de offentlige sider via .display, ikke som standard. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  color: var(--tekst);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-brod); }

/* Display: Fraunces. Offentlige overskrifter og store tal. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.08;
}
h1.display { font-size: var(--t-display); }

/* ============================================================
   OFFENTLIG FLADE
   Designguiden: Fraunces paa OFFENTLIGE overskrifter, Hanken
   Grotesk inde i appen. En offentlig side markerer sig selv med
   class="offentlig" paa <body>; rådgiverfladen, ejerplatformen
   og klientappen gør det IKKE og beholder sans.

   Specificiteten (0,1,2) er bevidst valgt. Den skal vinde over
   baade "h1,h2,h3" i pensia-design.css (som saetter --serif til
   Hanken) og over sidernes egne ".hero h1"-regler, uden at nogen
   af dem skal skrives om. Foer denne regel var forsiden den
   eneste offentlige side med serif-overskrifter, mens de oevrige
   tolv stod i sans.
   ============================================================ */
body.offentlig {
  /* Aliasset --serif peger paa Hanken Grotesk i pensia-design.css, fordi app-
     fladerne skal have sans. Paa en offentlig flade skal det vaere Fraunces,
     saa priser, noegletal og .serif-elementer foelger overskrifterne i stedet
     for at staa tilbage i sans. */
  --serif: var(--font-display);
}
body.offentlig h1,
body.offentlig h2,
body.offentlig h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
}

a { color: var(--handling-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); }

/* ============================================================
   TAL
   Alle beløb, procenter og årstal. tabular-nums holder cifrene
   i lodrette kolonner, så tabeller ikke danser.
   ============================================================ */
.tal {
  font-family: var(--font-tal);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.tal-stor {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-tal-stor);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.tal-enhed {
  font-family: var(--font-ui);
  font-size: .45em;
  font-weight: 500;
  color: var(--tekst-dim);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-smal { max-width: var(--bredde-smal); margin: 0 auto; padding: 0 var(--gutter); }
.sektion { padding: var(--s7) 0; }

.flade-dyb {
  background: var(--flade-dyb);
  color: var(--tekst-paa-dyb);
}
.flade-dyb h1, .flade-dyb h2, .flade-dyb h3 { color: var(--tekst-paa-dyb); }
.flade-dyb .dim, .flade-dyb .tekst-dim { color: var(--tekst-dim-dyb); }
.flade-dyb a { color: var(--handling-paa-dyb); }

.tekst-dim { color: var(--tekst-dim); }

/* ============================================================
   KNAPPER
   Præcis fire varianter. Har du brug for en femte, er det et
   spørgsmål til guiden, ikke en ny klasse.
   ============================================================ */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  padding: 12px 22px;
  min-height: var(--beroering);
  border: 1px solid transparent;
  border-radius: var(--r-pille);
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--overgang), color var(--overgang),
              border-color var(--overgang), box-shadow var(--overgang);
}
.knap:disabled, .knap[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Primær: den ene handling siden findes for. Højst én pr. skærmbillede. */
.knap-primaer { background: var(--handling); color: #fff; }
.knap-primaer:hover { background: var(--handling-dyb); box-shadow: 0 8px 20px -8px rgba(11,127,131,.5); }

/* Mærke: navigation videre i et flow, gem, bekræft. */
.knap-maerke { background: var(--maerke); color: #fff; }
.knap-maerke:hover { background: var(--maerke-dyb); box-shadow: 0 8px 20px -8px rgba(0,55,85,.5); }

/* Ghost: sekundær handling ved siden af en primær. */
.knap-ghost { background: transparent; color: var(--tekst); border-color: var(--kant-staerk); }
.knap-ghost:hover { border-color: var(--handling); color: var(--handling-tekst); }

/* Lys: knap oven på en petrol-flade. */
.knap-lys { background: var(--flade-side); color: var(--maerke); }
.knap-lys:hover { background: #fff; }

.knap-lille { padding: 8px 16px; min-height: 38px; font-size: var(--t-lille); }

/* ============================================================
   KORT
   ============================================================ */
.kort {
  background: var(--flade-kort);
  border: 1px solid var(--kant);
  border-radius: var(--r);
  box-shadow: var(--skygge-1);
}
.kort-loeft { box-shadow: var(--skygge-2); }
.kort-pad { padding: var(--s5) var(--s5); }

/* ============================================================
   FORMULARFELTER
   Beløbsfelter SKAL være type="text" inputmode="decimal", så
   tusindtalsseparatoren 50.000 kan vises. type="number" kan ikke.
   ============================================================ */
.felt {
  width: 100%;
  padding: 12px 14px;
  min-height: var(--beroering);
  font-family: inherit;
  font-size: var(--t-brod);
  color: var(--tekst);
  background: var(--flade-kort);
  border: 1px solid var(--kant);
  border-radius: var(--r-lille);
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.felt:focus {
  outline: none;
  border-color: var(--handling);
  box-shadow: 0 0 0 3px var(--handling-lys);
}
.felt[aria-invalid="true"] { border-color: var(--fejl); }
.felt-etiket {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-lille);
  font-weight: 600;
  color: var(--tekst);
}
.felt-hjaelp { margin-top: var(--s1); font-size: var(--t-mikro); color: var(--tekst-dim); }

/* ============================================================
   TABELLER
   ============================================================ */
.tabel { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabel th, .tabel td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--kant); }
.tabel th {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-dim);
}
.tabel td.tal, .tabel th.tal { text-align: right; }
.tabel tbody tr:hover { background: var(--flade-nedton); }
/* Brede tabeller scroller i deres egen kasse, aldrig hele siden. */
.tabel-rul { overflow-x: auto; }

/* ============================================================
   MÆRKATER
   ============================================================ */
.maerkat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--r-pille);
}
.maerkat-maerke    { background: var(--maerke-lys);    color: var(--maerke-dyb); }
.maerkat-handling  { background: var(--handling-lys);  color: var(--handling-tekst); }
.maerkat-fremhaev  { background: var(--fremhaev-lys);  color: var(--fremhaev-tekst); }
.maerkat-ok        { background: var(--ok-lys);        color: var(--ok); }
.maerkat-advarsel  { background: var(--advarsel-lys);  color: var(--advarsel); }
.maerkat-fejl      { background: var(--fejl-lys);      color: var(--fejl); }
.maerkat-paa-dyb   { background: rgba(255,255,255,.1); color: var(--tekst-dim-dyb); }

/* Sektionslabel over en overskrift */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--handling-tekst);
}

/* ============================================================
   HJÆLPEKLASSER
   ============================================================ */
.grid { display: grid; gap: var(--s5); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.ikon { width: 22px; height: 22px; flex-shrink: 0; }
.center { text-align: center; }
.kun-skaerm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }