/* Kunde-cases (/kunder/{slug}): sidelayout + case-illustrationer.
   Bygger på tokens fra ft-editorial.css. Illustrationerne er UI-mockups med eksempeldata.
   Princip: standardtilstanden ER slutbilledet. Animationen ligger kun under .cs-anim.is-on,
   som JS sætter mens figuren er synlig, og kun når brugeren ikke har bedt om mindre bevægelse.
   Uden JS, eller med reduceret bevægelse, står figuren stille og komplet. */

.cs { --cs-teal: #3e5e63; --cs-soft: color-mix(in srgb, var(--accent) 9%, var(--bg)); }

/* ============ HERO ============ */
.cs-hero { border-bottom: 1px solid var(--rule); padding: 44px 0 40px; }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.cs-crumb { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.cs-crumb a { color: var(--accent); }
.cs-crumb a:hover { border-bottom: 1px solid currentColor; }
.cs-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 7vw, 84px); line-height: .98; letter-spacing: -.03em; margin: 0 0 18px; }
.cs-deck { font-family: var(--font-display); font-size: clamp(20px, 2.3vw, 27px); line-height: 1.3; color: var(--ink-2); margin: 0; max-width: 34ch; text-wrap: balance; }
.cs-hero-logo { width: 220px; height: 120px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--bg-2); padding: 22px; }
.cs-hero-logo img { max-height: 70px; width: auto; object-fit: contain; }

.cs-cover { margin: 0 auto; padding-top: 32px; padding-bottom: 8px; }
.cs-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--rule); }
.cs-cover figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

/* ============ BRØDTEKST + FAKTA ============ */
.cs-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; }
.cs-prose { max-width: 66ch; font-size: 17px; }
.cs-prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -.01em; margin: 0 0 12px; }
.cs-prose h2:not(:first-child) { margin-top: 40px; }
.cs-prose p { line-height: 1.65; }
.cs-facts { position: sticky; top: 24px; border-top: 2px solid var(--ink); padding-top: 4px; }
.cs-facts dl { margin: 0; }
.cs-fact { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.cs-fact dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.cs-fact dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.cs-modules { padding: 16px 0 6px; }
.cs-modules-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cs-modules ul { list-style: none; margin: 0; padding: 0; }
.cs-modules a { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--rule); font-weight: 500; transition: color .15s; }
.cs-modules a span { transition: transform .2s cubic-bezier(.16,1,.3,1); }
.cs-modules a:hover { color: var(--accent); }
.cs-modules a:hover span { transform: translateX(4px); }
.cs-facts-cta { margin-top: 18px; width: 100%; justify-content: center; text-align: center; }

/* ============ FUNKTIONER ============ */
.cs-section-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 8px; max-width: 22ch; text-wrap: balance; }
.cs-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 48px 0; border-bottom: 1px solid var(--rule); }
.cs-feature:has(+ .cs-also), .cs-feature:last-child { border-bottom: 0; }
.cs-feature:nth-of-type(even) .cs-feature-text { order: 2; }
.cs-feature--text { grid-template-columns: minmax(0, 1fr); }
.cs-feature-text h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; }
.cs-feature-text p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 52ch; }
.cs-fig { margin: 0; }
.cs-fig figcaption { font-size: 12px; color: var(--ink-3); margin-top: 10px; }

.cs-also { margin-top: 24px; padding-top: 28px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.cs-also h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 0; }
.cs-also ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.cs-also li { break-inside: avoid; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--rule); position: relative; font-size: 15px; }
.cs-also li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 9px; height: 2px; background: var(--accent); }

/* ============ RESULTAT ============ */
.cs-result { background: var(--bg-2); }
.cs-result-text { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.38; letter-spacing: -.005em; max-width: 40ch; margin: 18px 0 0; color: var(--ink); text-wrap: pretty; }
.cs-quote { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule-strong); max-width: 62ch; }
.cs-quote p { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.45; margin: 0; }
.cs-quote cite { display: block; font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: 12px; }

