/* Katalog-viser til fyrvaerkerikatalog.dk – samme udtryk som forsiden (Lato, natblå, lilla glød, glas). */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/fonts/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(../assets/fonts/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #010117; --ink: #fff; --muted: #b9b3dc; --accent: #9b7bff;
  --btn: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120));
  --glass: rgba(2, 2, 21, .17);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --top: 58px; --dock: 92px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #140128; color: var(--ink); overflow: hidden; }   /* = topbarens farve: iPhone farver området om kameraet efter den */
body { font: 400 15px/1.5 Lato, arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.kv {
  position: fixed; inset: 0; display: grid; grid-template-rows: var(--top) 1fr auto;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
  /* samme baggrund som forsiden: topbilledet over den mørke grundfarve */
  background: url("../assets/img/top-billede.webp") center top / auto no-repeat, var(--bg);
}
@media (max-width: 763px) { .kv { --bg: rgb(6, 0, 19); } }

/* ---------- topbar ---------- */
.kv-top {
  position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 18px;
  background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.kv-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.kv-back svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; }
.kv-logo, .kv-title h1 { font: italic 700 18px/1 Lato, arial, sans-serif; letter-spacing: 0; text-transform: uppercase; text-shadow: #000 1px 1px 1px; }
.kv-logo { font-size: 24px; letter-spacing: -.01em; }   /* samme størrelse som logoet på forsiden */
.kv-title { text-align: center; min-width: 0; }
.kv-title h1 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: #000 1px 1px 1px; }
.kv-title h1 span { font-weight: 700; }
.kv-title h1 em, .kv-title h1 span { font: inherit; color: inherit; }
.kv-count { position: absolute; z-index: 3; top: 10px; left: 20px; margin: 0; font: 400 12px/1 Lato, arial, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.kv-tools { justify-self: end; display: flex; gap: 6px; }
.kv-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .06); transition: background .3s;
}
.kv-btn:hover { background: rgba(255, 255, 255, .14); }
.kv-btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sider ---------- */
.kv-stage { position: relative; min-height: 0; }
.kv-track {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 22px 76px 30px; outline: none; overflow: hidden;
}
/* bogen – StPageFlip tegner sidevendingen */
.kv-book, .kv-book.stf__parent { position: relative; transform: translateX(var(--shift, 0px)); transition: opacity .35s var(--ease), transform .7s var(--ease); }
.kv-book.is-away, .kv-book.stf__parent.is-away { opacity: 0; transform: translateX(var(--shift, 0px)) scale(.96); pointer-events: none; }
.kv-book::before { /* skygge under bogen */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -6px; height: 40px; border-radius: 50%;
  background: rgba(0, 0, 0, .65); filter: blur(22px); pointer-events: none;
}
.kv-book .stf__parent { margin: 0 auto; }
.kv-page { background: #0d0a2a; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; }
.kv-page img { display: block; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.kv-page img.is-loaded { opacity: 1; }
.kv-page::before { /* skelet mens siden hentes */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .05) 50%, transparent 70%) 0 0 / 200% 100%, #0d0a2a;
  animation: kv-shimmer 1.4s linear infinite;
}
.kv-page.is-loaded::before { display: none; }
@keyframes kv-shimmer { to { background-position: -200% 0, 0 0; } }
/* ryg: let fold-skygge mod midten i opslag */
.stf__wrapper.--landscape .kv-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.stf__wrapper.--landscape .kv-page.is-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3)); }
.stf__wrapper.--landscape .kv-page.is-right:not([data-p="0"])::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .25)); }
.kv-pno { display: none; }

.kv-endslide { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 22px 76px 26px; }
.kv-endslide[hidden] { display: none; }
.kv-endslide.is-in { animation: kv-end-in .5s var(--ease) both; }
@keyframes kv-end-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

.kv-nav {
  position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: opacity .3s, background .3s, transform .3s var(--ease);
}
.kv-nav:hover { background: rgba(67, 16, 211, .45); transform: scale(1.06); }
.kv-nav[disabled] { opacity: 0; pointer-events: none; }
.kv-nav svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kv-prev { left: 14px; } .kv-next { right: 14px; }
.kv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.kv-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgb(67, 16, 211), var(--accent)); transition: width 1.4s cubic-bezier(.25, .1, .25, 1); }

