/* ============================================================
   brancher.css — Forside
   A) Branche-showcase: vandret tab-række + egne CSS/SVG-illustrationer
   B) Sort blok: comparison-animation (mørkt) + løsnings-header
   C) Fire kernefunktioner: hover-accordion, sømløst dokket
   Loades EFTER style.css. Præfikser: .ind-* .cmp- .sol-*
   ============================================================ */

/* ── A · BRANCHE-SHOWCASE (vandret, sort aktiv) ────────── */
.ind-showcase { padding: 64px 0 72px; background: var(--white); }

.ind-tabs {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  align-items: center; justify-content: center;
  padding-bottom: 8px; margin-bottom: 36px;
}
.ind-tab {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 8px 2px; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; line-height: 1.1;
  color: var(--t3); transition: color var(--transition);
}
.ind-tab:hover { color: var(--t1); }
.ind-tab.active { color: var(--t1); }
.ind-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -29px; height: 2px;
  background: var(--t1); transform: scaleX(0); transform-origin: center;
  transition: transform .28s ease;
}
.ind-tab.active::after { transform: scaleX(1); }
.ind-tab:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }

/* stage + paneler (stablede, cross-fade) */
.ind-stage { position: relative; min-height: 360px; }
.ind-panel {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
  pointer-events: none;
}
.ind-panel.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* venstre: illustrations-flade (lys, neutral) */
.ind-illu-wrap {
  position: relative; min-height: 320px; overflow: hidden;
  padding: 0; background: var(--subtle); container-type: inline-size;
}
.ind-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* højre: tekst */
.ind-copy { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.ind-h3 { font-family: var(--display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; line-height: 1.05; margin-bottom: 14px; color: var(--t1); }
.ind-desc { font-size: 1rem; line-height: 1.7; color: var(--t2); margin-bottom: 20px; }
.ind-value { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: var(--green); }
.ind-value-dot { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--green-bg); position: relative; }
.ind-value-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--green); }