/* ============ RELATEREDE ============ */
.cs-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.cs-rel { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--rule); background: var(--bg); transition: border-color .2s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.cs-rel:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(26,26,26,.25); }
.cs-rel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-rel-logo { height: 40px; display: flex; align-items: center; }
.cs-rel-logo img { max-height: 36px; width: auto; }
.cs-rel-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.cs-rel-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cs-rel-go { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--accent); }
.cs-back { margin-top: 28px; }
.cs-back a { border-bottom: 1px solid currentColor; }

@media (max-width: 980px) {
  .cs-body-grid, .cs-feature, .cs-also { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-feature:nth-of-type(even) .cs-feature-text { order: 0; }
  .cs-facts { position: static; }
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-hero-logo { width: 160px; height: 88px; padding: 16px; order: -1; }
}
@media (max-width: 600px) {
  .cs-also ul { columns: 1; }
  .cs-cover img { aspect-ratio: 4 / 3; }
  .cs-feature { padding: 36px 0; }
}

/* ============================================================
   ILLUSTRATIONER: fælles ramme
   ============================================================ */
.cs-anim { container-type: inline-size; position: relative; background: var(--bg-2); border: 1px solid var(--rule); padding: 44px clamp(14px, 4%, 36px) 32px; display: grid; place-items: center; min-height: 340px; overflow: hidden; }
.cs-eks { position: absolute; top: 12px; left: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule-strong); padding: 3px 7px; background: var(--bg); }
.cs-win { width: 100%; max-width: 480px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 18px 36px -24px rgba(26,26,26,.35), 0 2px 4px rgba(26,26,26,.04); font-size: 13px; padding: 0 16px 14px; }
.cs-win-bar { display: flex; justify-content: space-between; gap: 12px; margin: 0 -16px 10px; padding: 9px 16px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs-win-bar span:first-child { color: var(--ink); }
.cs-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.cs-kv span { color: var(--ink-3); }
.cs-kv b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-kv-big b { font-family: var(--font-display); font-size: 19px; }
.cs-num { font-variant-numeric: tabular-nums; text-align: right; }
.cs-mitid-mark { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .02em; color: #fff; background: #0060e6; padding: 2px 5px; border-radius: 3px; margin-right: 7px; vertical-align: 1px; }
.cs-anim svg { display: block; }

/* ============ Kapitalkald ============ */
.cs-kald-pct { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 10px; }
.cs-kald-pct span { color: var(--ink-3); }
.cs-kald-pct b { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--accent); }
.cs-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 64px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); }
.cs-th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cs-th span:nth-child(2), .cs-th span:nth-child(3) { text-align: right; }
.cs-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-val { font-weight: 600; }
.cs-chip { display: inline-flex; align-items: center; gap: 5px; justify-self: end; font-size: 11px; color: var(--pos); }
.cs-chip svg { width: 13px; height: 10px; }
.cs-chip rect, .cs-chip path, .cs-nota rect, .cs-nota path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cs-sum { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--ink); margin-top: 2px; }
.cs-sum b { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
@container (max-width: 420px) {
  .cs-tr { grid-template-columns: minmax(0, 1fr) auto 50px; }
  .cs-tr > :nth-child(2) { display: none; }
}

/* ============ Investorportal ============ */
.cs-portal-stage { position: relative; }
.cs-login { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); opacity: 0; visibility: hidden; }
.cs-login-t { font-family: var(--font-display); font-size: 22px; }
.cs-mitid { display: flex; align-items: center; border: 1px solid var(--rule-strong); padding: 10px 16px; font-weight: 500; }
.cs-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-ov-col { border: 1px solid var(--rule); padding: 10px 12px; }
.cs-ov-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.cs-ov-col .cs-kv:last-child { border-bottom: 0; }
.cs-meter { height: 5px; background: var(--bg-3); margin: 6px 0 2px; }
.cs-meter i { display: block; height: 100%; width: var(--w); background: var(--cs-teal); transform-origin: left; }
.cs-loan { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.cs-loan em { font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cs-loan em.ok { color: var(--pos); }
@container (max-width: 440px) { .cs-ov { grid-template-columns: 1fr; } }

/* ============ Dokumenter ============ */
.cs-doc-grp + .cs-doc-grp { margin-top: 12px; }
.cs-doc-gh { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.cs-doc-gh svg { width: 12px; height: 13px; }
.cs-doc-gh rect, .cs-doc-gh path { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
.cs-doc { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--rule); margin-top: 6px; background: var(--bg); }
.cs-pdf { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--bg); background: var(--accent); padding: 4px 5px; }
.cs-doc-t { display: flex; flex-direction: column; line-height: 1.3; }
.cs-doc-t small { font-size: 11px; color: var(--ink-3); }
.cs-new { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--cs-soft); padding: 2px 8px; }

/* ============ Anbefaling ============ */
.cs-reco-grid { width: 100%; max-width: 620px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.cs-trade { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.cs-trade em { font-style: normal; font-size: 10.5px; font-weight: 600; text-align: center; padding: 2px 0; }
.cs-trade em.buy { color: var(--pos); background: color-mix(in srgb, var(--pos) 10%, var(--bg)); }
.cs-trade em.sell { color: var(--accent); background: var(--cs-soft); }
.cs-trade b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-instr, .cs-signed { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 500; font-size: 12.5px; }
.cs-instr svg, .cs-signed svg { width: 16px; height: 16px; flex: none; }
.cs-instr circle, .cs-signed circle { fill: var(--pos); }
.cs-instr path, .cs-signed path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.cs-steps::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 1.5px; background: var(--rule-strong); }
.cs-steps li { position: relative; display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.cs-step-dot { width: 21px; height: 21px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cs-teal); border: 1.5px solid var(--cs-teal); position: relative; }
.cs-step-dot svg { width: 11px; height: 11px; }
.cs-step-dot path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; }
.cs-step-t { display: flex; flex-direction: column; font-size: 13px; font-weight: 500; line-height: 1.25; }
.cs-step-t small { font-weight: 400; font-size: 11px; color: var(--ink-3); }
@container (max-width: 520px) { .cs-reco-grid { grid-template-columns: 1fr; } }

/* ============ Udlån ============ */
.cs-conv { display: inline-flex; margin: 12px 0 4px; border: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 11px; }
.cs-conv span { padding: 5px 12px; color: var(--ink-3); }
.cs-conv .cs-conv-a { background: var(--ink); color: var(--bg); }
.cs-swap { display: grid; }
.cs-swap > div { grid-area: 1 / 1; }
.cs-swap-b { opacity: 0; visibility: hidden; }
.cs-nota { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--pos); font-weight: 500; font-size: 12.5px; }
.cs-nota svg { width: 15px; height: 11px; }

