/* Forsiden på desken.dk — / (ny.html) og /en (ny-en.html).

   Mørk scene, lyse skærmbilleder: appens papirfarve står frem som et oplyst
   ark på et mørkt skrivebord. Opbygningen låner fra DaVinci Resolves
   produktside — ét kapitel pr. arbejdsflade, et stort navn, én linje løfte,
   et stort billede og så spalter — men kapitlerne er Deskens egne fem trin,
   de samme fem ord som zonerne på lærredet.

   Skrifterne ligger selv på domænet (/site/fonts, OFL), fordi CSP'en kun
   tillader font-src 'self'. Samme skrifter som appen: Inter, JetBrains Mono,
   Source Serif 4.

   Ingen mappe ved navn assets/: vercel.json sletter dist/assets ved hvert
   byg. Derfor /site/. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/site/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/site/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/site/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/site/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("/site/fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/site/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/site/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap; src: url("/site/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url("/site/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }

:root {
  --sort:        #0A0A0B;
  --flade:       #121214;
  --flade-2:     #18181B;
  --kant:        rgba(255, 255, 255, 0.08);
  --kant-stærk:  rgba(255, 255, 255, 0.16);
  --tekst:       #F3EFE6;   /* varm hvid — papiret, set i mørke */
  --tekst-mut:   #B5AFA4;
  --tekst-svag:  #858075;
  --rød:         #E5584D;   /* appens #D9544A, løftet til mørk bund */
  --rød-mørk:    #CC473D;

  /* Zonernes farver fra lærredet, løftet så de kan læses på sort */
  --z-materiale: #FB8B3C;
  --z-skriv:     #B98AF8;
  --z-efterprov: #3DD37A;
  --z-godkend:   #4CC3F5;
  --z-aflever:   #7BE39A;

  --ok:      #3DD37A;
  --mangler: #EDB04A;
  --fejl:    #F2675C;

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --ramme: 1240px;
  --bjælke-h: 60px;
  --glid: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--sort);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bjælke-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--sort);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.86em; color: var(--mangler); background: rgba(237, 176, 74, 0.1); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--rød); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(229, 88, 77, 0.35); }

.ramme { max-width: var(--ramme); margin: 0 auto; padding: 0 28px; }

.spring { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tekst); color: var(--sort); padding: 8px 14px; border-radius: 6px; font-weight: 600; }
.spring:focus { left: 12px; }

/* ─── Knapper ─────────────────────────────────────────────── */

.knapper { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.knap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.005em; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--glid), box-shadow 0.2s;
}
.knap:active { transform: translateY(1px); }
.knap-primær { background: var(--rød); color: #fff; box-shadow: 0 8px 30px -8px rgba(229, 88, 77, 0.6); }
.knap-primær:hover { background: var(--rød-mørk); box-shadow: 0 10px 36px -8px rgba(229, 88, 77, 0.75); }
.knap-sekundær { border: 1px solid var(--kant-stærk); color: var(--tekst); background: rgba(255, 255, 255, 0.03); }
.knap-sekundær:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.07); }
.knap-lille { padding: 8px 18px; font-size: 13.5px; box-shadow: none; }
.knap-stor { padding: 18px 36px; font-size: 17px; }

/* ─── Bjælken ─────────────────────────────────────────────── */

