/* ============================================================
   SKRIDT (P-773, P-775, P-776)

   Klientens tre sider i én form: /forbind, /beregn og /min-pension.
   Bilal 10/10-2026: «en rød tråd, læseligt og simpelt». Én rude midt
   på skærmen. Til venstre hvor man er (skridtene eller sidens fire
   indgange), til højre ÉN ting: en overskrift, to linjer og én knap.
   På telefon er venstre side væk; skridtene bliver en streg øverst,
   og indgangene en bjælke i bunden.

   Arket indlæses SIDST, efter kundeflade.css, og alt er scopet under
   body.sk-side med forstavelsen sk-, så det hverken rammer eller
   rammes af de gamle fladers klasser (.bund, .knap, .felt, .liste).

   ⚠ WHITELABEL: handlingsfarver er var(--handling) og var(--maerke),
     aldrig en hex. ⚠ MitID-knappen er officiel blå og farves ikke om.
   ============================================================ */

body.sk-side { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body.sk-side *, body.sk-side *::before, body.sk-side *::after { box-sizing: border-box; }
body.sk-side [hidden] { display: none !important; }

/* ---------- Toppen: husets navn, og hvor man er ---------- */
/* Toppen er en del af farvefeltet, ikke en bjælke: kundefladens .topbar-bund og kant slås fra. */
body.sk-side .sk-top.topbar { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; }
body.sk-side .sk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 40px; position: relative; z-index: 5; }
body.sk-side .sk-top .logo { font-size: 1.2rem; text-decoration: none; }
body.sk-side .sk-top-h { display: flex; align-items: center; gap: 16px; font-size: .9rem; color: var(--tekst-dim); }
body.sk-side .sk-konto { position: relative; }
body.sk-side .sk-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: #fff; border: 1px solid var(--kant-blod); border-radius: 14px; box-shadow: var(--kf-skygge-h); padding: 6px; z-index: 90; }
body.sk-side .sk-menu b { display: block; font-size: .78rem; font-weight: 500; color: var(--tekst-dim); padding: 8px 12px; border-bottom: 1px solid var(--kant-blod); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sk-side .sk-menu a, body.sk-side .sk-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 9px; font: 600 .9rem var(--inter); color: var(--tekst); text-decoration: none; cursor: pointer; }
body.sk-side .sk-menu a:hover, body.sk-side .sk-menu button:hover { background: rgba(12,34,48,.05); }

/* ---------- Ruden ---------- */
body.sk-side .sk-midt { flex: 1; display: grid; place-items: center; padding: 8px 40px 56px; }
body.sk-side .sk-rude { width: min(980px, 100%); display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--glas); border: 1px solid var(--glas-kant); border-radius: 26px; box-shadow: inset 0 1px 0 var(--glas-top), var(--kf-skygge); overflow: hidden; }
body.sk-side .sk-rude.bred { width: min(1120px, 100%); grid-template-columns: 250px minmax(0, 1fr); }
body.sk-side .sk-rude.alene { width: min(640px, 100%); grid-template-columns: minmax(0, 1fr); }
body.sk-side .sk-rail { padding: 34px 28px; border-right: 1px solid var(--kant-blod); background: rgba(255,255,255,.35); min-width: 0; }
body.sk-side .sk-rail-h { display: block; font-size: .78rem; font-weight: 650; color: var(--tekst-dim); margin: 0 0 14px; }
body.sk-side .sk-rail-h + .sk-fakta { margin-bottom: 26px; }
body.sk-side .sk-rail-fod { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--kant-blod); font-size: .84rem; line-height: 1.5; color: var(--tekst-dim); }

/* Skridtene i venstre side */
body.sk-side .sk-trin { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 12px 0; position: relative; background: none; border: 0; text-align: left; font: inherit; color: inherit; }
body.sk-side button.sk-trin { cursor: pointer; border-radius: 12px; }
body.sk-side button.sk-trin:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
body.sk-side .sk-trin + .sk-trin::before { content: ''; position: absolute; left: 15px; top: -14px; height: 26px; width: 2px; background: rgba(12,34,48,.1); }
body.sk-side .sk-trin.gjort + .sk-trin::before { background: var(--handling); }
body.sk-side .sk-trin b { display: block; font-size: .98rem; font-weight: 640; color: var(--tekst); overflow-wrap: anywhere; }
body.sk-side .sk-trin small { display: block; font-size: .84rem; color: var(--tekst-dim); }
body.sk-side .sk-trin em { display: block; font-style: normal; font-size: .9rem; font-weight: 650; color: var(--tekst); font-variant-numeric: tabular-nums; margin-top: 2px; }
body.sk-side .sk-trin.vent b { color: var(--tekst-dim); }
body.sk-side .sk-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 650 .88rem var(--inter); background: rgba(12,34,48,.07); color: var(--tekst-dim); flex: none; }
body.sk-side .sk-trin.nu .sk-nr { background: var(--maerke); color: #fff; }
body.sk-side .sk-ok { width: 32px; height: 32px; border-radius: 50%; background: var(--handling); display: grid; place-items: center; flex: none; }
body.sk-side .sk-ok::after { content: ''; width: 12px; height: 6px; border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: rotate(-45deg) translateY(-1px); }
body.sk-side .sk-snur { width: 32px; height: 32px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--handling) 20%, transparent); border-top-color: var(--handling); animation: sk-snur 0.9s linear infinite; flex: none; }
@keyframes sk-snur { to { transform: rotate(360deg); } }

/* Tilvalg i venstre side: det, der kan føjes til, når det faste er hentet */
body.sk-side .sk-tilvalg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; width: 100%; padding: 9px 0; background: none; border: 0; text-align: left; font: inherit; color: inherit; }
body.sk-side button.sk-tilvalg { cursor: pointer; }
body.sk-side .sk-tilvalg b { font-size: .92rem; font-weight: 620; color: var(--tekst); }
body.sk-side .sk-tilvalg small { grid-column: 1; font-size: .8rem; color: var(--tekst-dim); }
body.sk-side .sk-tilvalg i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: .82rem; font-weight: 650; color: var(--handling-dyb, #075c5f); padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--handling) 12%, transparent); }
body.sk-side button.sk-tilvalg:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; border-radius: 10px; }

