/* FUDA WP Tools – cases (blokkene fuda/case og fuda/case-oversigt). Bygger på temaets tokens og klasser. */
.fd-cs { --cs-navy: var(--wp--preset--color--navy, #142A42); --cs-or: var(--wp--preset--color--orange, #F48220); --cs-line: var(--wp--preset--color--linje, #E6ECF3); --cs-muted: var(--wp--preset--color--daempet, #6B7A8D); --cs-sky: #F4F7FB; --cs-green: #1F8A5B; }
.fd-cs svg { width: 18px; height: 18px; flex: none; }

/* Topsektion */
.fd-cs-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 500px at 85% -10%, rgba(244, 130, 32, .28), transparent 60%), radial-gradient(800px 400px at 0% 110%, rgba(47, 127, 200, .25), transparent 60%), linear-gradient(160deg, #142A42 0%, #0C1F31 100%); padding: clamp(40px, 6vw, 84px) 0 clamp(44px, 6vw, 88px); }
.fd-cs-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.fd-cs-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.fd-cs-crumbs { display: flex; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 18px; }
.fd-cs-crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.fd-cs-crumbs a:hover { color: #fff; }
.fd-cs-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(244, 130, 32, .16); border: 1px solid rgba(244, 130, 32, .45); color: #fff; font-size: 12.5px; font-weight: 600; margin-bottom: 18px; }
.fd-cs-badge svg { width: 14px; height: 14px; }
.fd-cs-badge--sm { margin: 0 0 0 auto; padding: 3px 9px; font-size: 11.5px; background: #FEF3E8; border-color: #FBD9B8; color: var(--cs-navy); }
.fd-cs-kunde { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fd-cs-kunde b { display: block; font-size: 15px; }
.fd-cs-kunde small { display: block; font-size: 13px; color: rgba(255, 255, 255, .66); }
.fd-cs-mono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1.5px solid #C9D3DF; color: var(--cs-navy); font-weight: 800; font-size: 16px; letter-spacing: .02em; flex: none; }
.fd-cs-mono--sm { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
.fd-cs-h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; margin: 0 0 16px; color: #fff; }
.fd-cs-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 38em; margin: 0 0 22px; }
.fd-cs-meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fd-cs-meta li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.fd-cs-meta svg { width: 15px; height: 15px; color: var(--cs-or); }

/* Nøgletal */
.fd-cs-kpis { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
.fd-cs-kpi { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.fd-cs-kpi__n { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; white-space: nowrap; min-width: 3.2ch; }
.fd-cs-kpi__n small { font-size: .45em; font-weight: 700; color: var(--cs-or); margin-left: 2px; letter-spacing: 0; }
.fd-cs-kpi__t { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.fd-cs-kpis__note { margin: 2px 4px 0; font-size: 12px; color: rgba(255, 255, 255, .5); }

.fd-cs-demo { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding: 12px 16px; border-radius: 14px; background: #FFF8F1; border: 1px solid #FBE3CC; font-size: 13.5px; line-height: 1.55; color: var(--cs-navy); }
.fd-cs-demo svg { color: var(--cs-or); margin-top: 1px; }

/* Sektioner */
.fd-cs-sec { padding: clamp(48px, 7vw, 96px) 0; }
.fd-cs-sec--sky { background: var(--cs-sky); }
.fd-cs-sechead { max-width: 720px; margin-bottom: clamp(24px, 3vw, 40px); }
.fd-cs-intro { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--tekst, #22344B); margin-bottom: 32px; }
.fd-cs-intro p { margin: 0 0 12px; }

/* Før / efter */
.fd-cs-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; }
.fd-cs-ba__c { padding: 24px 26px; border-radius: 20px; border: 1px solid var(--cs-line); background: #fff; }
.fd-cs-ba__c--foer { background: linear-gradient(180deg, #FBFCFD, #F4F6F9); }
.fd-cs-ba__c--efter { border-color: #BFE3D0; background: linear-gradient(180deg, #F2FBF6, #E7F6EE); box-shadow: 0 24px 50px -30px rgba(31, 138, 91, .45); }
.fd-cs-ba__h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-muted); }
.fd-cs-ba__c--efter .fd-cs-ba__h { color: var(--cs-green); }
.fd-cs-ba__h small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.fd-cs-ba ul, .fd-cs-ans ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fd-cs-ba li, .fd-cs-ans li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.fd-cs-ba li svg, .fd-cs-ans li svg { box-sizing: border-box; width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.fd-cs-ba__c--foer li svg { background: #E9EDF2; color: #8494A6; }
.fd-cs-ba__c--efter li svg { background: var(--cs-green); color: #fff; }
.fd-cs-ba__pil { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cs-or); color: #fff; box-shadow: 0 10px 24px -8px rgba(244, 130, 32, .7); }

/* Leverancer */
.fd-cs-levs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.fd-cs-lev { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--cs-line); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
a.fd-cs-lev:hover, a.fd-cs-lev:focus-visible { transform: translateY(-4px); border-color: #F7C9A0; box-shadow: 0 26px 50px -30px rgba(20, 42, 66, .45); }
.fd-cs-lev__n { font-size: 13px; font-weight: 800; color: var(--fd-etiket, #142A42); letter-spacing: .06em; }
.fd-cs-lev b { font-size: 17px; line-height: 1.3; }
.fd-cs-lev__t { font-size: 14.5px; line-height: 1.55; color: var(--cs-muted); flex: 1; }
.fd-cs-lev__l { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--cs-navy); }
.fd-cs-lev__l svg { width: 16px; height: 16px; transition: transform .2s; }
a.fd-cs-lev:hover .fd-cs-lev__l svg { transform: translateX(3px); }

/* Forløb (vandret tidslinje, lodret på mobil) */
.fd-cs-steps { --n: 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px; position: relative; }
.fd-cs-steps::before { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; height: 1.5px; background: var(--cs-line); }
.fd-cs-step { position: relative; display: flex; flex-direction: column; gap: 6px; }
/* Samme trinmarkør som resten af sitet (tools/design/komponenter.css). */
.fd-cs-step__n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid #C9D3DF; color: var(--cs-navy); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 10px; box-shadow: 0 0 0 6px #fff; }
.fd-cs-sec--sky .fd-cs-step__n { box-shadow: 0 0 0 6px var(--cs-sky); }
.fd-cs-step__tid { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.fd-cs-step b { font-size: 16px; }
.fd-cs-step__t { font-size: 14px; line-height: 1.55; color: var(--cs-muted); }

/* Ansvar */
.fd-cs-anss { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; }
.fd-cs-ans { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--cs-line); }
.fd-cs-ans--fd { border-color: #F7C9A0; box-shadow: inset 0 3px 0 var(--cs-or); }
.fd-cs .fd-cs-ans__h { margin: 0 0 14px; font-weight: 700; font-size: 16px; }
.fd-cs-ans li svg { background: #FEF3E8; color: var(--cs-or); }

/* Citat */
.fd-cs-quote { padding: clamp(48px, 7vw, 96px) 0; background: linear-gradient(135deg, #FEF3E8, #FFF9F3 60%, #fff); }
.fd-cs-quote figure { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.fd-cs-quote figure > svg { width: 52px; height: 52px; color: var(--cs-or); opacity: .9; }
.fd-cs-quote blockquote { margin: 12px 0 26px; padding: 0; border: 0; }
.fd-cs-quote blockquote p { margin: 0; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--cs-navy); }
.fd-cs-quote figcaption { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.fd-cs-quote figcaption b { display: block; }
.fd-cs-quote figcaption small { display: block; font-size: 13px; color: var(--cs-muted); }

/* Afslutning: løsninger + pris */
.fd-cs-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.fd-cs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fd-cs-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--cs-line); background: #fff; color: var(--cs-navy); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color .2s, transform .2s; }
.fd-cs-chip:hover, .fd-cs-chip:focus-visible { border-color: var(--cs-or); transform: translateY(-2px); }
.fd-cs-chip svg { width: 15px; height: 15px; color: var(--cs-or); }
.fd-cs-pris { padding: 26px; border-radius: 22px; background: var(--cs-navy); color: #fff; box-shadow: 0 30px 60px -30px rgba(20, 42, 66, .6); }
.fd-cs-pris__h { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fd-cs-pris ul { list-style: none; margin: 0; padding: 0; }
.fd-cs-pris li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; }
.fd-cs-pris li small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.fd-cs-pris__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; }
.fd-cs-pris__sum b { font-size: 28px; font-weight: 800; color: #fff; }
.fd-cs-pris__note, .fd-cs-pris__txt { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .62); margin: 0 0 16px; }
.fd-cs-pris__txt { font-size: 15px; color: rgba(255, 255, 255, .82); }

/* Kort (oversigt og flere cases) */
.fd-cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.fd-cs-cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.fd-cs-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--cs-line); color: inherit; text-decoration: none; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.fd-cs-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--cs-or), #F7A65E); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.fd-cs-card:hover, .fd-cs-card:focus-visible { transform: translateY(-6px); border-color: #F7C9A0; box-shadow: 0 30px 60px -34px rgba(20, 42, 66, .5); }
.fd-cs-card:hover::before, .fd-cs-card:focus-visible::before { transform: scaleX(1); }
.fd-cs-card__top { display: flex; align-items: center; gap: 12px; }
.fd-cs-card__kunde b { display: block; font-size: 14.5px; }
.fd-cs-card__kunde small { display: block; font-size: 12.5px; color: var(--cs-muted); }
.fd-cs-card__t { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; color: var(--cs-navy); }
.fd-cs-card__lead { font-size: 14.5px; line-height: 1.55; color: var(--cs-muted); flex: 1; }
.fd-cs-card__kpi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #142A42, #1D3A5A); color: #fff; }
.fd-cs-card__kpi .fd-cs-kpi__n { font-size: 28px; }
.fd-cs-card__kpi span { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.fd-cs-card__l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--cs-navy); }
.fd-cs-card__l svg { width: 16px; height: 16px; color: var(--cs-or); transition: transform .2s; }
.fd-cs-card:hover .fd-cs-card__l svg { transform: translateX(4px); }

/* Fremtoning ved scroll (kun med JavaScript og uden "reduceret bevægelse") */
.fd-cs-js .fd-cs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fd-cs-js .fd-cs-reveal.is-synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fd-cs-js .fd-cs-reveal { opacity: 1; transform: none; transition: none; }
	.fd-cs-card, .fd-cs-lev, .fd-cs-chip { transition: none; }
}

/* Responsivt */
@media (max-width: 960px) {
	.fd-cs-hero__grid, .fd-cs-end { grid-template-columns: minmax(0, 1fr); }
	.fd-cs-ba { grid-template-columns: minmax(0, 1fr); }
	.fd-cs-ba__pil { justify-self: center; transform: rotate(90deg); }
	.fd-cs-anss { grid-template-columns: minmax(0, 1fr); }
	.fd-cs-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fd-cs-steps::before { top: 15px; bottom: 22px; left: 14px; right: auto; width: 1.5px; height: auto; background: var(--cs-line); }
	.fd-cs-step { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding-bottom: 22px; }
	.fd-cs-step__n { grid-row: span 3; margin: 0; }
}
.fd-cs-card__demo { align-self: flex-start; display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #F1F4F8; color: #5B6B7F; font-size: 11.5px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
.fd-cs-card__demo svg { width: 15px; height: 15px; color: var(--cs-or); }