.bjælke {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--kant);
}
.bjælke-ramme {
  max-width: var(--ramme); margin: 0 auto; padding: 0 28px;
  height: var(--bjælke-h); display: flex; align-items: center; gap: 28px;
}
.mærke {
  font-weight: 800; font-size: 17px; letter-spacing: 0.16em;
  color: var(--rød); text-decoration: none; flex-shrink: 0;
}
.mærke-lille { font-size: 13px; }
.kapitler { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.kapitler a {
  position: relative; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--tekst-mut); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.kapitler a:hover { color: var(--tekst); background: rgba(255, 255, 255, 0.05); }
.kapitler a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--z, var(--tekst)); transform: scaleX(0); transition: transform 0.3s var(--glid);
}
.kapitler a.aktiv { color: var(--tekst); }
.kapitler a.aktiv::after { transform: scaleX(1); }
.kapitler-skel { width: 1px; height: 18px; background: var(--kant-stærk); margin: 0 8px; }
/* Sprogskiftet: DA ↔ EN mellem /ny og /en/ny */
.sprog-link {
  flex-shrink: 0; padding: 8px 10px; border-radius: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  color: var(--tekst-mut); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.sprog-link:hover { color: var(--tekst); background: rgba(255, 255, 255, 0.05); }

/* ─── Helten ──────────────────────────────────────────────── */

/* overflow-x: clip, ikke hidden: skæret må gerne løbe lodret ud over
   sektionen, men dets 140vw må ikke gøre siden bredere end skærmen. */
.helt {
  position: relative; padding: 110px 0 40px; text-align: center; isolation: isolate;
  overflow-x: clip;
}
.helt::before {
  /* Et rødt skær bag skærmen — lyset fra et ark på bordet */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 42%;
  width: min(1400px, 140vw); height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(229, 88, 77, 0.22), rgba(229, 88, 77, 0.06) 55%, transparent);
  filter: blur(20px); pointer-events: none;
}
.helt-tekst { animation: op 1.1s var(--glid) both; }
.øjenbryn, .kapitel-nr, .fund-etiket, .udbydere-etiket, .pris-navn {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.øjenbryn { color: var(--rød); margin-bottom: 26px; }
.helt h1 {
  font-size: clamp(3.2rem, 9.2vw, 8.4rem);
  font-weight: 800; line-height: 0.93; letter-spacing: -0.055em;
  background: linear-gradient(180deg, #fff 35%, #CFC8BB 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.punktum { color: var(--rød); -webkit-text-fill-color: var(--rød); }
.helt-manchet {
  max-width: 700px; margin: 34px auto 40px;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.55; color: var(--tekst-mut);
}

/* ─── Skærmbilleder ───────────────────────────────────────── */

.skærm { position: relative; margin: 72px auto 0; max-width: var(--ramme); padding: 0 28px; isolation: isolate; }
.skærm::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 12% -4%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--z, var(--rød)) 30%, transparent), transparent);
  filter: blur(40px); pointer-events: none; opacity: 0.8;
}
.vindue {
  display: block; overflow: hidden; border-radius: 12px; text-decoration: none;
  background: #1C1C1F;
  border: 1px solid var(--kant-stærk);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 60px 120px -40px rgba(0, 0, 0, 0.95),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s var(--glid), box-shadow 0.5s var(--glid);
}
a.vindue:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 70px 130px -40px rgba(0, 0, 0, 0.95), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.vindue-bar {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: linear-gradient(#2A2A2E, #232326); border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  position: relative;
}
.vindue-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.vindue-bar i:nth-child(2) { background: #FEBC2E; }
.vindue-bar i:nth-child(3) { background: #28C840; }
.vindue-bar span {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: #9A958B; letter-spacing: 0.02em;
}
.skærm figcaption {
  max-width: 720px; margin: 22px auto 0; text-align: center;
  font-size: 14px; line-height: 1.55; color: var(--tekst-svag);
}

/* Heltens skærm ligger bagover og retter sig op, mens man scroller (ny.js
   sætter --tilt og --skala). Uden JS står den bare lige. */
.skærm-helt { margin-top: 84px; perspective: 2000px; }
.skærm-helt .vindue {
  transform-origin: 50% 0;
  transform: rotateX(var(--tilt, 0deg)) scale(var(--skala, 1));
  animation: frem 1.4s 0.15s var(--glid) both;
}
.skærm-helt figcaption { margin-top: 26px; }

.skærm-lille, .skærm-mellem { margin-top: 0; padding: 0; }
.skærm-mellem { max-width: 940px; margin: 80px auto 0; }
.skærm-lille figcaption, .skærm-mellem figcaption { font-size: 13.5px; }

/* ─── Tidsbåndet ──────────────────────────────────────────── */

.bånd { padding: 110px 0 40px; }
.bånd-ramme {
  display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center;
  padding-top: 56px; padding-bottom: 56px;
  border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant);
}
.bånd-dato {
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--tekst-svag); white-space: nowrap;
}
.bånd-dato span { color: var(--tekst); }
.bånd-stor { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.bånd-lille { margin-top: 12px; color: var(--tekst-mut); max-width: 640px; }

/* ─── Sektionstitler ──────────────────────────────────────── */

.sektion-titel {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.02; text-align: center;
  max-width: 980px; margin: 0 auto;
}
.sektion-manchet {
  max-width: 680px; margin: 26px auto 0; text-align: center;
  font-size: 1.15rem; color: var(--tekst-mut);
}

/* ─── De fem trin ─────────────────────────────────────────── */

.trin { padding: 130px 0 40px; }
.trin-række {
  list-style: none; padding: 0; margin: 72px 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  position: relative;
}
.trin-række::before {
  /* Kanten mellem noderne — samme farveforløb som zonerne på lærredet */
  content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--z-materiale), var(--z-skriv), var(--z-efterprov), var(--z-godkend), var(--z-aflever));
  opacity: 0.55;
}
.trin-række a {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 10px 26px; text-decoration: none; border-radius: 16px;
  transition: transform 0.35s var(--glid);
}
.trin-række a:hover { transform: translateY(-4px); }
.trin-nr {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--sort); border: 2px solid var(--z);
  font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--z);
  box-shadow: 0 0 0 6px var(--sort), 0 0 40px -6px var(--z);
  transition: background 0.3s, color 0.3s;
}
.trin-række a:hover .trin-nr { background: var(--z); color: var(--sort); }
.trin-navn { margin-top: 22px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.trin-tekst { margin-top: 4px; font-size: 14.5px; color: var(--tekst-svag); }

/* ─── Kapitler ────────────────────────────────────────────── */

.kapitel { padding: 170px 0 60px; position: relative; }
.kapitel::before {
  /* En tynd streg i kapitlets farve, der løber ud i sort */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--ramme), 90vw); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--z) 55%, transparent), transparent);
}
.kapitel-hoved { text-align: center; }
.kapitel-nr { color: var(--z, var(--tekst-svag)); margin-bottom: 18px; }
.kapitel-hoved h2:not(.sektion-titel) {
  font-size: clamp(3.6rem, 11vw, 9rem); font-weight: 800;
  letter-spacing: -0.06em; line-height: 0.9;
}
.kapitel-løfte {
  margin: 22px auto 0; max-width: 860px;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.25; color: var(--tekst);
}
.kapitel-intro { margin: 22px auto 0; max-width: 660px; font-size: 1.08rem; color: var(--tekst-mut); }
.kapitel .skærm:not(.skærm-lille):not(.skærm-mellem) { margin-top: 80px; }

.spalter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 44px 40px; margin-top: 84px;
}
.spalter h3 {
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px;
  padding-top: 18px; position: relative;
}
.spalter h3::before {
  content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; border-radius: 2px;
  background: var(--z, var(--rød));
}
.spalter p { font-size: 15.5px; line-height: 1.62; color: var(--tekst-mut); }
.spalter b.ok { color: var(--ok); font-weight: 600; }
.spalter b.mangler { color: var(--mangler); font-weight: 600; }
.spalter b.fejl { color: var(--fejl); font-weight: 600; }

/* Regel + billede under SKRIV */
.regel-og-billede {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center;
  margin-top: 110px;
}
.regel { border-left: 2px solid var(--z); padding: 6px 0 6px 30px; }
.regel p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.3; letter-spacing: -0.01em;
}
.regel footer { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-svag); }

/* To billeder side om side under EFTERPRØV */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 96px; }

/* ─── Scenerne ────────────────────────────────────────────── */
/* En scene står fast, mens man scroller forbi, og skifter imens mellem rigtige
   skærmbilleder fra appen, lagt oven i hinanden (skaermbilleder.mjs). ny.js
   sætter .levende, .fremme, data-trin og --p (0–1). Uden JS eller med
   «reducér bevægelse» står sidste trin stille, og teksterne står under
   hinanden. Scenerne: lærredet under «Fem trin» (.scene-lærred) og
   konsensus-matrixen under Efterprøv (.scene-matrix). */

/* overflow-x: clip, ikke hidden: en ring, der slår ud fra et trin ude ved
   kanten, må ikke gøre siden bredere end skærmen (på en telefon zoomer
   browseren så ud). clip laver ingen rullecontainer, så sticky virker stadig. */
.scene { margin-top: 80px; overflow-x: clip; }
.scene-sticky { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
/* container: billedfeltets højde regnes af vinduets bredde (cqw) og
   billedernes forhold (--forhold), så feltet kan skifte højde uden at
   billederne bliver klemt. */
.scene-skærm { position: relative; isolation: isolate; width: 100%; justify-self: center; container-type: inline-size; }
.scene-skærm::before {
  content: ""; position: absolute; z-index: -1; inset: 6% 10% -6%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--z) 32%, transparent), transparent);
  filter: blur(44px); opacity: 0.85; pointer-events: none;
  transition: background 0.8s var(--glid), opacity 0.8s var(--glid), inset 0.8s var(--glid);
}
.scene-billeder {
  position: relative; overflow: hidden; background: #F7F5F0;
  height: calc(100cqw * var(--forhold, 0.5625));
  transition: height 1s var(--glid);
}
.scene-zoom { position: absolute; inset: 0; }
/* Fast i toppen og i fuld højde: skifter feltet højde, skæres kun bunden fra.
   Det nye billede «fremkaldes»: fra let sløret og lyst til skarpt. */
.scene-trin {
  position: absolute; left: 0; top: 0; width: 100%; height: auto;
  opacity: 0; transform: scale(1.012); filter: blur(3px) brightness(1.06);
  transition: opacity 0.45s var(--glid), transform 0.6s var(--glid), filter 0.45s var(--glid);
}
.scene[data-trin="1"] .scene-trin[data-trin="1"],
.scene[data-trin="2"] .scene-trin[data-trin="2"],
.scene[data-trin="3"] .scene-trin[data-trin="3"],
.scene[data-trin="4"] .scene-trin[data-trin="4"],
.scene[data-trin="5"] .scene-trin[data-trin="5"] { opacity: 1; transform: none; filter: none; }