/* ── .ind-illu : Hours-mockup-kort (husets .doc-card-stil) ── */
.ind-illu {
  width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 18px 20px;
  box-shadow: 0 1px 3px rgba(26,25,22,.05), 0 24px 44px -26px rgba(26,25,22,.4);
  display: flex; flex-direction: column; gap: 12px;
}
.ind-illu-top { display: flex; align-items: center; gap: 11px; }
.ind-illu-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--green-bg); color: var(--green); display: grid; place-items: center; }
.ind-illu-ico svg { width: 19px; height: 19px; }
.ind-illu-ttl { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--t1); line-height: 1; }
.ind-illu-sub { font-size: .68rem; color: var(--t3); margin-top: 3px; }
.ind-illu-tag { margin-left: auto; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green); background: var(--green-bg); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.ind-illu-rows { display: flex; flex-direction: column; gap: 7px; }
.ind-illu-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--subtle); font-size: .76rem; color: var(--t1); }
.ind-illu-row .k { color: var(--t2); }
.ind-illu-row .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-illu-row.good { background: var(--green-bg); color: var(--green); }
.ind-illu-row.good .k { color: var(--green); }
.ind-illu-row.alert { background: var(--red-bg); color: var(--red-txt); }
.ind-illu-row.alert .k { color: var(--red-txt); }
.ind-illu-row .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .75; }
.ind-illu-bars { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.ind-illu-bar { height: 6px; border-radius: 3px; background: #ece9e4; }
.ind-illu-bar.g { background: var(--green); }
.ind-illu-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.ind-illu-meta { font-size: .66rem; color: var(--t3); }
.ind-illu-btn { font-size: .66rem; font-weight: 700; color: #fff; background: var(--green); border-radius: 7px; padding: 6px 12px; }

/* ── B · COMPARISON (lyse glas-kort · premium) ───────── */
.cmp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 0; }
.cmp-col {
  position: relative; display: flex; flex-direction: column;
  background: rgba(17,17,17,.015);
  border: none; border-radius: 20px; overflow: hidden;
}
.cmp-col::before { content: none; }
.cmp-scene {
  position: relative; margin: 16px 16px 0; border-radius: 14px; overflow: clip;
  aspect-ratio: 511/316; container-type: inline-size; background: #fff; border: none;
  box-shadow: none;
}
/* chaos = lyst datasaet med vertikale striber */
.cmp-scene--bad { background: #fff; }
.cmp-scene--bad::before { content: ''; position: absolute; inset: 0; opacity: .45; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(26,25,22,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,25,22,.05) 1px, transparent 1px);
  background-size: 100% 7cqw, 16.66cqw 100%; }
.cmp-scene--good { background: #fff; }

/* kamera (Ken Burns) — statisk indhold, kun kameraet bevaeger sig */
.cmp-cam { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.45,0,.12,1); will-change: transform; }  /* diskret kamera-zoom paa valgt element */
/* baggrunds-rod staar fast — kun dokumenterne loeftes/flyttes/organiseres */
.cmp-el { position: absolute; }
.cmp-col.cmp-ready .cmp-el { opacity: 0; transform: translateY(1cqw); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); transition-delay: var(--d,0s); }
.cmp-col.cmp-ready.in .cmp-el { opacity: 1; transform: none; }
.cmp-el__i { display: block; }

/* chaos-elementer (lyst tema) */
.cmp-chip{ display:inline-flex; align-items:center; gap:1.6cqw; white-space:nowrap; background:#fff; border:1px solid var(--border); border-radius:1.3cqw; padding:1.5cqw 2.6cqw; font-size:2.1cqw; font-weight:600; color:var(--t1); box-shadow:0 .4cqw 1.4cqw rgba(26,25,22,.12); }
.cmp-chip .ico{ flex-shrink:0; width:3.4cqw; height:3.4cqw; object-fit:contain; display:block; }
.cmp-chip--ghost{ background:rgba(26,25,22,.03); color:var(--t3); box-shadow:none; border:1px dashed var(--border-md); }
.cmp-chip--ghost .xls{ background:#aebfb4 }
.cmp-tag{ display:inline-flex; align-items:center; gap:1.2cqw; white-space:nowrap; border-radius:1cqw; padding:1.2cqw 2.2cqw; font-size:1.9cqw; font-weight:500; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--t1); border:1px solid rgba(255,255,255,.8); box-shadow:0 .3cqw 1cqw rgba(26,25,22,.07); }
.cmp-tag--alert{ background:var(--red-bg); color:var(--t1); border:none; font-weight:500; box-shadow:none }
.cmp-tag .dot{ display:none }
.cmp-btn{ display:inline-flex; align-items:center; white-space:nowrap; background:var(--red-bg); color:var(--t1); border:none; border-radius:1.1cqw; padding:1.5cqw 2.9cqw; font-size:2.1cqw; font-weight:500; }
.cmp-stat{ display:inline-flex; align-items:center; gap:1.4cqw; white-space:nowrap; font-size:2.1cqw; font-weight:600; color:var(--t1) }
.cmp-stat .sq{ width:2.6cqw; height:2.6cqw; border-radius:.6cqw; background:var(--red); flex-shrink:0 }
.cmp-amount{ font-family:var(--display); font-weight:800; letter-spacing:-.01em; line-height:1; color:var(--t1); font-size:5.4cqw; font-variant-numeric:tabular-nums }
.cmp-amount small{ display:block; font-family:var(--body); font-weight:600; font-size:1.7cqw; color:var(--t2); letter-spacing:.04em; text-transform:uppercase; margin-top:.6cqw }
.cmp-supplier{ font-family:var(--display); font-weight:800; font-size:3.6cqw; color:var(--t1); letter-spacing:-.01em; white-space:nowrap }
.cmp-supplier--ghost{ color:var(--t2); font-size:3.2cqw }
.cmp-hand{ position:absolute; right:-1.4cqw; bottom:-4cqw; width:7cqw; height:7cqw; filter:drop-shadow(0 .6cqw 1.2cqw rgba(26,25,22,.28)) } .cmp-hand svg{ width:100%; height:100% }
.cmp-mate{ z-index:6 }
.cmp-mate .cmp-el__i{ display:flex; align-items:flex-start; gap:.2cqw }
.cmp-mate-cur{ width:3.6cqw; height:3.6cqw; flex-shrink:0; filter:drop-shadow(0 .4cqw .8cqw rgba(26,25,22,.28)) } .cmp-mate-cur svg{ width:100%; height:100% }
.cmp-mate-name{ display:inline-flex; align-items:center; gap:1cqw; background:var(--t1); color:#fff; border-radius:1.6cqw; padding:.9cqw 1.8cqw .9cqw .9cqw; font-size:1.85cqw; font-weight:700; white-space:nowrap; box-shadow:0 .8cqw 2cqw rgba(26,25,22,.3) }
.cmp-mate-name .av{ width:2.7cqw; height:2.7cqw; border-radius:50%; background:linear-gradient(155deg,#e0b35a,#c98a2e); flex-shrink:0 }
/* rolig analyse-markoer der gennemgaar felter */
/* cursor + avatar = EN samlet enhed (en digital assistent der organiserer) */
.cmp-rev{ position:absolute; left:0; top:0; z-index:40; pointer-events:none; transform:translate(calc(var(--x,58)*1cqw), calc(var(--y,12)*1cqw)); transition:transform .45s cubic-bezier(.4,0,.12,1); }
.cmp-rev .cur{ position:absolute; left:0; top:0; width:4.6cqw; height:4.6cqw; filter:drop-shadow(0 .6cqw 1.2cqw rgba(26,25,22,.32)) } .cmp-rev .cur svg{ width:100%; height:100% }
.cmp-rev .cur{ transition:transform .15s ease }
.cmp-rev.click .cur{ transform:scale(.82) }
.cmp-rev .cur-arrow, .cmp-rev .cur-hand{ position:absolute; left:0; top:0; width:100%; height:100% }
.cmp-rev .cur-hand{ display:none }
.cmp-rev.grab .cur-arrow{ display:none }
.cmp-rev.grab .cur-hand{ display:block }
.cmp-rev .cmp-ava-btn{ position:absolute; left:3.6cqw; top:4.4cqw; white-space:nowrap }

/* dokumenter = fysiske kort med dybde der loeftes, flyttes og placeres */
.cmp-doc{ position:absolute; left:0; top:0; z-index:5; transform-origin:0 0; transform:translate(calc(var(--x,0)*1cqw), calc(var(--y,0)*1cqw)) scale(var(--s,1)); transition:transform .5s cubic-bezier(.42,0,.12,1), box-shadow .28s ease; will-change:transform; }
.cmp-doc--contract{ z-index:6 }
.cmp-doc--sign{ z-index:8 }
.cmp-doc .cmp-chip, .cmp-doc .cmp-tag{ box-shadow:0 .5cqw 1.6cqw rgba(26,25,22,.16); transition:background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.cmp-doc.is-active{ z-index:30 }
.cmp-doc.is-active .cmp-chip, .cmp-doc.is-active .cmp-tag{ background:rgba(22,21,18,.76); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); box-shadow:0 4.5cqw 8cqw -1.5cqw rgba(26,25,22,.45), 0 1.6cqw 3cqw -1cqw rgba(26,25,22,.3) }
.cmp-doc.no-trans{ transition:none }

/* HOURS-side: dashboard-vindue (luft omkring) + review-panel der glider op nedefra */
.cmp-dash-win{ position:absolute; left:14%; top:14%; right:-4%; bottom:-5%; border-radius:1.8cqw; overflow:hidden; background:#fff;
  box-shadow:-1cqw 1.6cqw 5cqw -1.6cqw rgba(26,25,22,.20), 0 .3cqw 1cqw rgba(26,25,22,.05);
  transform-origin:50% 100%; transition:transform .55s cubic-bezier(.4,0,.12,1), filter .55s ease; will-change:transform, filter; }
.cmp-dash-img{ position:absolute; left:0; top:0; width:114%; height:auto; max-width:none; display:block; }
.cmp-col--good.is-review .cmp-dash-win{ transform:translateY(2.6cqw) scale(.978); filter:blur(2.2px) brightness(.985); }
/* digital-assistent markoer der peger praecist og klikker */
.cmp-cursor-wrap{ position:absolute; left:0; top:0; z-index:30; pointer-events:none; opacity:1; transform:translate(calc(var(--cx,66)*1cqw), calc(var(--cy,53)*1cqw)); transition:transform .85s cubic-bezier(.45,.02,.12,1), opacity .45s ease; }
/* automatisk: markoeren aabner Automatisering og forsvinder mens systemet behandler */
.cmp-col--good.is-review .cmp-cursor-wrap{ opacity:0; }
/* "Mads K."-badge ved markoeren (samme stil som venstre kolonne) */
.cmp-cursor-wrap .cmp-ava-btn{ position:absolute; left:3cqw; top:3.8cqw; white-space:nowrap; }
.cmp-cursor{ position:absolute; left:0; top:0; width:4.4cqw; height:4.4cqw; filter:drop-shadow(0 .6cqw 1.2cqw rgba(26,25,22,.32)); transition:transform .16s ease } .cmp-cursor svg{ width:100%; height:100%; display:block }
.cmp-cursor-wrap.click .cmp-cursor{ transform:scale(.8) }
.cmp-ava-btn{ display:inline-flex; align-items:center; gap:1.2cqw; background:rgba(20,19,17,.64); color:#fff; border:none; border-radius:999px; padding:.7cqw 2.6cqw .7cqw .7cqw; box-shadow:0 1.2cqw 3cqw -.9cqw rgba(26,25,22,.4); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }
.cmp-ava{ position:relative; width:5cqw; height:5cqw; border-radius:50%; border:none; background:linear-gradient(155deg,#e0b35a,#c98a2e); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0 }
.cmp-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.cmp-ava-fb{ font-size:2cqw; font-weight:800; color:#fff }
.cmp-ava-txt{ font-size:2.1cqw; font-weight:600; padding-right:.4cqw }

/* ── HOURS-side: skarp HTML-gengivelse af Automatisering-siden ───────── */
.cmp-app{ position:absolute; inset:0; display:flex; background:#fff; font-family:var(--body); color:var(--t1); overflow:hidden; }
/* sidebar */
.cmp-side{ width:24cqw; flex-shrink:0; background:#fff; border-right:1px solid var(--border); padding:2cqw 1.4cqw; display:flex; flex-direction:column; gap:.35cqw; }
.cmp-side-cap{ font-size:1.18cqw; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); font-weight:700; margin:1.3cqw 0 .3cqw 1cqw; }
.cmp-side-cap:first-child{ margin-top:0 }
.cmp-nav{ display:flex; align-items:center; gap:1cqw; font-size:1.55cqw; font-weight:500; color:var(--t2); padding:.95cqw 1.1cqw; border-radius:1cqw; white-space:nowrap; transition:background .4s ease, color .4s ease; }
.cmp-nav-ic{ width:1.7cqw; height:1.7cqw; border-radius:.45cqw; border:1.4px solid var(--t3); opacity:.6; flex-shrink:0; transition:border-color .4s ease, background .4s ease; }
.cmp-nav--auto .cmp-nav-ic{ border-color:currentColor }
.cmp-col--good.nav-active .cmp-nav--auto{ background:var(--green-bg); color:var(--green-txt); font-weight:600; }
.cmp-col--good.nav-active .cmp-nav--auto .cmp-nav-ic{ background:var(--green); border-color:var(--green); opacity:1 }
.cmp-side-logo{ margin-top:auto; font-family:var(--display); font-weight:800; font-size:2.8cqw; letter-spacing:.03em; color:var(--t1); padding:1cqw 1cqw 0; }
/* hovedindhold */
.cmp-main{ flex:1; min-width:0; padding:2.3cqw 2.5cqw; display:flex; flex-direction:column; gap:1.9cqw; background:#fff; }
.cmp-main-top{ display:flex; align-items:center; justify-content:space-between; gap:1.4cqw; }
.cmp-page-title{ font-family:var(--display); font-weight:800; font-size:3.4cqw; text-transform:uppercase; letter-spacing:.004em; color:var(--t1); line-height:1; }
.cmp-new-btn{ background:var(--ink); color:#fff; font-size:1.45cqw; font-weight:600; padding:1cqw 1.5cqw; border-radius:1cqw; white-space:nowrap; }
.cmp-pcard{ border:1px solid var(--border); border-radius:1.6cqw; padding:1.7cqw 1.9cqw; display:flex; flex-direction:column; gap:1.2cqw; }
.cmp-pcard-h{ font-family:var(--display); font-weight:800; font-size:1.85cqw; text-transform:uppercase; letter-spacing:.025em; color:var(--t1); }
.cmp-act{ display:flex; align-items:center; justify-content:space-between; gap:1.3cqw; background:rgba(17,17,17,.028); border-radius:1.2cqw; padding:1.25cqw 1.4cqw; }
.cmp-act-txt{ display:flex; flex-direction:column; gap:.3cqw; font-size:1.5cqw; font-weight:600; color:var(--t1); }
.cmp-act-txt small{ font-size:1.25cqw; font-weight:500; color:var(--t2); }
.cmp-act-ok{ background:var(--ink); color:#fff; font-size:1.35cqw; font-weight:600; padding:.85cqw 1.5cqw; border-radius:.9cqw; white-space:nowrap; }
.cmp-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3cqw; }
.cmp-kpi{ border:1px solid var(--border); border-radius:1.4cqw; padding:1.4cqw 1.5cqw; display:flex; flex-direction:column; gap:.7cqw; }
.cmp-kpi-l{ font-size:1.15cqw; letter-spacing:.07em; text-transform:uppercase; color:var(--t3); font-weight:700; line-height:1.2; }
.cmp-kpi-n{ font-family:var(--display); font-weight:800; font-size:4.4cqw; line-height:1; color:var(--t1); }

/* ── dokumenter staaende paa samme bundlinje, loeftes op nedefra (stoerre) ─ */
.cmp-docs{ position:absolute; inset:0; z-index:25; pointer-events:none; }
.cmp-pdf{ position:absolute; left:50%; bottom:0; width:15cqw; height:21cqw; z-index:calc(21 - var(--i,0));
  --d:var(--i);                          /* 0 = forrest/tydeligst, 9 = bagest */
  --bs:1.36;                             /* dokumenterne ~36% stoerre end foer */
  --sx:calc(12cqw - var(--d) * 4cqw);    /* forreste til hoejre, stakken viger mod venstre */
  --rz:calc(-3deg - var(--d) * 0.4deg);  /* haelder let mod venstre, samme bundlinje */
  background:#fff; border-radius:.4cqw; border:1px solid rgba(26,25,22,.06);
  box-shadow:0 .2cqw .6cqw rgba(26,25,22,.06), 0 1.8cqw 3cqw -1.6cqw rgba(26,25,22,.22);
  padding:1.5cqw 1.45cqw 1.35cqw; display:flex; flex-direction:column; gap:.7cqw;
  transform-origin:50% 100%;            /* skalering + haeldning fra bunden -> bund roerer bundlinjen */
  opacity:0; transform:translate(calc(-50% + var(--sx)), 42cqw) rotateZ(var(--rz)) scale(calc(var(--bs) * 0.97));
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease, box-shadow .35s ease; will-change:transform, opacity; }

/* faktura-skabelon: fin, ren struktur (header + titel + meta + linjer + total) */
.cmp-pdf-badge{ position:absolute; top:1.4cqw; right:1.4cqw; background:var(--red); color:#fff; font-size:.85cqw; font-weight:700; letter-spacing:.1em; padding:.32cqw .72cqw; border-radius:.25cqw; z-index:2; }
.cmp-pdf-head{ display:flex; align-items:center; gap:.8cqw; }
.cmp-pdf-logo{ position:relative; width:2.7cqw; height:2.7cqw; border-radius:.3cqw; flex-shrink:0; background:rgba(26,25,22,.05); border:1px solid rgba(26,25,22,.11); }
.cmp-pdf-logo::before{ content:''; position:absolute; inset:28%; border-radius:.12cqw; background:rgba(26,25,22,.2); }
.cmp-pdf-org{ display:flex; flex-direction:column; gap:.42cqw; flex:1; }
.cmp-pdf-org i{ display:block; height:.5cqw; border-radius:.18cqw; background:rgba(26,25,22,.26); }
.cmp-pdf-org i:nth-child(1){ width:58% } .cmp-pdf-org i:nth-child(2){ width:38%; height:.42cqw; background:rgba(26,25,22,.12) }
.cmp-pdf-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:1cqw; margin-top:.5cqw; padding-bottom:.7cqw; border-bottom:1px solid rgba(26,25,22,.09); }
.cmp-pdf-title i{ display:block; width:34%; height:.92cqw; border-radius:.18cqw; background:rgba(26,25,22,.42); }
.cmp-pdf-title b{ display:block; width:20%; height:.5cqw; border-radius:.18cqw; background:rgba(26,25,22,.13) }
.cmp-pdf-meta{ display:grid; grid-template-columns:1fr 1fr; gap:.45cqw 1.2cqw; margin-top:.3cqw; }
.cmp-pdf-meta > span{ display:flex; flex-direction:column; gap:.38cqw; }
.cmp-pdf-meta i{ display:block; height:.42cqw; border-radius:.16cqw; background:rgba(26,25,22,.1); }
.cmp-pdf-meta i:nth-child(1){ width:82%; background:rgba(26,25,22,.16) } .cmp-pdf-meta i:nth-child(2){ width:56% }
.cmp-pdf-rows{ display:flex; flex-direction:column; margin-top:.55cqw; border-top:1px solid rgba(26,25,22,.12); }
.cmp-pdf-rows > span{ display:flex; align-items:center; justify-content:space-between; gap:1cqw; padding:.56cqw 0; border-top:1px solid rgba(26,25,22,.06); }
.cmp-pdf-rows > span:first-child{ border-top:none; }
.cmp-pdf-rows i{ display:block; height:.46cqw; border-radius:.16cqw; background:rgba(26,25,22,.12); flex:1; }
.cmp-pdf-rows span:nth-child(1) i{ max-width:60% } .cmp-pdf-rows span:nth-child(2) i{ max-width:74% } .cmp-pdf-rows span:nth-child(3) i{ max-width:48% }
.cmp-pdf-rows b{ display:block; width:18%; height:.46cqw; border-radius:.16cqw; background:rgba(26,25,22,.22); flex-shrink:0; }
.cmp-pdf-total{ display:flex; align-items:center; justify-content:space-between; gap:1cqw; margin-top:auto; padding-top:.8cqw; border-top:1.4px solid rgba(26,25,22,.2); }
.cmp-pdf-total i{ display:block; width:30%; height:.66cqw; border-radius:.18cqw; background:rgba(26,25,22,.34); }
.cmp-pdf-total b{ display:block; width:24%; height:.66cqw; border-radius:.18cqw; background:rgba(26,25,22,.7); }

/* gron godkend-stempel (vises ved done): ren, laesbar badge */
.cmp-pdf-stamp{ position:absolute; left:50%; bottom:1.5cqw; transform:translate(-50%, 1cqw) scale(.9); transform-origin:50% 100%;
  display:flex; align-items:center; justify-content:center; gap:.55cqw; white-space:nowrap;
  background:var(--green); color:#fff; border-radius:.45cqw; padding:.7cqw 1.5cqw; font-size:1.45cqw; font-weight:700; letter-spacing:.005em;
  box-shadow:0 .6cqw 1.6cqw -.4cqw rgba(31,157,85,.6); opacity:0; transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.cmp-pdf-stamp svg{ width:1.55cqw; height:1.55cqw; flex-shrink:0; }

/* paa bundlinjen: dokumenterne staar hæftet til bunden, let haeldet mod venstre, flere bag hinanden */
.cmp-docs.docs-in .cmp-pdf{ opacity:1;
  transform:translate(calc(-50% + var(--sx)), 0cqw) rotateZ(var(--rz)) scale(var(--bs));
  transition-delay:calc(var(--i) * 130ms); }
/* behandles: det aktuelle dokument loeftes tydeligt op over linjen og rettes op for at laeses */
.cmp-docs.docs-in .cmp-pdf.is-proc{ z-index:60;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; transition-delay:0s;
  transform:translate(calc(-50% + var(--sx)), -16cqw) rotateZ(0deg) scale(calc(var(--bs) * 1.06));
  box-shadow:0 1.6cqw 3cqw rgba(26,25,22,.2), 0 7cqw 11cqw -2cqw rgba(26,25,22,.44); }
/* godkendt: gron ring + stempel. transition-delay:0 saa kortet falder straks tilbage
   paa plads efter loeftet (rise-stagger-delay maa ikke gaelde retur-bevaegelsen) */
.cmp-docs.docs-in .cmp-pdf.done{ transition-delay:0s; }
.cmp-pdf.done{ box-shadow:0 0 0 .26cqw var(--green-bg), 0 .2cqw .6cqw rgba(26,25,22,.06), 0 1.8cqw 3cqw -1.6cqw rgba(26,25,22,.24); }
.cmp-pdf.done .cmp-pdf-stamp{ opacity:1; transform:translate(-50%, 0) scale(1); }
/* samlet sluttilstand: stakken samles taet paa bundlinjen bag status (kun transform) */
.cmp-col--good.is-complete .cmp-docs .cmp-pdf{ transition-delay:0s; opacity:.5;
  transform:translate(calc(-50% + var(--sx) * 0.6), 0cqw) rotateZ(calc(var(--rz) * 0.7)) scale(calc(var(--bs) * 0.94)); }
.cmp-col--good.is-complete .cmp-pdf-stamp{ opacity:0; }
/* diskret udtoning foer loop (ingen reverse-bevaegelse) */
.cmp-col--good.is-clearing .cmp-docs, .cmp-col--good.is-clearing .cmp-done{ opacity:0; transition:opacity .55s ease; }
/* oejebliks-nulstilling uden synlig tilbage-animation */
.cmp-col--good.no-anim .cmp-docs, .cmp-col--good.no-anim .cmp-pdf, .cmp-col--good.no-anim .cmp-pdf-stamp,
.cmp-col--good.no-anim .cmp-done, .cmp-col--good.no-anim .cmp-done-card, .cmp-col--good.no-anim .cmp-dash-win, .cmp-col--good.no-anim .cmp-cursor-wrap{ transition:none !important; }

/* ── sluttilstand: stor samlet status ──────────────────────────────── */
.cmp-done{ position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.cmp-col--good.is-complete .cmp-done{ opacity:1; }
.cmp-done-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.3cqw; transform:scale(.84); opacity:0; transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.cmp-col--good.is-complete .cmp-done-card{ transform:none; opacity:1; }
.cmp-done-ic{ width:9cqw; height:9cqw; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; box-shadow:0 1.4cqw 3cqw -.8cqw rgba(31,157,85,.55); }
.cmp-done-ic svg{ width:5cqw; height:5cqw; }
.cmp-done-t{ font-family:var(--display); font-weight:800; font-size:6cqw; text-transform:uppercase; letter-spacing:.01em; color:var(--t1); line-height:1; }
.cmp-done-s{ font-size:1.8cqw; color:var(--t2); font-weight:500; }

/* tekst under scenen (lyst kort) */
.cmp-body{ padding:28px 42px 36px; display:flex; flex-direction:column; gap:22px; position:relative; z-index:2 }
.cmp-title{ font-family:var(--body); font-weight:600; letter-spacing:-.01em; font-size:1.45rem; color:var(--t1); margin:0; line-height:1.2 }
.cmp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.cmp-item{ display:flex; align-items:flex-start; gap:12px; font-size:.95rem; line-height:1.5; color:var(--t2); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1); transition-delay:calc(.18s + var(--index,0) * .07s) }
.cmp-col.cmp-ready .cmp-item{ opacity:0; transform:translateX(-8px) } .cmp-col.cmp-ready.in .cmp-item{ opacity:1; transform:none }
.cmp-item::before{ flex-shrink:0; font-size:1rem; font-weight:700; line-height:1.45 }
.cmp-item.neg::before{ content:'\2715'; color:var(--red) } .cmp-item.pos::before{ content:'\2713'; color:var(--green) }

/* ── C · SORT BLOK + DOCKEDE KORT ──────────────────────── */
.sol-block-section { background: var(--white); padding: 120px 0 0; }
.sol-block {
  background: transparent; color: var(--t1);
  padding: 0 0 44px;
}
.cmp-wrap { margin-bottom: 0; }
.cmp-section .cmp-head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px,5vw,52px); }
.cmp-section .cmp-head h2 { margin: 0 auto; max-width: 18ch; }
.sol-head { text-align: center; padding-top: 8px; }
.sol-head-label::before, .sol-head-label::after { background: var(--t3); }

.sol-cards {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 120px;
}

.sol-card {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 36px 24px; border-right: 1px solid var(--border);
  cursor: pointer; overflow: hidden;
  transition: flex-grow .45s cubic-bezier(.22,1,.36,1), background var(--transition);
}
.sol-card:last-child { border-right: none; }
.sol-card:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.sol-card--dark  { background: var(--ink); color: #fff; border-right-color: rgba(255,255,255,.12); }
.sol-card--mint  { background: var(--green-bg); }
.sol-card--white { background: var(--white); }
.sol-card--amber { background: var(--amber-bg); }
.sol-card-icon { width: 40px; height: 40px; margin-bottom: 20px; flex-shrink: 0; }
.sol-card-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.sol-card-intro { font-size: .85rem; color: var(--t2); line-height: 1.5; }
.sol-card--dark .sol-card-intro { color: rgba(255,255,255,.6); }
.sol-card-more { font-size: .85rem; line-height: 1.6; color: var(--t2); max-height: 0; opacity: 0; margin-top: 0; transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-top .45s ease; overflow: hidden; }
.sol-card--dark .sol-card-more { color: rgba(255,255,255,.6); }
.sol-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .8rem; font-weight: 600; color: var(--green); text-decoration: none; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; }
.sol-card--dark .sol-card-link { color: var(--green-bg); }
.sol-card-link .ar { transition: transform var(--transition); }
.sol-card:hover .sol-card-link .ar { transform: translateX(3px); }
.sol-cards:hover .sol-card { flex-grow: .7; }
.sol-card:hover, .sol-card:focus-within, .sol-card.is-open { flex-grow: 2.6; }
.sol-card:hover .sol-card-more, .sol-card:focus-within .sol-card-more, .sol-card.is-open .sol-card-more { max-height: 240px; opacity: 1; margin-top: 14px; }
.sol-card:hover .sol-card-link, .sol-card:focus-within .sol-card-link, .sol-card.is-open .sol-card-link { max-height: 40px; opacity: 1; }

/* ── RESPONSIV ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ind-panel { position: relative; grid-template-columns: 1fr; }
  .ind-panel:not(.active) { display: none; }
  .ind-illu-wrap { min-height: 240px; }
  .sol-block { padding: 0 0 36px; }
}
@media (max-width: 768px) {
  .ind-tab { font-size: 1rem; }
  .cmp-wrap { grid-template-columns: 1fr; gap: 16px; }
  .sol-block-section { padding: 72px 0 0; }
  .sol-block { padding: 0 0 28px; }
  .ind-copy { padding: 28px 24px; }
  .sol-cards { flex-direction: column; border-radius: var(--radius); margin-bottom: 72px; }
  .sol-card { flex: 1 1 auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sol-card:last-child { border-bottom: none; }
  .sol-cards:hover .sol-card { flex-grow: 1; }
  .sol-card:hover { flex-grow: 1; }
}
@supports not (width: 1cqw) { .cmp-scene { display: none; } }

/* ── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ind-panel, .sol-card, .sol-card-more, .sol-card-link { transition: none; }
  .cmp-col .cmp-el, .cmp-col .cmp-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cmp-cam, .cmp-dash-img, .cmp-rev, .cmp-el__i { animation: none !important; }
  .cmp-cam { transition: none !important; transform: none !important; }
  .cmp-rev, .cmp-doc { transition: none !important; }
  .cmp-doc { transform: translate(calc(var(--x,0)*1cqw), calc(var(--y,0)*1cqw)) !important; }
  .cmp-cursor-wrap { display: none !important; }
  .cmp-dash-win { transform: none !important; filter: none !important; transition: none !important; }
  .cmp-pdf, .cmp-pdf-stamp, .cmp-done-card { transition: none !important; }
  .cmp-done { display: none !important; }
}