/* ============ Signering ============ */
.cs-sign-doc { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.cs-sign-doc i { display: block; height: 3px; width: 100%; background: var(--bg-3); }
.cs-sign-doc i.m { width: 82%; } .cs-sign-doc i.s { width: 58%; }
.cs-sign-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-party { border: 1px solid var(--rule); padding: 10px 12px; }
.cs-party-role { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cs-scribble { width: 100%; height: 38px; border-bottom: 1px solid var(--ink); margin: 4px 0 6px; }
.cs-scribble path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cs-party-name { font-weight: 500; }
.cs-party-ok { font-size: 11px; color: var(--pos); margin-top: 4px; }
@container (max-width: 400px) { .cs-sign-parties { grid-template-columns: 1fr; } }

/* ============ Bankdata ============ */
.cs-feed-grid { width: 100%; max-width: 620px; display: grid; grid-template-columns: 150px 56px minmax(0, 1fr); align-items: center; }
.cs-banks { display: flex; flex-direction: column; gap: 40px; }
.cs-bank { border: 1px solid var(--rule-strong); background: var(--bg); padding: 10px 12px; font-weight: 500; font-size: 13px; line-height: 1.25; }
.cs-pipes { display: flex; flex-direction: column; gap: 76px; }
.cs-pipe { display: block; height: 1.5px; background: var(--rule-strong); position: relative; overflow: visible; }
.cs-pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; }
.cs-dep { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-bottom: 1px solid var(--rule); }
.cs-dep span { display: flex; flex-direction: column; line-height: 1.3; }
.cs-dep small { font-size: 11px; color: var(--ink-3); }
.cs-dep b { font-weight: 500; font-variant-numeric: tabular-nums; }
@container (max-width: 520px) {
  .cs-feed-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-banks { flex-direction: row; gap: 10px; }
  .cs-bank { flex: 1; }
  .cs-pipes { display: none; }
}

/* ============ Screening ============ */
.cs-scr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cs-scr > span:first-child { font-weight: 500; }
.cs-scr-run { display: none; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); grid-column: 2; grid-row: 1; }
.cs-scr-run i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rule-strong); border-top-color: var(--cs-teal); }
.cs-scr-ok { grid-column: 2; grid-row: 1; }