/* Fejet: når et trin bliver færdigt, løber et lys ned over det sted i
   billedet, hvor det skete. Kører kun, når scenen er fremme. */
.scene-feje {
  --feje: var(--z-efterprov);
  position: absolute; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--feje) 5%, transparent), color-mix(in srgb, var(--feje) 26%, transparent));
  border: 1px solid color-mix(in srgb, var(--feje) 60%, transparent);
  clip-path: inset(0 0 100% 0);
}
.scene.levende.fremme[data-trin="1"] .scene-feje[data-trin="1"],
.scene.levende.fremme[data-trin="2"] .scene-feje[data-trin="2"],
.scene.levende.fremme[data-trin="3"] .scene-feje[data-trin="3"],
.scene.levende.fremme[data-trin="4"] .scene-feje[data-trin="4"],
.scene.levende.fremme[data-trin="5"] .scene-feje[data-trin="5"] { animation: feje 1.3s var(--glid) 0.15s both; }
@keyframes feje {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); }
  55%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); color: var(--mangler); } 100% { transform: scale(1); } }

/* Teksterne: én pr. trin, oven i hinanden */
.scene-tekster {
  list-style: none; padding: 0; margin: 30px auto 0; max-width: 780px;
  display: grid; text-align: center;
}
.scene-tekster li {
  grid-area: 1 / 1; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -0.012em;
  line-height: 1.4; color: var(--tekst);
  opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity 0.45s var(--glid), transform 0.55s var(--glid), filter 0.45s var(--glid);
}
.scene[data-trin="1"] .scene-tekster li[data-trin="1"],
.scene[data-trin="2"] .scene-tekster li[data-trin="2"],
.scene[data-trin="3"] .scene-tekster li[data-trin="3"],
.scene[data-trin="4"] .scene-tekster li[data-trin="4"],
.scene[data-trin="5"] .scene-tekster li[data-trin="5"] { opacity: 1; transform: none; filter: none; }
.scene-tekster b { font-weight: 700; }
.scene-tekster .k-f  { color: var(--fejl); }
.scene-tekster .k-u  { color: var(--mangler); }
.scene-tekster .k-ok { color: var(--ok); }
.scene-tekster .k-rå { color: #6AA8FF; }   /* lærredets blå «rå kilde», løftet til sort */
.scene-tekster .k-ai { color: #EAB308; }   /* lærredets gule «AI-genereret» */
.scene-nr {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--z);
}

/* I bevægelse: scenen er høj, og indholdet står fast, mens man scroller
   forbi. Vinduet ligger bagover, når scenen begynder, retter sig op og kommer
   langsomt nærmere. */
.scene.levende .scene-sticky {
  position: sticky; top: var(--bjælke-h); height: calc(100vh - var(--bjælke-h));
  align-content: center;
}
.scene.levende .vindue {
  transform-origin: 50% 100%;
  transform: perspective(1800px)
    rotateX(calc(12deg * (1 - min(1, var(--p, 1) * 6))))
    scale(calc(0.95 + 0.05 * min(1, var(--p, 1) / 0.78)));
}
/* Stille: alle tekster under hinanden, sidste trin over dem. */
.scene:not(.levende) .scene-tekster { text-align: left; gap: 18px; }
.scene:not(.levende) .scene-tekster li { grid-area: auto; opacity: 1; transform: none; filter: none; }

/* ── Lærredet: fem trin — flowet kører zone for zone ────────── */
.scene-lærred { --forhold: 0.5625; }
.scene-lærred.levende { height: 360vh; }
.scene-lærred.levende .scene-skærm { max-width: calc((100vh - var(--bjælke-h) - 400px) * 1.778); }
/* Lyset og tekstens farve følger den zone, der lige er kørt */
.scene-lærred[data-trin="1"] { --z: var(--z-materiale); }
.scene-lærred[data-trin="2"] { --z: var(--z-skriv); }
.scene-lærred[data-trin="3"] { --z: var(--z-efterprov); }
.scene-lærred[data-trin="4"] { --z: var(--z-godkend); }
.scene-lærred[data-trin="5"] { --z: var(--z-aflever); }
/* Zonerne i skærmbilledet (1600×900): x = 278 + 258·i, bredde 220, y 204–561
   — lærredets zoom og panorering i byg-demo.js. */
.scene-lærred .scene-feje { top: 22.7%; height: 39.7%; width: 13.8%; border-radius: 8px; }
.scene-lærred .scene-feje[data-trin="1"] { left: 17.4%;  --feje: var(--z-materiale); }
.scene-lærred .scene-feje[data-trin="2"] { left: 33.55%; --feje: var(--z-skriv); }
.scene-lærred .scene-feje[data-trin="3"] { left: 49.7%;  --feje: var(--z-efterprov); }
.scene-lærred .scene-feje[data-trin="4"] { left: 65.85%; --feje: var(--z-godkend); }
.scene-lærred .scene-feje[data-trin="5"] { left: 82%;    --feje: var(--z-aflever); }
/* De fem trin over vinduet tænder, efterhånden som flowet når dem */
.scene-lærred .trin-række { margin: 0 auto 22px; width: 100%; max-width: 1060px; }
/* Kompakt i bevægelse: teksten under vinduet fortæller, hvad trinnet gør, så
   undertitlerne er skjult og cirklerne mindre — ellers kan scenen ikke stå
   helt på én skærm. */
.scene-lærred.levende .trin-række a { padding-bottom: 0; }
.scene-lærred.levende .trin-række::before { top: 25px; clip-path: inset(0 calc((1 - min(1, var(--p, 1) / 0.7)) * 100%) 0 0); opacity: 0.9; }
.scene-lærred.levende .trin-nr { position: relative; width: 52px; height: 52px; font-size: 13.5px; border-color: var(--kant-stærk); color: var(--tekst-svag); box-shadow: 0 0 0 6px var(--sort); }
.scene-lærred.levende .trin-navn { margin-top: 14px; font-size: 1.12rem; opacity: 0.4; transition: opacity 0.4s; }
.scene-lærred.levende .trin-tekst { display: none; }
:is(.scene-lærred[data-trin="1"] .trin-række li:nth-child(-n+1),
    .scene-lærred[data-trin="2"] .trin-række li:nth-child(-n+2),
    .scene-lærred[data-trin="3"] .trin-række li:nth-child(-n+3),
    .scene-lærred[data-trin="4"] .trin-række li:nth-child(-n+4),
    .scene-lærred[data-trin="5"] .trin-række li) .trin-nr {
  border-color: var(--z); color: var(--z); box-shadow: 0 0 0 6px var(--sort), 0 0 40px -6px var(--z);
}
:is(.scene-lærred[data-trin="1"] .trin-række li:nth-child(-n+1),
    .scene-lærred[data-trin="2"] .trin-række li:nth-child(-n+2),
    .scene-lærred[data-trin="3"] .trin-række li:nth-child(-n+3),
    .scene-lærred[data-trin="4"] .trin-række li:nth-child(-n+4),
    .scene-lærred[data-trin="5"] .trin-række li) :is(.trin-navn, .trin-tekst) { opacity: 1; }
/* En ring slår ud fra trinnet, i det øjeblik det tænder */
.scene-lærred .trin-nr::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--z); opacity: 0; pointer-events: none;
}
:is(.scene-lærred.levende.fremme[data-trin="1"] .trin-række li:nth-child(1),
    .scene-lærred.levende.fremme[data-trin="2"] .trin-række li:nth-child(2),
    .scene-lærred.levende.fremme[data-trin="3"] .trin-række li:nth-child(3),
    .scene-lærred.levende.fremme[data-trin="4"] .trin-række li:nth-child(4),
    .scene-lærred.levende.fremme[data-trin="5"] .trin-række li:nth-child(5)) .trin-nr::after { animation: ring 1s ease-out 0.1s 1; }

