/* engine/style.css
   Font-størrelser er designet til 1280px container-bredde.
   JavaScript sætter --sf (scale factor) = containerWidth/1280.
   max(MINIMUM, calc(DESIGN_SIZE * var(--sf))) sikrer aldrig for lille.
   Rør ikke ved denne fil. */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --ac:    #1d4ed8;
  --acr:   29,78,216;
  --ac2:   #dc2626;
  --ac2r:  220,38,38;
  --bg:    #0f172a;
  --fg:    #f8fafc;
  --fg2:   #94a3b8;
  --fg3:   #64748b;
  --font:  'DM Sans', system-ui, sans-serif;

  /* Sat af JavaScript ud fra faktisk container-bredde */
  --sf:    1;        /* scale factor: containerWidth / 1280 */
  --pad:   calc(max(20px, calc(52px * var(--sf))));
  --gap:   calc(max(14px, calc(18px * var(--sf))));
}

html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font);
  background: #07101f;
  display: flex;
  flex-direction: column;
  color: var(--fg);
}

/* ── Progress bar ──────────────────────────────────────────── */
#prog-wrap { height:4px; background:#1e293b; flex-shrink:0; }
#prog-bar  { height:100%; background:var(--ac); width:0; transition:width .45s ease; }

/* ── Stage: fluid container ────────────────────────────────── */
#stage-wrap {
  flex:1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: #07101f;
}
#stage {
  width:100%;
  flex:1;
  display: flex;
  flex-direction: column;
}

