/* Ny menu: sticky glas-menubar + mega-paneler. Lato som resten af sitet. */
.fkm { position: sticky; top: 0; z-index: 100000; font-family: Lato, arial, sans-serif; transition: transform .5s cubic-bezier(.6, 0, .4, 1); }
.fkm.is-hidden { transform: translateY(-100%); }
.fkm-bar {
  position: relative; height: 77px; width: 1200px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
/* glasset ligger i fuld bredde bag baren */
.fkm::before { /* glas */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(2, 2, 21, .17);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  opacity: 0; transition: opacity .7s cubic-bezier(.22, .61, .36, 1) .05s;
}
.fkm.is-scrolled::before, .fkm.is-open::before { opacity: 1; }

.fkm-logo {
  justify-self: start; color: #fff !important; text-decoration: none !important;
  font: italic 700 25px/33px Lato, arial, sans-serif; text-shadow: rgb(0, 0, 0) 1px 1px 1px; white-space: nowrap;
}
.fkm-nav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fkm-top {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 0; background: none; cursor: pointer; color: #fff; font: 700 15px Lato, arial, sans-serif; letter-spacing: .02em;
  text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 1px;
}
.fkm-top svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s; }
.fkm-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.fkm-top::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; transform: translateX(-50%) scale(0); transition: transform .3s cubic-bezier(.6, 0, .4, 1);
}
.fkm-top:hover::after, .fkm-top[aria-expanded="true"]::after { transform: translateX(-50%) scale(1); }
.fkm-top:focus-visible, .fkm a:focus-visible, .fkm-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.fkm-tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.fkm-fbbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 4px;
  color: #fff !important; text-decoration: none !important; font: 700 12px Lato, arial, sans-serif; text-transform: uppercase;
  background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120)); box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px 0px;
}
.fkm-fbbtn svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; }
.fkm-burger { display: none; }