/* ── Konsensus-matrixen (Efterprøv): fire trin ──────────────── */
.scene-matrix { --forhold: 0.4727; }
.scene-matrix.levende { height: 280vh; }
.scene-matrix .scene-sticky { grid-template-columns: 200px minmax(0, 1fr); column-gap: 44px; }
.scene-matrix .scene-skærm, .scene-matrix .scene-tekster { grid-column: 2; }
.scene-matrix.levende .scene-skærm { max-width: calc((100vh - var(--bjælke-h) - 250px) * 2.1); }
/* Lyset bag vinduet vokser for hver model, der bliver færdig */
.scene-matrix[data-trin="1"] .scene-skærm::before { opacity: 0.45; }
.scene-matrix[data-trin="2"] .scene-skærm::before { opacity: 0.7; }
.scene-matrix[data-trin="3"] .scene-skærm::before { opacity: 1; inset: 2% 6% -10%; }
/* Fejet over den nye models kolonne. Matrixens egne mål: påstanden fylder
   38 %, konsensus 76 px, og resten deles ligeligt af modellerne (1, 2 el. 3). */
.scene-matrix .scene-feje { top: 16%; bottom: 4%; border-block: 0; }
.scene-matrix .scene-feje[data-trin="1"] { left: 38%; width: 55%; }
.scene-matrix .scene-feje[data-trin="2"] { left: 65.5%; width: 27.5%; }
.scene-matrix .scene-feje[data-trin="3"] { left: 74.7%; width: 18.4%; }
/* Nærbilledet: billedfeltet folder sig sammen om de to uenige rækker, vinduet
   løfter sig mod læseren, og lyset skifter til uenighedens rav. Ingen
   beskæring i siderne — alle tre modellers domme skal kunne ses. 0.435 =
   trin 4-billedets top til under anden række. */
.scene-matrix[data-trin="4"] .scene-billeder { height: calc(100cqw * var(--forhold) * 0.435); }
.scene-matrix[data-trin="4"] .scene-skærm::before { background: radial-gradient(closest-side, rgba(237, 176, 74, 0.5), transparent); opacity: 1; }
.scene-matrix.levende[data-trin="4"] .vindue {
  transform-origin: 50% 50%; transform: perspective(1800px) rotateX(4deg) scale(1.12);
  box-shadow: 0 0 0 1px rgba(237, 176, 74, 0.4), 0 60px 140px -40px rgba(0, 0, 0, 0.95), 0 0 90px -20px rgba(237, 176, 74, 0.4);
}
.scene-matrix .scene-tekster li[data-trin="4"] .scene-nr { color: var(--mangler); }

/* Tråden: det gule AI-udkast løber ind, bliver tjekket af tre modeller og løber
   videre med uenighedens farve — samme farver som forbindelserne på lærredet.
   Positionerne (--pos) passer med data-skift, så en model tænder, i samme
   øjeblik tråden når den. */
.tråd { grid-column: 1; grid-row: 1 / span 2; position: relative; height: min(440px, 54vh); margin-top: 40px; }
.tråd::before, .tråd::after { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.tråd::before { background: var(--kant-stærk); }
.tråd::after {
  background: linear-gradient(180deg, var(--z-efterprov), var(--z-efterprov) 64%, var(--mangler) 80%, var(--mangler));
  box-shadow: 0 0 12px color-mix(in srgb, var(--z-efterprov) 60%, transparent);
  clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0);
}
.tråd-ind, .tråd-ud {
  position: absolute; left: 0; padding-left: 26px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.tråd-ind { top: -52px; color: #EAB308; }
.tråd-ind::before {
  content: ""; position: absolute; left: 7px; top: 14px; height: 38px; width: 2px; border-radius: 2px;
  background: #EAB308; box-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
}
.tråd-ud { top: calc(100% + 16px); color: var(--tekst-svag); }
.tråd-trin { list-style: none; margin: 0; padding: 0; }
.tråd-trin li {
  position: absolute; left: 0; top: var(--pos); transform: translateY(-50%);
  display: grid; grid-template-columns: 16px auto; column-gap: 14px; align-items: center; white-space: nowrap;
}
.tråd-trin li:nth-child(1) { --pos: 0%; }
.tråd-trin li:nth-child(2) { --pos: 30%; }
.tråd-trin li:nth-child(3) { --pos: 55%; }
.tråd-trin li:nth-child(4) { --pos: 78%; --lys: var(--mangler); }
.tråd-trin i {
  position: relative; grid-row: 1 / span 2; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sort); border: 2px solid var(--kant-stærk); box-shadow: 0 0 0 5px var(--sort);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
/* En ring slår ud fra modellen, i det øjeblik den tænder */
.tråd-trin i::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--lys, var(--z-efterprov)); opacity: 0; pointer-events: none;
}
:is(.scene.levende.fremme[data-trin="1"] .tråd-trin li:nth-child(1),
    .scene.levende.fremme[data-trin="2"] .tråd-trin li:nth-child(2),
    .scene.levende.fremme[data-trin="3"] .tråd-trin li:nth-child(3),
    .scene.levende.fremme[data-trin="4"] .tråd-trin li:nth-child(4)) i::after { animation: ring 1s ease-out 0.1s 1; }
/* Lyskuglen: trådens glødende hoved følger scrollet ned — og skifter til rav,
   når uenigheden er fundet. Ligger under modellernes prikker. */