/* ============ Andele ============ */
.cs-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 92px; margin-top: 14px; }
.cs-bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.cs-bars i { display: block; width: 100%; height: max(6%, var(--h)); background: var(--cs-teal); opacity: .85; transform-origin: bottom; }
.cs-bars span:last-child i { background: var(--accent); opacity: 1; }
.cs-bars small { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }

/* ============ Allokering ============ */
.cs-al { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.cs-al-head { display: flex; justify-content: space-between; font-size: 13px; }
.cs-al-head b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-al-head b.bad, .cs-alarm { color: var(--accent); }
.cs-al-track { position: relative; height: 8px; background: var(--bg-3); margin: 6px 0 4px; }
.cs-al-band { position: absolute; top: -3px; bottom: -3px; border: 1.5px dashed var(--cs-teal); background: color-mix(in srgb, var(--cs-teal) 10%, transparent); }
.cs-al-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--cs-teal); transform-origin: left; }
.cs-al-track i.bad { background: var(--accent); }
.cs-al small { font-size: 11px; color: var(--ink-3); }
.cs-alarm { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; font-size: 12.5px; }
.cs-alarm svg { width: 16px; height: 16px; }
.cs-alarm path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* ============ Egnethed ============ */
.cs-q b { text-align: right; }
.cs-scale { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 4px; border: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cs-scale span { padding: 7px 0; text-align: center; position: relative; z-index: 1; }
.cs-scale span:nth-child(2) { color: var(--bg); }  /* står på markøren i slutbilledet */
.cs-scale i { position: absolute; top: 0; bottom: 0; left: 33.333%; width: 33.333%; background: var(--ink); }
.cs-suit-done { color: var(--ink); }

/* ============ Friværdi ============ */
.cs-addr { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule-strong); padding: 9px 12px; margin: 4px 0 12px; }
.cs-addr svg { width: 15px; height: 15px; flex: none; }
.cs-addr circle, .cs-addr path { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.cs-typed { white-space: nowrap; overflow: hidden; }
.cs-eq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-eq { border: 1px solid var(--rule); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cs-eq small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cs-eq b { font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.cs-eq span { font-size: 11.5px; color: var(--ink-3); }
.cs-eq-result { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink); }
.cs-eq-result b { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--pos); }

/* Bankdata med én bank: banken står alene over vinduet */
.cs-banks--one { gap: 0; }

/* ============================================================
   BEVÆGELSE: kun når figuren er synlig (.is-on) og bevægelse er ok
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Kapitalkald, 9 s: beløbene skrives ind, mailen går, summen lander */
  .cs-kald.is-on .cs-val  { animation: csType 9s steps(8, end) var(--d) infinite backwards; }
  .cs-kald.is-on .cs-chip { animation: csPop 9s cubic-bezier(.16,1,.3,1) calc(var(--d) + .5s) infinite backwards; }
  .cs-kald.is-on .cs-sum  { animation: csLate 9s ease-out infinite; }

  /* Investorportal, 8 s: login med MitID, så overblikket */
  .cs-portal.is-on .cs-login { animation: csLogin 8s ease-in-out infinite; }
  .cs-portal.is-on .cs-mitid { animation: csPress 8s ease-in-out infinite; }
  .cs-portal.is-on .cs-ov-col { animation: csRise 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }
  .cs-portal.is-on .cs-meter i { animation: csGrow 8s cubic-bezier(.16,1,.3,1) infinite; }

  /* Dokumenter, 8 s: rækkerne lægger sig på plads, det nye kaldsbrev markeres */
  .cs-docs.is-on .cs-doc { animation: csSlide 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }
  .cs-docs.is-on .cs-new { animation: csPulse 8s ease-in-out infinite; }

  /* Anbefaling, 9 s: trinene krydses af ét ad gangen, instruksen kommer til sidst */
  .cs-reco.is-on .cs-step-dot { animation: csStep 9s ease-out var(--d) infinite backwards; }
  .cs-reco.is-on .cs-step-dot path { animation: csDraw 9s ease-out var(--d) infinite backwards; }
  .cs-reco.is-on .cs-step-t { animation: csDim 9s ease-out var(--d) infinite backwards; }
  .cs-reco.is-on .cs-instr { animation: csLate2 9s cubic-bezier(.16,1,.3,1) infinite; }

  /* Udlån, 10 s: konventionen skifter, dagene og renten følger med */
  .cs-loan-calc.is-on .cs-swap-a { animation: csSwapA 10s ease-in-out infinite; }
  .cs-loan-calc.is-on .cs-swap-b { animation: csSwapB 10s ease-in-out infinite; }
  .cs-loan-calc.is-on .cs-conv-a { animation: csTabA 10s ease-in-out infinite; }
  .cs-loan-calc.is-on .cs-conv-b { animation: csTabB 10s ease-in-out infinite; }
  .cs-loan-calc.is-on .cs-nota { animation: csNota 10s ease-out infinite; }

  /* Signering, 9 s: investoren skriver under, så låntageren, så er aftalen gemt */
  .cs-sign.is-on .cs-scribble path { animation: csWrite 9s ease-in-out var(--d) infinite backwards; }
  .cs-sign.is-on .cs-party-ok { animation: csPop 9s cubic-bezier(.16,1,.3,1) calc(var(--d) + 1.1s) infinite backwards; }
  .cs-sign.is-on .cs-signed { animation: csLate 9s ease-out infinite; }

  /* Bankdata, 6 s: data løber ind fra bankerne, depotrækkerne opdateres */
  .cs-feed.is-on .cs-pipe i { animation: csPacket 3s cubic-bezier(.45,0,.55,1) var(--d, 0s) infinite; }
  .cs-feed.is-on .cs-dep { animation: csFlash 6s ease-out var(--d) infinite; }
  /* Screening, 8 s: hver liste søges, og "Intet match" lander én ad gangen */
  .cs-screen.is-on .cs-scr-run { display: inline-flex; animation: csRun 8s linear var(--d) infinite backwards; }
  .cs-screen.is-on .cs-scr-run i { animation: csSpin .8s linear infinite; }
  .cs-screen.is-on .cs-scr-ok { animation: csOk 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }
  .cs-screen.is-on .cs-scr-done { animation: csLate 8s ease-out infinite; }

  /* Andele, 8 s: månederne vokser frem */
  .cs-units.is-on .cs-bars i { animation: csBar 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }

  /* Allokering, 8 s: fordelingen fyldes, bruddet markeres */
  .cs-alloc.is-on .cs-al-track i { animation: csFill 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }
  .cs-alloc.is-on .cs-alarm { animation: csLate 8s ease-out infinite; }

  /* Egnethed, 9 s: svarene udfyldes, markøren lander på profilen */
  .cs-suit.is-on .cs-q b { animation: csType 9s steps(10, end) var(--d) infinite backwards; }
  .cs-suit.is-on .cs-scale i { animation: csScale 9s cubic-bezier(.16,1,.3,1) infinite; }
  .cs-suit.is-on .cs-scale span:nth-child(2) { animation: csScaleLbl 9s cubic-bezier(.16,1,.3,1) infinite; }
  .cs-suit.is-on .cs-suit-done { animation: csLate2 9s ease-out infinite; }

  /* Friværdi, 8 s: adressen skrives, data hentes, overslaget lander */
  .cs-equity.is-on .cs-typed { animation: csTypeW 8s steps(28, end) infinite; }
  .cs-equity.is-on .cs-eq { animation: csRise 8s cubic-bezier(.16,1,.3,1) var(--d) infinite backwards; }
  .cs-equity.is-on .cs-eq-result { animation: csLate2 8s ease-out infinite; }
}


