/* live.css — fælles udseende for de interaktive slide-moduler.
 * Bruger deckets egne tokens (--ink, --accent, --accent2 ...), så modulerne
 * arver farverne fra det deck de ligger i. Falder tilbage til petrol-paletten. */

.live-vote,
.klapometer {
  --lv-ink: var(--ink, #eee7d7);
  --lv-soft: var(--ink-soft, #8fa5a3);
  --lv-accent: var(--accent, #d9b586);
  --lv-accent2: var(--accent2, #7fd0c8);
  --lv-groen: #46d6a0;
  --lv-linje: var(--line, rgba(238, 231, 215, .14));
}

/* ══════════════════════════════════════════════════════════════════════════
   Afstemning
   ══════════════════════════════════════════════════════════════════════════ */

.live-vote { margin-top: 2.4rem; }

/* Personligt spørgsmål før, "hvor er alle andre" bagefter (2026-09-02).
   .lv-ask og .lv-reveal er valgfrie hjælpe-klasser: sæt dem på en
   eyebrow/overskrift ved siden af en .live-vote, så teksten selv skifter
   registrer fra "hvor er DU" (før stemmen er afgivet) til "hvor er ALLE
   ANDRE" (når live.js sætter .viser-tal på .live-vote efter første klik).
   Kræver intet deck-lokalt script - ren CSS via :has(). */
.lv-reveal { display: none; }
.inner:has(.live-vote.viser-tal) .lv-ask { display: none; }
.inner:has(.live-vote.viser-tal) .lv-reveal { display: block; }

.lv-kort {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.8rem);
  grid-template-columns: repeat(var(--lv-antal, 2), minmax(0, 1fr));
  align-items: stretch;
}

.lv-valg {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lv-linje);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  min-height: 0;
  transition: border-color .35s ease, transform .35s ease;
}

/* Selve søjlen: kortet fyldes nedefra i takt med stemmerne. */
.lv-fyld {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(217, 181, 134, .30), rgba(217, 181, 134, .13));
  border-top: 2px solid var(--lv-accent);
  transition: height .8s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 0;
}
.lv-valg:nth-child(2) .lv-fyld {
  background: linear-gradient(180deg, rgba(127, 208, 200, .28), rgba(127, 208, 200, .12));
  border-top-color: var(--lv-accent2);
}
.lv-valg:nth-child(3) .lv-fyld {
  background: linear-gradient(180deg, rgba(70, 214, 160, .26), rgba(70, 214, 160, .11));
  border-top-color: var(--lv-groen);
}
.lv-valg:nth-child(4) .lv-fyld {
  background: linear-gradient(180deg, rgba(238, 231, 215, .22), rgba(238, 231, 215, .09));
  border-top-color: var(--lv-ink);
}

.lv-valg > *:not(.lv-fyld) { position: relative; z-index: 1; }

.lv-valg.forrest { border-color: rgba(217, 181, 134, .55); }

.lv-bogstav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 3.4vw, 2.6rem);
  height: clamp(2rem, 3.4vw, 2.6rem);
  margin: 0 auto .5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lv-accent) 20%, transparent);
  border: 1.5px solid var(--lv-accent);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--lv-accent);
}
.lv-valg:nth-child(2) .lv-bogstav { background: color-mix(in srgb, var(--lv-accent2) 20%, transparent); border-color: var(--lv-accent2); color: var(--lv-accent2); }
.lv-valg:nth-child(3) .lv-bogstav { background: color-mix(in srgb, var(--lv-groen) 20%, transparent); border-color: var(--lv-groen); color: var(--lv-groen); }
.lv-valg:nth-child(4) .lv-bogstav { background: color-mix(in srgb, var(--lv-ink) 20%, transparent); border-color: var(--lv-ink); color: var(--lv-ink); }

.lv-qr {
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.lv-qr svg { display: block; width: 100%; height: 100%; }

.lv-label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center;
}
/* Navn stort og fedt, beskrivelse mindre og dæmpet - to niveauer, ikke én
   lang sætning i samme vægt (afkodes hurtigere i et blik fra salen). */
.lv-label-name {
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}
.lv-label-desc {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 450;
  line-height: 1.4;
  /* Var var(--lv-soft). Den er daempet nok til en QR-kode-undertekst, men for
     svag naar linjen er en hel saetning, salen skal kunne laese bagerst i
     lokalet. Loeftet mod ink uden at naa navnets hvide. */
  color: color-mix(in srgb, var(--lv-ink) 82%, transparent);
}
/* Label uden " · " (ingen navn/beskrivelse-split) falder tilbage til det
   gamle, ensartede udseende. */
