/* forklaring.css — fælles stil for animerede emneforklaringer */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; background:var(--bg,#f7f8fc); color:var(--text,#1a1f36); min-height:100vh; }
.wrap { max-width:620px; margin:0 auto; padding:24px 16px 60px; }
html.embed .wrap { padding:10px 10px 20px; }
.back { display:inline-block; margin-bottom:14px; color:#0ea5e9; text-decoration:none; font-weight:600; font-size:.84rem; }
h1 { font-family:'DM Serif Display',serif; font-size:1.5rem; margin-bottom:18px; }
html.embed h1 { font-size:1.2rem; margin-bottom:12px; }
.scene { background:var(--bg2,#fff); border:1px solid var(--border,#dde2ef); border-radius:18px; padding:24px 22px 20px; }
html.embed .scene { padding:16px 14px 14px; }
.dots { display:flex; gap:6px; margin-bottom:18px; }
.dot { flex:1; height:5px; border-radius:3px; background:var(--bg3,#eef1f8); transition:background .3s; }
.dot.done { background:#10b981; }
.dot.now { background:#0ea5e9; }
.viz { margin:6px 0 18px; }
.fejl-boks { background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.25); border-radius:12px; padding:13px 15px; font-size:.84rem; line-height:1.6; margin:14px 0 4px; }
.fejl-boks strong { color:#dc2626; }
.ok-boks { background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.25); border-radius:12px; padding:13px 15px; font-size:.84rem; line-height:1.6; margin:14px 0 4px; }
.ok-boks strong { color:#059669; }
.fortael { font-size:.92rem; line-height:1.7; min-height:74px; }
.fortael .formel { font-family:'DM Mono',monospace; font-weight:600; }
.fortael .marker { background:rgba(14,165,233,.14); border-radius:4px; padding:0 4px; }
.nav { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:20px; }
.nav-btn { background:#0ea5e9; color:#fff; border:none; border-radius:10px; padding:12px 26px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .12s, opacity .2s; }
.nav-btn:hover { transform:translateY(-1px); }
.nav-btn.sekundaer { background:var(--bg3,#eef1f8); color:var(--text,#1a1f36); font-weight:600; }
.nav-btn:disabled { opacity:.35; cursor:default; transform:none; }
.trin-nr { font-family:'DM Mono',monospace; font-size:.68rem; color:#8a93b0; }
.slut-cta { text-align:center; margin-top:8px; }
.slut-cta a { display:inline-block; background:#10b981; color:#fff; text-decoration:none; border-radius:10px; padding:12px 26px; font-weight:700; font-size:.95rem; margin-top:8px; }
.embed-slut { display:inline-block; color:#059669; font-weight:700; font-size:.88rem; margin-top:8px; }
svg text { font-family:'DM Mono',monospace; }
.konfetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:99999;overflow:hidden}
.konfetti-bit{position:absolute;top:-20px;border-radius:2px;animation:konf-fald linear forwards}
@keyframes konf-fald{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(105vh) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation-duration:.01s !important; } }