@keyframes csType  { 0% { clip-path: inset(0 0 0 100%); } 7%, 88% { clip-path: inset(0 0 0 0); } 94%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes csPop   { 0% { opacity: 0; transform: translateY(5px) scale(.94); } 6%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes csLate  { 0%, 46% { opacity: 0; transform: translateY(6px); } 54%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes csLate2 { 0%, 58% { opacity: 0; transform: translateY(6px); } 64%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes csLogin { 0%, 22% { opacity: 1; visibility: visible; } 30%, 92% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes csPress { 0%, 12% { background: var(--bg); color: var(--ink); } 16%, 24% { background: var(--ink); color: var(--bg); } 30%, 100% { background: var(--bg); color: var(--ink); } }
@keyframes csRise  { 0%, 26% { opacity: 0; transform: translateY(12px); } 36%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes csGrow  { 0%, 34% { transform: scaleX(0); } 52%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes csSlide { 0% { opacity: 0; transform: translateX(-14px); } 8%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes csPulse { 0%, 30% { opacity: 0; } 36% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 48% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes csStep  { 0% { background: var(--bg); border-color: var(--rule-strong); } 4%, 88% { background: var(--cs-teal); border-color: var(--cs-teal); } 94%, 100% { background: var(--bg); border-color: var(--rule-strong); } }
@keyframes csDraw  { 0% { stroke-dashoffset: 12; } 6%, 88% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 12; } }
@keyframes csDim   { 0% { opacity: .4; } 4%, 88% { opacity: 1; } 94%, 100% { opacity: .4; } }
@keyframes csSwapA { 0%, 42% { opacity: 1; visibility: visible; } 48%, 92% { opacity: 0; visibility: hidden; } 98%, 100% { opacity: 1; visibility: visible; } }
@keyframes csSwapB { 0%, 42% { opacity: 0; visibility: hidden; } 48%, 92% { opacity: 1; visibility: visible; } 98%, 100% { opacity: 0; visibility: hidden; } }
@keyframes csTabA  { 0%, 42% { background: var(--ink); color: var(--bg); } 48%, 92% { background: transparent; color: var(--ink-3); } 98%, 100% { background: var(--ink); color: var(--bg); } }
@keyframes csTabB  { 0%, 42% { background: transparent; color: var(--ink-3); } 48%, 92% { background: var(--ink); color: var(--bg); } 98%, 100% { background: transparent; color: var(--ink-3); } }
@keyframes csNota  { 0%, 18%, 48%, 66% { opacity: 0; transform: translateY(4px); } 24%, 42%, 72%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes csWrite { 0% { stroke-dashoffset: 100; } 14%, 88% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }
@keyframes csPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes csFlash { 0%, 100% { background: transparent; } 6% { background: var(--cs-soft); } 22% { background: transparent; } }
@keyframes csRun   { 0% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes csOk    { 0%, 8% { opacity: 0; transform: translateX(6px); } 12%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes csSpin  { to { transform: rotate(360deg); } }
@keyframes csBar   { 0% { transform: scaleY(0); } 10%, 88% { transform: scaleY(1); } 95%, 100% { transform: scaleY(0); } }
@keyframes csFill  { 0% { transform: scaleX(0); } 12%, 88% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes csScale { 0%, 40% { opacity: 0; transform: scaleX(.6); } 52%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scaleX(.6); } }
@keyframes csScaleLbl { 0%, 40% { color: var(--ink-3); } 52%, 88% { color: var(--bg); } 95%, 100% { color: var(--ink-3); } }
@keyframes csTypeW { 0% { max-width: 0; } 22%, 88% { max-width: 320px; } 95%, 100% { max-width: 0; } }