/* ---------- slutside ---------- */
.kv-end { width: min(1000px, 100%); max-height: 100%; overflow-y: auto; padding: 8px 4px 20px; text-align: center; scrollbar-width: thin; }
.kv-end h2 { margin: 0 0 4px; font: italic 700 clamp(24px, 3.4vw, 34px)/1.15 Lato, arial, sans-serif; text-transform: uppercase; text-shadow: #000 1px 1px 1px; }
.kv-end > p { margin: 0 0 18px; color: var(--muted); }
.kv-end h3 { margin: 26px 0 14px; font: 700 12px/1 Lato, arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #d9ccff; }
.kv-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--btn); box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px; font: 700 12px Lato, arial, sans-serif; text-transform: uppercase; text-decoration: none; }
.kv-video {
  display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 20px; max-width: 640px; margin: 0 auto; padding: 16px 20px;
  border-radius: 10px; text-align: left; text-decoration: none; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background .3s, transform .4s var(--ease);
}
.kv-video:hover { background: rgba(67, 16, 211, .3); transform: translateY(-2px); }
.kv-video img { width: 100%; height: 110px; object-fit: contain; }
.kv-video strong { display: block; font: italic 700 20px/1.2 Lato, arial, sans-serif; text-transform: uppercase; }
.kv-video span { color: var(--muted); font-size: 14px; }
.kv-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px 18px; max-width: 900px; margin: 0 auto; }
.kv-rec { display: grid; justify-items: center; gap: 8px; text-decoration: none; }
.kv-rec img { width: 110px; aspect-ratio: 200 / 265; object-fit: cover; box-shadow: rgba(67, 16, 211, .45) -5px 5px 26px; transition: transform .5s var(--ease); }
.kv-rec:hover img { transform: translateY(-4px) scale(1.04); }
.kv-rec b { font: 700 12px/1.25 Lato, arial, sans-serif; text-transform: uppercase; }
.kv-rec small { color: var(--muted); font-size: 11px; margin-top: -6px; }

/* ---------- dock (Mac-agtig stribe med andre kataloger) ---------- */
.kv-dock { position: relative; z-index: 4; display: grid; justify-items: center; padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0)); pointer-events: none; }
.kv-dock-toggle { display: none; }
.kv-dock-shelf {
  pointer-events: auto; max-width: 100%; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
  padding: 26px 14px 8px; margin-top: -26px; /* plads til forstørrelse og navneskilt */
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.kv-dock-shelf::-webkit-scrollbar { display: none; }
.kv-dock-list {
  position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 8px 12px 10px; list-style: none; width: max-content;
  border-radius: 18px; background: rgba(20, 8, 50, .38);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -12px rgba(0, 0, 0, .7);
}
.kv-dock-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.kv-dock-item a { display: block; width: var(--w, 44px); transition: width .16s ease-out; }
.kv-dock-item img {
  display: block; width: 100%; aspect-ratio: 200 / 265; object-fit: cover; border-radius: 3px; background: #0d0a2a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55);
}
.kv-dock-item .kv-dot { width: 4px; height: 4px; margin-top: 4px; border-radius: 50%; background: transparent; }
.kv-dock-item.is-read .kv-dot { background: rgba(255, 255, 255, .55); }
.kv-dock-item.is-current .kv-dot { background: var(--accent); }
.kv-dock-label {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; pointer-events: none;
  padding: 5px 9px; border-radius: 5px; font: 700 11px/1 Lato, arial, sans-serif; text-transform: uppercase;
  background: rgba(8, 2, 30, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); opacity: 0; transition: opacity .2s, transform .2s;
}
.kv-dock-item:hover .kv-dock-label, .kv-dock-item a:focus-visible + .kv-dock-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.kv-dock-sep { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 2px; }
.kv-dock-sep::before { content: ""; flex: 1; width: 1px; background: rgba(255, 255, 255, .18); }
.kv-dock-sep span { font: italic 700 11px/1 Lato, arial, sans-serif; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); }

/* ---------- zoom ---------- */
.kv-zoomer { position: fixed; inset: 0; z-index: 20; background: rgba(1, 1, 23, .96); }
.kv-zoomer[hidden] { display: none; }
.kv-zoom-scroll { position: absolute; inset: 0; overflow: auto; cursor: grab; touch-action: pan-x pan-y; }
.kv-zoom-scroll.is-drag { cursor: grabbing; }
.kv-zoom-wrap { position: relative; width: calc(var(--z, 1.6) * 100vw); margin: 0 auto; }
.kv-zoom-scroll img { display: block; width: 100%; max-width: none; }
.kv-zoom-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0)); right: 12px; z-index: 2; width: 44px; height: 44px; background: rgba(255, 255, 255, .12); }
.kv-zoom-hint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 6px; font-size: 12px; color: var(--muted); background: rgba(8, 2, 30, .8); pointer-events: none; }