.tråd-hoved {
  position: absolute; left: 3px; top: calc(var(--p, 1) * 100%); width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: #F4FFF8;
  box-shadow: 0 0 10px 3px var(--z-efterprov), 0 0 36px 12px rgba(61, 211, 122, 0.45);
  transition: background 0.4s, box-shadow 0.4s;
}
.scene[data-trin="4"] .tråd-hoved { background: #FFF6E5; box-shadow: 0 0 10px 3px var(--mangler), 0 0 36px 12px rgba(237, 176, 74, 0.5); }
.scene:not(.levende) .tråd-hoved { display: none; }
/* Tælleren: «0 uenigheder» → «1 uenighed» → «2 uenigheder», med et hop */
.tråd-tæller b { display: inline-block; transform-origin: 0 50%; }
.tråd-tæller b.pop { animation: pop 0.55s var(--glid); }
.tråd-trin b { font-size: 14px; font-weight: 600; color: var(--tekst-svag); transition: color 0.4s; }
.tråd-trin small { display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--tekst-svag); opacity: 0.45; transition: opacity 0.4s; }
.tråd-trin em { font-style: normal; }
.tråd-trin em::before { content: "●"; margin-right: 3px; }
.tråd-trin em.v::before { color: var(--ok); }
.tråd-trin em.u::before { color: var(--mangler); }
.tråd-trin em.f::before { color: var(--fejl); }
/* Tændt: modellen er færdig (i stille tilstand er alle fire tændt) */
:is(.scene[data-trin="1"] .tråd-trin li:nth-child(-n+1),
    .scene[data-trin="2"] .tråd-trin li:nth-child(-n+2),
    .scene[data-trin="3"] .tråd-trin li:nth-child(-n+3),
    .scene[data-trin="4"] .tråd-trin li,
    .scene:not(.levende) .tråd-trin li) i {
  background: var(--lys, var(--z-efterprov)); border-color: var(--lys, var(--z-efterprov));
  box-shadow: 0 0 0 5px var(--sort), 0 0 22px var(--lys, var(--z-efterprov));
}
:is(.scene[data-trin="1"] .tråd-trin li:nth-child(-n+1),
    .scene[data-trin="2"] .tråd-trin li:nth-child(-n+2),
    .scene[data-trin="3"] .tråd-trin li:nth-child(-n+3),
    .scene[data-trin="4"] .tråd-trin li,
    .scene:not(.levende) .tråd-trin li) b { color: var(--lys, var(--tekst)); }
:is(.scene[data-trin="1"] .tråd-trin li:nth-child(-n+1),
    .scene[data-trin="2"] .tråd-trin li:nth-child(-n+2),
    .scene[data-trin="3"] .tråd-trin li:nth-child(-n+3),
    .scene[data-trin="4"] .tråd-trin li,
    .scene:not(.levende) .tråd-trin li) small { opacity: 1; }

/* ── Godkendelsen (Godkend): fire trin ─────────────────────── */
/* Fundene får svar, ét efter ét — 0, 12 og alle 24 — og til sidst diffen.
   Måleren til venstre fylder sig med dem. --andel er registreret, så ringen
   glider i stedet for at springe. */
@property --andel { syntax: "<number>"; inherits: true; initial-value: 1; }
.scene-godkend { --forhold: 0.6767; --andel: 1; transition: --andel 0.9s var(--glid); }
.scene-godkend.levende { height: 300vh; }
.scene-godkend .scene-sticky { grid-template-columns: 210px minmax(0, 1fr); column-gap: 44px; }
.scene-godkend .scene-skærm, .scene-godkend .scene-tekster { grid-column: 2; }
.scene-godkend.levende .scene-skærm { max-width: calc((100vh - var(--bjælke-h) - 250px) * 1.478); }
.scene-godkend[data-trin="1"] { --andel: 0; }
.scene-godkend[data-trin="2"] { --andel: 0.5; }
/* Fejet løber ned over listen med fund — i trin 4 over diffen, samme sted.
   Billederne er godkendelsesvinduet alene (1200×812): listen er x 0–455. */
.scene-godkend .scene-feje { --feje: var(--z-godkend); left: 0.3%; width: 37.6%; top: 10%; bottom: 0.5%; }
.måler { grid-column: 1; grid-row: 1 / span 2; display: grid; justify-items: center; gap: 14px; text-align: center; }
.måler-ring {
  position: relative; width: 168px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--z-godkend) calc(var(--andel) * 360deg), rgba(255, 255, 255, 0.08) 0);
  box-shadow: 0 0 60px -16px color-mix(in srgb, var(--z-godkend) calc(var(--andel) * 100%), transparent);
}
.måler-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--sort); }
.måler-ring b { position: relative; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.måler-ring b.pop { animation: pop 0.55s var(--glid); }
.måler-etiket { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-svag); }
.måler-fordeling { font-size: 14px; color: var(--tekst-mut); transition: opacity 0.4s; }
.måler-fordeling .ok { color: var(--ok); }
.måler-fordeling .fejl { color: var(--fejl); }
/* Fordelingen står først, når alle har fået svar */
.scene-godkend.levende:is([data-trin="1"], [data-trin="2"]) .måler-fordeling { opacity: 0; }

/* ── Kameraturene (Materiale, Skriv): ét billede, kameraet kører ind ── */
/* Ét rigtigt skærmbillede (1600×900 punkter), og kameraet kører ind på det,
   der betyder noget. Med transform-origin 0 0 er et nærbillede
   translate(tx, ty) scale(s), hvor tx = 50 % − s · x/16 og ty = 50 % −
   s · y/9 for billedpunktet (x, y) — klemt, så billedets kant aldrig kommer
   ind i vinduet (tx, ty ≥ 100 % − s · 100 %). Lysfelterne ligger inde i
   billedet og zoomer med. */
.scene-kamera { --forhold: 0.5625; }
.scene-kamera.levende { height: 280vh; }
.scene-kamera.levende .scene-skærm { max-width: calc((100vh - var(--bjælke-h) - 250px) * 1.778); }
.scene-kamera .scene-zoom { transform-origin: 0 0; transition: transform 1.4s var(--glid); }
.scene-kamera .scene-zoom > img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.scene-kamera .scene-feje { border-radius: 4px; }

/* Skriv: udkastet → det, rummet lagde ind i noden → hullet i teksten */
.scene-skriv[data-trin="2"] .scene-zoom { transform: translate(-160%, -71.9%) scale(2.6); }
.scene-skriv[data-trin="3"] .scene-zoom { transform: translate(-41%, -160%) scale(2.6); }
.scene-skriv .scene-feje { --feje: var(--z-skriv); }
.scene-skriv .scene-feje[data-trin="2"] { left: 79.6%; top: 41.4%; width: 19.6%; height: 13.2%; }
.scene-skriv .scene-feje[data-trin="3"] { left: 23.6%; top: 86.9%; width: 13.2%; height: 3.1%; }
/* Det engelske udkast er en linje kortere over hullet: [PRESS CONTACT MISSING] står ved y 757 */
:lang(en) .scene-skriv .scene-feje[data-trin="3"] { top: 84.1%; }

/* Materiale: hele lærredet → de tre kilder → rådmandens svar kl. 01:07 */
.scene-materiale[data-trin="2"] .scene-zoom { transform: translate(-8.5%, -42%) scale(2.4); }
.scene-materiale .scene-feje { --feje: var(--z-materiale); }
.scene-materiale .scene-feje[data-trin="2"] { left: 18.3%; top: 26.4%; width: 11.8%; height: 23.8%; }
/* Rådmandens svar kl. 01:07 står i inspektøren ved x 1282–1590, y 611–675
   (skaermbilleder.mjs skriver placeringen ud, når billedet tages). */