/* David 16/9-2026: "at det alt staar i fed er ikke optimalt". 750 over fire
   hele saetninger blev til en mur. Vaegten er nede paa 600 og linjeafstanden op,
   saa en label uden " · " stadig kan laeses i et blik. Vil man have hierarki,
   er det " · "-delingen ovenfor der loeser det, ikke mere fed. */
.lv-label:not(:has(.lv-label-name)) {
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
}

.lv-tal {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.live-vote.viser-tal .lv-tal { opacity: 1; transform: none; }

.lv-pct {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lv-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lv-valg:nth-child(2) .lv-pct { color: var(--lv-accent2); }
.lv-valg:nth-child(3) .lv-pct { color: var(--lv-groen); }
.lv-valg:nth-child(4) .lv-pct { color: var(--lv-ink); }
.lv-antal-tekst { font-size: clamp(.85rem, 1.1vw, 1rem); color: var(--lv-soft); font-variant-numeric: tabular-nums; }

/* Efter første klik: QR'en trækker sig sammen, tallene tager pladsen. */
.live-vote.viser-tal .lv-qr { width: clamp(74px, 8vw, 116px); }

.lv-bund {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(.85rem, 1.15vw, 1.05rem);
  color: var(--lv-soft);
}
.lv-ialt strong { color: var(--lv-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.lv-status { display: flex; align-items: center; gap: .5rem; }
.lv-prik {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lv-groen);
  box-shadow: 0 0 0 0 rgba(70, 214, 160, .55);
  animation: lv-puls 2.2s infinite;
}
@keyframes lv-puls {
  0%   { box-shadow: 0 0 0 0 rgba(70, 214, 160, .5); }
  70%  { box-shadow: 0 0 0 12px rgba(70, 214, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 214, 160, 0); }
}
.lv-prik.doed { background: #d1685c; animation: none; }
.lv-prik.pause { background: var(--lv-accent); animation: none; }

.lv-hint { font-size: clamp(.8rem, 1.05vw, .95rem); color: var(--lv-soft); }
.lv-hint b { color: var(--lv-accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .lv-fyld, .lv-qr, .lv-tal { transition: none; }
  .lv-prik { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Klapometer
   ══════════════════════════════════════════════════════════════════════════ */

.klapometer {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.klap-maaler {
  position: relative;
  /* Bredden er bundet til den ledige HØJDE, så måleren aldrig skubber
     overskriften ud af sliden på en lav projektor-opløsning. */
  width: min(58vw, 540px, calc(33vh * 1.55));
  aspect-ratio: 340 / 220;
  max-width: 100%;
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
/* Når bonussen er låst op, træder måleren et skridt tilbage og giver plads. */
.klapometer.laast-op .klap-maaler { width: min(38vw, 340px, calc(20vh * 1.55)); }
.klap-maaler svg { display: block; width: 100%; height: 100%; overflow: visible; }

.klap-bue-bund { stroke: rgba(238, 231, 215, .12); }
.klap-bue-fyld { stroke: url(#klapGrad); transition: stroke-dashoffset .1s linear; }
.klap-rekord-linje { stroke: var(--lv-accent); stroke-dasharray: 3 4; opacity: .8; }
.klap-top { stroke: var(--lv-ink); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
.klapometer.maalt .klap-top { opacity: 1; }
.klapometer.rekord .klap-top { stroke: var(--lv-accent); }
.klapometer.laast-op .klap-top { stroke: var(--lv-groen); }

.klap-score {
  position: absolute;
  left: 0; right: 0; top: 62%;
  transform: translateY(-50%);
  text-align: center;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--lv-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.klapometer.rekord .klap-score { color: var(--lv-accent); }
.klapometer.laast-op .klap-score { color: var(--lv-groen); }

.klap-besked {
  margin-top: .9rem;
  min-height: 2.5em;
  font-size: clamp(1.1rem, 2.1vw, 1.7rem);
  font-weight: 650;
  text-align: center;
  color: var(--lv-soft);
  max-width: 26ch;
  transition: color .4s ease;
}
.klapometer.laast-op .klap-besked { color: var(--lv-groen); }

.klap-rekord-tekst {
  margin-top: .5rem;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  color: var(--lv-soft);
  letter-spacing: .04em;
}
.klap-rekord-tekst b { color: var(--lv-accent); font-weight: 750; }

.klap-knap {
  margin-top: 1.1rem;
  border: 1px solid rgba(217, 181, 134, .5);
  background: rgba(217, 181, 134, .12);
  color: var(--lv-ink);
  font: inherit;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.klap-knap:hover { background: rgba(217, 181, 134, .22); transform: translateY(-2px); }
.klap-knap[hidden] { display: none; }

.klap-fejl { margin-top: 1rem; font-size: .95rem; color: #e8a598; max-width: 44ch; text-align: center; }

/* Bonussen fylder INTET før den er låst op — ellers skubber den overskriften
   ud af sliden, uden at man kan se hvorfor. */
.klap-bonus {
  max-width: 46ch;
  text-align: center;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: max-height .7s ease, margin-top .7s ease, opacity .7s ease,
              transform .7s cubic-bezier(.22, 1, .36, 1);
}
.klapometer.laast-op .klap-rekord-tekst,
.klapometer.laast-op .klap-knap { display: none; }
/* Ranglisten bliver staaende (det er pointen), men i kompakt form saa den og
   bonussen kan vaere paa sliden samtidig. */
.klapometer.laast-op .klap-rang { margin-top: .35rem; gap: 0; }
.klapometer.laast-op .klap-rang-hoved { display: none; }
.klapometer.laast-op .klap-rang-raekke { padding: .04rem .1rem; }
.klapometer.laast-op .krr-navn,
.klapometer.laast-op .krr-score,
.klapometer.laast-op .krr-nr { font-size: .86rem; }

.klapometer.laast-op .klap-bonus {
  max-height: 42vh;
  overflow-y: auto;
  margin-top: 1.6rem;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.klap-konfetti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
  .klap-bue-fyld, .klap-bonus { transition: none; }
}

/* ===========================================================================
   .live-resultat — samme afstemning i flere grafiske former.
   Hvert klik skifter form; tallene opdaterer fortsat live under det hele.
   =========================================================================== */
.live-resultat{margin-top:2.2vh;display:flex;flex-direction:column;gap:1.2rem}
.lr-scene{min-height:44vh;display:flex;align-items:center;justify-content:center}
.lr-trin{display:none}

/* form: søjler */
.lr-soejler{display:flex;gap:2.2vw;align-items:flex-end;justify-content:center;width:100%;height:44vh}
.lr-soejle{flex:1 1 0;max-width:190px;display:flex;flex-direction:column;align-items:center;height:100%}
.lr-s-tal{font-size:clamp(1.4rem,2.6vw,2.3rem);font-weight:800;color:#eee7d7;margin-bottom:.4rem;line-height:1}
.lr-soejle.forrest .lr-s-tal{color:#d9b586}
.lr-s-spor{flex:1 1 auto;width:100%;display:flex;align-items:flex-end;
  background:rgba(238,231,215,.05);border-radius:14px;overflow:hidden}
.lr-s-fyld{width:100%;border-radius:14px;transition:height .7s cubic-bezier(.2,.9,.2,1);min-height:4px}
.lr-s-label{margin-top:.7rem;font-size:clamp(.95rem,1.4vw,1.2rem);font-weight:700;color:#eee7d7;text-align:center;line-height:1.2}
.lr-s-antal{font-size:.85rem;color:#8fa5a3;margin-top:.15rem}

/* form: salen som prikker */
.lr-salen{display:flex;gap:2.4vw;justify-content:center;align-items:flex-start;width:100%}
.lr-gruppe{flex:1 1 0;max-width:32%;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lr-prikker{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:center;
  min-height:30vh;max-height:34vh;overflow:hidden;width:100%}
.lr-prikker i{width:clamp(12px,1.35vw,20px);height:clamp(12px,1.35vw,20px);border-radius:50%;display:block;
  animation:lrpop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes lrpop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.lr-g-label{font-size:clamp(.95rem,1.4vw,1.2rem);color:#eee7d7;text-align:center;line-height:1.3}
.lr-g-label b{font-size:1.3em;display:block}

/* form: ring */
.lr-ring{position:relative;width:min(38vh,320px);aspect-ratio:1}
.lr-ring svg{width:100%;height:100%;display:block}
.lr-seg{transition:stroke-dasharray .7s cubic-bezier(.2,.9,.2,1),stroke-dashoffset .7s cubic-bezier(.2,.9,.2,1)}
.lr-ring-midt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lr-ring-midt b{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:#eee7d7;line-height:1}
.lr-ring-midt span{font-size:.95rem;color:#8fa5a3;margin-top:.2rem;max-width:9ch;line-height:1.2}
.lr-scene[data-form="ring"]{gap:3vw}

/* form: stablet bånd */
.lr-baand{display:flex;width:100%;height:12vh;min-height:74px;border-radius:16px;overflow:hidden;
  background:rgba(238,231,215,.05)}
.lr-b-del{display:flex;align-items:center;justify-content:center;transition:width .7s cubic-bezier(.2,.9,.2,1)}
.lr-b-del span{font-weight:800;font-size:clamp(1rem,1.8vw,1.5rem);color:#0f2e33}

/* fælles tegnforklaring */
.lr-tegn{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.lr-tegn span{display:flex;align-items:center;gap:.5rem;font-size:.98rem;color:#8fa5a3}
.lr-tegn i{width:12px;height:12px;border-radius:3px;display:block}
.lr-tegn b{color:#eee7d7}
.lr-scene[data-form="ring"],.lr-scene[data-form="baand"]{flex-direction:column;gap:1.2rem}

/* bundlinje med formvælger */
.lr-bund{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  border-top:1px solid rgba(238,231,215,.14);padding-top:.9rem}
.lr-ialt{font-size:1.05rem;color:#8fa5a3}
.lr-ialt strong{color:#eee7d7;font-size:1.35em;font-weight:800}
.lr-faner{display:flex;gap:.45rem}
.lr-fane{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:#5e7573;border:1px solid rgba(238,231,215,.14);border-radius:999px;padding:.32rem .8rem;transition:.2s}
.lr-fane.paa{color:#12292e;background:#d9b586;border-color:#d9b586}
.live-resultat.lr-demo .lr-bund::after{content:"DEMOTAL";font-size:.72rem;font-weight:800;
  letter-spacing:.16em;color:#d9b586}

@media(max-width:820px){
  .lr-soejler{gap:3vw}
  .lr-salen{flex-direction:column;align-items:center}
  .lr-gruppe{max-width:100%}
}

/* ===========================================================================
   Klapometer-rangliste
   =========================================================================== */
.klap-rang{width:min(560px,92%);margin:.6rem auto 0;display:flex;flex-direction:column;gap:.12rem}
.klap-rang-hoved{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:#5e7573;margin-bottom:.2rem}
.klap-rang-raekke{display:grid;grid-template-columns:1.6em 1fr 5.5em 2.4em;align-items:center;gap:.7rem;
  padding:.16rem .1rem;border-radius:8px;transition:background .3s}
.krr-nr{font-variant-numeric:tabular-nums;font-weight:800;color:#5e7573;font-size:.9rem;text-align:right}
.krr-navn{font-size:.95rem;color:#8fa5a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krr-spor{height:6px;border-radius:999px;background:rgba(238,231,215,.09);overflow:hidden}
.krr-spor i{display:block;height:100%;border-radius:999px;background:rgba(238,231,215,.3);
  transition:width .6s cubic-bezier(.2,.9,.2,1)}
.krr-score{font-variant-numeric:tabular-nums;font-weight:800;color:#8fa5a3;font-size:.95rem;text-align:right}
.klap-rang-raekke.os{background:rgba(217,181,134,.13)}
.klap-rang-raekke.os .krr-nr,.klap-rang-raekke.os .krr-score{color:#d9b586}
.klap-rang-raekke.os .krr-navn{color:#eee7d7;font-weight:750}
.klap-rang-raekke.os .krr-spor i{background:linear-gradient(90deg,#7fd0c8,#d9b586)}

/* ===========================================================================
   Klapometer-laage: to plader glider fra hinanden, sliden suges ind i
   spraekken, og bonussen lander som fuldskaerms-reveal (One More Thing).
   Bonussen ligger i et overlay - aldrig i slidens flow - saa den kan ikke
   skubbe overskriften ud, uanset hvor meget indhold der er i den.
   =========================================================================== */
.klap-laage{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.kl-plade{position:absolute;top:0;bottom:0;width:50.5%;
  background:linear-gradient(180deg,#143a40,#0f2e33 60%,#0b2226);
  box-shadow:0 0 60px rgba(0,0,0,.6);
  transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.kl-v{left:0;border-right:1px solid rgba(217,181,134,.5)}
.kl-h{right:0;border-left:1px solid rgba(217,181,134,.5)}
.klap-laage.aaben .kl-v{transform:translateX(-100%)}
.klap-laage.aaben .kl-h{transform:translateX(100%)}
.kl-lys{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,#ffe9c4,#d9b586,transparent);
  opacity:0;filter:blur(1px)}
.klap-laage.aaben .kl-lys{animation:kl-lys 1.15s ease-out forwards}
@keyframes kl-lys{
  0%{opacity:0;width:3px;filter:blur(1px)}
  22%{opacity:1;width:10px;filter:blur(3px)}
  100%{opacity:0;width:70vw;filter:blur(40px)}}

/* selve suget: sliden trækkes ind mod spraekken */
.slide.suges .inner{animation:kl-sug 620ms cubic-bezier(.6,0,.9,.4) forwards}
@keyframes kl-sug{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  100%{transform:scale(.34);opacity:0;filter:blur(7px)}}
.slide.afsloeret .inner{opacity:0;pointer-events:none}

.klap-reveal{position:absolute;inset:0;z-index:61;display:flex;align-items:center;
  justify-content:center;padding:7vh 8vw;opacity:0;pointer-events:none}
.klap-reveal.inde{opacity:1;pointer-events:auto;animation:kl-ind .85s cubic-bezier(.2,1,.3,1) both}
@keyframes kl-ind{
  from{opacity:0;transform:scale(1.5);filter:blur(12px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}}
.klap-reveal-indhold{width:100%;max-width:var(--maxw,1180px)}
/* bonussen er nu i overlayet - fold den helt ud og fjern max-height-spaerren.
   Klapometeret centrerer sit indhold; i reveal'et skal teksten saette sig som
   en almindelig slide, altsaa venstrestillet og i fuld bredde. */
.klap-reveal .klap-bonus{max-height:none!important;opacity:1!important;overflow:visible!important;
  margin:0!important;transform:none!important;text-align:left;width:100%}
.klap-reveal .klap-bonus h2{margin-bottom:.2rem}
.klap-reveal .klap-bonus .lede,
.klap-reveal .klap-bonus .body{margin-left:0;margin-right:0}
.klap-reveal .klap-bonus .source{position:static;left:auto;bottom:auto;max-width:none}
@media (prefers-reduced-motion:reduce){
  .kl-plade{transition-duration:.01ms}
  .slide.suges .inner,.klap-reveal.inde,.klap-laage.aaben .kl-lys{animation-duration:.01ms}
}

/* ===========================================================================
   scene.js — skaermlaas-status og scene-tjek
   =========================================================================== */
.scene-status{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-right:.35rem;
  background:#5e7573;transition:background .3s,box-shadow .3s}
.scene-status[data-tilstand="paa"]{background:#46d6a0;box-shadow:0 0 10px rgba(70,214,160,.65)}
.scene-status[data-tilstand="nej"]{background:#8a5a5a}

.scene-tjek{position:fixed;left:50%;bottom:4vh;z-index:80;width:min(430px,88vw);
  transform:translate(-50%,18px);opacity:0;transition:opacity .35s ease,transform .35s ease;
  background:linear-gradient(160deg,#143a40,#0f2e33);border:1px solid rgba(217,181,134,.42);
  border-radius:16px;padding:1.05rem 1.25rem;box-shadow:0 18px 46px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:.42rem;color:#eee7d7;
  font:inherit;font-size:.93rem;line-height:1.42}
.scene-tjek.vis{opacity:1;transform:translate(-50%,0)}
.scene-tjek b{color:#fff}
.scene-tjek > b:first-child{font-size:1.02rem;letter-spacing:.01em}
.scene-tjek .st-ok{color:#8fa5a3;padding-left:1.35em;position:relative}
.scene-tjek .st-ok::before{content:"\2713";position:absolute;left:0;color:#46d6a0;font-weight:800}
.scene-tjek .st-hus{color:#8fa5a3;padding-left:1.35em;position:relative}
.scene-tjek .st-hus::before{content:"\21D2";position:absolute;left:0;color:#d9b586;font-weight:800}
.scene-tjek .st-luk{align-self:flex-start;margin-top:.5rem;font:inherit;font-weight:750;
  font-size:.88rem;color:#12292e;background:#d9b586;border:0;border-radius:999px;
  padding:.42rem 1.05rem;cursor:pointer}
.preview-mode .scene-tjek,.preview-mode .scene-status{display:none!important}

/* tastbar vej ved siden af QR-koden - ikke alle kan eller vil scanne */
.lv-hint{display:flex;flex-direction:column;gap:.18rem;text-align:center;line-height:1.35}
.lv-tast{font-size:.86em;color:#5e7573}
.lv-tast b{font-family:ui-monospace,Menlo,Consolas,monospace;color:#8fa5a3;font-weight:700}