/* ============================================================
   LADEUNIVERSET — BASE v4.0  "Papir og blæk"
   Redaktionel typografi. Læsbarhed før effekt.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papir);color:var(--text-1);
  font-family:var(--f-sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-top:var(--nav-h);
}
h1,h2,h3{font-family:var(--f-sans);font-weight:700;letter-spacing:-.022em;line-height:1.08;
  margin:0;color:var(--text-1)}
h4,h5{font-family:var(--f-sans);font-weight:500;margin:0;letter-spacing:0}
h1{font-size:clamp(38px,5vw,64px);line-height:1.0;letter-spacing:-.03em}
h2{font-size:clamp(28px,3.2vw,40px)}
h3{font-size:clamp(19px,1.7vw,22px);line-height:1.2;letter-spacing:-.012em}
p{margin:0 0 1.1em}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--t-fast)}
a:hover{text-decoration-color:currentColor}
button{font:inherit}
::selection{background:var(--accent-flad)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}
strong,b{font-weight:600}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1400px;padding:0 clamp(20px,3.2vw,48px)}
.sect{padding:clamp(60px,7.5vw,104px) 0}
.sect__head{max-width:64ch;margin-bottom:clamp(28px,3.6vw,44px)}
.sect__head h2{margin:12px 0 0}
.sect__head .lede{margin-top:16px}

/* Skiftende flader giver rytme: papir · nedtonet · mørk */
.sect--light{background:var(--flade)}
.sect--moerk{background:var(--moerk);color:var(--text-lys)}
.sect--moerk h1,.sect--moerk h2,.sect--moerk h3{color:#fff}
.sect--moerk .lede,.sect--moerk p{color:var(--text-lys-2)}
.sect--moerk .eyebrow{color:var(--text-lys-2)}
.sect--moerk a{color:#fff;text-decoration-color:var(--line-lys)}
.sect--moerk hr,.sect--moerk .regel{border-color:var(--line-lys)}

/* ---------- Tekstelementer ---------- */
/* Etiketten: lille, 500, ingen versaler, en kort streg foran. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--text-3)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent)}
.eyebrow--ren::before{display:none}
.mono{font-family:var(--f-mono);font-size:12.5px;color:var(--text-3)}
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--text-2);line-height:1.6;max-width:58ch;font-weight:400}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--pos);flex:0 0 auto}
.grad{color:var(--text-1)}

/* Store tal: 700, stram, tabeltal. Enheden er 400 og dæmpet. */
.tal{font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text-1);font-variant-numeric:lining-nums}
.tal small,.tal span{font-weight:400;letter-spacing:0;color:var(--text-2)}

/* "Kommer" — ét gråt ord, aldrig en badge */
.kommer{font-size:12.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.kommer::before{content:"— "}

/* Dig: alt hvor du har sat dit præg, er orange. Kun dér. */
.dig{color:var(--dig-ink)}
.dig-fyld{background:var(--dig);color:#fff}

hr,.regel{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- Skydere: ét udseende på hele sitet ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;margin:12px 0;
  background:var(--line);outline:none;border-radius:0}
/* Knoppen er orange: det er dig der flytter den. */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--dig);border:3px solid var(--hvid);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform var(--t-fast)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--dig);
  border:3px solid var(--hvid);cursor:pointer}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--dig-flad)}

/* ---------- Indtoning: kort, rolig ---------- */
.reveal,.ind{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.reveal.in,.ind.is-inde{opacity:1;transform:none}
.reveal.d1,.ind.d1{transition-delay:.06s}
.reveal.d2,.ind.d2{transition-delay:.12s}
.reveal.d3,.ind.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}

/* ---------- Rester fra den gamle baggrund gøres uskadelige ---------- */
.bg,.aurora,.vignette,.grain,#field{display:none !important}

/* ---------- Kvittering (profil-besked) ---------- */
.kvit{position:fixed;left:50%;bottom:26px;z-index:var(--z-overlay);transform:translate(-50%,16px);
  opacity:0;pointer-events:none;background:var(--text-1);color:var(--text-lys);
  padding:12px 18px 12px 16px;border-left:4px solid var(--dig);border-radius:var(--r-lg);
  font-size:14px;line-height:1.45;max-width:min(92vw,520px);
  box-shadow:var(--sh-2);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.kvit b{color:#fff;font-weight:500}
.kvit.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .reveal,.ind{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}