.kv-toast { position: fixed; left: 50%; top: 70px; z-index: 30; transform: translate(-50%, -10px); padding: 9px 14px; border-radius: 6px;
  background: rgba(8, 2, 30, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.kv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.kv-noscript { display: grid; gap: 12px; padding: 80px 12px; overflow: auto; height: 100%; }
.kv-noscript img { width: 100%; max-width: 800px; height: auto; margin: 0 auto; }

/* ---------- mobil / smalle skærme ---------- */
@media (max-width: 760px) {
  :root { --top: 52px; }
  .kv-top { grid-template-columns: auto 1fr auto; padding: 0 10px; gap: 8px; }
  .kv-logo { display: none; }
  .kv-title { text-align: left; }
  .kv-title h1 { font-size: 15px; }
  .kv-count { top: 6px; left: 12px; font-size: 11px; }
  .kv-tools .kv-btn { width: 34px; height: 34px; }
  #kv-full { display: none; }
  .kv-track { padding: 10px 8px 16px; }
  .kv-endslide { padding: 12px 10px 18px; }
  .kv-nav { display: none; }
  .kv-video { grid-template-columns: 1fr; text-align: center; }
  .kv-recs { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .kv-rec img { width: 88px; }
  .kv-dock-toggle {
    display: inline-flex; pointer-events: auto; margin-bottom: 6px; padding: 5px 12px; border: 0; border-radius: 99px; cursor: pointer;
    font: 700 11px/1 Lato, arial, sans-serif; text-transform: uppercase; background: rgba(20, 8, 50, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  }
  .kv-dock-toggle::after { content: " ▾"; }
  .kv-dock-toggle[aria-expanded="false"]::after { content: " ▴"; }
  .kv-dock.is-collapsed .kv-dock-shelf { display: none; }
  .kv-dock-shelf { padding-top: 8px; margin-top: 0; }
  .kv-dock-item a { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-endslide.is-in { animation: none; }
  .kv-page::before { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ---------- Nyhed-badge: guld-stjerneskud (bruges på nye kataloger) ---------- */
.fk-ny {
  --s: 58px; position: absolute; top: -14px; right: -14px; z-index: 6; width: var(--s); height: var(--s);
  display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(255, 194, 61, .35));
}
.fk-ny::before { /* stjerne med 14 takker, roterer langsomt */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 35% 30%, rgb(255, 244, 205), rgb(255, 194, 61) 45%, rgb(255, 128, 50));
  clip-path: polygon(50% 0%, 57.1% 15.5%, 71.7% 5.9%, 72.4% 22.9%, 89.5% 20.5%, 84.1% 36.7%, 100% 43.3%, 87.2% 54.7%,
    98.2% 68.7%, 81.5% 72.2%, 82.5% 89.3%, 67.3% 81.6%, 60.4% 97.3%, 50% 84%, 39.6% 97.3%, 32.7% 81.6%, 17.5% 89.3%,
    18.5% 72.2%, 1.8% 68.7%, 12.8% 54.7%, 0% 43.3%, 15.9% 36.7%, 10.5% 20.5%, 27.6% 22.9%, 28.3% 5.9%, 42.9% 15.5%);
  animation: fk-ny-spin 14s linear infinite;
}
.fk-ny::after { /* glimt der løber hen over */
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: fk-ny-shine 3.6s ease-in-out infinite 1s;
}
.fk-ny b {
  position: relative; z-index: 1; transform: rotate(-12deg);
  font: italic 900 calc(var(--s) * .2)/1 Lato, arial, sans-serif; letter-spacing: .02em; color: #2a0a48; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
@keyframes fk-ny-spin { to { transform: rotate(360deg); } }
@keyframes fk-ny-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.fk-ny--sm { --s: 34px; top: -9px; right: -9px; }
.fk-ny--xs { --s: 24px; top: -7px; right: -7px; }
.fk-ny--xs b { font-size: 6px; }
@media (prefers-reduced-motion: reduce) { .fk-ny::before, .fk-ny::after { animation: none; } }

.kv-dock-item a { position: relative; }
.kv-rec-cover { position: relative; display: block; }

/* 3D-bog (Real3D FlipBook) – egne knapper/menuer skjules, vores topbar og pile bruges */
.kv-r3d { position: absolute; inset: 0; transition: opacity .35s var(--ease); }
.kv-r3d.is-away { opacity: 0; pointer-events: none; }
.kv-r3d .flipbook-menuBottom, .kv-r3d .flipbook-menuTop, .kv-r3d .flipbook-nav, .kv-r3d .flipbook-currentPageHolder { display: none !important; }
.kv-r3d .flipbook-main-wrapper { background: transparent !important; }

/* ---------- fod med logo (som den gamle viser: lille, hvid tekst) ---------- */
.kv-foot { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap;
  min-height: 45px; padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0)); background: transparent; }
.kv-foot-logo { font: italic 700 15px/1 Lato, arial, sans-serif; color: #fff; text-decoration: none; white-space: nowrap; }
.kv-foot-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; font: 400 10px/1.4 Lato, arial, sans-serif; color: #fff; }
.kv-foot-links a { color: #fff; text-decoration: none; }
.kv-foot-links a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .kv-foot { justify-content: center; min-height: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)); }
  .kv-foot-links { display: none; }
}

/* ---------- sidste side alene / slut: siden til venstre, boks der glider ud inde fra under kataloget ---------- */
.kv-endgroup { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0; padding: 34px 40px; pointer-events: none; }
.kv-endgroup[hidden] { display: none; }
.kv-endgroup > * { pointer-events: auto; }
.kv-endcover { position: relative; z-index: 2; flex: none; opacity: 0; transition: opacity .35s var(--ease); }
.kv-endgroup.is-in .kv-endcover { opacity: 1; }
.kv-endcover img { display: block; max-height: calc(100vh - 220px); max-width: 40vw; width: auto; object-fit: contain; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); }
.kv-endgroup:has(.kv-glassbtn:not([hidden])) .kv-endcover img { filter: brightness(.82); }
.kv-glassbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; color: #fff; font: 700 15px/1 Lato, arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .28), 0 14px 34px -10px rgba(0, 0, 0, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: transform .25s var(--ease), background .25s; }
.kv-glassbtn[hidden] { display: none; }
.kv-glassbtn span { font-size: 19px; }
.kv-glassbtn:hover { background: rgba(255, 255, 255, .22); transform: translate(-50%, -50%) scale(1.04); }

.kv-siderecs { position: relative; z-index: 1; flex: none; width: min(380px, 34vw); max-height: 100%; overflow-y: auto; scrollbar-width: thin;
  margin-left: 22px; padding: 22px 20px 18px; border-radius: 0 16px 16px 0;
  background: rgba(14, 6, 40, .78); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px -18px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateX(calc(-100% - 40px));
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .3s, opacity .01s linear .3s; }
.kv-siderecs[hidden] { display: none; }
.kv-endgroup.is-in .kv-siderecs { opacity: 1; transform: none; }
.kv-side-kicker { margin: 0; font: 700 11px/1 Lato, arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #b9a2ff; }
.kv-siderecs h2 { margin: 6px 0 2px; font: italic 700 24px/1.1 Lato, arial, sans-serif; text-transform: uppercase; }
.kv-side-sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.kv-siderecs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kv-siderecs li, .kv-side-video { opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--ease), transform .55s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.75s + var(--i) * 70ms); }
.kv-endgroup.is-in .kv-siderecs li, .kv-endgroup.is-in .kv-side-video { opacity: 1; transform: none; }
.kv-siderecs ol a { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 7px 10px 7px 6px; border-radius: 10px; color: #fff; text-decoration: none; transition: background .25s; }
.kv-siderecs ol a:hover, .kv-siderecs ol a:focus-visible { background: rgba(255, 255, 255, .07); }
.kv-side-cover img { display: block; width: 46px; height: 61px; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 12px -6px #000; }
.kv-side-txt b { display: block; font: 700 15px/1.2 Lato, arial, sans-serif; }
.kv-side-txt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.kv-siderecs ol i { font-style: normal; color: #b9a2ff; transition: transform .25s; }
.kv-siderecs ol a:hover i { transform: translateX(3px); }
.kv-side-video { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin-top: 14px; padding: 8px; border-radius: 12px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.kv-side-video:hover { background: rgba(255, 255, 255, .1); }
.kv-side-video-img { position: relative; display: block; border-radius: 8px; overflow: hidden; background: #000; }
.kv-side-video-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kv-side-video-img b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.kv-side-video > span:last-child b { display: block; font: 700 14px/1.2 Lato, arial, sans-serif; }
.kv-side-video > span:last-child small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.kv-side-videolink { display: block; margin: 14px 6px 0; color: #d9ccff; font: 700 13px Lato, arial, sans-serif; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .kv-siderecs, .kv-siderecs li, .kv-side-video, .kv-endcover { transition: none; } }

/* gør det sværere at gemme siderne (iOS: intet 'Gem billede' ved langt tryk) */
.kv img, .kv canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ---------- produktvideoer: play-ikoner på siderne ---------- */
.kv-vids { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kv-vid {
  position: absolute; z-index: 1; display: grid; place-items: center; width: clamp(30px, 9%, 48px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto;
  background: rgba(20, 1, 40, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .2s var(--ease), background .2s;
}
.kv-vid::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(155, 123, 255, .75); animation: kv-ping 2.6s var(--ease) infinite; }
.kv-vid svg { width: 46%; height: 46%; fill: #fff; transform: translateX(8%); }
.kv-vid span {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  font: 700 12px/1.2 Lato, arial, sans-serif; color: #fff; background: rgba(10, 2, 30, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.kv-vid:hover, .kv-vid:focus-visible { transform: translate(-50%, -50%) scale(1.12); background: #6a3cff; }
.kv-vid:hover span, .kv-vid:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
@keyframes kv-ping { 0% { box-shadow: 0 0 0 0 rgba(155, 123, 255, .7); } 70%, 100% { box-shadow: 0 0 0 14px rgba(155, 123, 255, 0); } }
.kv-zoom-wrap .kv-vid { width: 54px; }

/* bjælke med opslagets videoer (virker også i 3D-bogen og på mobil) */
.kv-vbar {
  position: absolute; left: 50%; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 5px;
  overflow-x: auto; scrollbar-width: none; border-radius: 999px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: rgba(14, 4, 38, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s var(--ease);
}
.kv-vbar::-webkit-scrollbar { display: none; }
.kv-vbar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kv-vbar-t { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 8px 0 10px; font: 700 12px/1 Lato, arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kv-vbar-t svg { width: 14px; height: 14px; fill: var(--accent); }
.kv-vchip {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; padding: 0 12px 0 3px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 13px/1 Lato, arial, sans-serif; background: rgba(255, 255, 255, .08); transition: background .2s;
}
.kv-vchip:hover, .kv-vchip:focus-visible { background: #6a3cff; }
.kv-vchip img { width: 40px; height: 28px; border-radius: 999px; object-fit: cover; }
.kv-vchip:not(:has(img)) { padding-left: 12px; }

/* video-pop-op */
.kv-vmodal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(2, 0, 14, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.kv-vmodal.is-in { opacity: 1; }
.kv-vmodal[hidden] { display: none; }
.kv-vm-box { position: relative; width: min(960px, 100%, calc((100vh - 170px) * 16 / 9)); border-radius: 16px; overflow: hidden; background: #0b0626; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1); transform: translateY(14px) scale(.98); transition: transform .35s var(--ease); }
.kv-vmodal.is-in .kv-vm-box { transform: none; }
.kv-vm-frame { aspect-ratio: 16 / 9; background: #000; }
.kv-vm-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.kv-vm-info { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.kv-vm-k { margin: 0 0 3px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kv-vm-info h2 { margin: 0; font: italic 700 20px/1.2 Lato, arial, sans-serif; }
.kv-vm-link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 700; background: var(--btn); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.kv-vm-link:hover { background: #6a3cff; }
.kv-vm-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0, 0, 0, .55); }
@media (max-width: 600px) { .kv-vm-info { padding: 12px 14px; } .kv-vm-link { width: 100%; justify-content: center; } .kv-vbar { bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .kv-vid::before { animation: none; } }


/* ---------- Slutboks v2 (okt. 2026): rangliste med forsider, popularitetsbjælker og fremhævet nr. 1 ---------- */
.kv-siderecs { width: min(400px, 36vw); padding: 22px 20px 18px;
  background: radial-gradient(120% 55% at 100% 0%, rgba(124, 77, 255, .30), transparent 62%),
              radial-gradient(90% 45% at 0% 100%, rgba(255, 72, 160, .14), transparent 65%),
              rgba(12, 5, 34, .86); }
.kv-siderecs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 0 16px 0 0;
  background: linear-gradient(90deg, transparent, #9f7bff 30%, #ff5fb0 70%, transparent); opacity: .85; pointer-events: none; }
.kv-side-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 99px; font-size: 10px;
  background: rgba(185, 162, 255, .12); box-shadow: inset 0 0 0 1px rgba(185, 162, 255, .24); }
.kv-side-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5fb0;
  box-shadow: 0 0 0 3px rgba(255, 95, 176, .2), 0 0 10px #ff5fb0; animation: kvPulse 2.4s ease-in-out infinite; }
@keyframes kvPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 95, 176, 0), 0 0 14px #ff5fb0; } }
.kv-siderecs h2 { margin: 12px 0 3px; font-size: 26px; line-height: 1.02; letter-spacing: -.01em; }
.kv-siderecs h2 span { display: inline; background: linear-gradient(92deg, #fff 10%, #dccbff 55%, #ff9fd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kv-sr { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.kv-sr li { position: relative; }
.kv-siderecs .kv-sr a { position: relative; grid-template-columns: 22px 48px 1fr 30px; gap: 12px; padding: 7px 8px 7px 4px; border-radius: 12px;
  transition: background .25s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.kv-siderecs .kv-sr a:hover, .kv-siderecs .kv-sr a:focus-visible { background: rgba(255, 255, 255, .06); transform: translateX(2px); }
.kv-sr li:not(.is-top) + li::before { content: ""; position: absolute; left: 38px; right: 8px; top: -1px; height: 1px; background: rgba(255, 255, 255, .07); }
.kv-sr-rank { font: italic 800 22px/1 Lato, arial, sans-serif; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(185, 162, 255, .6); }
.kv-sr .kv-side-cover { position: relative; display: block; perspective: 420px; }
.kv-sr .kv-side-cover img { width: 48px; height: 64px; border-radius: 2px 4px 4px 2px; transform: rotateY(-14deg); transform-origin: left center;
  box-shadow: 0 12px 18px -8px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.kv-sr .kv-side-cover::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px 0 0 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .2) 60%, transparent); }
.kv-sr a:hover .kv-side-cover img, .kv-sr a:focus-visible .kv-side-cover img { transform: rotateY(0) translateY(-2px) scale(1.05); }
.kv-sr .kv-side-txt b { font-size: 16px; }
.kv-sr .kv-side-txt small { font-size: 12.5px; }
.kv-side-txt em { display: inline-block; margin-bottom: 5px; padding: 3px 8px; border-radius: 99px; font: 800 9px/1.3 Lato, arial, sans-serif; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #7c4dff, #ff4fa3); }
.kv-sr-bar { display: block; height: 3px; max-width: 150px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kv-sr-bar span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, #7c4dff, #ff5fb0);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(1s + var(--i, 0) * 90ms); }
.kv-endgroup.is-in .kv-sr-bar span { transform: none; }
.kv-siderecs .kv-sr i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #cdbaff;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .25s, color .25s, transform .25s; }
.kv-siderecs .kv-sr a:hover i, .kv-siderecs .kv-sr a:focus-visible i { background: #7c4dff; color: #fff; transform: translateX(2px); box-shadow: 0 6px 16px -6px #7c4dff; }
.kv-sr .is-top { margin-bottom: 6px; }
.kv-siderecs .kv-sr .is-top a { grid-template-columns: 22px 54px 1fr 30px; padding: 10px 10px 10px 4px;
  background: linear-gradient(100deg, rgba(124, 77, 255, .24), rgba(255, 95, 176, .08) 70%, rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(185, 162, 255, .24), 0 14px 30px -18px rgba(124, 77, 255, .9); }
.kv-sr .is-top .kv-side-cover img { width: 54px; height: 72px; }
.kv-sr .is-top .kv-sr-rank { -webkit-text-stroke: 0; background: linear-gradient(180deg, #fff, #b9a2ff); -webkit-background-clip: text; background-clip: text; font-size: 26px; }
.kv-sr .is-top .kv-side-txt b { font-size: 18px; }
.kv-side-videolink { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .25s, box-shadow .25s; }
.kv-side-videolink::before { content: "▶"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding-left: 2px; border-radius: 50%;
  font-size: 9px; background: linear-gradient(135deg, #7c4dff, #ff5fb0); box-shadow: 0 4px 12px -4px #ff5fb0; }
.kv-side-videolink:hover, .kv-side-videolink:focus-visible { background: rgba(124, 77, 255, .3); box-shadow: inset 0 0 0 1px rgba(185, 162, 255, .4); }
@media (prefers-reduced-motion: reduce) { .kv-sr-bar span { transition: none; transform: none; } .kv-side-kicker::before { animation: none; } }