/* ── Slides ────────────────────────────────────────────────── */
.slide {
  display: none;
  flex-direction: column;
  min-height: calc(100dvh - 4px - 56px);
  background: var(--bg);
  color: var(--fg);
}
.slide.active {
  display: flex;
  animation: sIn 280ms cubic-bezier(.25,.46,.45,.94);
}
@keyframes sIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.slide.anim-fade    { animation: aF 280ms ease; }
.slide.anim-slide-up{ animation: aU 280ms ease; }
@keyframes aF { from{opacity:0} to{opacity:1} }
@keyframes aU { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── Strip ─────────────────────────────────────────────────── */
.strip {
  background: linear-gradient(100deg, var(--ac) 0%, color-mix(in srgb,var(--ac) 68%,#000) 100%);
  display: flex;
  align-items: center;
  padding: max(18px, calc(22px * var(--sf))) var(--pad);
  gap: max(12px, calc(16px * var(--sf)));
  flex-shrink: 0;
}
.strip-cat {
  font-size: max(12px, calc(13px * var(--sf)));
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(0,0,0,.28); padding:5px 14px; border-radius:4px;
  opacity:.92; white-space:nowrap; flex-shrink:0;
}
.strip-title {
  font-size: max(26px, calc(38px * var(--sf)));
  font-weight:700; letter-spacing:-.3px; line-height:1.15;
}
.strip-logo { margin-left:auto; }
.strip-logo img { height: max(34px, calc(44px * var(--sf))); object-fit:contain; }
.strip-bot { height:5px; background:rgba(255,255,255,.18); flex-shrink:0; }

/* ── Body zones ────────────────────────────────────────────── */
.body {
  flex:1; display:flex; flex-direction:column;
  gap: var(--gap);
  padding: max(22px, calc(32px * var(--sf))) var(--pad)
           max(24px, calc(36px * var(--sf)));
}
.body-with-img {
  flex:1; display:grid;
  grid-template-columns: 1fr max(220px, calc(340px * var(--sf)));
  gap: max(24px, calc(48px * var(--sf)));
  padding: max(22px, calc(32px * var(--sf))) var(--pad)
           max(24px, calc(36px * var(--sf)));
  align-items: start;
}
.body-with-img .content-col { display:flex; flex-direction:column; gap:var(--gap); }
.body-with-img .img-col      { display:flex; align-items:center; justify-content:center; }
.body-with-img .img-col img  { max-width:100%; border-radius:14px; object-fit:contain; }

/* ── Text — aldrig under 20px ──────────────────────────────── */
.lead {
  font-size: max(20px, calc(24px * var(--sf)));
  line-height: 1.72; color: rgba(248,250,252,.9);
}
.tbox {
  background: rgba(var(--acr),.14); border-left:6px solid var(--ac);
  border-radius: 8px;
  padding: max(16px, calc(22px * var(--sf))) max(18px, calc(26px * var(--sf)));
  font-size: max(20px, calc(22px * var(--sf)));
  line-height: 1.68; color: rgba(248,250,252,.92);
}
.tbox b,.tbox strong { color:color-mix(in srgb,var(--ac) 50%,#fff); }
.warn {
  background: rgba(var(--ac2r),.12); border-left:6px solid var(--ac2);
  border-radius: 8px;
  padding: max(14px, calc(18px * var(--sf))) max(16px, calc(22px * var(--sf)));
  font-size: max(19px, calc(21px * var(--sf)));
  line-height: 1.65; color: rgba(248,250,252,.9);
}

/* ── Punktliste — aldrig under 20px ────────────────────────── */
ul.pts { list-style:none; display:flex; flex-direction:column; gap:max(10px,calc(14px * var(--sf))); }
ul.pts li {
  display:flex; align-items:flex-start; gap:max(12px,calc(14px * var(--sf)));
  font-size: max(20px, calc(22px * var(--sf)));
  line-height:1.65; color:rgba(248,250,252,.9);
}
ul.pts li::before {
  content:'▸'; color:color-mix(in srgb,var(--ac) 50%,#fff);
  font-size:max(11px,calc(13px * var(--sf))); flex-shrink:0; margin-top:5px;
}

ul.chk { list-style:none; display:flex; flex-direction:column; gap:max(7px,calc(10px * var(--sf))); }
ul.chk li {
  display:flex; align-items:flex-start; gap:max(12px,calc(14px * var(--sf)));
  font-size: max(19px, calc(22px * var(--sf)));
  line-height:1.62; color:rgba(248,250,252,.9);
  padding: max(11px,calc(14px * var(--sf))) max(16px,calc(20px * var(--sf)));
  background:rgba(255,255,255,.05); border-radius:8px;
  border-left:3px solid transparent; transition:border-color .2s;
}
ul.chk li:hover { border-left-color:var(--ac); }
ul.chk li::before {
  content:'□'; color:color-mix(in srgb,var(--ac) 50%,#fff);
  font-size:max(19px,calc(22px * var(--sf))); flex-shrink:0; line-height:1.1;
}

/* ── Cards ─────────────────────────────────────────────────── */
.cards {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(240px * var(--sf))), 1fr));
  gap: max(12px, calc(16px * var(--sf)));
}
.card {
  background:rgba(255,255,255,.06); border:0.5px solid rgba(var(--acr),.35);
  border-radius:12px; padding:max(16px,calc(22px * var(--sf)));
  border-top:4px solid var(--ac);
}
.card h3 {
  font-size: max(14px, calc(15px * var(--sf)));
  font-weight:700; color:color-mix(in srgb,var(--ac) 50%,#fff);
  margin-bottom:max(8px,calc(11px * var(--sf)));
  text-transform:uppercase; letter-spacing:.04em;
}
.card p {
  font-size: max(17px, calc(18px * var(--sf)));
  line-height:1.65; color:rgba(248,250,252,.82);
}

/* ── Stats ─────────────────────────────────────────────────── */
.stat-row { display:flex; gap:max(16px,calc(24px * var(--sf))); flex-wrap:wrap; }
.stat-box {
  background:rgba(var(--acr),.17); border:2px solid rgba(var(--acr),.5);
  border-radius:14px;
  padding: max(20px,calc(28px * var(--sf))) max(24px,calc(40px * var(--sf)));
  text-align:center;
}
.stat-n {
  font-size: max(52px, calc(72px * var(--sf)));
  font-weight:700; color:color-mix(in srgb,var(--ac) 50%,#fff); line-height:1;
}
.stat-l {
  font-size: max(15px, calc(18px * var(--sf)));
  color:var(--fg2); margin-top:6px;
}

/* ── Chips ─────────────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:max(8px,calc(12px * var(--sf))); }
.chip {
  display:flex; align-items:center; gap:8px;
  background:rgba(var(--ac2r),.12); border:0.5px solid rgba(var(--ac2r),.32);
  border-radius:24px;
  padding: max(8px,calc(11px * var(--sf))) max(14px,calc(20px * var(--sf)));
  font-size: max(16px, calc(18px * var(--sf)));
  font-weight:500; color:color-mix(in srgb,var(--ac2) 50%,#fff);
}
.chip::before { content:'✗'; color:var(--ac2); }

/* ── Radar ─────────────────────────────────────────────────── */
.radar { display:flex; flex-wrap:wrap; gap:max(8px,calc(12px * var(--sf))); }
.rb {
  background:rgba(var(--acr),.1); border:1.5px solid rgba(var(--acr),.38);
  border-radius:22px;
  padding: max(9px,calc(12px * var(--sf))) max(14px,calc(18px * var(--sf)));
  font-size: max(16px, calc(18px * var(--sf)));
  color:rgba(248,250,252,.85); opacity:0; animation:rbP .35s ease forwards;
}
@keyframes rbP { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
.rb:nth-child(1){animation-delay:.05s} .rb:nth-child(2){animation-delay:.15s}
.rb:nth-child(3){animation-delay:.25s} .rb:nth-child(4){animation-delay:.35s}
.rb:nth-child(5){animation-delay:.45s} .rb:nth-child(6){animation-delay:.55s}
.rb:nth-child(7){animation-delay:.65s} .rb:nth-child(8){animation-delay:.75s}

/* ── Two columns ───────────────────────────────────────────── */
.c2 { display:grid; grid-template-columns:1fr 1fr; gap:max(24px,calc(48px * var(--sf))); }
.col { display:flex; flex-direction:column; gap:var(--gap); }
.col-label {
  font-size: max(12px, calc(13px * var(--sf)));
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 50%,#fff);
  margin-bottom: max(7px,calc(10px * var(--sf)));
}

/* ── Animation grid ────────────────────────────────────────── */
.anim-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(280px * var(--sf))), 1fr));
  gap: var(--gap); flex:1;
}
.ao { opacity:0; transition:opacity .5s,transform .5s; }
.ao.vis { opacity:1; transform:none!important; }
.ao.fl { transform:translateX(-70px); }
.ao.fr { transform:translateX(70px); }
.ao.fu { transform:translateY(-50px); }
.ao.fb { transform:translateY(50px); }
.ao.fs { transform:scale(.55); }

/* ── Cover ─────────────────────────────────────────────────── */
.slide-cover { flex-direction:row; }
.cv-left {
  flex: 0 0 max(300px, calc(520px * var(--sf)));
  background: linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#000));
  display:flex; flex-direction:column; justify-content:center;
  padding: max(36px,calc(64px * var(--sf))) max(28px,calc(56px * var(--sf)));
}
.cv-right { flex:1; overflow:hidden; }
.cv-right img { width:100%; height:100%; object-fit:cover; opacity:.55; }
.cv-logo {
  font-size: max(11px, calc(12px * var(--sf)));
  font-weight:700; letter-spacing:.15em; color:rgba(248,250,252,.6);
  text-transform:uppercase; margin-bottom:max(20px,calc(30px * var(--sf)));
}
.cv-eye {
  font-size: max(13px, calc(15px * var(--sf)));
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.8); margin-bottom:max(10px,calc(14px * var(--sf)));
}
.cv-h1 {
  font-size: max(40px, calc(78px * var(--sf)));
  font-weight:700; line-height:.93; letter-spacing:-1.5px;
  margin-bottom:max(14px,calc(22px * var(--sf)));
}
.cv-sub {
  font-size: max(18px, calc(21px * var(--sf)));
  font-weight:300; line-height:1.65; color:rgba(248,250,252,.8);
  margin-bottom:max(24px,calc(42px * var(--sf)));
}
.cv-tip {
  font-size: max(13px, calc(15px * var(--sf)));
  color:rgba(248,250,252,.45);
  border-top:0.5px solid rgba(255,255,255,.18);
  padding-top:max(14px,calc(20px * var(--sf)));
}

/* ── Section ───────────────────────────────────────────────── */
.dark-full {
  flex:1; background:linear-gradient(135deg,#0c1a2e,#0a1222);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  gap:max(14px,calc(20px * var(--sf)));
  padding: max(40px,calc(80px * var(--sf))) var(--pad);
}
.sec-eye {
  font-size: max(13px, calc(14px * var(--sf)));
  font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ac); opacity:.9;
}
.sec-title {
  font-size: max(44px, calc(80px * var(--sf)));
  font-weight:700; line-height:.93; letter-spacing:-1.5px;
}
.sec-sub {
  font-size: max(20px, calc(26px * var(--sf)));
  font-weight:300; color:rgba(248,250,252,.72);
}
.sec-note {
  font-size: max(14px, calc(17px * var(--sf)));
  color:rgba(148,163,184,.5); margin-top:max(10px,calc(16px * var(--sf)));
}

/* ── End ───────────────────────────────────────────────────── */
.end-full {
  flex:1; background:linear-gradient(135deg,#064e3b,#065f46);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  gap:max(14px,calc(22px * var(--sf)));
  padding: max(40px,calc(80px * var(--sf))) var(--pad);
}
.end-icon  { font-size:max(56px,calc(80px * var(--sf))); }
.end-title { font-size:max(34px,calc(62px * var(--sf))); font-weight:700; letter-spacing:-1px; }
.end-text  {
  font-size: max(18px, calc(22px * var(--sf)));
  font-weight:300; color:rgba(255,255,255,.8); line-height:1.72;
  max-width: min(520px, 90%);
}
.end-producer { font-size:max(12px,calc(14px * var(--sf))); color:rgba(255,255,255,.3); margin-top:max(10px,calc(20px * var(--sf))); }

/* ── Result ────────────────────────────────────────────────── */
.res-center {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:max(16px,calc(22px * var(--sf)));
  padding: max(30px,calc(52px * var(--sf))) var(--pad);
}
.res-ring {
  width: max(150px, calc(190px * var(--sf)));
  height:max(150px, calc(190px * var(--sf)));
  border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-size: max(44px, calc(56px * var(--sf)));
  font-weight:700; color:#fff; box-shadow:0 12px 60px rgba(0,0,0,.5);
}
.res-ring .sub { font-size:max(14px,calc(17px * var(--sf))); font-weight:400; opacity:.75; margin-top:-4px; }
.rp { background:linear-gradient(135deg,#059669,#10b981); }
.rf { background:linear-gradient(135deg,#b91c1c,#dc2626); }
.res-stats { display:flex; gap:max(14px,calc(24px * var(--sf))); flex-wrap:wrap; justify-content:center; }
.res-stat {
  background:rgba(255,255,255,.07); border-radius:12px;
  padding: max(13px,calc(18px * var(--sf))) max(18px,calc(26px * var(--sf)));
  text-align:center; border-top:4px solid var(--ac); min-width:90px;
}
.res-stat .rv { font-size:max(28px,calc(34px * var(--sf))); font-weight:700; color:color-mix(in srgb,var(--ac) 50%,#fff); }
.res-stat .rl { font-size:max(12px,calc(13px * var(--sf))); color:var(--fg3); text-transform:uppercase; letter-spacing:.08em; }
.res-title { font-size:max(28px,calc(38px * var(--sf))); font-weight:700; }
.res-sub   { color:var(--fg2); font-size:max(18px,calc(22px * var(--sf))); }
.res-msg   { max-width:min(480px,90%); text-align:center; font-size:max(16px,calc(19px * var(--sf))); color:var(--fg2); line-height:1.68; }

/* ══════════════════════════════════════════════════════════════
   QUIZ
══════════════════════════════════════════════════════════════ */
.quiz-body {
  flex:1; display:flex; flex-direction:column; gap:var(--gap);
  padding: max(22px,calc(32px * var(--sf))) var(--pad)
           max(24px,calc(36px * var(--sf)));
}
.quiz-hdr  { display:flex; align-items:center; gap:max(10px,calc(16px * var(--sf))); flex-wrap:wrap; }
.quiz-badge {
  background:var(--ac2); color:#fff;
  font-size:max(11px,calc(13px * var(--sf))); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:5px;
}
.quiz-prog { font-size:max(15px,calc(18px * var(--sf))); color:var(--fg2); }
.quiz-pts  {
  font-size:max(14px,calc(16px * var(--sf))); color:color-mix(in srgb,var(--ac) 50%,#fff);
  font-weight:700; background:rgba(var(--acr),.18); padding:4px 12px;
  border-radius:12px; margin-left:auto;
}
.quiz-q {
  font-size: max(22px, calc(30px * var(--sf)));
  font-weight:600; line-height:1.38;
}
.quiz-warn   { font-size:max(15px,calc(18px * var(--sf))); color:var(--ac2); display:none; }
.quiz-submit {
  align-self:flex-start;
  padding: max(12px,calc(15px * var(--sf))) max(26px,calc(38px * var(--sf)));
  background:var(--ac); color:#fff; border:none;
  border-radius:8px; font-size:max(16px,calc(19px * var(--sf)));
  font-weight:700; cursor:pointer; font-family:inherit; transition:background .2s;
}
.quiz-submit:hover    { background:color-mix(in srgb,var(--ac) 82%,#000); }
.quiz-submit:disabled { background:rgba(255,255,255,.1); cursor:default; color:rgba(255,255,255,.3); }

/* MCQ — svar-knapper */
.mcq-opts { display:flex; flex-direction:column; gap:max(9px,calc(12px * var(--sf))); }
.mcq-opt {
  display:flex; align-items:center; gap:max(14px,calc(18px * var(--sf)));
  padding: max(14px,calc(17px * var(--sf))) max(18px,calc(24px * var(--sf)));
  border-radius:10px; border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); cursor:pointer;
  font-size: max(18px, calc(21px * var(--sf)));
  color:rgba(248,250,252,.9); transition:all .15s;
  font-family:inherit; text-align:left; width:100%;
}
.mcq-opt:hover:not(:disabled) {
  border-color:var(--ac); background:rgba(var(--acr),.12); transform:translateX(5px);
}
.mcq-lbl {
  width: max(34px, calc(40px * var(--sf)));
  height:max(34px, calc(40px * var(--sf)));
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  font-weight:700; font-size:max(14px,calc(16px * var(--sf)));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mcq-opt.sel { border-color:var(--ac); background:rgba(var(--acr),.14); }
.mcq-opt.sel .mcq-lbl { background:var(--ac); }
.mcq-opt.ok  { border-color:#10b981; background:rgba(16,185,129,.12); }
.mcq-opt.ok  .mcq-lbl { background:#10b981; }
.mcq-opt.ng  { border-color:var(--ac2); background:rgba(var(--ac2r),.12); }
.mcq-opt.ng  .mcq-lbl { background:var(--ac2); }
.mcq-opt:disabled { cursor:default; }

/* Feedback overlay */
.fb-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s;
  padding:max(20px,calc(40px * var(--sf)));
}
.fb-overlay.show { opacity:1; pointer-events:all; }
.fb-box {
  border-radius:16px;
  padding: max(28px,calc(48px * var(--sf))) max(28px,calc(52px * var(--sf)));
  max-width:min(580px,95vw); text-align:center;
  transform:scale(.9); transition:transform .22s; width:100%;
}
.fb-overlay.show .fb-box { transform:scale(1); }
.fb-box.ok { background:var(--quiz-ok-bg,#065f46); border:2px solid #10b981; }
.fb-box.ng { background:var(--quiz-ng-bg,#7f1d1d); border:2px solid var(--ac2); }
.fb-ico { font-size:max(48px,calc(60px * var(--sf))); margin-bottom:max(12px,calc(18px * var(--sf))); }
.fb-tit { font-size:max(22px,calc(28px * var(--sf))); font-weight:700; margin-bottom:max(8px,calc(12px * var(--sf))); }
.fb-txt { font-size:max(17px,calc(20px * var(--sf))); line-height:1.7; color:rgba(248,250,252,.85); margin-bottom:max(18px,calc(26px * var(--sf))); }
.fb-btn {
  padding: max(12px,calc(15px * var(--sf))) max(26px,calc(38px * var(--sf)));
  border:none; border-radius:8px;
  font-size:max(16px,calc(19px * var(--sf))); font-weight:700;
  cursor:pointer; font-family:inherit;
}
.fb-box.ok .fb-btn { background:#10b981; color:#fff; }
.fb-box.ng .fb-btn { background:var(--ac2); color:#fff; }

/* ── Drag & Drop ───────────────────────────────────────────── */
.dnd-layout {
  display:grid;
  grid-template-columns: max(190px, calc(240px * var(--sf))) 1fr;
  gap: max(16px, calc(26px * var(--sf)));
  flex:1; min-height:0;
}
.dnd-bank-label {
  font-size:max(12px,calc(14px * var(--sf))); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg3);
  margin-bottom:10px;
}
.dnd-bank-items { display:flex; flex-direction:column; gap:max(8px,calc(12px * var(--sf))); }
.dnd-cats       { display:flex; gap:max(12px,calc(18px * var(--sf))); }
.dnd-cat {
  flex:1; border:2px dashed rgba(255,255,255,.22);
  border-radius:14px; padding:max(12px,calc(18px * var(--sf)));
  min-height:max(120px,calc(200px * var(--sf)));
  transition:border-color .2s,background .2s;
  display:flex; flex-direction:column; gap:max(8px,calc(12px * var(--sf)));
}
.dnd-cat.drag-over { border-color:var(--ac); background:rgba(var(--acr),.09); border-style:solid; }
.dnd-cat-title {
  font-size: max(15px, calc(17px * var(--sf)));
  font-weight:700; text-align:center;
  padding:max(7px,calc(10px * var(--sf))); border-radius:8px; margin-bottom:4px;
}
.dnd-cat.ok-cat { border-color:#10b981; border-style:solid; }
.dnd-cat.ng-cat { border-color:var(--ac2); border-style:solid; }

/* Billedkort — store nok at se! */
.dnd-item {
  border-radius:12px; cursor:grab;
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18);
  transition:all .18s; user-select:none; overflow:hidden; position:relative;
}
.dnd-item:hover {
  border-color:rgba(var(--acr),.8); background:rgba(var(--acr),.14);
  transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.dnd-item.dragging  { opacity:.35; cursor:grabbing; transform:scale(.95); }
.dnd-item.ok-item   { border-color:#10b981; background:rgba(16,185,129,.16); }
.dnd-item.ng-item   { border-color:var(--ac2); background:rgba(var(--ac2r),.16); }

/* Vertikal = i banken til venstre */
.dnd-item.vertical { width:100%; display:flex; flex-direction:column; align-items:center; }
.dnd-item.vertical .di-img {
  width:100%;
  height: max(110px, calc(150px * var(--sf)));   /* ← Billeder er nu store */
  object-fit:contain; padding:12px;
}
.dnd-item.vertical .di-label {
  font-size: max(14px, calc(16px * var(--sf)));
  font-weight:600; padding:8px 10px; text-align:center;
  background:rgba(0,0,0,.38); width:100%;
}

/* Horisontal = i kategori-kasserne */
.dnd-item.horizontal { width:100%; display:flex; align-items:center; }
.dnd-item.horizontal .di-img {
  width:  max(66px, calc(88px * var(--sf)));
  height: max(66px, calc(88px * var(--sf)));
  object-fit:contain; padding:8px; flex-shrink:0;
}
.dnd-item.horizontal .di-label {
  font-size: max(15px, calc(18px * var(--sf)));
  font-weight:600; padding:0 14px; flex:1;
}

.dnd-item .di-result {
  position:absolute; top:5px; right:5px;
  width:24px; height:24px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.dnd-item.ok-item .di-result { display:flex; background:#10b981; color:#fff; }
.dnd-item.ng-item .di-result { display:flex; background:var(--ac2); color:#fff; }

/* ── Slider ────────────────────────────────────────────────── */
.sldr-display {
  display:flex; align-items:center; justify-content:center;
  padding:max(24px,calc(36px * var(--sf)));
  background:rgba(255,255,255,.06); border-radius:14px;
}
.sldr-num  { font-size:max(72px, calc(96px * var(--sf))); font-weight:700; color:color-mix(in srgb,var(--ac) 50%,#fff); line-height:1; }
.sldr-unit { font-size:max(22px,calc(28px * var(--sf))); color:var(--fg2); margin-left:8px; }
.sldr-labels { display:flex; justify-content:space-between; font-size:max(14px,calc(16px * var(--sf))); color:var(--fg3); }

input[type=range].quiz-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:10px;
  border-radius:5px; background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
input[type=range].quiz-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:max(30px,calc(36px * var(--sf)));
  height:max(30px,calc(36px * var(--sf)));
  border-radius:50%; background:var(--ac); cursor:pointer;
  box-shadow:0 0 0 5px rgba(var(--acr),.3); transition:box-shadow .15s;
}

/* ── Navigation ────────────────────────────────────────────── */
#nav {
  background:#060e1c; border-top:0.5px solid rgba(255,255,255,.08);
  padding:max(8px,calc(10px * var(--sf))) max(16px,calc(28px * var(--sf)));
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; height:56px;
}
.nav-btn {
  display:flex; align-items:center; gap:7px;
  padding: max(9px,calc(11px * var(--sf))) max(18px,calc(26px * var(--sf)));
  border-radius:8px; font-size:max(14px,calc(16px * var(--sf)));
  font-weight:700; cursor:pointer; border:none; font-family:inherit; transition:all .15s;
}
#btn-prev { background:rgba(255,255,255,.07); color:rgba(248,250,252,.6); }
#btn-prev:hover:not(:disabled) { background:rgba(255,255,255,.14); color:var(--fg); }
#btn-next { background:var(--ac); color:#fff; }
#btn-next:hover:not(:disabled) { background:color-mix(in srgb,var(--ac) 82%,#000); }
.nav-btn:disabled { opacity:.2; cursor:not-allowed; }

.dots { display:flex; gap:5px; flex-wrap:wrap; max-width:min(440px,50%); justify-content:center; }
.dot  { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14); cursor:pointer; transition:all .2s; border:1.5px solid transparent; }
.dot.v { background:rgba(var(--acr),.55); }
.dot.a { background:var(--ac); transform:scale(1.7); }
.dot.q { border-color:rgba(var(--ac2r),.7); }
#slide-counter { font-size:max(12px,calc(14px * var(--sf))); color:rgba(148,163,184,.35); font-family:monospace; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — collapse på small screens
══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .slide-cover         { flex-direction:column; }
  .cv-left             { flex:0 0 auto; }
  .cv-right            { flex:0 0 200px; }
  .body-with-img       { grid-template-columns:1fr; }
  .body-with-img .img-col { max-height:220px; }
  .c2                  { grid-template-columns:1fr; }
  .dnd-layout          { grid-template-columns:1fr; }
  .dnd-bank-items      { flex-direction:row; flex-wrap:wrap; }
  .dnd-bank-items .dnd-item.vertical { width:calc(50% - 6px); }
  .dnd-cats            { flex-direction:column; }
}
@media (max-width:600px) {
  .cards               { grid-template-columns:1fr 1fr; }
  .stat-row            { flex-direction:column; }
  .cv-right            { display:none; }
  .dots                { max-width:200px; }
  .dnd-bank-items .dnd-item.vertical { width:calc(50% - 5px); }
}
@media (max-width:440px) {
  .cards               { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   HOKLAND REDESIGN — tynde linjer, lys canvas og side-navigation
   Tilføjet for at give pakken et lettere, mere illustrativt udtryk.
══════════════════════════════════════════════════════════════ */
:root {
  --paper: #f7f4ee;
  --paper2: #fbf8f1;
  --ink: #1f2933;
  --muted: #667085;
  --line: rgba(31,41,51,.18);
  --line-strong: rgba(31,41,51,.32);
  --soft-ac: rgba(var(--acr),.09);
  --soft-warn: rgba(var(--ac2r),.10);
  --shadow-thin: 0 18px 44px rgba(31,41,51,.08);
  --nav-size: max(48px, calc(54px * var(--sf)));
  --nav-height: max(82px, calc(92px * var(--sf)));
}

html, body { background: var(--paper); color: var(--ink); }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--acr),.10), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(var(--ac2r),.08), transparent 30%),
    linear-gradient(180deg, #fbf8f1 0%, #efeae1 100%);
}
#prog-wrap { height:3px; background:transparent; position:relative; z-index:50; }
#prog-bar { background:var(--ac); opacity:.75; }
#stage-wrap { background:transparent; }
#stage { min-height:calc(100dvh - 3px); }
.slide {
  min-height: calc(100dvh - 3px);
  background:
    linear-gradient(rgba(47,111,115,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,115,.045) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px, 42px 42px, auto;
  color: var(--ink);
}
.slide.active { animation: sIn 220ms ease; }
@keyframes sIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.strip {
  background: rgba(251,248,241,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: max(18px, calc(24px * var(--sf))) max(82px, calc(96px * var(--sf)));
  gap: max(12px, calc(18px * var(--sf)));
}
.strip-bot { height:0; background:transparent; }
.strip-cat {
  color: var(--ac);
  background: transparent;
  border: 1px solid rgba(var(--acr),.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  opacity:1;
}
.strip-title {
  color: var(--ink);
  font-weight: 650;
  letter-spacing:-.04em;
  white-space:pre-line;
}
.strip-logo img { filter:none; }

.body, .quiz-body {
  padding: max(24px, calc(40px * var(--sf))) max(88px, calc(110px * var(--sf))) max(42px, calc(58px * var(--sf)));
}
.body-with-img {
  grid-template-columns: minmax(0,1fr) max(220px, calc(360px * var(--sf)));
  padding: max(24px, calc(40px * var(--sf))) max(88px, calc(110px * var(--sf))) max(42px, calc(58px * var(--sf)));
}
.body-with-img .img-col img {
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-thin);
  background: var(--paper2);
  padding: max(10px, calc(18px * var(--sf)));
}
.lead, ul.pts li, ul.chk li, .card p, .tbox, .warn, .quiz-prog, .quiz-q, .fb-txt, .res-sub, .res-msg {
  color: rgba(31,41,51,.82);
}
.tbox, .warn {
  background: rgba(251,248,241,.78);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-thin);
}
.tbox b,.tbox strong { color: var(--ac); }
.warn { background: var(--soft-warn); color:rgba(31,41,51,.84); }
ul.pts li::before {
  content:'';
  width:.55em; height:.55em;
  border:1.5px solid var(--ac);
  border-radius:50%;
  margin-top:.52em;
  background:transparent;
}
ul.chk li {
  background: rgba(251,248,241,.80);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:none;
}
ul.chk li:hover { border-color:rgba(var(--acr),.42); }
ul.chk li::before {
  content:'✓';
  color: var(--ac);
  font-weight:500;
}
.cards { gap:max(14px, calc(20px * var(--sf))); }
.card {
  background: rgba(251,248,241,.86);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-thin);
}
.card h3 {
  color: var(--ac);
  font-weight:650;
}
.stat-box, .res-stat {
  background: rgba(251,248,241,.84);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-thin);
  border-radius: 20px;
}
.stat-n, .res-stat .rv, .sldr-num { color: var(--ac); font-weight:650; }
.stat-l, .res-stat .rl, .sldr-unit, .sldr-labels, .col-label, #slide-counter { color: var(--muted); }
.chip, .rb {
  background: rgba(251,248,241,.78);
  border: 1px solid var(--line);
  color: rgba(31,41,51,.82);
  border-radius: 999px;
  box-shadow:none;
}
.chip::before { color:var(--ac2); content:'×'; font-weight:400; }
.col-label { color:var(--ac); font-weight:650; }

/* Cover */
.slide-cover { background:var(--paper); }
.cv-left {
  flex: 0 0 min(50%, max(360px, calc(540px * var(--sf))));
  background: var(--paper2);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: max(42px,calc(72px * var(--sf))) max(42px,calc(76px * var(--sf)));
}
.cv-right { background:var(--paper); display:flex; align-items:center; justify-content:center; padding:max(24px, calc(54px * var(--sf))); }
.cv-right img {
  width:min(86%, 720px); height:auto; object-fit:contain;
  opacity:1; border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow-thin);
}
.cv-logo, .cv-tip { color:var(--muted); }
.cv-eye { color:var(--ac); font-weight:650; }
.cv-h1 {
  color:var(--ink);
  font-weight:650;
  letter-spacing:-.065em;
  white-space:pre-line;
}
.cv-sub { color:rgba(31,41,51,.70); }
.cv-tip { border-top:1px solid var(--line); }

/* Section/result/end */
.dark-full, .end-full, .res-center {
  background:
    radial-gradient(circle at 50% 20%, rgba(var(--acr),.11), transparent 34%),
    var(--paper);
  color:var(--ink);
}
.sec-eye { color:var(--ac); }
.sec-title, .end-title, .res-title { color:var(--ink); font-weight:650; letter-spacing:-.055em; }
.sec-sub, .sec-note, .end-text, .end-producer { color:rgba(31,41,51,.65); }
.end-icon, .res-ring {
  background:transparent;
  color:var(--ac);
  border:1px solid rgba(var(--acr),.35);
  box-shadow:var(--shadow-thin);
}
.end-icon {
  width:max(92px, calc(116px * var(--sf)));
  height:max(92px, calc(116px * var(--sf)));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.rp, .rf { background:rgba(251,248,241,.85); }
.rf { color:var(--ac2); border-color:rgba(var(--ac2r),.35); }

/* Animation objects */
.anim-grid .card { min-height:100%; }
.ao.fl { transform:translateX(-24px); }
.ao.fr { transform:translateX(24px); }
.ao.fu { transform:translateY(-18px); }
.ao.fb { transform:translateY(18px); }
.ao.fs { transform:scale(.92); }

/* Quiz */
.quiz-badge, .quiz-pts {
  background:transparent;
  color:var(--ac);
  border:1px solid rgba(var(--acr),.35);
  border-radius:999px;
}
.quiz-pts { background:rgba(251,248,241,.7); }
.quiz-warn { color:var(--ac2); }
.quiz-submit, .fb-btn {
  background:var(--paper2);
  color:var(--ink);
  border:1px solid rgba(var(--acr),.45);
  border-radius:999px;
  font-weight:650;
  box-shadow:none;
}
.quiz-submit:hover, .fb-btn:hover { background:var(--soft-ac); }
.quiz-submit:disabled { background:rgba(251,248,241,.45); color:rgba(31,41,51,.35); border-color:var(--line); }
.mcq-opt {
  background: rgba(251,248,241,.84);
  color: rgba(31,41,51,.84);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:none;
}
.mcq-opt:hover:not(:disabled) {
  border-color:rgba(var(--acr),.55);
  background:var(--soft-ac);
  transform:translateX(3px);
}
.mcq-lbl {
  background:transparent;
  color:var(--ac);
  border:1px solid rgba(var(--acr),.45);
  font-weight:650;
}
.mcq-opt.sel { border-color:var(--ac); background:var(--soft-ac); }
.mcq-opt.sel .mcq-lbl { background:transparent; color:var(--ac); }
.mcq-opt.ok { border-color:#4e9f7d; background:#e6f3ee; }
.mcq-opt.ok .mcq-lbl { background:transparent; color:#2d7f62; border-color:#4e9f7d; }
.mcq-opt.ng { border-color:var(--ac2); background:#f8e8e2; }
.mcq-opt.ng .mcq-lbl { background:transparent; color:var(--ac2); border-color:var(--ac2); }
.fb-overlay { background:rgba(31,41,51,.24); backdrop-filter:blur(8px); }
.fb-box {
  background:var(--paper2)!important;
  border:1px solid var(--line)!important;
  color:var(--ink);
  box-shadow:0 28px 80px rgba(31,41,51,.20);
}
.fb-ico { color:var(--ac); }
.fb-tit { color:var(--ink); }
.fb-box.ng .fb-ico { color:var(--ac2); }
.fb-box.ok .fb-btn, .fb-box.ng .fb-btn { background:var(--paper2); color:var(--ink); }

/* Drag and drop */
.dnd-bank-label { color:var(--muted); }
.dnd-cats { gap:max(14px,calc(20px * var(--sf))); }
.dnd-cat {
  border: 1px dashed var(--line-strong);
  background: rgba(251,248,241,.56);
  border-radius: 20px;
}
.dnd-cat.drag-over { border-color:var(--ac); background:var(--soft-ac); }
.dnd-cat-title {
  background: transparent!important;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight:650;
}
.dnd-item {
  background: rgba(251,248,241,.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:none;
}
.dnd-item:hover {
  border-color:rgba(var(--acr),.55);
  background:var(--soft-ac);
  transform:translateY(-2px);
  box-shadow:var(--shadow-thin);
}
.dnd-item.vertical .di-img, .dnd-item.horizontal .di-img { padding:10px; }
.dnd-item.vertical .di-label {
  background: transparent;
  border-top: 1px solid var(--line);
  color:rgba(31,41,51,.76);
}
.dnd-item.horizontal .di-label { color:rgba(31,41,51,.78); }
.dnd-item.ok-item { border-color:#4e9f7d; background:#e6f3ee; }
.dnd-item.ng-item { border-color:var(--ac2); background:#f8e8e2; }
.dnd-item.ok-item .di-result { background:#e6f3ee; color:#2d7f62; border:1px solid #4e9f7d; }
.dnd-item.ng-item .di-result { background:#f8e8e2; color:var(--ac2); border:1px solid var(--ac2); }
.sldr-display {
  background: rgba(251,248,241,.84);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow:var(--shadow-thin);
}
input[type=range].quiz-slider { height:4px; background:rgba(31,41,51,.16); }
input[type=range].quiz-slider::-webkit-slider-thumb {
  background:var(--paper2);
  border:1.5px solid var(--ac);
  box-shadow:none;
}

/* Navigation: sideknapper midt mellem top og bund */
#nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
  display:block;
}
.nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-size);
  height: var(--nav-height);
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(31,41,51,.22)!important;
  background: rgba(251,248,241,.76)!important;
  color: var(--ink)!important;
  box-shadow: 0 12px 30px rgba(31,41,51,.10);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
}
.nav-btn::before { font-size:max(23px, calc(27px * var(--sf))); line-height:1; font-weight:300; }
#btn-prev { left: max(10px, calc(18px * var(--sf))); }
#btn-prev::before { content:'←'; }
#btn-next { right: max(10px, calc(18px * var(--sf))); }
#btn-next::before { content:'→'; }
.nav-btn:hover:not(:disabled) { background: var(--paper2)!important; border-color:rgba(var(--acr),.55)!important; }
.nav-btn:disabled { opacity:.22; cursor:not-allowed; }
.dots {
  position:fixed;
  left:50%;
  bottom:max(12px, calc(18px * var(--sf)));
  transform:translateX(-50%);
  max-width:min(520px,60vw);
  pointer-events:auto;
  background:rgba(251,248,241,.68);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  backdrop-filter:blur(12px);
}
.dot {
  width:7px;
  height:7px;
  background:transparent;
  border:1px solid rgba(31,41,51,.28);
}
.dot.v { background:rgba(var(--acr),.20); }
.dot.a { background:var(--ac); border-color:var(--ac); transform:scale(1.45); }
.dot.q { border-color:rgba(var(--ac2r),.45); }
#slide-counter {
  position:fixed;
  right:max(18px, calc(26px * var(--sf)));
  bottom:max(18px, calc(24px * var(--sf)));
  pointer-events:none;
  background:rgba(251,248,241,.68);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  backdrop-filter:blur(12px);
  font-family:var(--font);
}

@media (max-width:900px) {
  .strip { padding-left:max(70px, calc(78px * var(--sf))); padding-right:max(70px, calc(78px * var(--sf))); }
  .body, .quiz-body, .body-with-img { padding-left:max(68px, calc(78px * var(--sf))); padding-right:max(68px, calc(78px * var(--sf))); }
  .cv-left { border-right:0; border-bottom:1px solid var(--line); }
  .cv-right { min-height:240px; }
}
@media (max-width:600px) {
  :root { --nav-size:42px; --nav-height:74px; }
  .strip { padding-left:60px; padding-right:60px; }
  .body, .quiz-body, .body-with-img { padding-left:56px; padding-right:56px; padding-bottom:70px; }
  .dots { max-width:60vw; }
  #slide-counter { display:none!important; }
}


/* ══════════════════════════════════════════════════════════════
   INTERAKTIVE EXPLAINERS
══════════════════════════════════════════════════════════════ */
.rich-body { gap: max(20px, calc(28px * var(--sf))); }
.rich-kicker {
  font-size: max(12px, calc(14px * var(--sf)));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}
.explainer-grid {
  display: grid;
  grid-template-columns: minmax(280px, calc(430px * var(--sf))) 1fr;
  gap: max(18px, calc(30px * var(--sf)));
  align-items: start;
}
.exp-stack, .scenario-grid { display:flex; flex-direction:column; gap:max(12px,calc(16px*var(--sf))); }
.exp-card, .info-reveal {
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-thin);
  overflow: hidden;
}
.exp-card summary, .info-reveal summary {
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:flex-start;
  gap:max(12px,calc(16px*var(--sf)));
  padding:max(16px,calc(20px*var(--sf)));
}
.exp-card summary::-webkit-details-marker,
.info-reveal summary::-webkit-details-marker { display:none; }
.exp-card[open], .info-reveal[open] {
  border-color: rgba(var(--acr), .35);
  background: linear-gradient(180deg, rgba(var(--acr),.06), rgba(255,255,255,.88));
}
.exp-num {
  width:max(34px,calc(42px*var(--sf)));
  height:max(34px,calc(42px*var(--sf)));
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(var(--acr), .3);
  background: rgba(var(--acr), .08);
  color: var(--ac);
  font-weight:700;
}
.exp-head h3, .scenario-head h3 {
  font-size:max(20px,calc(22px*var(--sf)));
  line-height:1.25;
  margin:0 0 4px;
}
.exp-head p, .scenario-head p {
  font-size:max(15px,calc(17px*var(--sf)));
  line-height:1.55;
  color: var(--muted);
}
.exp-body, .reveal-body {
  padding: 0 max(16px,calc(20px*var(--sf))) max(18px,calc(22px*var(--sf))) max(16px,calc(20px*var(--sf)));
  font-size:max(17px,calc(19px*var(--sf)));
  line-height:1.65;
  color: var(--ink);
  animation: explainIn .28s ease;
}
.exp-body ul, .reveal-body ul {
  margin: max(10px,calc(12px*var(--sf))) 0 0 max(18px,calc(22px*var(--sf)));
}
.exp-body li, .reveal-body li {
  margin: 0 0 8px;
}
.explainer-visual, .flow-visual {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(var(--acr),.04));
  border:1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-thin);
  padding:max(18px,calc(24px*var(--sf)));
}
.explainer-visual img, .flow-visual img {
  width:100%;
  max-height: min(46vh, 420px);
  object-fit: contain;
  display:block;
}
.viz-caption {
  margin-top:max(14px,calc(16px*var(--sf)));
  padding:max(12px,calc(15px*var(--sf)));
  border-radius:14px;
  background: rgba(var(--acr),.08);
  border:1px solid rgba(var(--acr),.12);
  color:var(--ink);
  font-size:max(15px,calc(17px*var(--sf)));
  line-height:1.6;
}
.mini-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  margin-bottom:10px;
  border:1px solid rgba(var(--acr), .18);
  border-radius:999px;
  background: rgba(var(--acr), .08);
  color: var(--ac);
  font-size:max(12px,calc(13px*var(--sf)));
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.process-shell {
  display:flex;
  flex-direction:column;
  gap:max(18px,calc(22px*var(--sf)));
}
.process-row {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:max(12px,calc(16px*var(--sf)));
}
.p-step {
  position:relative;
  background: var(--paper2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:max(16px,calc(20px*var(--sf)));
  box-shadow: var(--shadow-thin);
  opacity:0;
  transform: translateY(14px);
  animation: stepIn .6s ease forwards;
  animation-delay: var(--delay,0s);
}
.p-step::after {
  content:'';
  position:absolute;
  top:50%;
  right: calc(-1 * max(8px,calc(10px*var(--sf))));
  width: max(16px,calc(20px*var(--sf)));
  height:1px;
  background: rgba(var(--acr), .25);
}
.p-step:last-child::after { display:none; }
.p-step .step-no {
  display:inline-flex;
  width:max(30px,calc(36px*var(--sf)));
  height:max(30px,calc(36px*var(--sf)));
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background: rgba(var(--acr), .08);
  color: var(--ac);
  border:1px solid rgba(var(--acr), .2);
  font-weight:700;
  margin-bottom:10px;
}
.p-step h3 {
  font-size:max(19px,calc(21px*var(--sf)));
  margin:0 0 6px;
}
.p-step p {
  font-size:max(15px,calc(17px*var(--sf)));
  line-height:1.55;
  color: var(--muted);
}
.badgood {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:max(12px,calc(16px*var(--sf)));
  margin-top:max(12px,calc(16px*var(--sf)));
}
.badgood .mini-box {
  border-radius:14px;
  padding:max(12px,calc(14px*var(--sf)));
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
}
.badgood .mini-box strong {
  display:block;
  margin-bottom:8px;
  font-size:max(14px,calc(15px*var(--sf)));
  text-transform:uppercase;
  letter-spacing:.08em;
}
.badgood .mini-box p, .badgood .mini-box ul {
  font-size:max(15px,calc(16px*var(--sf)));
  line-height:1.55;
  color:var(--ink);
  margin:0;
}
.badgood .mini-box ul { margin-left:max(16px,calc(18px*var(--sf))); }
.badgood .risk { background: rgba(var(--ac2r), .06); }
.badgood .better { background: rgba(var(--acr), .07); }
@keyframes explainIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes stepIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}
@media (max-width: 980px) {
  .explainer-grid { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badgood { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .process-row { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   POPUP-EXPLAINER — større illustration, forklaringer som modals
══════════════════════════════════════════════════════════════ */
.slide-explainer-popup.rich-body,
.slide-explainer-popup {
  gap: max(12px, calc(16px * var(--sf)));
}
.slide-explainer-popup .compact-lead {
  line-height: 1.45;
  max-width: 980px;
}
.quad-popup-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: max(12px, calc(16px * var(--sf)));
}
.quad-canvas {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(var(--acr),.035));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-thin);
  padding: max(10px, calc(16px * var(--sf)));
}
.quad-canvas img {
  width: 100%;
  height: min(64vh, 640px);
  min-height: 420px;
  object-fit: contain;
  display: block;
}
.quad-caption {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.modal-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quad-hotspot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px 8px 9px;
  border: 1px solid rgba(var(--acr), .32);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: max(13px, calc(15px * var(--sf)));
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(31,41,51,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
  z-index: 4;
}
.quad-hotspot span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--acr), .10);
  color: var(--ac);
  border: 1px solid rgba(var(--acr), .22);
  flex: 0 0 auto;
}
.quad-hotspot:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(var(--acr), .52);
}
.quad-hotspot.facta { left: 9.5%; top: 11%; }
.quad-hotspot.appel { right: 8.5%; top: 11%; }
.quad-hotspot.relation { left: 9.5%; bottom: 14%; }
.quad-hotspot.selv { right: 8.5%; bottom: 14%; }
.quad-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.modal-toggle:checked ~ .quad-modal {
  opacity: 1;
  pointer-events: auto;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .40);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.quad-modal-card {
  position: relative;
  width: min(560px, calc(100vw - 36px));
  max-height: calc(100dvh - 80px);
  overflow: auto;
  background: var(--paper2);
  color: var(--ink);
  border: 1px solid rgba(var(--acr), .24);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(15,23,42,.28);
  padding: max(24px, calc(32px * var(--sf)));
  animation: modalIn .24s ease;
}
.quad-modal-card h3 {
  font-size: max(28px, calc(36px * var(--sf)));
  line-height: 1.1;
  margin: 8px 0 14px;
}
.quad-modal-card p,
.quad-modal-card li {
  font-size: max(18px, calc(20px * var(--sf)));
  line-height: 1.62;
}
.quad-modal-card ul {
  margin: max(14px, calc(18px * var(--sf))) 0 0 max(20px, calc(24px * var(--sf)));
}
.modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .quad-canvas { padding: 8px; border-radius: 18px; }
  .quad-canvas img { min-height: 360px; height: 58vh; }
  .quad-hotspot { font-size: 12px; padding: 7px 10px 7px 7px; min-height: 36px; }
  .quad-hotspot span { width: 22px; height: 22px; }
  .quad-hotspot.facta { left: 5%; top: 7%; }
  .quad-hotspot.appel { right: 5%; top: 7%; }
  .quad-hotspot.relation { left: 5%; bottom: 9%; }
  .quad-hotspot.selv { right: 5%; bottom: 9%; }
}
@media (max-width: 520px) {
  .quad-hotspot { max-width: 44%; white-space: normal; line-height: 1.15; }
  .quad-canvas img { min-height: 330px; height: 54vh; }
}


/* FÆRDIGGØRELSE: synlig trin-animation først når slidet vises */
.slide-practice .p-step {
  opacity: 0;
  transform: translateY(26px) scale(.96);
  animation: none;
}
.slide.active .slide-practice .p-step,
.slide.active.slide-practice .p-step {
  animation: stepReveal .72s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: var(--delay,0s);
}
.slide.active .slide-practice .p-step::before,
.slide.active.slide-practice .p-step::before {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:18px;
  border:1px solid rgba(var(--acr), .34);
  opacity:0;
  animation: stepPulse .9s ease forwards;
  animation-delay: calc(var(--delay,0s) + .08s);
  pointer-events:none;
}
.slide-practice .process-row {
  margin-top: max(4px, calc(6px * var(--sf)));
}
.slide-practice .p-step {
  border-color: rgba(var(--acr), .20);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(var(--acr),.04));
}
.slide-practice .p-step h3 {
  color: var(--ink);
}
.slide-practice .step-no {
  box-shadow: 0 0 0 6px rgba(var(--acr), .055);
}
@keyframes stepReveal {
  0%   { opacity:0; transform:translateY(30px) scale(.94); }
  58%  { opacity:1; transform:translateY(-4px) scale(1.015); }
  100% { opacity:1; transform:none; }
}
@keyframes stepPulse {
  0%   { opacity:0; transform:scale(.96); }
  35%  { opacity:1; transform:scale(1.03); }
  100% { opacity:0; transform:scale(1.06); }
}


/* Slide 3: line-art grafik i de fire lige store kommunikationskort */
.anim-grid .card {
  display: flex;
  flex-direction: column;
  min-height: max(260px, calc(300px * var(--sf)));
}
.anim-grid .card p {
  margin-bottom: max(12px, calc(16px * var(--sf)));
}
.card-graphic {
  margin-top: auto;
  width: 100%;
  min-height: max(92px, calc(118px * var(--sf)));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: max(10px, calc(14px * var(--sf)));
}
.card-graphic img {
  width: min(100%, max(190px, calc(240px * var(--sf))));
  height: max(92px, calc(118px * var(--sf)));
  object-fit: contain;
  opacity: .96;
}


/* Tydeliggørelse af Schulz von Thun-modellen */
.model-banner {
  text-align: center;
  margin: 0 auto max(12px, calc(16px * var(--sf)));
  padding: max(12px, calc(14px * var(--sf))) max(14px, calc(18px * var(--sf)));
  border: 1px solid rgba(var(--acr), .16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--acr), .07), rgba(255,255,255,.72));
  width: min(720px, 100%);
}
.model-banner h3 {
  margin: 6px 0 6px;
  font-size: max(24px, calc(28px * var(--sf)));
  line-height: 1.2;
  color: var(--ink);
}
.model-banner p {
  font-size: max(15px, calc(17px * var(--sf)));
  line-height: 1.55;
  color: var(--muted);
}
.model-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--acr), .10);
  color: var(--ac);
  border: 1px solid rgba(var(--acr), .22);
  font-size: max(12px, calc(13px * var(--sf)));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ELEARANIA: visuelle opgraderinger */
.panel-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(var(--acr),.04));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-thin);
  padding: max(16px, calc(20px * var(--sf)));
}
.panel-surface img { width:100%; display:block; object-fit:contain; }

.click-hint {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:max(14px,calc(15px*var(--sf)));
  color:var(--ink); background:rgba(var(--acr),.08);
  border:1px solid rgba(var(--acr),.16);
  border-radius:999px; padding:10px 16px; width:fit-content;
}
.click-hint span {
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--acr),.24); background:#fff; color:var(--ac); font-weight:700;
}

.mentor-layout {
  display:grid; grid-template-columns: minmax(320px, 470px) 1fr; gap:max(18px,calc(28px*var(--sf))); align-items:start;
}
.mentor-steps { display:flex; flex-direction:column; gap:max(12px,calc(16px*var(--sf))); }
.mentor-step {
  display:grid; grid-template-columns:max(36px,calc(42px*var(--sf))) 1fr; gap:14px; align-items:start;
  background:var(--paper2); border:1px solid var(--line); border-radius:18px; padding:max(14px,calc(18px*var(--sf))); box-shadow:var(--shadow-thin);
}
.mentor-step span {
  width:max(36px,calc(42px*var(--sf))); height:max(36px,calc(42px*var(--sf))); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:rgba(var(--acr),.08); color:var(--ac); border:1px solid rgba(var(--acr),.18); font-weight:700;
}
.mentor-step h3, .pit-card strong, .context-head, .scenario-strip { font-size:max(18px,calc(20px*var(--sf))); line-height:1.25; color:var(--ink); }
.mentor-step p, .pit-card p, .count-label, .context-card li, .scenario-panel p { font-size:max(15px,calc(17px*var(--sf))); line-height:1.6; color:var(--muted); }
.tip-ribbon {
  margin-top:max(10px,calc(14px*var(--sf))); padding:max(12px,calc(15px*var(--sf))) max(16px,calc(18px*var(--sf)));
  border-radius:16px; background:rgba(var(--acr),.08); border:1px solid rgba(var(--acr),.15); color:var(--ink); font-size:max(15px,calc(17px*var(--sf))); line-height:1.6;
}

.pitfall-layout {
  display:grid; grid-template-columns:minmax(300px,430px) 1fr; gap:max(18px,calc(26px*var(--sf))); align-items:start;
}
.pitfall-grid { display:grid; grid-template-columns:1fr 1fr; gap:max(12px,calc(16px*var(--sf))); }
.pit-card {
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:max(14px,calc(18px*var(--sf))); box-shadow:var(--shadow-thin);
}
.pit-card strong { display:block; margin-bottom:6px; }
.soft-warn-box { background:rgba(var(--ac2r),.08); border-color:rgba(var(--ac2r),.16); color:var(--ink); }

.count-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:max(14px,calc(18px*var(--sf))); }
.count-card {
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(var(--acr),.06));
  border:1px solid rgba(var(--acr),.14); border-radius:22px; padding:max(20px,calc(26px*var(--sf))); box-shadow:var(--shadow-thin);
}
.countup {
  font-size:max(42px,calc(64px*var(--sf))); line-height:1; font-weight:700; color:var(--ac); letter-spacing:-.04em; margin-bottom:12px;
}
.count-label { color:var(--ink); }
.source-panel { display:flex; flex-direction:column; gap:max(12px,calc(16px*var(--sf))); }
.compact-pts li { font-size:max(15px,calc(16px*var(--sf))); line-height:1.55; }

.context-layout {
  display:grid; grid-template-columns:minmax(320px,440px) 1fr; gap:max(18px,calc(28px*var(--sf))); align-items:start;
}
.context-columns { display:grid; grid-template-columns:1fr 1fr; gap:max(12px,calc(16px*var(--sf))); }
.context-card {
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:max(16px,calc(20px*var(--sf))); box-shadow:var(--shadow-thin);
}
.context-card.external { background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(var(--ac2r),.04)); }
.context-head { margin-bottom:10px; font-weight:700; }

.scenario-layout {
  display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:max(18px,calc(28px*var(--sf))); align-items:start;
}
.scenario-panel { display:flex; flex-direction:column; gap:max(12px,calc(16px*var(--sf))); }
.scenario-strip {
  padding:max(14px,calc(16px*var(--sf))) max(16px,calc(18px*var(--sf))); border-radius:18px; background:rgba(var(--acr),.08); border:1px solid rgba(var(--acr),.16);
}
.scenario-badgood { margin-top:0; }

/* Slide 4 explainer sizing tweaks */
.slide-explainer-popup .quad-canvas img { height:min(68vh, 700px); min-height:460px; }
.slide-explainer-popup .quad-hotspot { padding:8px 12px 8px 8px; }
.slide-explainer-popup .quad-hotspot.facta { left: 10%; top: 13%; }
.slide-explainer-popup .quad-hotspot.appel { right: 10%; top: 13%; }
.slide-explainer-popup .quad-hotspot.relation { left: 10%; bottom: 16%; }
.slide-explainer-popup .quad-hotspot.selv { right: 10%; bottom: 16%; }

@media (max-width: 980px) {
  .mentor-layout, .pitfall-layout, .context-layout, .scenario-layout { grid-template-columns:1fr; }
  .context-columns, .count-grid, .pitfall-grid { grid-template-columns:1fr; }
}


/* Strongere klikvejledning og split af intern/ekstern slides */
.click-cta {
  display:flex; flex-direction:column; gap:6px; width:fit-content; max-width:100%;
  padding:12px 18px; border-radius:18px; background:rgba(var(--ac2r),.10);
  border:2px solid rgba(var(--ac2r),.20); box-shadow:var(--shadow-thin);
}
.click-cta strong { font-size:max(17px,calc(19px*var(--sf))); color:var(--ink); }
.click-cta span { font-size:max(14px,calc(15px*var(--sf))); color:var(--muted); line-height:1.5; }
.slide-explainer-popup .quad-hotspot {
  animation: hotspotPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(var(--acr), .25);
  font-weight:700;
}
.slide-explainer-popup .quad-hotspot::after {
  content:'klik';
  margin-left:8px; font-size:max(11px,calc(12px*var(--sf)));
  text-transform:uppercase; letter-spacing:.08em; color:var(--ac);
  opacity:.78;
}
@keyframes hotspotPulse {
  0%,100% { transform:translateY(0); box-shadow:0 0 0 0 rgba(var(--acr), .18); }
  50% { transform:translateY(-1px); box-shadow:0 0 0 8px rgba(var(--acr), 0); }
}
.single-context-layout { grid-template-columns:minmax(320px,450px) 1fr; }
.single-context-column { grid-template-columns:1fr; }


/* Kursistnavn og kursusbevis */
.name-entry-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--pad); }
.name-card {
  width:min(760px,100%); background:var(--paper2); color:var(--ink); border:1px solid var(--line);
  border-radius:26px; box-shadow:var(--shadow-thin); padding:max(28px,calc(42px*var(--sf)));
}
.name-card h2 { font-size:max(34px,calc(52px*var(--sf))); line-height:1.05; margin:12px 0 12px; letter-spacing:-.04em; }
.name-card p { font-size:max(18px,calc(21px*var(--sf))); line-height:1.65; color:var(--muted); margin-bottom:22px; }
.name-card label { display:block; font-size:max(14px,calc(15px*var(--sf))); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.learner-name-input {
  width:100%; border:1.5px solid rgba(var(--acr),.28); background:#fff; color:var(--ink);
  border-radius:16px; font:inherit; font-size:max(22px,calc(26px*var(--sf))); padding:16px 18px; outline:none;
}
.learner-name-input:focus { border-color:rgba(var(--acr),.65); box-shadow:0 0 0 4px rgba(var(--acr),.10); }
.name-warning { display:none; margin-top:10px; color:var(--ac2); font-weight:700; }
.name-warning.show { display:block; }
.name-start-btn, .res-action {
  margin-top:22px; border:1px solid rgba(var(--acr),.28); background:#fff; color:var(--ink);
  border-radius:999px; padding:13px 22px; font:inherit; font-weight:700; cursor:pointer; box-shadow:var(--shadow-thin);
}
.name-start-btn, .res-action.primary { background:var(--ac); border-color:var(--ac); color:#fff; }
.res-actions { gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:18px; }
.certificate-mini {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px;
}
.certificate-mini > div {
  min-width:180px; background:rgba(var(--acr),.07); border:1px solid rgba(var(--acr),.14);
  border-radius:14px; padding:12px 16px;
}
.certificate-mini span { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
.certificate-mini strong { color:var(--ink); font-size:max(16px,calc(18px*var(--sf))); }
#cert-print { display:none; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { width:297mm; height:210mm; margin:0 !important; padding:0 !important; background:white !important; overflow:hidden !important; }
  body > *:not(#cert-print) { display:none !important; }
  #cert-print { display:block !important; width:297mm; height:210mm; margin:0; padding:0; background:#f7f4ee; color:#1f2933; }
  .certificate-page { width:297mm; height:210mm; padding:16mm; background:#f7f4ee; box-sizing:border-box; font-family:var(--font), Arial, sans-serif; }
  .cert-border { height:100%; border:1.5pt solid #2f6f73; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12mm; background:#fbf8f1; box-sizing:border-box; }
  .cert-kicker { text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:#2f6f73; font-size:13pt; }
  .cert-border h1 { margin:8mm 0 7mm; font-size:31pt; line-height:1.1; color:#1f2933; max-width:240mm; }
  .cert-intro, .cert-text { font-size:15pt; color:#667085; margin:0 0 5mm; }
  .cert-name { font-size:34pt; font-weight:700; color:#2f6f73; border-bottom:1pt solid rgba(47,111,115,.35); padding:0 18mm 4mm; margin-bottom:6mm; }
  .cert-meta { display:flex; gap:10mm; justify-content:center; margin-top:6mm; }
  .cert-meta div { min-width:45mm; border:1pt solid rgba(47,111,115,.18); border-radius:10px; padding:5mm 7mm; background:#fff; }
  .cert-meta span { display:block; font-size:9pt; text-transform:uppercase; letter-spacing:.12em; color:#667085; margin-bottom:2mm; }
  .cert-meta strong { font-size:13pt; color:#1f2933; }
  .cert-footer { margin-top:13mm; color:#667085; font-size:10pt; }
  .cert-line { width:70mm; border-top:1pt solid rgba(31,41,51,.35); margin:0 auto 4mm; }
}


/* Ekstra quiztyper: puslespil, matching, fritekst og drop-down */
.puzzle-help,.match-help,.free-meta {
  font-size:max(15px,calc(17px * var(--sf)));
  line-height:1.55;
  color:var(--muted);
}
.puzzle-board {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:max(12px,calc(16px * var(--sf)));
  counter-reset:pz;
}
.pz-piece {
  min-height:max(92px,calc(120px * var(--sf)));
  border:1.5px solid rgba(var(--acr),.26);
  background:linear-gradient(180deg,#fff,rgba(var(--acr),.045));
  color:var(--ink);
  border-radius:22px;
  box-shadow:var(--shadow-thin);
  cursor:pointer;
  font-family:inherit;
  font-size:max(18px,calc(21px * var(--sf)));
  font-weight:700;
  line-height:1.25;
  padding:max(16px,calc(20px * var(--sf)));
  text-align:left;
  position:relative;
  overflow:hidden;
}
.pz-piece::before {
  counter-increment:pz;
  content:counter(pz);
  display:inline-flex;
  width:32px;height:32px;
  align-items:center;justify-content:center;
  margin-right:10px;
  border-radius:50%;
  color:var(--ac);
  background:rgba(var(--acr),.08);
  border:1px solid rgba(var(--acr),.22);
}
.pz-piece::after {
  content:'';
  position:absolute;
  right:-18px; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid rgba(var(--acr),.16);
}
.pz-piece.sel { outline:3px solid rgba(var(--ac2r),.28); transform:translateY(-2px); }
.pz-piece.ok { border-color:rgba(22,163,74,.45); background:var(--quiz-ok-bg,#e6f3ee); }
.pz-piece.ng { border-color:rgba(var(--ac2r),.45); background:var(--quiz-ng-bg,#f8e8e2); }

.match-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:max(14px,calc(22px * var(--sf)));
}
.match-grid > div { display:flex; flex-direction:column; gap:max(10px,calc(12px * var(--sf))); }
.match-item {
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  padding:max(14px,calc(18px * var(--sf)));
  min-height:78px;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  box-shadow:var(--shadow-thin);
}
.match-main { display:block; font-size:max(17px,calc(20px * var(--sf))); font-weight:700; line-height:1.25; }
.match-choice { display:block; margin-top:8px; font-size:max(13px,calc(15px * var(--sf))); color:var(--muted); }
.match-item.sel { outline:3px solid rgba(var(--acr),.20); border-color:rgba(var(--acr),.38); }
.match-item.paired { background:rgba(var(--acr),.06); }
.match-item.ok { background:var(--quiz-ok-bg,#e6f3ee); border-color:rgba(22,163,74,.42); }
.match-item.ng { background:var(--quiz-ng-bg,#f8e8e2); border-color:rgba(var(--ac2r),.42); }

.free-text {
  width:100%;
  resize:vertical;
  min-height:220px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:max(18px,calc(20px * var(--sf)));
  line-height:1.6;
  padding:max(16px,calc(20px * var(--sf)));
  box-shadow:var(--shadow-thin);
}
.free-text:focus { outline:3px solid rgba(var(--acr),.18); border-color:rgba(var(--acr),.36); }
.free-meta { display:flex; justify-content:space-between; gap:12px; }

.dropdown-list { display:flex; flex-direction:column; gap:max(12px,calc(15px * var(--sf))); }
.dd-row {
  display:grid;
  grid-template-columns:1fr minmax(220px,320px);
  gap:max(12px,calc(16px * var(--sf)));
  align-items:center;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:max(14px,calc(18px * var(--sf)));
  box-shadow:var(--shadow-thin);
}
.dd-prompt { font-size:max(17px,calc(20px * var(--sf))); line-height:1.45; color:var(--ink); font-weight:600; }
.dd-row select {
  width:100%;
  border:1px solid rgba(var(--acr),.22);
  border-radius:14px;
  background:var(--paper2);
  color:var(--ink);
  font:inherit;
  font-size:max(15px,calc(17px * var(--sf)));
  padding:12px 14px;
}
.dd-row.ok { background:var(--quiz-ok-bg,#e6f3ee); border-color:rgba(22,163,74,.42); }
.dd-row.ng { background:var(--quiz-ng-bg,#f8e8e2); border-color:rgba(var(--ac2r),.42); }
@media (max-width:760px){
  .puzzle-board,.match-grid,.dd-row { grid-template-columns:1fr; }
}


/* Matching: undo, reset og tydelige farvematch */
.match-toolbar {
  display:flex;
  gap:max(10px,calc(12px * var(--sf)));
  flex-wrap:wrap;
  margin-top:max(6px,calc(8px * var(--sf)));
}
.quiz-tool {
  appearance:none;
  border:1px solid rgba(var(--acr),.18);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:max(15px,calc(16px * var(--sf)));
  font-weight:700;
  padding:max(11px,calc(12px * var(--sf))) max(16px,calc(18px * var(--sf)));
  box-shadow:var(--shadow-thin);
  cursor:pointer;
}
.quiz-tool:hover:not(:disabled) { border-color:rgba(var(--acr),.34); background:rgba(var(--acr),.04); }
.quiz-tool:disabled { opacity:.48; cursor:not-allowed; }
.match-item {
  position:relative;
  overflow:hidden;
  transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.match-item.paired {
  background:var(--match-bg, rgba(var(--acr),.06));
  border-color:var(--match-br, rgba(var(--acr),.35));
  box-shadow:inset 0 0 0 2px var(--match-br, rgba(var(--acr),.25));
}
.match-item.paired::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:var(--match-br, rgba(var(--acr),.35));
}
.match-item.paired::after {
  content:attr(data-pair-index);
  position:absolute;
  top:10px; right:12px;
  width:24px; height:24px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--match-br, rgba(var(--acr),.35));
  color:#fff;
  font-size:max(12px,calc(13px * var(--sf)));
  font-weight:700;
  line-height:1;
}
.match-item .match-choice {
  padding-left:2px;
}
.match-item.paired .match-choice {
  color:var(--match-ac, var(--ac));
  font-weight:700;
}


/* Navne-popup til kursusbevis */
.name-popup-overlay {
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(18px,calc(32px * var(--sf)));
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(8px);
}
.name-popup-card {
  width:min(720px,100%);
  background:var(--paper2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  padding:max(26px,calc(40px * var(--sf)));
}
.name-popup-card h2 { font-size:max(32px,calc(44px * var(--sf))); line-height:1.1; margin:12px 0; letter-spacing:-.035em; }
.name-popup-card p { font-size:max(17px,calc(20px * var(--sf))); line-height:1.7; color:var(--muted); margin-bottom:20px; }
.name-popup-card label { display:block; font-size:max(13px,calc(15px * var(--sf))); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
.name-popup-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.name-skip-btn {
  margin-top:22px; border:1px solid rgba(var(--acr),.20); background:#fff; color:var(--ink);
  border-radius:999px; padding:13px 22px; font:inherit; font-weight:700; cursor:pointer; box-shadow:var(--shadow-thin);
}
.sldr-prefix { font-size:max(18px,calc(22px * var(--sf))); font-weight:700; color:var(--muted); letter-spacing:.10em; text-transform:uppercase; }


/* eLearnia-branding, Begynd-knap og fade-in navnepopup */
.cv-brand, .end-brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:max(13px,calc(15px * var(--sf)));
  font-weight:700;
  letter-spacing:.02em;
}
.cv-brand img {
  width:max(150px,calc(188px * var(--sf)));
  height:auto;
  display:block;
}
.end-brand {
  margin-top:max(10px,calc(20px * var(--sf)));
  opacity:.82;
  color:rgba(255,255,255,.72);
}
.end-brand img {
  width:max(138px,calc(170px * var(--sf)));
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.18));
}
.begin-btn {
  margin-top:max(20px,calc(32px * var(--sf)));
  width:fit-content;
  border:none;
  border-radius:999px;
  padding:max(15px,calc(18px * var(--sf))) max(32px,calc(44px * var(--sf)));
  background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 72%,#000));
  color:#fff;
  font:inherit;
  font-size:max(20px,calc(24px * var(--sf)));
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(var(--acr),.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.begin-btn:hover { transform:translateY(-2px); box-shadow:0 24px 52px rgba(var(--acr),.30); }
.begin-btn:active { transform:translateY(0); }
.name-popup-overlay {
  opacity:0;
  pointer-events:none;
  transition:opacity .75s ease;
}
.name-popup-overlay.show {
  opacity:1;
  pointer-events:auto;
}
.name-popup-card {
  transform:translateY(14px) scale(.97);
  transition:transform .75s cubic-bezier(.2,.8,.2,1), opacity .75s ease;
  opacity:.96;
}
.name-popup-overlay.show .name-popup-card {
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Smartere kursusbevis */
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { width:297mm; height:210mm; margin:0 !important; padding:0 !important; background:white !important; overflow:hidden !important; }
  body > *:not(#cert-print) { display:none !important; }
  #cert-print { display:block !important; width:297mm; height:210mm; margin:0; padding:0; background:#f7f4ee; color:#1f2933; }
  .smart-certificate {
    width:297mm;
    height:210mm;
    padding:14mm;
    background:linear-gradient(135deg,#f7f4ee 0%,#fbf8f1 55%,#e6f3ee 100%);
    box-sizing:border-box;
    font-family:var(--font), Arial, sans-serif;
  }
  .cert-card {
    position:relative;
    height:100%;
    overflow:hidden;
    border:1.5pt solid #2f6f73;
    border-radius:20px;
    background:rgba(255,255,255,.78);
    box-shadow:0 0 0 7pt rgba(47,111,115,.08) inset;
    padding:12mm 14mm;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
  }
  .cert-corner { position:absolute; border-radius:999px; pointer-events:none; }
  .cert-corner-a { width:68mm; height:68mm; right:-22mm; top:-22mm; background:rgba(47,111,115,.10); }
  .cert-corner-b { width:58mm; height:58mm; left:-20mm; bottom:-20mm; background:rgba(180,83,58,.10); }
  .cert-head {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10mm;
  }
  .cert-logo { width:62mm; height:auto; object-fit:contain; }
  .cert-head-text { text-align:right; }
  .cert-kicker { text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:#2f6f73; font-size:13pt; }
  .cert-small { color:#667085; font-size:9.5pt; margin-top:2mm; }
  .cert-main {
    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:5mm 18mm 3mm;
  }
  .cert-intro, .cert-text { font-size:14.5pt; color:#667085; margin:0 0 4mm; }
  .cert-name {
    font-size:36pt;
    line-height:1.05;
    font-weight:700;
    color:#2f6f73;
    padding:0 18mm 4mm;
    margin-bottom:5mm;
    border-bottom:1.2pt solid rgba(47,111,115,.35);
    max-width:210mm;
  }
  .cert-card h1 { margin:0; font-size:29pt; line-height:1.12; color:#1f2933; max-width:230mm; }
  .cert-seal {
    margin-top:8mm;
    width:31mm;
    height:31mm;
    border-radius:50%;
    border:1.8pt solid #b4533a;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b4533a;
    font-size:9.5pt;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:rgba(180,83,58,.06);
    transform:rotate(-8deg);
  }
  .cert-meta {
    position:relative;
    z-index:2;
    display:flex;
    gap:7mm;
    justify-content:center;
    margin-top:4mm;
  }
  .cert-meta div { min-width:46mm; border:1pt solid rgba(47,111,115,.18); border-radius:12px; padding:4.5mm 6mm; background:#fff; }
  .cert-meta span { display:block; font-size:8.5pt; text-transform:uppercase; letter-spacing:.12em; color:#667085; margin-bottom:1.8mm; }
  .cert-meta strong { font-size:12.5pt; color:#1f2933; }
  .cert-footer {
    position:relative;
    z-index:2;
    margin-top:9mm;
    color:#667085;
    font-size:10pt;
    text-align:center;
  }
  .cert-line { width:72mm; border-top:1pt solid rgba(31,41,51,.28); margin:0 auto 3.5mm; }
}


/* eLearnia-logo fra upload og langsommere popup-fade */
.name-popup-logo {
  width:min(260px,70%);
  height:auto;
  display:block;
  margin:0 0 18px;
}
.cv-brand {
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.cv-brand img { width:max(185px,calc(245px * var(--sf))); }
.cv-brand span { font-size:max(12px,calc(14px * var(--sf))); color:var(--muted); }
.strip-logo img { width:auto; max-width:max(112px,calc(142px * var(--sf))); }


/* Altid start-forfra og mindre eLearnia-logoer */
#nav .restart-btn {
  margin-right: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(248,250,252,.92);
}
#nav .restart-btn:hover {
  background: rgba(255,255,255,.14);
}
.cv-brand img {
  width: max(98px, calc(132px * var(--sf))) !important;
  max-width: 132px !important;
}
.name-popup-logo {
  width: min(150px, 46%) !important;
  max-width: 150px !important;
  margin-bottom: 12px !important;
}
.strip-logo img {
  height: max(18px, calc(24px * var(--sf))) !important;
  width: auto !important;
  max-width: max(66px, calc(84px * var(--sf))) !important;
}
.end-brand img {
  width: max(90px, calc(120px * var(--sf))) !important;
  max-width: 120px !important;
  height:auto !important;
}
@media print {
  .cert-logo {
    width: 30mm !important;
    max-width: 30mm !important;
    height: auto !important;
  }
}
.cert-logo {
  width: 30mm !important;
  max-width: 30mm !important;
  height: auto !important;
}


/* Forside: ingen logo over titel, kun diskret copyright nederst */
.cover-copyright {
  margin-top:max(18px,calc(26px * var(--sf)));
  font-size:max(11px,calc(12px * var(--sf)));
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(248,250,252,.48);
}
.name-popup-logo { display:none !important; }

/* Justeringer: tydeligere farver, mindre bund-overload og klikbar popup */
:root {
  --palette-teal: #2f6f73;
  --palette-terracotta: #b4533a;
  --palette-gold: #d9a441;
  --palette-moss: #6f8f55;
  --palette-sky: #7aa7a8;
}
.quad-modal-card { cursor:pointer; }
.quad-modal-card:hover { box-shadow:0 26px 70px rgba(31,41,51,.18); }
.practice-focus {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:max(12px,calc(16px * var(--sf)));
  align-items:center;
  margin:max(12px,calc(16px * var(--sf))) 0 max(16px,calc(20px * var(--sf)));
  padding:max(14px,calc(18px * var(--sf))) max(16px,calc(22px * var(--sf)));
  border-radius:20px;
  background:linear-gradient(135deg, rgba(180,83,58,.14), rgba(217,164,65,.15));
  border:1px solid rgba(180,83,58,.22);
  color:var(--ink);
  font-size:max(16px,calc(18px * var(--sf)));
  line-height:1.55;
  box-shadow:var(--shadow-thin);
}
.practice-focus .focus-dot {
  width:max(42px,calc(50px * var(--sf)));
  height:max(42px,calc(50px * var(--sf)));
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--palette-terracotta);
  color:#fff;
  font-weight:800;
  font-size:max(18px,calc(22px * var(--sf)));
  box-shadow:0 10px 30px rgba(180,83,58,.22);
}
.slide-practice .process-shell { gap:max(12px,calc(16px * var(--sf))); }
.slide-practice .p-step { --step-color:var(--palette-teal); }
.slide-practice .p-step:nth-child(1) { --step-color:var(--palette-teal); }
.slide-practice .p-step:nth-child(2) { --step-color:var(--palette-terracotta); }
.slide-practice .p-step:nth-child(3) { --step-color:var(--palette-gold); }
.slide-practice .p-step:nth-child(4) { --step-color:var(--palette-moss); }
.slide-practice .p-step {
  border-color:color-mix(in srgb, var(--step-color) 34%, transparent);
  background:linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb, var(--step-color) 12%, #fff));
}
.slide-practice .p-step::after { background:color-mix(in srgb, var(--step-color) 42%, transparent); }
.slide-practice .step-no {
  background:color-mix(in srgb, var(--step-color) 16%, #fff);
  border-color:color-mix(in srgb, var(--step-color) 34%, transparent);
  color:var(--step-color);
}
.slide-practice .flow-visual {
  background:linear-gradient(135deg, rgba(47,111,115,.08), rgba(180,83,58,.07));
  border-color:rgba(47,111,115,.18);
}
.slide-practice .viz-caption {
  background:linear-gradient(135deg, rgba(111,143,85,.12), rgba(217,164,65,.13));
  border-color:rgba(111,143,85,.20);
}
.card:nth-child(4n+1), .mentor-step:nth-child(4n+1), .pit-card:nth-child(4n+1), .context-card:nth-child(4n+1), .scenario-panel:nth-child(4n+1) { border-top-color:var(--palette-teal); }
.card:nth-child(4n+2), .mentor-step:nth-child(4n+2), .pit-card:nth-child(4n+2), .context-card:nth-child(4n+2), .scenario-panel:nth-child(4n+2) { border-top-color:var(--palette-terracotta); }
.card:nth-child(4n+3), .mentor-step:nth-child(4n+3), .pit-card:nth-child(4n+3), .context-card:nth-child(4n+3), .scenario-panel:nth-child(4n+3) { border-top-color:var(--palette-gold); }
.card:nth-child(4n+4), .mentor-step:nth-child(4n+4), .pit-card:nth-child(4n+4), .context-card:nth-child(4n+4), .scenario-panel:nth-child(4n+4) { border-top-color:var(--palette-moss); }
.card, .mentor-step, .pit-card, .context-card, .scenario-panel { border-top-width:4px; border-top-style:solid; }
.count-card:nth-child(1) .countup { color:var(--palette-teal); }
.count-card:nth-child(2) .countup { color:var(--palette-terracotta); }
.count-card:nth-child(3) .countup { color:var(--palette-moss); }
.mcq-opt:nth-child(4n+1) .mcq-lbl { background:var(--palette-teal); }
.mcq-opt:nth-child(4n+2) .mcq-lbl { background:var(--palette-terracotta); }
.mcq-opt:nth-child(4n+3) .mcq-lbl { background:var(--palette-gold); }
.mcq-opt:nth-child(4n+4) .mcq-lbl { background:var(--palette-moss); }