.scene-materiale[data-trin="3"] .scene-zoom { transform: translate(-160%, -135.7%) scale(2.6); }
.scene-materiale .scene-feje[data-trin="3"] { left: 80.1%; top: 67.9%; width: 19.3%; height: 7.1%; }

@media (max-width: 900px) {
  /* På en telefon er vinduet smalt: kameraet går knap så tæt på */
  .scene-kamera .scene-zoom { transition-duration: 1s; }
}

/* ── Rapporten (Aflever): fem trin — rapporten ruller forbi ── */
/* Transparensrapporten i ét højt billede (rapport-lang, 900×2700 i
   billedets egne punkter), der ruller til hvert afsnit, og til sidst
   slutningen (rapport-slut), hvor der står, hvem der godkendte. --rul er
   forskydningen i billedets punkter; cqw gør den til skærmens mål. Afsnittenes
   placering kommer fra skaermbilleder.mjs (scenen rapport-lang). */
.scene-aflever { --forhold: 0.711; --rul: 0; }
.scene-aflever.levende { height: 340vh; }
.scene-aflever .scene-sticky { grid-template-columns: 220px minmax(0, 1fr); column-gap: 44px; }
.scene-aflever .scene-skærm, .scene-aflever .scene-tekster { grid-column: 2; }
.scene-aflever.levende .scene-skærm { max-width: calc((100vh - var(--bjælke-h) - 250px) * 1.406); }
.scene-aflever .scene-billeder { background: #FDFCF9; }
.scene-aflever[data-trin="2"] { --rul: 300; }
.scene-aflever[data-trin="3"] { --rul: 580; }
.scene-aflever[data-trin="4"] { --rul: 1000; }
.rapport-rul {
  position: absolute; left: 0; top: 0; width: 100%;
  transform: translateY(calc(var(--rul) / 900 * -100cqw));
  transition: transform 1s var(--glid), opacity 0.45s var(--glid);
}
.rapport-rul img { display: block; width: 100%; height: auto; }
.scene-aflever[data-trin="5"] .rapport-rul { opacity: 0; }
/* Lyset over afsnittet, rapporten lige er rullet til — i procent af det høje
   billede, så det følger med, når det ruller */
.scene-aflever .scene-feje { --feje: var(--z-aflever); left: 1.5%; width: 97%; border-radius: 6px; }
.scene-aflever .scene-feje[data-trin="1"] { top: 1.85%; height: 1.9%; }
.scene-aflever .scene-feje[data-trin="2"] { top: 12.9%; height: 8.1%; }
.scene-aflever .scene-feje[data-trin="3"] { top: 22.8%; height: 4.3%; }
.scene-aflever .scene-feje[data-trin="4"] { top: 39.2%; height: 21%; }
/* Slutningen: vinduet er lavere end billedet (640 mod 810 punkter), så det
   rykkes 170 op — dér står human review, forbeholdet og godkendelsen. Lyset
   lægger sig over godkendelsesblokken (y 600–740 i billedet). */
.scene-aflever .scene-trin[data-trin="5"] { transform: translateY(calc(-170 / 900 * 100cqw)) scale(1.012); }
.scene-aflever[data-trin="5"] .scene-trin[data-trin="5"] { transform: translateY(calc(-170 / 900 * 100cqw)); }
.scene-aflever .scene-feje[data-trin="5"] { top: calc(430 / 900 * 100cqw); height: calc(140 / 900 * 100cqw); }
/* Indholdsfortegnelsen til venstre tænder, punkt for punkt */
.indeks { grid-column: 1; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--kant-stærk); display: grid; gap: 22px; }
.indeks li { position: relative; font-size: 14.5px; font-weight: 600; color: var(--tekst-svag); transition: color 0.4s; }
.indeks li::before {
  content: ""; position: absolute; left: -29px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--sort); border: 2px solid var(--kant-stærk); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.indeks small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-svag); opacity: 0.7; }
:is(.scene-aflever[data-trin="1"] .indeks li:nth-child(1),
    .scene-aflever[data-trin="2"] .indeks li:nth-child(2),
    .scene-aflever[data-trin="3"] .indeks li:nth-child(3),
    .scene-aflever[data-trin="4"] .indeks li:nth-child(4),
    .scene-aflever[data-trin="5"] .indeks li:nth-child(5)) { color: var(--tekst); }
:is(.scene-aflever[data-trin="1"] .indeks li:nth-child(1),
    .scene-aflever[data-trin="2"] .indeks li:nth-child(2),
    .scene-aflever[data-trin="3"] .indeks li:nth-child(3),
    .scene-aflever[data-trin="4"] .indeks li:nth-child(4),
    .scene-aflever[data-trin="5"] .indeks li:nth-child(5))::before {
  background: var(--z-aflever); border-color: var(--z-aflever); box-shadow: 0 0 0 4px var(--sort), 0 0 18px var(--z-aflever);
}
/* Punkter, rapporten allerede har vist, er læst */
:is(.scene-aflever[data-trin="2"] .indeks li:nth-child(-n+1),
    .scene-aflever[data-trin="3"] .indeks li:nth-child(-n+2),
    .scene-aflever[data-trin="4"] .indeks li:nth-child(-n+3),
    .scene-aflever[data-trin="5"] .indeks li:nth-child(-n+4))::before { border-color: var(--z-aflever); }

@media (max-width: 900px) {
  .scene-aflever .scene-sticky { grid-template-columns: minmax(0, 1fr); }
  .indeks { display: none; }
  .scene-aflever .scene-skærm, .scene-aflever .scene-tekster { grid-column: 1; }
}

@media (max-width: 900px) {
  .scene-godkend .scene-sticky { grid-template-columns: minmax(0, 1fr); }
  .måler { display: none; }
  .scene-godkend .scene-skærm, .scene-godkend .scene-tekster { grid-column: 1; }
}

@media (max-width: 900px) {
  .scene-matrix .scene-sticky { grid-template-columns: minmax(0, 1fr); }
  .tråd { display: none; }
  .scene-matrix .scene-skærm, .scene-matrix .scene-tekster { grid-column: 1; }
  /* Løftet i trin 4 må ikke gå ud over skærmkanten på en telefon */
  .scene-matrix.levende[data-trin="4"] .vindue { transform: perspective(1800px) rotateX(4deg) scale(1.03); }
  /* De fem trin som én kompakt række over vinduet */
  .scene-lærred .trin-række { grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: none; margin-bottom: 18px; }
  .scene-lærred .trin-række::before { display: none; }
  .scene-lærred .trin-række a { display: flex; flex-direction: column; align-items: center; padding: 0; }
  .scene-lærred .trin-nr, .scene-lærred.levende .trin-nr { width: 40px; height: 40px; font-size: 12px; }
  .scene-lærred .trin-navn, .scene-lærred.levende .trin-navn { margin-top: 8px; font-size: 11.5px; align-self: auto; }
  .scene-lærred .trin-tekst { display: none; }
  .scene-lærred.levende .scene-skærm { max-width: none; }
}