/* Velkomstens animation (P-778, bud A): søjler, der vokser frem mod pensionen. Tegnes én gang og står så stille. */
body.sk-side .sk-anim { height: 150px; max-width: 420px; margin: 0 0 22px; border-radius: 20px; background: color-mix(in srgb, var(--handling) 7%, #fff); overflow: hidden; }
body.sk-side .sk-anim svg { width: 100%; height: 100%; display: block; }
body.sk-side .sk-anim rect { fill: var(--handling); transform-origin: 50% 100%; transform-box: fill-box; animation: sk-voks .9s cubic-bezier(.2, .8, .2, 1) both; }
body.sk-side .sk-anim rect:last-of-type { fill: var(--maerke); }
body.sk-side .sk-anim-linje { fill: none; stroke: color-mix(in srgb, var(--maerke) 35%, transparent); stroke-width: 2; stroke-dasharray: 4 5; animation: sk-toen .6s ease-out .9s both; }
body.sk-side .sk-anim text { font: 600 9px var(--inter); fill: var(--tekst-dim); }
@keyframes sk-voks { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes sk-toen { from { opacity: 0; } to { opacity: 1; } }

/* Det, vi allerede ved (venstre side på /beregn) */
body.sk-side .sk-fakta { display: grid; }
body.sk-side .sk-fakta div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: .9rem; color: var(--tekst-dim); border-bottom: 1px solid var(--kant-blod); }
body.sk-side .sk-fakta b { color: var(--tekst); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Indgangene i venstre side (kundesiden) */
body.sk-side .sk-nav { display: grid; gap: 4px; }
body.sk-side .sk-nav button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 0; background: none; font: 560 .96rem var(--inter); color: var(--tekst-dim); text-align: left; cursor: pointer; }
body.sk-side .sk-nav button:hover { background: rgba(255,255,255,.55); color: var(--tekst); }
body.sk-side .sk-nav button[aria-current="page"] { background: #fff; color: var(--tekst); font-weight: 640; box-shadow: 0 1px 2px rgba(12,34,48,.06); }
body.sk-side .sk-nav button:focus-visible, body.sk-side .sk-tabs button:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
body.sk-side .sk-nav svg, body.sk-side .sk-tabs svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.sk-side .sk-prik { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--handling); color: #fff; font: 650 .72rem var(--inter); display: grid; place-items: center; }
body.sk-side .sk-raad { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--kant-blod); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
body.sk-side .sk-av { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--handling) 12%, transparent); color: var(--maerke); display: grid; place-items: center; font: 650 .8rem var(--inter); overflow: hidden; }
body.sk-side .sk-av img { width: 100%; height: 100%; object-fit: cover; }
body.sk-side .sk-raad b { display: block; font-size: .9rem; color: var(--tekst); font-weight: 620; overflow-wrap: anywhere; }
body.sk-side .sk-raad small { font-size: .8rem; color: var(--tekst-dim); }

/* ---------- Højre side: én ting ---------- */
body.sk-side .sk-ind { padding: 44px 48px 40px; min-height: 480px; display: flex; flex-direction: column; min-width: 0; }
body.sk-side .sk-ind.side { min-height: 560px; padding: 40px 44px 36px; }
body.sk-side .sk-streg { display: none; gap: 5px; margin-bottom: 16px; }
body.sk-side .sk-streg i { flex: 1; height: 5px; border-radius: 99px; background: rgba(12,34,48,.1); }
body.sk-side .sk-streg i.paa { background: var(--handling); }
body.sk-side .sk-ord { font-size: .84rem; font-weight: 650; color: var(--handling-dyb, #075c5f); margin: 0 0 8px; }
body.sk-side .sk-ind h1 { font-family: var(--inter); color: var(--tekst); font-size: 2rem; font-weight: 650; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 12px; max-width: 20ch; text-wrap: balance; outline: 0; }
body.sk-side .sk-ind.side h1 { max-width: 26ch; }
body.sk-side .sk-ind h2 { font-family: var(--inter); color: var(--tekst); font-size: 1.05rem; font-weight: 640; letter-spacing: -.01em; margin: 22px 0 8px; }
body.sk-side .sk-ind p { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.55; color: var(--tekst-dim); max-width: 48ch; }
body.sk-side .sk-ind p.sk-note { font-size: .88rem; }
body.sk-side .sk-ind p.sk-fejl { padding: 11px 14px; border-radius: 12px; background: rgba(155,44,31,.08); color: #7c2318; font-size: .92rem; max-width: 520px; }
body.sk-side .sk-ind p.sk-demo { padding: 9px 13px; border-radius: 12px; background: #fdf1d8; color: #7a4b00; font-size: .88rem; font-weight: 600; max-width: 520px; }

body.sk-side .sk-bund { margin-top: auto; padding-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
body.sk-side .sk-knap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 99px; border: 0; background: var(--handling); color: #fff; font: 600 1.05rem var(--inter); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease; }
body.sk-side .sk-knap:hover { box-shadow: 0 10px 24px -12px rgba(12,34,48,.45); }
/* P-779 (apple-design): alt, man kan trykke på, svarer på SELVE trykket, ikke når fingeren slipper. */
body.sk-side .sk-knap:active, body.sk-side .sk-valg button:active, body.sk-side .sk-aldre button:active, body.sk-side .sk-banker button:active,
body.sk-side .sk-vej:active, body.sk-side .sk-nav button:active, body.sk-side .sk-tabs button:active { transform: scale(.97); transition: transform 100ms ease-out; }
body.sk-side .sk-spring:active, body.sk-side .sk-tilbage:active { opacity: .55; }
body.sk-side .sk-knap:focus-visible, body.sk-side .sk-spring:focus-visible, body.sk-side .sk-valg button:focus-visible, body.sk-side .sk-aldre button:focus-visible, body.sk-side .sk-vej:focus-visible, body.sk-side .sk-banker button:focus-visible { outline: 2px solid var(--handling); outline-offset: 3px; }
body.sk-side .sk-knap:disabled { opacity: .5; cursor: default; box-shadow: none; }
body.sk-side .sk-knap.lys { background: rgba(255,255,255,.85); color: var(--tekst); border: 1px solid rgba(12,34,48,.16); }
body.sk-side .sk-knap.lille { min-height: 46px; padding: 0 22px; font-size: .95rem; }
body.sk-side .sk-knap.mitid { background: #0a589e; }
body.sk-side .sk-knap.mitid img { height: 17px; display: block; }
body.sk-side .sk-spring { background: none; border: 0; padding: 6px 2px; font: 500 .92rem var(--inter); color: var(--tekst-dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.sk-side .sk-spring:hover { color: var(--tekst); }

/* Lister: ordninger, konti, punkter */
body.sk-side .sk-liste { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; max-width: 520px; }
body.sk-side .sk-liste.fuld { max-width: none; }
body.sk-side .sk-liste li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--kant-blod); }
body.sk-side .sk-liste li.uden-ikon { grid-template-columns: minmax(0, 1fr) auto; }
/* P-1017: break-word, ikke anywhere: anywhere lod kolonnen skrumpe til ét bogstav («PenSa / m / Pensio / n») ved stor skrift. */
body.sk-side .sk-liste b { display: block; font-size: .96rem; font-weight: 620; color: var(--tekst); overflow-wrap: break-word; }
body.sk-side .sk-liste small { display: block; font-size: .84rem; color: var(--tekst-dim); line-height: 1.4; }
body.sk-side .sk-liste em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tekst); white-space: nowrap; }
body.sk-side .sk-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--kant-blod); display: grid; place-items: center; overflow: hidden; font: 650 .7rem var(--inter); color: var(--maerke); }
body.sk-side .sk-logo img { width: 26px; height: 26px; object-fit: contain; }
body.sk-side .sk-logo:has(img) i { display: none; }
body.sk-side .sk-logo i { font-style: normal; }
body.sk-side .sk-ikon { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--handling) 10%, transparent); display: grid; place-items: center; }
body.sk-side .sk-ikon svg { width: 20px; height: 20px; stroke: var(--handling-dyb, #075c5f); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.sk-side .sk-status { font-style: normal; font-size: .8rem; font-weight: 650; padding: 4px 10px; border-radius: 99px; white-space: nowrap; display: inline-block; }
body.sk-side .sk-status.god { background: color-mix(in srgb, var(--handling) 12%, transparent); color: #075c5f; }
body.sk-side .sk-status.se { background: #fdf1d8; color: #7a4b00; }

/* Det dybe felt med svaret */
body.sk-side .sk-res { margin: 6px 0 0; padding: 22px 24px; border-radius: 20px; background: var(--maerke); color: #fff; max-width: 520px; }
body.sk-side .sk-res.fuld { max-width: none; margin: 0; }
body.sk-side .sk-res span { display: block; font-size: .84rem; opacity: .82; }
body.sk-side .sk-res b { display: block; font-size: 2.5rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0; line-height: 1.1; }
body.sk-side .sk-res em { display: block; font-style: normal; font-size: .86rem; margin-top: 8px; opacity: .9; }
body.sk-side .sk-maal { margin-top: 14px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
body.sk-side .sk-maal i { display: block; height: 100%; border-radius: 99px; background: #6fd0d3; }
body.sk-side .sk-sum { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--maerke); color: #fff; max-width: 360px; }
body.sk-side .sk-sum span { display: block; font-size: .78rem; opacity: .8; }
body.sk-side .sk-sum b { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.sk-side .sk-dele { display: grid; max-width: 520px; margin-top: 14px; }
/* P-1017: beløbet må gå på næste linje (højrestillet), når teksten og tallet ikke kan stå side om side: på en telefon
   med stor skrift løb «31.270 kr. om måneden» ud over kanten. */
body.sk-side .sk-dele div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 2px; font-size: .95rem; color: var(--tekst-dim); border-bottom: 1px solid var(--kant-blod); }
body.sk-side .sk-dele div b { color: var(--tekst); font-weight: 620; font-variant-numeric: tabular-nums; margin-left: auto; text-align: right; min-width: 0; overflow-wrap: break-word; }

/* Valg: to store svar, aldre, banker */
/* Valg som rækker med en ring til venstre: hvid flade, og det valgte får husets farve i ringen og i kanten.
   Bilal 10/10-2026: den grå udfyldning med mørk kant «ser grimt og ikke pro ud». */
body.sk-side .sk-valg { display: grid; gap: 10px; max-width: 480px; margin-top: 6px; }
body.sk-side .sk-valg button { position: relative; min-height: 64px; padding: 14px 18px 14px 56px; border-radius: 16px; border: 1.5px solid rgba(12,34,48,.12); background: #fff; text-align: left; font: 600 1.02rem var(--inter); color: var(--tekst); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: 0 1px 2px rgba(12,34,48,.04); }
body.sk-side .sk-valg button::before { content: ''; position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid rgba(12,34,48,.25); background: #fff; transition: border-color .15s ease, background .15s ease; }
body.sk-side .sk-valg button::after { content: ''; position: absolute; left: 24px; top: 50%; width: 10px; height: 5px; margin-top: -5px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg); opacity: 0; }
body.sk-side .sk-valg button:hover { border-color: rgba(12,34,48,.3); }
body.sk-side .sk-valg button small { display: block; font-weight: 400; font-size: .86rem; color: var(--tekst-dim); margin-top: 2px; }
body.sk-side .sk-valg button[aria-pressed="true"] { border-color: var(--handling); box-shadow: 0 6px 18px -12px rgba(12,34,48,.35); }
body.sk-side .sk-valg button[aria-pressed="true"]::before { border-color: var(--handling); background: var(--handling); }
body.sk-side .sk-valg button[aria-pressed="true"]::after { opacity: 1; }
body.sk-side .sk-aldre { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
body.sk-side .sk-aldre button { min-width: 76px; min-height: 76px; padding: 8px 12px; border-radius: 18px; border: 1px solid rgba(12,34,48,.16); background: rgba(255,255,255,.85); display: grid; place-items: center; align-content: center; text-align: center; cursor: pointer; font: inherit; }
body.sk-side .sk-aldre b { font-size: 1.4rem; font-weight: 650; color: var(--tekst); font-variant-numeric: tabular-nums; }
body.sk-side .sk-aldre small { font-size: .72rem; color: var(--tekst-dim); }
body.sk-side .sk-aldre button[aria-pressed="true"] { border-color: var(--maerke); background: var(--maerke); }
body.sk-side .sk-aldre button[aria-pressed="true"] b, body.sk-side .sk-aldre button[aria-pressed="true"] small { color: #fff; }
body.sk-side .sk-banker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; max-width: 560px; }
body.sk-side .sk-banker button { min-height: 84px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid rgba(12,34,48,.12); background: #fff; display: grid; place-items: center; align-content: center; gap: 6px; font: 600 .9rem var(--inter); color: var(--tekst); text-align: center; cursor: pointer; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(12,34,48,.04); transition: border-color .15s ease, box-shadow .15s ease; }
body.sk-side .sk-banker button:hover { border-color: var(--handling); box-shadow: 0 6px 18px -12px rgba(12,34,48,.35); }
/* Logoet er knappen: stort nok til at kunne genkendes på en telefon. Navnet står kun, når logoet ikke kan hentes. */
body.sk-side .sk-banker img { height: 40px; width: 100%; max-width: 132px; object-fit: contain; }
body.sk-side .sk-banker button.har-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.sk-side .sk-banker button { position: relative; }
body.sk-side .sk-banker-rul { max-height: 300px; overflow-y: auto; padding: 2px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }

/* Felter */
body.sk-side .sk-felt { display: grid; gap: 6px; max-width: 480px; margin: 0 0 14px; font-size: .9rem; font-weight: 620; color: var(--tekst); }
body.sk-side .sk-felt input, body.sk-side .sk-felt select { width: 100%; min-height: 54px; font: 500 1.05rem var(--inter); padding: 0 16px; border: 1px solid rgba(12,34,48,.2); border-radius: 14px; background: #fff; color: var(--tekst); }
body.sk-side .sk-felt input:focus, body.sk-side .sk-felt select:focus { outline: 2px solid var(--handling); outline-offset: 1px; border-color: var(--handling); }
body.sk-side .sk-felt small { font-weight: 400; font-size: .84rem; color: var(--tekst-dim); line-height: 1.45; }
body.sk-side .sk-kr { position: relative; }
body.sk-side .sk-kr input { padding-right: 46px; font-variant-numeric: tabular-nums; }
body.sk-side .sk-kr::after { content: 'kr.'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: .95rem; font-weight: 500; color: var(--tekst-dim); pointer-events: none; }
body.sk-side .sk-forslag { max-width: 480px; margin: -8px 0 12px; border: 1px solid var(--kant-blod); border-radius: 14px; overflow: hidden; background: #fff; }
body.sk-side .sk-forslag:empty { display: none; }
body.sk-side .sk-forslag button { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--kant-blod); background: none; font: 500 .96rem var(--inter); color: var(--tekst); cursor: pointer; }
body.sk-side .sk-forslag button:last-child { border-bottom: 0; }
body.sk-side .sk-forslag button:hover, body.sk-side .sk-forslag button:focus-visible { background: color-mix(in srgb, var(--handling) 7%, transparent); outline: 0; }
body.sk-side .sk-tal { font-size: 2.6rem; font-weight: 650; letter-spacing: -.03em; color: var(--tekst); font-variant-numeric: tabular-nums; margin: 4px 0 2px; line-height: 1.1; }
body.sk-side .sk-tal small { font-size: 1rem; font-weight: 500; color: var(--tekst-dim); letter-spacing: 0; }

/* Mens vi henter */
body.sk-side .sk-bane { height: 8px; border-radius: 99px; background: rgba(12,34,48,.08); overflow: hidden; max-width: 480px; margin: 10px 0 14px; }
body.sk-side .sk-bane i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--handling); transition: width .5s linear; }
body.sk-side .sk-nu { font-size: .95rem; color: var(--tekst-dim); min-height: 1.5em; }

/* Udfoldning: «Vælg et andet tal» */
body.sk-side .sk-fold { max-width: 520px; margin: 0 0 14px; }
body.sk-side .sk-fold > summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--tekst-dim); text-decoration: underline; text-underline-offset: 3px; list-style: none; width: max-content; max-width: 100%; }
body.sk-side .sk-fold > summary::-webkit-details-marker { display: none; }
body.sk-side .sk-fold[open] > summary { margin-bottom: 10px; }
body.sk-side .sk-kilde { font-size: .82rem; color: var(--tekst-dim); line-height: 1.5; max-width: 60ch; margin: 8px 0 0; }

/* Kundesiden: kort og veje */
body.sk-side .sk-to { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 8px; }
body.sk-side .sk-kort { padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,.8); border: 1px solid var(--kant-blod); display: flex; flex-direction: column; min-width: 0; }
body.sk-side .sk-kort > small { font-size: .78rem; font-weight: 650; color: var(--handling-dyb, #075c5f); }
body.sk-side .sk-kort > b { font-size: 1.12rem; font-weight: 640; color: var(--tekst); margin: 4px 0; letter-spacing: -.01em; overflow-wrap: anywhere; }
body.sk-side .sk-kort > span { font-size: .9rem; color: var(--tekst-dim); line-height: 1.45; margin-bottom: 14px; overflow-wrap: anywhere; }
body.sk-side .sk-kort .sk-knap { margin-top: auto; align-self: flex-start; }
body.sk-side .sk-veje { display: grid; gap: 8px; margin-top: 16px; }
body.sk-side .sk-vej { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; width: 100%; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid var(--kant-blod); text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
body.sk-side .sk-vej:hover { background: #fff; }
body.sk-side .sk-vej b { display: block; font-size: .98rem; font-weight: 620; color: var(--tekst); }
body.sk-side .sk-vej small { display: block; font-size: .84rem; color: var(--tekst-dim); }
body.sk-side .sk-vej em { font-style: normal; font-weight: 650; color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.sk-side .sk-vej::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--tekst-dim); border-top: 2px solid var(--tekst-dim); transform: rotate(45deg); }
body.sk-side .sk-tilbage { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0 0 14px; font: 600 .88rem var(--inter); color: var(--tekst-dim); cursor: pointer; }
body.sk-side .sk-tilbage::before { content: ''; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
body.sk-side .sk-tabs { display: none; }

/* ---------- Kundesiden: de eksisterende afsnit inde i ruden ---------- */
body.sk-side #flow-rail { display: none !important; }
body.sk-side .sk-ind .k-panel { margin: 0; padding: 0; border: 0; scroll-margin-top: 16px; }
body.sk-side .sk-ind .k-panel + .k-panel { margin-top: 28px; }
body.sk-side .sk-ind .greet { margin: 0 0 18px; padding: 0; }
body.sk-side .sk-ind .greet h1 { margin-bottom: 8px; }
body.sk-side .sk-ind .greet p { margin-bottom: 0; }
body.sk-side .sk-ind .g.sk-en { grid-template-columns: minmax(0, 1fr); }
body.sk-side .sk-ind #sk-tjek-liste { margin-bottom: 18px; }
body.sk-side .sk-ind [data-sk-hjem] { margin-top: 16px; }
body.sk-side .k-bund.sk-fod { max-width: 760px; margin: 0 auto; line-height: 1.5; }
/* P-781: pensionstjekket som en ring i fire stykker, og listen under den som ringens forklaring. */
body.sk-side .sk-ind .score:has(.sk-fire) { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px 30px; align-items: center; }
body.sk-side .sk-ind .ring.sk-fire { width: 190px; height: 190px; position: relative; margin: 0 auto; }
body.sk-side .sk-ind .ring.sk-fire svg { width: 100%; height: 100%; display: block; }
body.sk-side .sk-ind .ring.sk-fire .midt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
body.sk-side .sk-ind .ring.sk-fire .midt b { font-size: 2.6rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; color: var(--tekst); font-variant-numeric: tabular-nums; }
body.sk-side .sk-ind .ring.sk-fire .midt span { font-size: .84rem; color: var(--tekst-dim); margin-top: 4px; }
body.sk-side .sk-tjek-rk { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--kant-blod); font-size: .95rem; }
body.sk-side .sk-tjek-rk:last-child { border-bottom: 0; }
body.sk-side .sk-tjek-rk i { width: 12px; height: 12px; border-radius: 4px; }
body.sk-side .sk-tjek-rk .t { color: var(--tekst); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
body.sk-side .sk-tjek-rk .s { color: var(--tekst-dim); font-size: .86rem; white-space: nowrap; }
body.sk-side .sk-tjek-rk .v { color: var(--tekst); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; text-align: right; }

/* ---------- Arket (P-779): tilvalgene som et ark nedefra, man kan gribe og trække ----------
   Et materiale: halvgennemsigtigt med sløring, en lys kant øverst, og baggrunden dæmpes bag det. Bevægelsen er en
   fjeder i scriptet (den kan gribes midt i og tager fingerens fart med); her står kun, hvordan arket ser ud. */
body.sk-side .sk-slor { position: fixed; inset: 0; z-index: 60; background: rgba(12,34,48,.3); opacity: 0; }
body.sk-side .sk-ark { position: fixed; left: 50%; bottom: 0; z-index: 61; width: min(520px, 100%); padding: 10px 22px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0;
  background: rgba(250,252,252,.86); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 -18px 50px -20px rgba(12,34,48,.4); touch-action: none; will-change: transform; outline: 0; }
body.sk-side .sk-greb { width: 40px; height: 5px; border-radius: 99px; background: rgba(12,34,48,.22); margin: 2px auto 16px; }
body.sk-side .sk-ark h2 { font-family: var(--inter); color: var(--tekst); font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 4px; }
body.sk-side .sk-ark p { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: var(--tekst-dim); }
body.sk-side .sk-ark .sk-liste { max-width: none; }
body.sk-side .sk-ark .sk-liste li { background: #fff; }
body.sk-side .sk-ark .sk-bund { padding-top: 18px; flex-direction: column; align-items: stretch; }
body.sk-side .sk-ark .sk-bund .sk-knap { width: 100%; }
@media (prefers-reduced-transparency: reduce) { body.sk-side .sk-ark { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { body.sk-side .sk-ark { background: #fff; border-top-color: var(--tekst); } }

/* ============================================================
   UDTRYKKET (P-799). Bilal valgte 11/10-2026 skitse 3 («det bedste fra begge»,
   docs/8-Design/skitser/klientforloeb-p799.html) og vil bruge den på flere sider.
   En lys, varm rude; spalten til venstre; til højre ÉT hvidt kort. Overblikket
   står på et roligt landskab med luft omkring. Alle hovedknapper har husets
   mørke farve. ⚠ Landskabet er en tegnet stand-in, til der er rigtige fotos.
   ============================================================ */
:root { --sk-papir: #f6f3ee; --sk-landskab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfe3ec'/%3E%3Cstop offset='.55' stop-color='%23dcebee'/%3E%3Cstop offset='1' stop-color='%23eef0ea'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='72%25' cy='43%25' r='38%25'%3E%3Cstop offset='0' stop-color='%23fff6e6' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff6e6' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239fbccb'/%3E%3Cstop offset='1' stop-color='%236f95a8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1000' height='600' fill='url%28%23a%29'/%3E%3Crect width='1000' height='600' fill='url%28%23b%29'/%3E%3Ccircle cx='720' cy='260' r='26' fill='%23fff8ec' opacity='.9'/%3E%3Cpath d='M0 330 C120 300 200 250 330 268 S520 215 640 248 S860 196 1000 232 V600 H0Z' fill='%238fa9b8' opacity='.55'/%3E%3Cpath d='M0 372 C160 340 250 318 380 332 S600 282 760 304 S920 276 1000 290 V600 H0Z' fill='%236d8c9d' opacity='.7'/%3E%3Crect y='400' width='1000' height='200' fill='url%28%23c%29'/%3E%3Cpath d='M0 418 C200 400 320 384 470 392 S760 366 1000 374 V600 H0Z' fill='%234f7183' opacity='.5'/%3E%3Crect x='660' y='404' width='120' height='196' fill='%23fff3df' opacity='.22'/%3E%3Cpath d='M620 600 C700 520 820 500 1000 470 V600Z' fill='%233d5a50' opacity='.55'/%3E%3C/svg%3E"); }
body.sk-side .sk-rude { background: color-mix(in srgb, var(--sk-papir) 86%, transparent); border-color: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(12,34,48,.06), 0 30px 60px -34px rgba(12,34,48,.4); }
body.sk-side .sk-rail { background: rgba(255,255,255,.55); }
body.sk-side .sk-ind, body.sk-side .sk-ind.side { margin: 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(12,34,48,.05), 0 20px 40px -28px rgba(12,34,48,.3); }
body.sk-side .sk-knap { background: var(--maerke); }
/* P-817 (Bilal 12/10-2026): «Forny mine tal» var grøn med forløb, mens alle andre hovedknapper var mørkeblå piller.
   .knap-primaer er det gamle navn på samme knap; på skridt-siderne ser den ud som .sk-knap. */
body.sk-side.kundeflade .knap-primaer { background: var(--maerke); border: 0; border-radius: 99px; box-shadow: none; padding-inline: 22px; min-height: 46px; }
body.sk-side.kundeflade .knap-primaer:hover:not(:disabled) { background: var(--maerke); box-shadow: 0 10px 24px -12px rgba(12,34,48,.45); transform: none; }
body.sk-side.kundeflade .knap-primaer:disabled { background: rgba(12,34,48,.16); }
/* Chatknappen ligger fast i hjørnet: siden får luft i bunden, så den aldrig dækker den sidste knap. */
@media (min-width: 721px) { body.sk-side:has(#kc-knap:not([hidden])) { padding-bottom: 84px; } }
body.sk-side .sk-knap.mitid { background: #0a589e; }
body.sk-side .sk-knap.lys { background: rgba(12,34,48,.06); border-color: transparent; }
body.sk-side .sk-ok { background: var(--maerke); }
body.sk-side .sk-trin.gjort + .sk-trin::before { background: var(--maerke); }
body.sk-side .sk-nav button[aria-current="page"] { box-shadow: 0 1px 2px rgba(12,34,48,.08), 0 6px 14px -8px rgba(12,34,48,.22); }
body.sk-side .sk-nav button[aria-current="page"] svg { color: var(--handling); }
/* Overblikket: kortet er selve landskabet. */
body.sk-side .sk-ind:has(> #sk-hjem:not([hidden]) > .sk-hero) { background: none; box-shadow: none; padding: 0; }
/* Kundesiden under overblikket: afsnittene er selv kort, så de står direkte på ruden. */
body.sk-side .sk-ind.side:not(:has(> #sk-hjem:not([hidden]) > .sk-hero)) { background: none; box-shadow: none; padding: 26px 22px 22px; }
body.sk-side .sk-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 36px 38px 30px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; background: var(--sk-papir) var(--sk-landskab) center / cover no-repeat; flex: 1; }
body.sk-side .sk-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,243,238,.97) 0%, rgba(246,243,238,.9) 44%, rgba(246,243,238,.5) 74%, rgba(246,243,238,.24) 100%); }
body.sk-side .sk-hero > * { position: relative; z-index: 1; min-width: 0; }
/* P-817: samme vægt som .sk-ind.side h1, så reglen faktisk gælder på /min-pension. Størrelsen er sidens (2rem). */
body.sk-side .sk-ind .sk-hero h1 { letter-spacing: -.035em; line-height: 1.08; max-width: 24ch; margin-bottom: 18px; }
body.sk-side .sk-hero .sk-hero-led { margin: 0; font-size: 1.02rem; }
body.sk-side .sk-hero .sk-res.fuld { background: none; color: var(--tekst); padding: 0; border-radius: 0; }
body.sk-side .sk-hero .sk-res b { font-size: 3.1rem; font-weight: 700; letter-spacing: -.04em; color: var(--tekst); }
body.sk-side .sk-hero .sk-res span { font-size: .95rem; opacity: 1; color: var(--tekst-dim); }
body.sk-side .sk-hero .sk-res em { color: var(--tekst-dim); opacity: 1; }
body.sk-side .sk-hero .sk-maal { max-width: 340px; height: 6px; background: rgba(12,34,48,.1); }
body.sk-side .sk-hero .sk-maal i { background: linear-gradient(90deg, var(--maerke), var(--handling)); }
body.sk-side .sk-ring { position: relative; width: 200px; height: 200px; justify-self: center; }
body.sk-side .sk-ring svg { width: 100%; height: 100%; display: block; }
body.sk-side .sk-ring circle { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 13; }
body.sk-side .sk-ring circle.paa { stroke: var(--handling); stroke-linecap: round; }
body.sk-side .sk-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
body.sk-side .sk-ring b { font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; color: var(--tekst); font-variant-numeric: tabular-nums; line-height: 1.1; }
body.sk-side .sk-ring small { font-size: .78rem; color: var(--tekst-dim); max-width: 13ch; margin: 2px auto 0; line-height: 1.3; }
body.sk-side .sk-hero-naeste { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.9); border-color: transparent; padding: 16px 20px; }
body.sk-side .sk-hero-naeste > div { display: flex; flex-direction: column; min-width: 0; }
body.sk-side .sk-hero-naeste small { font-size: .78rem; font-weight: 650; color: var(--handling-dyb, #075c5f); }
body.sk-side .sk-hero-naeste b { font-size: 1.05rem; font-weight: 640; color: var(--tekst); overflow-wrap: anywhere; }
body.sk-side .sk-hero-naeste span { font-size: .88rem; color: var(--tekst-dim); }
body.sk-side .sk-hero-naeste .sk-knap { margin: 0; align-self: center; flex: none; }
body.sk-side .sk-genveje { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 0; }
body.sk-side .sk-genveje .sk-vej { grid-template-columns: minmax(0, 1fr) 18px; background: rgba(255,255,255,.9); border-color: transparent; padding: 16px 18px; }
body.sk-side .sk-ind p.sk-hero-note { margin: 14px 8px 4px; max-width: none; }
/* Svaret på /beregn: samme landskab; under tallet står det, vi ved, og vejen videre. */
body.sk-side .sk-ind:has(> .sk-hero) { background: none; box-shadow: none; padding: 0; }
body.sk-side .sk-ind > .sk-streg + .sk-hero { margin-top: 0; }
body.sk-side .sk-ind:has(> .sk-hero) > .sk-streg { display: none; }
body.sk-side .sk-hero-bred { grid-column: 1 / -1; }
body.sk-side .sk-hero-dele { max-width: none; background: rgba(255,255,255,.9); border-radius: 16px; padding: 4px 18px; margin-top: 0; }
body.sk-side .sk-hero-dele div:last-child { border-bottom: 0; }
body.sk-side .sk-hero .sk-spring { color: var(--tekst); }
/* Spørgsmålet og forklaringen: to kort ved siden af hinanden. */
body.sk-side .sk-ind.sk-delt { background: none; box-shadow: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 14px; }
body.sk-side .sk-spm { background: #fff; border-radius: 20px; padding: 40px 44px 36px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(12,34,48,.05), 0 20px 40px -28px rgba(12,34,48,.3); }
body.sk-side .sk-hjaelp { background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(12,34,48,.05), 0 20px 40px -28px rgba(12,34,48,.3); }
body.sk-side .sk-hjaelp-bil { height: 170px; flex: none; background: var(--sk-papir) var(--sk-landskab) center / cover no-repeat; }
body.sk-side .sk-hjaelp-tx { padding: 20px 22px 24px; }
body.sk-side .sk-hjaelp b { display: block; font-size: .98rem; font-weight: 640; color: var(--tekst); margin-bottom: 6px; }
body.sk-side .sk-hjaelp p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tekst-dim); max-width: none; }
body.sk-side .sk-hjaelp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; color: var(--tekst-dim); }
body.sk-side .sk-hjaelp li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: center; }
body.sk-side .sk-hjaelp li::before { content: ''; width: 11px; height: 6px; border-left: 2px solid var(--handling); border-bottom: 2px solid var(--handling); transform: rotate(-45deg) translateY(-2px); }
/* Velkomsten: landskabet bag, ingen søjler. */
body.sk-side .sk-ind.sk-start { position: relative; overflow: hidden; justify-content: center; background: var(--sk-papir) var(--sk-landskab) center / cover no-repeat; }
body.sk-side .sk-ind.sk-start::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,243,238,.97) 0%, rgba(246,243,238,.9) 46%, rgba(246,243,238,.5) 76%, rgba(246,243,238,.24) 100%); }
body.sk-side .sk-ind.sk-start > * { position: relative; z-index: 1; }
body.sk-side .sk-ind.sk-start .sk-anim { display: none; }
body.sk-side .sk-ind.sk-start h1 { font-size: 2.4rem; letter-spacing: -.035em; line-height: 1.08; }
body.sk-side .sk-ind.sk-start .sk-bund { margin-top: 28px; }
body.sk-side .sk-ind.sk-start .sk-spring { color: var(--tekst); }

/* ---------- Døren (P-800): login i samme udtryk ----------
   Én rude i to dele: landskabet med overskriften til venstre, det hvide kort med felterne til højre. Bruges af
   virksomhedens login på /arbejdsgiver; /login har samme form i sit eget ark, fordi den deler opmærkning med de
   gamle klientflader. ⚠ Uden body.sk-side foran: siderne, der bruger den, er ikke sk-sider. */
.sk-doer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); width: min(980px, calc(100% - 32px)); margin: clamp(24px, 8vh, 84px) auto; background: color-mix(in srgb, var(--sk-papir) 86%, transparent); border: 1px solid rgba(255,255,255,.9); border-radius: 26px; box-shadow: 0 1px 2px rgba(12,34,48,.06), 0 30px 60px -34px rgba(12,34,48,.4); overflow: hidden; }
.sk-doer-bil { position: relative; min-height: 480px; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; background: var(--sk-papir) var(--sk-landskab) center / cover no-repeat; }
.sk-doer-bil::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,243,238,.97) 0%, rgba(246,243,238,.9) 46%, rgba(246,243,238,.5) 78%, rgba(246,243,238,.24) 100%); }
.sk-doer-bil > * { position: relative; z-index: 1; }
.sk-doer-bil h1 { font-size: 2.4rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.08; margin: 0; max-width: 12ch; text-wrap: balance; }
.sk-doer-bil p { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--tekst-dim); max-width: 30ch; }
.sk-doer-kort { background: #fff; margin: 14px; border-radius: 20px; padding: 30px 28px 26px; min-width: 0; box-shadow: 0 1px 2px rgba(12,34,48,.05), 0 20px 40px -28px rgba(12,34,48,.3); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 800px) {
  .sk-doer { grid-template-columns: minmax(0, 1fr); border-radius: 22px; margin-block: 16px 28px; }
  .sk-doer-bil { min-height: 0; padding: 28px 24px 24px; }
  .sk-doer-bil::before { background: linear-gradient(180deg, rgba(246,243,238,.95) 0%, rgba(246,243,238,.88) 100%); }
  .sk-doer-bil h1 { font-size: 1.8rem; max-width: none; }
  .sk-doer-kort { margin: 8px; padding: 24px 20px 22px; }
}

body.sk-side .sk-fod { text-align: center; font-size: .78rem; color: var(--tekst-svag); padding: 0 16px 18px; font-variant-numeric: tabular-nums; }
body.sk-side .sk-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); background: #0c2230; color: #fff; padding: 13px 20px; border-radius: 14px; font-size: .92rem; z-index: 300; opacity: 0; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; }
body.sk-side .sk-toast.vis { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 800px) {
  body.sk-side .sk-top { padding: 14px 18px; }
  body.sk-side .sk-midt { padding: 0 16px 28px; place-items: start center; }
  body.sk-side .sk-rude, body.sk-side .sk-rude.bred { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  body.sk-side .sk-rail { display: none; }
  body.sk-side .sk-streg { display: flex; }
  body.sk-side .sk-anim { height: 130px; margin-bottom: 18px; }
  body.sk-side .sk-ind, body.sk-side .sk-ind.side { padding: 24px 20px 22px; min-height: 0; }
  body.sk-side .sk-ind { min-height: min(520px, calc(100vh - 150px)); }
  body.sk-side .sk-ind.side { min-height: 0; }
  body.sk-side .sk-ind h1, body.sk-side .sk-ind.side h1 { font-size: 1.5rem; }
  body.sk-side .sk-bund { flex-direction: column; align-items: stretch; gap: 10px; }
  body.sk-side .sk-knap { width: 100%; }
  body.sk-side .sk-kort .sk-knap { align-self: stretch; }
  body.sk-side .sk-spring { text-align: center; }
  body.sk-side .sk-tal { font-size: 2.1rem; }
  body.sk-side .sk-res b { font-size: 2rem; }
  body.sk-side .sk-aldre button { min-width: 0; flex: 1 1 28%; }
  body.sk-side .sk-to { grid-template-columns: minmax(0, 1fr); }
  body.sk-side .sk-banker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sk-side .sk-liste li { padding: 10px 12px; }
  body.sk-side .sk-vej { padding: 13px 14px; }
  /* Kundesiden: de fire indgange som en bjælke i bunden. */
  body.sk-side.sk-med-tabs .sk-midt { padding-bottom: 20px; }
  /* Bundteksten står OVER bjælken med indgangene, ikke bag den (Bilal 11/10-2026). */
  body.sk-side.sk-med-tabs .k-bund.sk-fod { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding-inline: 16px; }
  body.sk-side .sk-ind .score:has(.sk-fire) { grid-template-columns: minmax(0, 1fr); }
  body.sk-side .sk-ind, body.sk-side .sk-ind.side { margin: 8px; }
  body.sk-side .sk-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px; }
  body.sk-side .sk-hero::before { background: linear-gradient(180deg, rgba(246,243,238,.95) 0%, rgba(246,243,238,.9) 60%, rgba(246,243,238,.7) 100%); }
  body.sk-side .sk-hero h1 { font-size: 1.7rem; }
  body.sk-side .sk-hero .sk-res b { font-size: 2.4rem; }
  body.sk-side .sk-ring { width: 150px; height: 150px; order: -1; justify-self: start; }
  body.sk-side .sk-ring b { font-size: 1.6rem; }
  body.sk-side .sk-hero-naeste { flex-direction: column; align-items: stretch; }
  body.sk-side .sk-ind.sk-delt { grid-template-columns: minmax(0, 1fr); }
  body.sk-side .sk-spm { padding: 24px 20px 22px; min-height: min(480px, calc(100vh - 170px)); }
  body.sk-side .sk-hjaelp { flex-direction: row; } body.sk-side .sk-hjaelp-bil { width: 96px; height: auto; }
  body.sk-side .sk-hjaelp-tx { padding: 16px 18px; }
  body.sk-side .sk-ind.sk-start::before { background: linear-gradient(180deg, rgba(246,243,238,.95) 0%, rgba(246,243,238,.9) 60%, rgba(246,243,238,.7) 100%); }
  body.sk-side .sk-ind.sk-start h1 { font-size: 1.7rem; }
  /* Syv indgange kan ikke stå side om side på en telefon: bjælken kan trækkes sidelæns. */
  body.sk-side .sk-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr); overflow-x: auto; scrollbar-width: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.94); border-top: 1px solid var(--kant-blod); }
  body.sk-side .sk-tabs:empty { display: none; }
  body.sk-side .sk-tabs button { display: grid; justify-items: center; gap: 3px; min-height: 48px; border: 0; background: none; font: 600 .68rem var(--inter); color: var(--tekst-dim); cursor: pointer; position: relative; }
  body.sk-side .sk-tabs button[aria-current="page"] { color: var(--maerke); }
  body.sk-side .sk-tabs svg { width: 22px; height: 22px; }
  /* Chat-knappen flyder nederst til højre; over bjælken, ikke oven i den. */
  body.sk-side.sk-med-tabs .kc-knap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.sk-side .sk-tabs .sk-prik { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.sk-side .sk-anim rect, body.sk-side .sk-anim-linje { animation: none; }
  body.sk-side .sk-snur { animation-duration: 2.4s; }
  body.sk-side .sk-knap, body.sk-side .sk-bane i { transition: none; }
}

/* P-1017 (Bilal 17/10-2026, skærmbilleder fra Android med stor skrift): på en smal telefon står beløbet i en liste UNDER
   navnet, ikke ved siden af: ved siden af tog det pladsen fra navnet og lå oven i teksten. */
@media (max-width: 480px) {
  body.sk-side .sk-liste li { grid-template-columns: 38px minmax(0, 1fr); row-gap: 4px; }
  body.sk-side .sk-liste li > em { grid-column: 2; justify-self: start; }
  body.sk-side .sk-liste li.uden-ikon { grid-template-columns: minmax(0, 1fr) auto; }
  body.sk-side .sk-liste li.uden-ikon > em { grid-column: auto; justify-self: end; }
}