/* mega-paneler */
.fkm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  /* glasbaggrund: siden skinner sløret igennem */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 38%),
    rgba(6, 2, 26, .38);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .6);
  /* blød, langsom åbning: panelet rulles ned ovenfra og toner frem */
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: clip-path .75s cubic-bezier(.22, .61, .36, 1), opacity .6s ease, visibility 0s linear .75s;
}
.fkm-panel.is-active {
  visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path .75s cubic-bezier(.22, .61, .36, 1), opacity .5s ease, visibility 0s;
}
/* indholdet glider stille på plads lidt efter panelet */
.fkm-panel .fkm-inner { opacity: 0; transform: translateY(-12px); transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.fkm-panel.is-active .fkm-inner { opacity: 1; transform: none; transition: opacity .7s ease .18s, transform .8s cubic-bezier(.22, .61, .36, 1) .18s; }
.fkm-inner { width: 1200px; margin: 0 auto; padding: 28px 0 36px; }
.fkm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.fkm-kicker { margin: 0; color: #d9ccff; text-shadow: rgba(0,0,0,.6) 0 1px 2px; font: 700 12px Lato, arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.fkm-all { color: #fff !important; font: 700 13px Lato, arial, sans-serif; text-decoration: none !important; opacity: .8; }
.fkm-all:hover { opacity: 1; }
.fkm a { text-decoration: none !important; }

.fkm-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 8px; }
.fkm-tile, .fkm-year { display: grid; justify-items: center; gap: 8px; color: #fff !important; }
.fkm-cover { display: block; width: 90px; height: 120px; overflow: hidden; box-shadow: rgba(67, 16, 211, .5) -5px 5px 30px 0px; transition: transform .6s ease; }
.fkm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fkm-tile:hover .fkm-cover, .fkm-year:hover .fkm-cover { transform: scale(1.06); }
.fkm-name { text-shadow: rgba(0,0,0,.7) 0 1px 2px; font: 700 12px Lato, arial, sans-serif; text-transform: uppercase; text-align: center; }

.fkm-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* stakke/vifter (årstal og brands) – folder ud ved hover.
   --k = plads (-2..2), --a = afstand fra midten, --z = stabel-orden; mål styres pr. sammenhæng */
.fkm-fan {
  --cw: 96px; --ch: 128px; --step: 20px; --rot: 8deg; --hstep: 48px; --hrot: 13deg; --lift: 18px;
  position: relative; display: block; width: 260px; height: 194px;
}
.fkm-fan-c {
  position: absolute; left: 50%; bottom: 14px; width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2); overflow: hidden;
  z-index: var(--z); transform-origin: 50% 100%;
  transform: translate(calc(var(--k) * var(--step)), calc(var(--a) * 4px - var(--lift) / 2)) rotate(calc(var(--k) * var(--rot)));
  box-shadow: rgba(67, 16, 211, .45) -5px 5px 26px 0px, rgba(0, 0, 0, .5) 0 6px 14px;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) calc(var(--a) * .03s);
}
.fkm-fan-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fkm-year:hover .fkm-fan-c, .fkm-year:focus-visible .fkm-fan-c,
.fkm-tile:hover .fkm-fan-c, .fkm-tile:focus-visible .fkm-fan-c {
  transform: translate(calc(var(--k) * var(--hstep)), calc(var(--a) * 8px - var(--lift))) rotate(calc(var(--k) * var(--hrot)));
}
.fkm-year:hover .fkm-fan-m, .fkm-tile:hover .fkm-fan-m { transform: translate(calc(var(--k) * var(--hstep)), calc(var(--lift) * -1)) scale(1.05); }
/* brands: mindre stakke */
.fkm-tile .fkm-fan { --cw: 72px; --ch: 96px; --step: 12px; --rot: 7deg; --hstep: 28px; --hrot: 11deg; --lift: 12px; width: 190px; height: 142px; }
/* panelet åbner: kortene folder sig selv ud én gang */
.fkm-panel.is-active .fkm-fan-c { animation: fkm-fan-open .9s cubic-bezier(.22, .61, .36, 1) calc(.15s + var(--a) * .08s) backwards; }
@keyframes fkm-fan-open { from { transform: translate(0, 0) rotate(0deg); } }
.fkm-ph { display: grid; place-items: center; text-align: center; padding: 8px; box-sizing: border-box; background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120)); font: italic 700 13px/1.2 Lato, arial, sans-serif; text-transform: uppercase; color: rgba(255,255,255,.8); }
.fkm-big { font: italic 700 26px/1 Lato, arial, sans-serif; text-shadow: rgb(0, 0, 0) 1px 1px 1px; }
.fkm-sub { font: 300 12px Lato, arial, sans-serif; color: #d8d2ff; }

.fkm-vids { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 56px; padding: 6px 12px 0; }
.fkm-vid { display: grid; justify-items: center; gap: 10px; color: #fff !important; }
.fkm-vid img { width: 100%; max-width: 170px; height: 82px; object-fit: contain; transition: transform .6s ease; }
.fkm-vid:hover img { transform: scale(1.05); }

.fkm-fyrv { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.fkm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.fkm-link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 6px; color: #fff !important; transition: background .3s; }
.fkm-link:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fkm-lt { font: 700 15px Lato, arial, sans-serif; color: #fff; }
.fkm-ld { font: 300 13px/1.4 Lato, arial, sans-serif; color: #e4dfff; text-shadow: rgba(0,0,0,.6) 0 1px 2px; }
.fkm-fb { display: grid; gap: 6px; padding: 14px; border-radius: 6px; background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120)); box-shadow: rgba(67, 16, 211, .45) -5px 5px 40px 0px; color: #fff !important; }
.fkm-fb img { width: 100%; border-radius: 4px; }

.fkm-drawer { display: none; }

/* Landingis sektion under menuen startede før ved y=77 – menuen fylder samme plads */
@media (max-width: 763px) {
  .fkm-bar { width: 320px; height: 47px; grid-template-columns: 1fr auto; }
  .fkm-logo { font-size: 20px; line-height: 26px; }
  .fkm-nav, .fkm-fbbtn, .fkm-panel { display: none !important; }
  .fkm-burger {
    display: grid; align-content: center; gap: 5px; width: 30px; height: 30px; padding: 3px; border: 0; background: none; cursor: pointer;
  }
  .fkm-burger span { display: block; height: 3px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .3s; }
  .fkm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .fkm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .fkm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .fkm-drawer {
    display: block; visibility: hidden; opacity: 0; transform: translateY(-14px);
    transition: opacity .55s ease, transform .7s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .7s;
  }
  .fkm-drawer.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
  .fkm-drawer {
    position: fixed; left: 0; right: 0; top: 47px; bottom: 0; overflow-y: auto; padding: 8px 35px 40px;
    background: rgba(8, 2, 30, .8); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  }
  .fkm-acc { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .fkm-acc summary {
    list-style: none; cursor: pointer; padding: 18px 0; color: #fff; display: flex; justify-content: space-between;
    font: italic 700 22px Lato, arial, sans-serif; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 1px;
  }
  .fkm-acc summary::-webkit-details-marker { display: none; }
  .fkm-acc summary::after { content: "+"; font-style: normal; font-weight: 300; }
  .fkm-acc[open] summary::after { content: "–"; }
  .fkm-acc-body { padding-bottom: 20px; }
  .fkm-acc[open] .fkm-acc-body { animation: fkm-acc-in .6s cubic-bezier(.22, .61, .36, 1); }
  @keyframes fkm-acc-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .fkm-acc .fkm-head { margin-bottom: 12px; }
  .fkm-acc .fkm-brands { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .fkm-acc .fkm-cover { width: 70px; height: 93px; }
  .fkm-acc .fkm-years { grid-template-columns: repeat(2, 1fr); }
  .fkm-acc .fkm-years { gap: 28px 10px; }
  /* mobil: stakkene står i hvilestilling inden for kolonnen (ingen hover på touch) */
  .fkm-acc .fkm-fan { --cw: 64px; --ch: 86px; --step: 16px; --rot: 8deg; --hstep: 16px; --hrot: 8deg; --lift: 8px; width: 150px; height: 135px; }
  .fkm-acc .fkm-tile .fkm-fan { --cw: 46px; --ch: 62px; --step: 8px; --rot: 7deg; --hstep: 8px; --hrot: 7deg; --lift: 6px; width: 96px; height: 94px; }
  .fkm-acc .fkm-year:hover .fkm-fan-m, .fkm-acc .fkm-tile:hover .fkm-fan-m { transform: translate(0, calc(var(--lift) / -2)); }
  .fkm-acc .fkm-vids { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; padding: 0; }
  .fkm-acc .fkm-vid img { height: 70px; }
  .fkm-acc .fkm-fyrv, .fkm-acc .fkm-links { grid-template-columns: 1fr; gap: 6px; }
  .fkm-acc .fkm-link { padding: 10px 0; }
  .fkm-drawer-fb {
    display: flex; justify-content: center; align-items: center; height: 44px; margin-top: 24px; border-radius: 4px; color: #fff !important;
    font: 700 13px Lato, arial, sans-serif; text-transform: uppercase; background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120));
  }
}
@media (prefers-reduced-motion: reduce) { .fkm-panel .fkm-inner, .fkm-drawer, .fkm-acc-body, .fkm, .fkm-panel, .fkm-cover, .fkm-fan-c, .fkm-vid img { transition: none; animation: none; } }

/* Landingis basis-CSS giver li-elementer prikker – slå dem fra i menuen */
.fkm ul, .fkm li { list-style: none !important; margin: 0; padding: 0; }
.fkm li::before, .fkm li::marker { content: none !important; display: none !important; }
@media (max-width: 763px) {
  .fkm-drawer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 30%), rgba(6, 2, 26, .5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .fkm-acc .fkm-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Krudt Tycoon-knap (logo som på fyrværkeri.net: guld-krone + Baloo 2 med guld-gradient) */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2'); }
.fkm-kt {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: 4px;
  text-decoration: none !important; background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120));
  box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px 0px, inset 0 0 0 1px rgba(255, 194, 61, .35);
  transition: box-shadow .3s ease, transform .3s ease;
}
.fkm-kt:hover { box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px 0px, inset 0 0 0 1px rgba(255, 194, 61, .8), 0 0 18px rgba(255, 194, 61, .25); transform: translateY(-1px); }
.fkm-kt-crown { display: inline-flex; color: rgb(255, 194, 61); }
.fkm-kt-crown svg { width: 18px; height: 18px; }
.fkm-kt-txt {
  font: 800 16px/1 'Baloo 2', Lato, arial, sans-serif; letter-spacing: .02em; padding-top: 2px;
  background: linear-gradient(rgb(255, 230, 160), rgb(255, 194, 61) 55%, rgb(255, 138, 61));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fkm-kt-drawer { display: none; }
@media (max-width: 763px) {
  .fkm-tools > .fkm-kt { display: none; }
  .fkm-kt-drawer { display: flex; justify-content: center; height: 48px; margin-top: 24px; gap: 9px; }
  .fkm-kt-drawer .fkm-kt-txt { font-size: 20px; }
  .fkm-kt-drawer .fkm-kt-crown svg { width: 22px; height: 22px; }
  .fkm-kt-sub { font: 700 11px Lato, arial, sans-serif; text-transform: uppercase; color: #d9ccff; margin-left: 4px; }
  .fkm-drawer-fb { margin-top: 12px !important; }
}

/* Krudt Tycoon: guldkant der løber rundt + diskret fyrværkeri-puls bag knappen */
@property --kt-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fkm-kt { position: relative; isolation: isolate; overflow: visible; }
.fkm-kt::before { /* løbende guldkant */
  content: ""; position: absolute; inset: -1px; border-radius: 5px; padding: 1px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--kt-angle), rgba(255, 194, 61, .15) 0deg, rgba(255, 194, 61, .15) 250deg,
    rgb(255, 230, 160) 300deg, rgb(255, 138, 61) 330deg, rgba(255, 194, 61, .15) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kt-spin 3.2s linear infinite;
}
.fkm-kt-fx { /* lærred til små fyrværkeri-bursts bag knappen (tegnes af menu.js) */
  position: absolute; left: 50%; top: 50%; width: 260px; height: 140px; margin: -70px 0 0 -130px;
  z-index: -2; pointer-events: none;
}
@keyframes kt-spin { to { --kt-angle: 360deg; } }
}
.fkm-kt:hover::before { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) { .fkm-kt::before { animation: none; } .fkm-kt-fx { display: none; } }

/* kun to kataloger: i stedet for en smal vifte ligger de som en forskudt stak –
   det bagerste kort titter frem skråt bag det forreste og trækkes ud til siden ved hover */
.fkm-fan--2 .fkm-fan-c { transform: translate(calc(var(--step) * -.6), 0) rotate(-3deg); }
.fkm-fan--2 .fkm-fan-c:not(.fkm-fan-m) { transform: translate(calc(var(--step) * .9), calc(var(--lift) * -.4)) rotate(9deg); }
.fkm-year:hover .fkm-fan--2 .fkm-fan-c, .fkm-tile:hover .fkm-fan--2 .fkm-fan-c,
.fkm-year:focus-visible .fkm-fan--2 .fkm-fan-c, .fkm-tile:focus-visible .fkm-fan--2 .fkm-fan-c {
  transform: translate(calc(var(--hstep) * -.75), calc(var(--lift) * -.6)) rotate(-8deg) scale(1.03);
}
.fkm-year:hover .fkm-fan--2 .fkm-fan-c:not(.fkm-fan-m), .fkm-tile:hover .fkm-fan--2 .fkm-fan-c:not(.fkm-fan-m),
.fkm-year:focus-visible .fkm-fan--2 .fkm-fan-c:not(.fkm-fan-m), .fkm-tile:focus-visible .fkm-fan--2 .fkm-fan-c:not(.fkm-fan-m) {
  transform: translate(calc(var(--hstep) * .95), calc(var(--lift) * -.2)) rotate(14deg);
}

/* Nyhed-stjerne på stakke: sidder på det forreste kort og følger med, når stakken løfter sig */
.fkm-fan > .fk-ny { top: auto; right: auto; left: calc(50% + var(--cw) / 2 - 22px); bottom: calc(14px + var(--ch) - 18px); z-index: 20; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.fkm-tile:hover .fkm-fan > .fk-ny, .fkm-year:hover .fkm-fan > .fk-ny { transform: translateY(calc(var(--lift) * -1)) scale(1.08); }
.fkm-fan--2 > .fk-ny { left: calc(50% + var(--cw) / 2 - 22px - var(--step) * .6); }

/* nyt Nyhed-badge (Krudt Tycoon-stil) på stakke i menu og årstal */
.fkm-fan > .fk-nyhed-kt--sm {
  top: auto; left: calc(50% - var(--cw) / 2 + 4px); bottom: calc(14px + var(--ch) - 26px); z-index: 20;
  height: 20px; padding: 0 7px 0 5px; gap: 3px; border-radius: 3px;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.fkm-fan > .fk-nyhed-kt--sm b { font-size: 9.5px; letter-spacing: .05em; }
.fkm-fan > .fk-nyhed-kt--sm svg { width: 10px; height: 10px; }
.fkm-fan > .fk-nyhed-kt--sm::before { border-radius: 4px; }
.fkm-tile:hover .fkm-fan > .fk-nyhed-kt--sm, .fkm-year:hover .fkm-fan > .fk-nyhed-kt--sm { transform: translateY(calc(var(--lift) * -1)); }
.fk-yr .fkm-fan > .fk-nyhed-kt--sm { height: 24px; padding: 0 9px 0 7px; bottom: calc(14px + var(--ch) - 32px); }
.fk-yr .fkm-fan > .fk-nyhed-kt--sm b { font-size: 11px; }
.fk-yr .fkm-fan > .fk-nyhed-kt--sm svg { width: 12px; height: 12px; }
@media (max-width: 763px) {
  .fkm-acc .fkm-fan > .fk-nyhed-kt--sm, .fk-yr .fkm-fan > .fk-nyhed-kt--sm { height: 17px; padding: 0 5px 0 4px; bottom: calc(14px + var(--ch) - 21px); }
  .fkm-acc .fkm-fan > .fk-nyhed-kt--sm b, .fk-yr .fkm-fan > .fk-nyhed-kt--sm b { font-size: 8px; }
  .fkm-acc .fkm-fan > .fk-nyhed-kt--sm svg, .fk-yr .fkm-fan > .fk-nyhed-kt--sm svg { width: 8px; height: 8px; }
}

/* iPhone: farven i toppen (bag kamera/statuslinje) skal flyde sammen med siden.
   Safari (iOS 26) farver toppen efter en fast/sticky topbjælke – derfor får menubjælken sidens topfarve, når man står øverst. */
@media (max-width: 763px) {
  .fkm:not(.is-scrolled):not(.is-open) { background-color: #140128; }
  .fkm:not(.is-scrolled):not(.is-open)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
    background: linear-gradient(#140128, rgba(20, 1, 40, 0));
  }
}

/* iPhone (Safari 26) farver området om kameraet efter sidens baggrundsfarve.
   Baggrundsfarven sættes derfor til topfarven, og et mørkt lag (gentaget over hele siden) under topbilledet bevarer udseendet uændret. */
@media (max-width: 763px) {
  body {
    background-color: #140128 !important;
    background-image: url("../img/top-billede.webp"), linear-gradient(rgb(6, 0, 19), rgb(6, 0, 19)) !important;
    background-repeat: no-repeat, repeat !important;
    background-position: center top, 0 0 !important;
    background-size: auto, auto !important;
    background-attachment: scroll, scroll !important;
  }
}

/* Video-panelet: billederne glider stille ned, ét ad gangen, når menuen åbnes */
@keyframes fkm-vid-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.fkm-panel.is-active .fkm-vid { animation: fkm-vid-in .9s cubic-bezier(.22, .61, .36, 1) .2s backwards; }
.fkm-panel.is-active .fkm-vid:nth-child(2) { animation-delay: 0.26s; }
.fkm-panel.is-active .fkm-vid:nth-child(3) { animation-delay: 0.32s; }
.fkm-panel.is-active .fkm-vid:nth-child(4) { animation-delay: 0.38s; }
.fkm-panel.is-active .fkm-vid:nth-child(5) { animation-delay: 0.44s; }
.fkm-panel.is-active .fkm-vid:nth-child(6) { animation-delay: 0.50s; }
.fkm-panel.is-active .fkm-vid:nth-child(7) { animation-delay: 0.56s; }
.fkm-panel.is-active .fkm-vid:nth-child(8) { animation-delay: 0.62s; }
.fkm-panel.is-active .fkm-vid:nth-child(9) { animation-delay: 0.68s; }
.fkm-panel.is-active .fkm-vid:nth-child(10) { animation-delay: 0.74s; }
.fkm-panel.is-active .fkm-vid:nth-child(11) { animation-delay: 0.80s; }
.fkm-panel.is-active .fkm-vid:nth-child(12) { animation-delay: 0.86s; }
@media (prefers-reduced-motion: reduce) { .fkm-panel.is-active .fkm-vid { animation: none; } }

/* Facebook-gruppen (Fyrværkeri 2026) i FYRVÆRKERI-panelet */
.fkm-fb26 { position: relative; display: grid; gap: 0; padding: 0; overflow: hidden; border-radius: 12px; isolation: isolate;
  background: linear-gradient(160deg, #10183e, #0a0c28); box-shadow: rgba(24, 119, 242, .25) 0 10px 40px 0, inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s; }
.fkm-fb26:hover { transform: translateY(-3px); box-shadow: rgba(24, 119, 242, .4) 0 16px 46px 0, inset 0 0 0 1px rgba(255, 255, 255, .14); }
.fkm-fb26-img { display: block; overflow: hidden; }
.fkm-fb26-img img { display: block; width: 100%; height: auto; border-radius: 0; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.fkm-fb26:hover .fkm-fb26-img img { transform: scale(1.05); }
.fkm-fb26-txt { display: grid; gap: 6px; padding: 12px 14px 14px; }
.fkm-fb26 .fkm-lt { display: flex; align-items: center; gap: 8px; }
.fkm-fb26 .fkm-lt svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #1877f2; fill: #fff; flex: none; }
.fkm-fb26-btn { justify-self: start; margin-top: 4px; padding: 7px 14px; border-radius: 999px; font: 700 12px/1 Lato, arial, sans-serif; letter-spacing: .03em; text-transform: uppercase;
  background: #1877f2; color: #fff; box-shadow: 0 6px 16px -6px rgba(24, 119, 242, .9); }
.fkm-fb26 .fkm-lt svg path { transform: translateY(-2px); }   /* f'et centreres i cirklen */