/* ─── Fundene i eksemplet ─────────────────────────────────── */

.fund {
  margin: 96px auto 0; max-width: 1040px;
  background: linear-gradient(180deg, var(--flade-2), var(--flade));
  border: 1px solid var(--kant); border-radius: 20px;
  padding: 44px 48px 20px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.fund-etiket { color: var(--tekst-svag); margin-bottom: 20px; }
.fund-før, .fund-efter { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.fund-før del { color: var(--tekst-svag); text-decoration-color: var(--fejl); text-decoration-thickness: 2px; }
.fund-efter { margin-top: 8px; color: var(--tekst); }
.fund-efter::before { content: "→ "; color: var(--ok); }
.fund-intro { margin-top: 24px; max-width: 640px; font-size: 16px; color: var(--tekst-mut); }
.fund-liste { list-style: none; padding: 0; margin: 34px 0 0; }
.fund-liste li {
  /* --dom-bredde: kolonnen skal kunne rumme det længste domsmærke. Den
     engelske side sætter den højere – «Contradicted by the material». */
  display: grid; grid-template-columns: var(--dom-bredde, 190px) minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 20px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--kant);
}
.fund-liste q { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--tekst); }
.fund-liste li > span:last-child { font-size: 14.5px; color: var(--tekst-mut); }
.fund-liste em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--tekst-svag); white-space: nowrap; }
.dom {
  justify-self: start;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.dom-fejl    { color: var(--fejl);    background: rgba(242, 103, 92, 0.1);  border: 1px solid rgba(242, 103, 92, 0.35); }
.dom-mangler { color: var(--mangler); background: rgba(237, 176, 74, 0.1);  border: 1px solid rgba(237, 176, 74, 0.35); }
.dom-uenig   { color: #C9B7FF;        background: rgba(185, 138, 248, 0.1); border: 1px solid rgba(185, 138, 248, 0.35); }

/* ─── Jeres data ──────────────────────────────────────────── */

.data { padding: 170px 0 60px; position: relative; }
.data::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--ramme), 90vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--kant-stærk), transparent);
}
.tilstande { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tilstande li {
  background: var(--flade); border: 1px solid var(--kant); border-radius: 18px; padding: 34px 30px 32px;
  transition: opacity 0.5s var(--glid), border-color 0.5s var(--glid), background 0.5s var(--glid), transform 0.5s var(--glid);
}
.tilstand-ikon { font-size: 28px; line-height: 1; margin-bottom: 20px; }
.tilstande h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.tilstande p:not(.tilstand-ikon) { font-size: 15.5px; color: var(--tekst-mut); }

.udbydere { text-align: center; }
.udbydere-etiket { color: var(--tekst-svag); margin-bottom: 18px; }
.udbydere ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.udbydere li {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--kant);
  background: rgba(255, 255, 255, 0.025); font-size: 14.5px; color: var(--tekst-mut);
  transition: opacity 0.5s var(--glid), border-color 0.5s var(--glid), box-shadow 0.5s var(--glid), color 0.5s var(--glid), filter 0.5s var(--glid);
}
.udbydere li b { color: var(--tekst); font-weight: 600; }

/* ── Scenen: databeskyttelsen skifter tilstand ───────────────
   Udsnittet er selve afsnittet i indstillingerne (skaermbilleder.mjs): 502
   bredt og 286 / 502 / 286 højt. Listen over godkendte udbydere gør det
   højere, så vinduet vokser med i midten — forholdet pr. tilstand er --f1–3.
   Fejet står i afsnittets egne pixels (÷ 502 × 100cqw), så det følger med,
   uanset hvor højt vinduet er. Den engelske side har sine egne tal (:lang). */
.scene-data {
  --z: #38BDF8;
  --f1: 0.5697; --f2: 1; --f3: 0.5697;
  --forhold: var(--f3);
  margin-top: 80px;
}
.scene-data[data-trin="1"] { --forhold: var(--f1); }
.scene-data[data-trin="2"] { --forhold: var(--f2); }
.scene-data .scene-sticky { row-gap: 44px; }
.scene-data .scene-skærm { max-width: 560px; }
.scene-data .scene-billeder { background: #FFFFFF; }   /* indstillingernes flade */
.scene-data .scene-feje { --feje: var(--z); border-radius: 6px; left: calc(29 / 502 * 100cqw); width: calc(444 / 502 * 100cqw); }
.scene-data .scene-feje[data-trin="1"] { top: calc(117 / 502 * 100cqw); height: calc(32 / 502 * 100cqw); }
.scene-data .scene-feje[data-trin="2"] { left: calc(51 / 502 * 100cqw); width: calc(422 / 502 * 100cqw); top: calc(268 / 502 * 100cqw); height: calc(216 / 502 * 100cqw); }
.scene-data .scene-feje[data-trin="3"] { top: calc(212 / 502 * 100cqw); height: calc(48 / 502 * 100cqw); }
.udbydere-tæller { display: none; }
.udbydere-tæller b { display: inline-block; color: var(--z); font-weight: 700; font-variant-numeric: tabular-nums; }
.udbydere-tæller b.pop { animation: pop 0.55s var(--glid); }

/* I bevægelse: kortene til venstre, vinduet til højre, udbyderne under */
.scene-data.levende { height: 280vh; }
.scene-data.levende .scene-sticky { grid-template-columns: 300px minmax(0, 560px); justify-content: center; column-gap: 56px; row-gap: 26px; }
.scene-data.levende .scene-skærm { max-width: min(560px, calc((100vh - var(--bjælke-h) - 250px) / var(--f2))); }
.scene-data.levende .udbydere { grid-column: 1 / -1; }
.scene-data.levende .tilstande { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.scene-data.levende .tilstande li { padding: 22px 24px 20px; opacity: 0.38; }
.scene-data.levende .tilstand-ikon { font-size: 22px; margin-bottom: 10px; }
.scene-data.levende .tilstande h3 { font-size: 1.2rem; margin-bottom: 6px; }
.scene-data.levende .tilstande p:not(.tilstand-ikon) { font-size: 14.5px; }
.scene-data.levende[data-trin="1"] .tilstande li[data-trin="1"],
.scene-data.levende[data-trin="2"] .tilstande li[data-trin="2"],
.scene-data.levende[data-trin="3"] .tilstande li[data-trin="3"] {
  opacity: 1; transform: translateX(8px);
  border-color: color-mix(in srgb, var(--z) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--z) 10%, transparent), var(--flade));
}
.scene-data.levende .udbydere-stille { display: none; }
.scene-data.levende .udbydere-tæller { display: inline; }
/* Udbyderne, der ikke længere må bruges, slukker; dem, der må, lyser */
.scene-data.levende[data-trin="2"] .udbydere li:not(.godkendt),
.scene-data.levende[data-trin="3"] .udbydere li:not(.lokal) {
  opacity: 0.3; filter: grayscale(1); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4);
}
.scene-data.levende[data-trin="2"] .udbydere li.godkendt,
.scene-data.levende[data-trin="3"] .udbydere li.lokal {
  color: var(--tekst); border-color: color-mix(in srgb, var(--z) 60%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--z) 70%, transparent);
}

/* ─── Hvem ────────────────────────────────────────────────── */

.hvem { padding: 170px 0 40px; }
.hvem .sektion-titel { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.hvem-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 72px; background: var(--kant); border: 1px solid var(--kant); border-radius: 18px; overflow: hidden; }
.hvem-gitter article { background: var(--sort); padding: 38px 34px; }
.hvem-gitter h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
.hvem-gitter p { font-size: 15.5px; color: var(--tekst-mut); }

/* ─── Pris ────────────────────────────────────────────────── */

.pris { padding: 170px 0 40px; }
.pris-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 72px auto 0; max-width: 1000px; }
.pris-kort {
  display: flex; flex-direction: column;
  background: var(--flade); border: 1px solid var(--kant); border-radius: 22px; padding: 44px 40px 40px;
}
.pris-kort-hoved {
  background: radial-gradient(120% 80% at 50% 0%, rgba(229, 88, 77, 0.14), transparent 60%), var(--flade);
  border-color: rgba(229, 88, 77, 0.38);
}
.pris-navn { color: var(--tekst-svag); }
.pris-beløb { margin-top: 12px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.pris-note { margin-top: 12px; font-size: 15px; color: var(--tekst-mut); }
.pris-kort ul { list-style: none; padding: 0; margin: 28px 0 34px; flex: 1; }
.pris-kort li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--kant); font-size: 15.5px; }
.pris-kort li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.pris-kort .knap { align-self: flex-start; }

/* ─── Slut ────────────────────────────────────────────────── */

.slut { padding: 190px 0 150px; text-align: center; position: relative; isolation: isolate; overflow-x: clip; }
.slut::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, 130vw); height: 620px;
  background: radial-gradient(closest-side, rgba(229, 88, 77, 0.18), transparent);
  filter: blur(20px); pointer-events: none;
}
.slut h2 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; }
.slut > .ramme > p { max-width: 560px; margin: 28px auto 40px; font-size: 1.15rem; color: var(--tekst-mut); }
.slut .slut-note { margin-top: 32px; font-size: 14px; color: var(--tekst-svag); }
.slut-note a { color: var(--tekst-mut); text-underline-offset: 3px; }
.slut-note a:hover { color: var(--tekst); }

/* ─── Fod ─────────────────────────────────────────────────── */

.fod { border-top: 1px solid var(--kant); padding: 30px 0 40px; font-size: 13.5px; color: var(--tekst-svag); }
.fod-ramme { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.fod a { color: var(--tekst-mut); text-decoration: none; }
.fod a:hover { color: var(--tekst); }
.fod-note { margin-left: auto; }

/* ─── Bevægelse ───────────────────────────────────────────── */

@keyframes op   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes frem { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }

/* Kun når ny.js kører, gemmes noget væk til det afsløres. Uden JS står alt
   fremme fra starten. */
.js .vis { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--glid), transform 1s var(--glid); }
.js .vis.set { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .helt-tekst, .skærm-helt .vindue { animation: none; }
  .js .vis { opacity: 1; transform: none; transition: none; }
  .vindue, .trin-række a, .tilstande li { transition: none; }
}

/* ─── Mindre skærme ───────────────────────────────────────── */

@media (max-width: 1080px) {
  .kapitler a { padding: 8px 9px; font-size: 13px; }
  .regel-og-billede { grid-template-columns: 1fr; gap: 56px; }
  .fund-liste li { grid-template-columns: var(--dom-bredde, 170px) 1fr; }
  .fund-liste li > span:last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  :root { --bjælke-h: 104px; }
  .bjælke-ramme { flex-wrap: wrap; height: auto; padding-top: 12px; gap: 8px 16px; justify-content: space-between; }
  .kapitler {
    order: 3; width: calc(100% + 56px); margin: 0 -28px; padding: 2px 20px 8px;
    overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
  }
  .kapitler::-webkit-scrollbar { display: none; }
  .kapitler a { flex-shrink: 0; }
  .sprog-link { margin-left: auto; }   /* ved siden af Hent, ikke midt i rækken */
  .trin-række { grid-template-columns: 1fr; gap: 0; max-width: 420px; margin-left: auto; margin-right: auto; }
  .trin-række::before { left: 31px; right: auto; top: 32px; bottom: 58px; width: 2px; height: auto; background: linear-gradient(180deg, var(--z-materiale), var(--z-skriv), var(--z-efterprov), var(--z-godkend), var(--z-aflever)); }
  .trin-række a { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; text-align: left; align-items: center; padding: 10px 0; }
  .trin-nr { grid-row: span 2; }
  .trin-navn { margin-top: 0; align-self: end; }
  .trin-tekst { align-self: start; }
  .par, .tilstande, .hvem-gitter, .pris-gitter { grid-template-columns: 1fr; }
  /* Jeres data: kortene bliver til tre små faner over vinduet — skærmbilledet
     viser selv, hvad tilstanden gør. */
  .scene-data.levende .scene-sticky { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .scene-data.levende .tilstande { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .scene-data.levende .tilstande li { padding: 10px 6px; text-align: center; }
  .scene-data.levende[data-trin] .tilstande li[data-trin] { transform: none; }
  .scene-data.levende .tilstande p:not(.tilstand-ikon) { display: none; }
  .scene-data.levende .tilstand-ikon { font-size: 18px; margin-bottom: 4px; }
  .scene-data.levende .tilstande h3 { font-size: 0.95rem; margin: 0; }
  .scene-data.levende .scene-skærm { max-width: min(560px, calc((100vh - var(--bjælke-h) - 330px) / var(--f2))); }
  .scene-data .udbydere li { padding: 6px 12px; font-size: 13px; }
  .bånd-ramme { grid-template-columns: 1fr; gap: 20px; }
  .fund { padding: 32px 24px 12px; }
  .fund-liste li { grid-template-columns: 1fr; gap: 8px; }
  .fund-liste li > span:last-child { grid-column: auto; }
  .fod-note { margin-left: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .ramme, .skærm { padding-left: 20px; padding-right: 20px; }
  .skærm-lille, .skærm-mellem { padding: 0; }
  .helt { padding-top: 70px; }
  /* Så «til kommunikation.» kan stå på én linje, som <br> lægger op til */
  .helt h1 { font-size: 10.6vw; }
  .kapitel, .data, .hvem, .pris { padding-top: 120px; }
  .spalter { margin-top: 60px; gap: 34px; }
  .vindue { border-radius: 8px; }
  .vindue-bar { height: 22px; }
  .vindue-bar i { width: 8px; height: 8px; }
  .vindue-bar span { font-size: 10px; }
  .pris-kort { padding: 34px 26px 30px; }
}