/* ==========================================================================
   nl-top.css – menubaren (hele sitet) + toppen af forsiden, variant "Plakaten"
   (06-10-2026).

   Ren CSS, IKKE Tailwind: public/styles/main.css er en build fra februar, og nye
   Tailwind-klasser findes ikke i den. Alle klasser hedder nlA-*, saa de aldrig
   stoeder ind i DaisyUI. Linkes fra layouts/layout.ejs med ?v= – den SKAL bumpes
   ved hver aendring, for Apache cacher /styles i 30 dage.

   Markup: partials/navigationBar.ejs, partials/gaesteBanner.ejs og toppen af
   index.ejs. Adfaerd (scroll, burger, dropdown, taelle-op, nedtaelling): main.js.
   Live-tallene (data-live*) opdateres af guide.js – ingen egen polling her.
   ========================================================================== */
:root {
    --nlA-blaek: #150a0e;        /* bunden: varm, roedlig nat – ikke ren sort */
    --nlA-blaek-2: #1f0f15;
    --nlA-blaek-3: #2b141d;
    --nlA-vin: #4a0d1e;
    --nlA-roed: #d9271c;         /* lysere end brand #be2f1e, saa den baerer paa plakaten */
    --nlA-orange: #f2621c;
    --nlA-sol: #ffbe3b;
    --nlA-creme: #fff2e4;
    --nlA-daemp: rgba(255, 242, 228, .78);
    --nlA-svag: rgba(255, 242, 228, .6);
    --nlA-groen: #5be38d;
    --nlA-grad: linear-gradient(100deg, #d9271c 0%, #ee4a1d 45%, #f9821f 100%);
    --nlA-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --nlA-tal: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    --nlA-tekst: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --nlA-navh: 76px;
    --nlA-baandh: 38px;
    --nlA-kant: clamp(16px, 4vw, 56px);
}
@media (max-width: 1023px) { :root { --nlA-navh: 64px; } }

/* Ankre (#leaderboard-battlepass m.fl.) skal ikke lande under den klistrede menu */
html { scroll-padding-top: calc(var(--nlA-navh) + 16px); }

.nlA-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--nlA-kant); }
.nlA-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nlA-nav svg, .nlA-forside svg, .nlA-gaestebaand svg { flex-shrink: 0; }
.nlA-nav :focus-visible, .nlA-forside :focus-visible, .nlA-gaestebaand:focus-visible {
    outline: 3px solid var(--nlA-sol); outline-offset: 3px; border-radius: 10px;
}

/* ---------- Den klistrede top: gaestebaandet + menubaren ---------------------
   De ligger i ÉN sticky blok (layout.ejs), saa baandet aldrig kan lande oven paa
   baren igen. Er baandet med, klistrer blokken med top = minus baandets hoejde:
   baandet ruller paent vaek, og menuen bliver staaende helt oppe. */
.nlrp-top { position: sticky; top: 0; z-index: 60; }
.nlrp-top.har-baand { top: calc(var(--nlA-baandh) * -1); }

/* ---------- Gaestebaandet (kun naar gaestetilstand er slaaet til) ------------ */
.nlA-gaestebaand {
    display: block; position: relative; overflow: hidden; height: var(--nlA-baandh);
    background: var(--nlA-sol); color: var(--nlA-blaek); text-decoration: none;
}
.nlA-gaestebaand-spor { display: flex; width: max-content; animation: nlA-loeb 38s linear infinite; }
.nlA-gaestebaand:hover .nlA-gaestebaand-spor { animation-play-state: paused; }
.nlA-gaestebaand-hold {
    display: flex; align-items: center; gap: 22px; padding-right: 22px; height: var(--nlA-baandh); white-space: nowrap;
    font-family: var(--nlA-tal); font-weight: 700; font-size: 15px; letter-spacing: .01em;
}
.nlA-gaestebaand-hold b { font-style: italic; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.nlA-gaestebaand-hold i { width: 6px; height: 6px; border-radius: 50%; background: var(--nlA-roed); display: block; }
.nlA-gaestebaand-hold u { text-decoration: none; border-bottom: 2px solid currentColor; }
@keyframes nlA-loeb { to { transform: translateX(-50%); } }

/* ---------- Menubaren --------------------------------------------------------
   SOLID som udgangspunkt, saa den aldrig ligger gennemsigtig oven paa tekst paa
   /rules, /admin osv. Kun naar siden HAR en plakat-hero (forsiden) og man staar
   helt oppe, bliver den gennemsigtig. :has() er ren CSS – intet blink foer main.js
   har koert. Browsere uden :has() faar bare den solide udgave. */
.nlA-nav {
    position: relative;
    height: var(--nlA-navh);
    /* Helt uigennemsigtig: under 1024 px er der ingen blur, og ved .97 skinnede
       teksten bag menuen igennem naar man rullede (set paa mobil 06-10-2026). */
    background: #150a0e;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    color: var(--nlA-creme);
    font-family: var(--nlA-tekst);
    transition: background-color .35s ease, box-shadow .35s ease;
}
@media (min-width: 1024px) {
    .nlA-nav { background: rgba(21, 10, 14, .84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
html:not(.nlA-menu-aaben) body:has(.nlA-hero) .nlA-nav:not(.er-scrollet) {
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nlA-nav-inder { height: 100%; display: flex; align-items: center; gap: 28px; }

.nlA-maerke { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; color: var(--nlA-creme); text-decoration: none; }
.nlA-maerke img { width: 46px; height: 46px; border-radius: 50%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.nlA-maerke:hover img { transform: rotate(-10deg) scale(1.06); }
.nlA-maerke-navn { font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 78%; font-size: 25px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.nlA-maerke-navn b { color: var(--nlA-orange); font-weight: 900; }

.nlA-menu { display: flex; align-items: center; gap: 4px; margin-right: auto; flex-shrink: 0; }
.nlA-menu a {
    position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    height: 44px; padding: 0 14px; border-radius: 12px;
    font-family: var(--nlA-tal); font-weight: 600; font-size: 17px; letter-spacing: .01em;
    color: var(--nlA-daemp); text-decoration: none; transition: color .2s, background-color .2s;
}
.nlA-menu a:hover { color: var(--nlA-creme); background: rgba(255, 242, 228, .07); }
.nlA-menu a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px;
    background: var(--nlA-grad); transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .3s ease;
}
.nlA-menu a.active { color: var(--nlA-creme); font-weight: 700; }
.nlA-menu a.active::after, .nlA-menu a:hover::after { transform: scaleX(1) skewX(-20deg); }
.nlA-menu .nlA-menu-gaest { color: var(--nlA-sol); font-weight: 700; }
.nlA-menu .nlA-menu-gaest::after { background: var(--nlA-sol); }
.nlA-menu .nlA-menu-admin { color: #ffb4a6; }
.nlA-menu svg { width: 17px; height: 17px; }

.nlA-nav-hoejre { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.nlA-ikonknap {
    width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; border: 0; cursor: pointer;
    background: var(--nlA-blaek-3); color: var(--nlA-creme); transition: background-color .2s, transform .2s;
}
.nlA-ikonknap:hover { background: #3a1b27; transform: translateY(-1px); }
.nlA-ikonknap svg { width: 21px; height: 21px; }
html:not(.nlA-menu-aaben) body:has(.nlA-hero) .nlA-nav:not(.er-scrollet) .nlA-ikonknap { background: rgba(21, 10, 14, .38); }

/* "Spil nu": parallelogram, samme form som den store knap i heroen */
.nlA-navspil {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 10px;
    height: 48px; padding: 0 18px 0 8px; color: #fff; text-decoration: none;
    transition: transform .2s ease;
}
.nlA-navspil::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px;
    background: var(--nlA-grad); transform: skewX(-10deg);
    box-shadow: 0 10px 26px rgba(217, 39, 28, .38); transition: box-shadow .25s;
}
.nlA-navspil:hover { transform: translateY(-2px); }
.nlA-navspil:hover::before { box-shadow: 0 14px 32px rgba(242, 98, 28, .5); }
.nlA-navspil-ikon { width: 32px; height: 32px; border-radius: 50%; background: rgba(21, 10, 14, .3); display: grid; place-items: center; }
/* Ingen margin-left: trekanten i #nlA-ik-spil er allerede optisk centreret (tyngdepunktet midt i
   viewBox). De 2 px ekstra skubbede pilen ~3,5 px mod hoejre i cirklen (meldt 06-10-2026). */
.nlA-navspil-ikon svg { width: 15px; height: 15px; }
.nlA-navspil-tekst { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.nlA-navspil-tekst b { font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 80%; font-size: 18px; text-transform: uppercase; letter-spacing: .01em; }
.nlA-navspil-tekst small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nlA-tal); font-weight: 700; font-size: 13.5px; color: rgba(255, 255, 255, .92); }
.nlA-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--nlA-groen); display: inline-block; flex-shrink: 0; animation: nlA-puls 2.2s ease-out infinite; }
.nlA-navspil .nlA-prik { background: #fff; animation-name: nlA-puls-hvid; }
@keyframes nlA-puls { 0% { box-shadow: 0 0 0 0 rgba(91, 227, 141, .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(91, 227, 141, 0); } }
@keyframes nlA-puls-hvid { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
/* guide.js saetter .is-offline paa [data-live]: graa prik, ingen puls */
.is-offline .nlA-prik { background: #9a8f88; animation: none; }

.nlA-login {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; white-space: nowrap;
    background: rgba(255, 242, 228, .1); color: var(--nlA-creme); text-decoration: none;
    font-family: var(--nlA-tal); font-weight: 700; font-size: 16px; transition: background-color .2s, transform .2s;
}
.nlA-login:hover { background: rgba(255, 242, 228, .18); transform: translateY(-1px); }
.nlA-login svg { width: 19px; height: 19px; }

/* Logget ind: avatar + navn + dropdown (afloeser den gamle DaisyUI-dropdown) */
.nlA-bruger { position: relative; }
.nlA-bruger-knap {
    display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 242, 228, .1); color: var(--nlA-creme); font: 700 15px/1 var(--nlA-tal); transition: background-color .2s;
}
.nlA-bruger-knap:hover { background: rgba(255, 242, 228, .17); }
.nlA-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--nlA-blaek-3); }
.nlA-bruger-navn { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlA-bruger-knap svg { width: 14px; height: 14px; opacity: .6; transition: transform .2s; }
.nlA-bruger.er-aaben .nlA-bruger-knap svg { transform: rotate(180deg); }
.nlA-bruger-menu {
    position: absolute; right: 0; top: calc(100% + 10px); width: 230px; padding: 8px; border-radius: 16px; z-index: 5;
    background: var(--nlA-blaek-2); box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.nlA-bruger.er-aaben .nlA-bruger-menu { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; }
.nlA-bruger-menu p { margin: 6px 10px 8px; font: 700 13px/1.3 var(--nlA-tal); color: var(--nlA-svag); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlA-bruger-menu p b { color: var(--nlA-creme); }
.nlA-bruger-menu a {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    font-family: var(--nlA-tekst); font-weight: 600; font-size: 15px; color: var(--nlA-creme); text-decoration: none;
}
.nlA-bruger-menu a:hover { background: var(--nlA-blaek-3); }
.nlA-bruger-menu a svg { width: 17px; height: 17px; opacity: .7; }
.nlA-bruger-menu a.nlA-logud { color: #ff9b8f; margin-top: 4px; }

.nlA-burger { display: none; }
.nlA-burger .nlA-luk { display: none; }
.nlA-menu-aaben .nlA-burger .nlA-aabn { display: none; }
.nlA-menu-aaben .nlA-burger .nlA-luk { display: block; }

/* Mobilmenuen: et ark der folder ned under menubaren */
.nlA-mobilmenu {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--nlA-navh)); max-height: calc(100dvh - var(--nlA-navh)); overflow-y: auto;
    padding: 10px 16px 18px; background: var(--nlA-blaek-2);
    border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
    opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
/* Med gaestebaandet over baren starter arket 38 px laengere nede. Uden fradraget kunne
   bunden af arket ligge under skaermkanten paa en lav skaerm (telefon paa langs). */
.nlrp-top.har-baand .nlA-mobilmenu { max-height: calc(100vh - var(--nlA-navh) - var(--nlA-baandh)); max-height: calc(100dvh - var(--nlA-navh) - var(--nlA-baandh)); }
.nlA-menu-aaben .nlA-mobilmenu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s ease, transform .22s ease; }
.nlA-mobilmenu ul { list-style: none; margin: 0; padding: 0; }
.nlA-mobilmenu li a {
    display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 14px; border-radius: 14px;
    font-family: var(--nlA-display); font-style: italic; font-weight: 800; font-stretch: 80%; font-size: 24px; text-transform: uppercase; letter-spacing: .005em;
    color: var(--nlA-creme); text-decoration: none;
}
.nlA-mobilmenu li a:hover, .nlA-mobilmenu li a.active { background: var(--nlA-blaek-3); }
.nlA-mobilmenu li a.active::after { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--nlA-grad); transform: skewX(-20deg); }
.nlA-mobilmenu li a.nlA-menu-gaest { color: var(--nlA-sol); }
.nlA-mobilmenu li a.nlA-menu-admin { color: #ffb4a6; }
.nlA-mobilmenu-bund { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.nlA-mobilmenu-bund a {
    display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 14px;
    background: var(--nlA-blaek-3); color: var(--nlA-creme); text-decoration: none; font: 700 16px/1 var(--nlA-tal);
}
.nlA-mobilmenu-bund svg { width: 20px; height: 20px; }
.nlA-mobilmenu-bund .nlA-mm-discord svg { color: #9aa4ff; }

/* Mens arket er aabent, skal guide-telefonen og "til toppen" ikke ligge oven paa det */
.nlA-menu-aaben .nlg, .nlA-menu-aaben #globalScrollTop { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* .nlA-fab-vig (main.js): en af forsidens store knapper passerer lige under guide-
   telefonen / "til toppen" – de glider ned og ud af vejen saa laenge. En aaben
   telefon roeres aldrig. */
.nlg { transition: transform .3s ease, opacity .3s ease; }
.nlA-fab-vig .nlg:not(.aaben) { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
.nlA-fab-vig #globalScrollTop { transform: translateY(calc(100% + 40px)) !important; opacity: 0 !important; pointer-events: none !important; }

/* ---------- Menubarens bredder ------------------------------------------------
   Burger under 1024 px. Over det bestemmer main.js det ogsaa: er der ikke plads
   til alle punkterne (admin + gaestetilstand + ansoegninger + langt brugernavn),
   faar baren .er-smal og skifter til burger i stedet for at skubbe siden bred. */
@media (max-width: 1359px) {
    .nlA-bruger-knap .nlA-bruger-navn { display: none; }
}
@media (max-width: 1180px) {
    .nlA-nav-inder { gap: 16px; }
    .nlA-menu a { padding: 0 10px; font-size: 16px; }
    .nlA-menu a::after { left: 10px; right: 10px; }
    .nlA-maerke-navn { display: none; }
}
@media (max-width: 1023px) {
    .nlA-menu, .nlA-discord-ikon { display: none; }
    .nlA-burger { display: inline-grid; }
    .nlA-maerke-navn { display: inline; font-size: 22px; }
    .nlA-maerke img { width: 40px; height: 40px; }
    .nlA-nav-hoejre { gap: 8px; }
}
.nlA-nav.er-smal .nlA-menu, .nlA-nav.er-smal .nlA-discord-ikon { display: none; }
.nlA-nav.er-smal .nlA-burger { display: inline-grid; }
@media (max-width: 639px) {
    .nlA-nav-inder { gap: 8px; }
    .nlA-maerke { gap: 9px; min-width: 0; }
    .nlA-maerke img { width: 38px; height: 38px; }
    .nlA-maerke-navn { font-size: 20px; }
    .nlA-navspil { padding: 0 13px 0 6px; gap: 7px; height: 44px; }
    .nlA-navspil-ikon { width: 30px; height: 30px; }
    /* Skjult for oejet, ikke for skaermlaeseren: knappens navn er stadig "Spil nu 47/170
       i byen", og det tal holder guide.js opdateret (et aria-label ville staa fast). */
    .nlA-navspil-tekst b, .nlA-navspil-maks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nlA-navspil-tekst small { font-size: 17px; font-style: italic; font-weight: 800; gap: 7px; }
    .nlA-login { width: 44px; padding: 0; justify-content: center; }
    .nlA-login span { display: none; }
    /* Kun avataren: samme bredde som log ind-knappen, ellers er der ikke plads ved 360-390 px */
    .nlA-bruger-knap { width: 44px; padding: 0; justify-content: center; }
    .nlA-bruger-knap svg { display: none; }
    .nlA-bruger-menu { right: -52px; }
}
@media (max-width: 374px) {
    .nlA-maerke-navn { display: none; }
}

/* ==========================================================================
   FORSIDEN – heroen, tapen, "Saesonen lige nu" og "Faellesskabet i tal"
   ========================================================================== */
.nlA-forside {
    overflow-x: clip;               /* tapen er bredere end skaermen og drejet – maa ikke give vandret scroll */
    background: var(--nlA-blaek);
    color: var(--nlA-creme);
    font-family: var(--nlA-tekst);
    font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.nlA-forside a { text-decoration: none; }

/* ---------- Heroen ------------------------------------------------------- */
.nlA-hero {
    position: relative;
    margin-top: calc(var(--nlA-navh) * -1);       /* billedet ligger bag den gennemsigtige menu */
    /* 06-10-2026: heroen var laast til hele skaermhoejden med indholdet skubbet mod bunden.
       Paa hoeje skaerme gav det 244 px (1080p) og 604 px (1440p) tomt rum mellem menuen og
       overskriften. Nu bestemmer indholdet hoejden, og overskriften sidder fast under menuen. */
    display: flex; align-items: flex-start;
    isolation: isolate;
}
.nlA-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--nlA-vin); }
.nlA-hero-billede {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
    transform: scaleX(-1);                            /* spejlet: solen lander oppe til hoejre, teksten paa den moerke side */
    filter: contrast(1.12) saturate(.9) brightness(1.02);
}
/* Solnedgangs-graderingen: farven tages fra gradienten, lyset fra billedet. Ingen ekstra billedfil. */
.nlA-hero-farve { position: absolute; inset: 0; mix-blend-mode: color;
    background: linear-gradient(188deg, #ffd25e 0%, #ffa032 16%, #f5651e 36%, #dc3a1a 58%, #8e2112 80%, #2c0d0b 100%); }
.nlA-hero-lys { position: absolute; inset: 0; mix-blend-mode: soft-light;
    background: radial-gradient(60% 70% at 88% 4%, rgba(255, 214, 120, .95), rgba(255, 140, 40, .25) 45%, transparent 70%); }
/* Laeselighed: moerkt i venstre side og i bunden, lidt i toppen bag menuen */
.nlA-hero-skygge { position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(21, 10, 14, .55) 0, rgba(21, 10, 14, 0) 170px),
        linear-gradient(90deg, rgba(21, 10, 14, .9) 0%, rgba(21, 10, 14, .72) 30%, rgba(21, 10, 14, .2) 58%, rgba(21, 10, 14, 0) 72%),
        linear-gradient(180deg, rgba(21, 10, 14, 0) 55%, rgba(21, 10, 14, .7) 85%, var(--nlA-blaek) 100%); }
.nlA-korn { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }

.nlA-hero-indhold {
    width: 100%;
    padding-top: calc(var(--nlA-navh) + 40px);
    padding-bottom: 128px;
    display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 48px; align-items: end;
}

.nlA-plakat { position: relative; min-width: 0; }
.nlA-titel {
    --ts: clamp(64px, 11.2vw, 176px);
    margin: 0;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 64%;
    font-size: var(--ts); line-height: .83; letter-spacing: -.012em; text-transform: uppercase;
    color: var(--nlA-creme);
    text-shadow: 0 4px 40px rgba(21, 10, 14, .35);
}
.nlA-titel .nlA-l { display: block; }
.nlA-titel .nlA-l2 { padding-left: .22em; }
.nlA-titel .nlA-l3 { padding-left: .44em; }

/* Det ene klistermaerke paa plakaten */
.nlA-sticker {
    position: absolute; top: calc(clamp(64px, 11.2vw, 176px) * -.08); left: calc(clamp(64px, 11.2vw, 176px) * 2.3);
    width: clamp(92px, 8.6vw, 132px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-content: center; text-align: center; gap: 2px;
    background: var(--nlA-sol); color: var(--nlA-blaek);
    transform: rotate(11deg);
    box-shadow: 0 14px 30px rgba(21, 10, 14, .4), inset 0 0 0 4px rgba(21, 10, 14, .08);
}
.nlA-sticker b { font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: clamp(34px, 3.4vw, 52px); line-height: .85; }
.nlA-sticker span { font-family: var(--nlA-tal); font-weight: 700; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.05; }

.nlA-undertekst { margin: 30px 0 0; max-width: 33em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--nlA-daemp); }

.nlA-fakta { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nlA-fakta li {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 9px 18px 10px; border-radius: 999px;
    background: rgba(255, 242, 228, .1);
    font-size: 15px; color: var(--nlA-daemp);
}
.nlA-fakta b { font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: 23px; line-height: 1; color: var(--nlA-sol); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nlA-fakta small { font-size: inherit; color: var(--nlA-svag); }
@media (min-width: 1024px) { .nlA-fakta li { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }

/* ---------- Billetten (glaskortet) -------------------------------------- */
.nlA-billet-wrap { position: relative; filter: drop-shadow(0 30px 50px rgba(21, 10, 14, .45)); }
.nlA-billet { position: relative; border-radius: 24px; padding: 24px 24px 20px; background: rgba(21, 10, 14, .9); }
@media (min-width: 1024px) {
    .nlA-billet { background: rgba(21, 10, 14, .58); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
}
/* Naar gaestestumpen haenger under, skaeres to halvcirkler ud af kortets bund */
.nlA-billet-wrap.med-stump .nlA-billet {
    border-radius: 24px 24px 0 0;
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
}
.nlA-billet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nlA-live { display: inline-flex; align-items: center; gap: 9px; font: 700 15px/1 var(--nlA-tal); color: var(--nlA-creme); }
.nlA-live .nlA-prik { width: 9px; height: 9px; }
.nlA-naar-lukket, .is-offline .nlA-naar-aaben { display: none; }
.is-offline .nlA-naar-lukket { display: inline; }
.nlA-billet-adr { font: 600 13px/1 var(--nlA-tal); color: var(--nlA-svag); white-space: nowrap; }

.nlA-byen { margin: 16px 0 0; display: flex; align-items: baseline; gap: 4px; font-family: var(--nlA-tal); font-style: italic; line-height: .9; }
.nlA-byen b { font-weight: 800; font-size: 84px; letter-spacing: -.02em; color: var(--nlA-creme); font-variant-numeric: tabular-nums; }
.nlA-byen span { font-weight: 700; font-size: 30px; color: var(--nlA-svag); }
.nlA-byen-tekst { margin: 4px 0 0; font-size: 16px; color: var(--nlA-daemp); }
.nlA-kapacitet { margin: 16px 0 22px; height: 6px; border-radius: 6px; background: rgba(255, 242, 228, .12); overflow: hidden; }
.nlA-kapacitet i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9271c, #f9821f 70%, #ffbe3b); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }

/* Plakat-knappen: skraa flade bag teksten, saa teksten selv staar lige */
.nlA-knap {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; min-height: 58px; padding: 0 22px;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 78%; font-size: 22px; text-transform: uppercase; letter-spacing: .01em;
    transition: transform .2s ease;
}
.nlA-knap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; transform: skewX(-8deg); transition: box-shadow .25s, filter .25s, background-color .25s; }
.nlA-knap:hover { transform: translateY(-2px); }
.nlA-knap svg { width: 22px; height: 22px; }
.nlA-knap-spil { color: #fff; }
.nlA-knap-spil::before { background: var(--nlA-grad); box-shadow: 0 14px 34px rgba(217, 39, 28, .42); }
.nlA-knap-spil:hover::before { box-shadow: 0 18px 40px rgba(242, 98, 28, .55); filter: brightness(1.06); }
.nlA-knap-discord { margin-top: 10px; min-height: 52px; font-size: 19px; color: var(--nlA-creme); }
.nlA-knap-discord::before { background: rgba(255, 242, 228, .1); }
.nlA-knap-discord:hover::before { background: rgba(255, 242, 228, .16); }
.nlA-knap-discord svg { color: #9aa4ff; width: 24px; height: 24px; }
.nlA-billet-note { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--nlA-svag); }

/* Gaestebilletten: en afrivningsstump under kortet */
.nlA-stub {
    position: relative; display: block; padding: 20px 24px;
    background: var(--nlA-sol); color: var(--nlA-blaek); border-radius: 0 0 24px 24px;
    transition: background-color .2s;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
}
.nlA-stub-perfo { position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: repeating-linear-gradient(90deg, rgba(21, 10, 14, .5) 0 7px, transparent 7px 13px); }
.nlA-stub:hover { background: #ffc957; }
.nlA-stub-top { display: flex; align-items: center; gap: 10px; }
.nlA-stub-top svg { width: 24px; height: 24px; }
.nlA-stub-top strong { font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 78%; font-size: 21px; text-transform: uppercase; line-height: 1.05; }
.nlA-stub p { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.45; color: rgba(21, 10, 14, .82); }
.nlA-stub-link { display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1 var(--nlA-tal); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.nlA-stub-link svg { width: 15px; height: 15px; transition: transform .2s; }
.nlA-stub:hover .nlA-stub-link svg { transform: translateX(3px); }

/* ---------- Tapen: seneste godkendte (overgangen til naeste sektion) ----- */
.nlA-tape {
    position: relative; z-index: 5;
    margin: -64px -40px 0; transform: rotate(-1.6deg);
    background: var(--nlA-creme); color: var(--nlA-blaek);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.nlA-tape-inder { display: flex; align-items: center; height: 58px; padding-left: 40px; }
.nlA-tape-maerke {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 58px; padding: 0 22px 0 var(--nlA-kant);
    background: var(--nlA-roed); color: #fff; white-space: nowrap;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 78%; font-size: 18px; text-transform: uppercase; letter-spacing: .01em;
}
.nlA-tape-maerke svg { width: 18px; height: 18px; }
.nlA-tape-vindue { flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent); }
/* Varigheden saettes pr. antal navne i index.ejs (--nlA-varighed), saa farten er den samme uanset hvor mange der er */
.nlA-tape-spor { display: flex; width: max-content; animation: nlA-loeb var(--nlA-varighed, 60s) linear infinite; }
.nlA-tape:hover .nlA-tape-spor { animation-play-state: paused; }
.nlA-tape-hold { display: flex; align-items: center; gap: 34px; padding-right: 34px; white-space: nowrap; font-size: 16px; }
.nlA-tape-hold > span { display: inline-flex; align-items: baseline; gap: 6px; }
.nlA-tape-hold strong { font-weight: 800; }
.nlA-tape-hold small { font: 700 14px/1 var(--nlA-tal); color: rgba(21, 10, 14, .62); }
.nlA-tape-hold em { font-style: normal; font-weight: 700; color: #b5221a; }
.nlA-tape-hold i { width: 7px; height: 7px; border-radius: 50%; background: var(--nlA-orange); display: block; align-self: center; }
.nlA-tape-tom { padding: 0 24px; font-weight: 600; color: rgba(21, 10, 14, .7); white-space: nowrap; }

/* ---------- Faelles sektionshoved ("Saesonen lige nu", "Faellesskabet i tal") */
.nlA-hoved { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.nlA-hoved h2 {
    margin: 0; font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 66%;
    font-size: clamp(44px, 5.4vw, 84px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; color: var(--nlA-creme);
}
.nlA-hoved p { margin: 0; max-width: 30em; color: var(--nlA-daemp); font-size: 17px; text-wrap: pretty; }

/* ---------- Saesonen lige nu ------------------------------------------------
   Battlepass-saesonen (= kalendermaaneden), top 5 og naeste event. Alt er data der
   allerede er i forsidens payload – ingen nye DB-kald. */
.nlA-saeson { position: relative; padding: 120px 0 0; }
.nlA-saeson-grid {
    margin-top: 44px; display: grid; gap: 14px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "kort top" "kort evt";
}

/* Saesonkortet: daempet stemningsbillede, samme solnedgangs-gradering som heroen */
.nlA-sk {
    grid-area: kort; position: relative; isolation: isolate; overflow: hidden;
    min-height: 520px; padding: 34px 34px 32px; border-radius: 24px;
    display: flex; flex-direction: column; background: var(--nlA-vin);
}
.nlA-sk-bg { position: absolute; inset: 0; z-index: -1; }
.nlA-sk-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%;
    filter: saturate(.7) brightness(.62) contrast(1.08); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.nlA-sk:hover .nlA-sk-bg img { transform: scale(1.03); }
.nlA-sk-bg .nlA-farve { position: absolute; inset: 0; mix-blend-mode: color; opacity: .75;
    background: linear-gradient(200deg, #ffb347 0%, #f5651e 30%, #c42a19 62%, #3a0f0d 100%); }
.nlA-sk-bg .nlA-skygge { position: absolute; inset: 0;
    background:
        linear-gradient(0deg, rgba(21, 10, 14, .96) 0%, rgba(21, 10, 14, .78) 38%, rgba(21, 10, 14, .3) 70%, rgba(21, 10, 14, .45) 100%),
        linear-gradient(90deg, rgba(21, 10, 14, .55) 0%, rgba(21, 10, 14, 0) 60%); }

.nlA-chip {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    height: 32px; padding: 0 14px; border-radius: 999px;
    background: rgba(21, 10, 14, .6); color: var(--nlA-sol);
    font: 800 13px/1 var(--nlA-tal); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.nlA-chip .nlA-prik { width: 7px; height: 7px; }
.nlA-sk-titel {
    margin: auto 0 0; padding-top: 48px;
    font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 64%;
    font-size: clamp(54px, 6.2vw, 104px); line-height: .84; text-transform: uppercase; letter-spacing: -.012em; color: var(--nlA-creme);
    text-shadow: 0 4px 30px rgba(21, 10, 14, .4);
}
.nlA-sk-titel span { display: block; }
.nlA-sk-titel span + span { padding-left: .2em; color: var(--nlA-sol); }
.nlA-sk-slutter { margin: 18px 0 10px; font: 700 15px/1 var(--nlA-tal); text-transform: uppercase; letter-spacing: .12em; color: var(--nlA-daemp); }

.nlA-ur { display: flex; gap: 10px; }
.nlA-ur > div { min-width: 92px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 242, 228, .09); }
.nlA-ur b { display: block; font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: 56px; line-height: .9; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--nlA-creme); }
.nlA-ur span { display: block; margin-top: 4px; font: 700 13px/1 var(--nlA-tal); text-transform: uppercase; letter-spacing: .1em; color: var(--nlA-svag); }
.nlA-ur > div:first-child { background: var(--nlA-grad); }
.nlA-ur > div:first-child span { color: rgba(255, 255, 255, .88); }
@media (min-width: 1024px) { .nlA-ur > div:not(:first-child) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.nlA-sk-slut { display: none; margin: 18px 0 0; font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 74%; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--nlA-sol); }
.er-slut .nlA-ur, .er-slut .nlA-sk-slutter { display: none; }
.er-slut .nlA-sk-slut { display: block; }

/* Level 100-praemien: en gul plade klasket skraat paa kortet */
.nlA-praemie {
    position: absolute; top: 30px; right: 30px; max-width: 46%;
    padding: 14px 18px 15px; border-radius: 14px;
    background: var(--nlA-sol); color: var(--nlA-blaek);
    transform: rotate(3.5deg);
    box-shadow: 0 16px 34px rgba(21, 10, 14, .45);
}
.nlA-praemie small { display: block; font: 800 12.5px/1 var(--nlA-tal); text-transform: uppercase; letter-spacing: .12em; color: rgba(21, 10, 14, .7); }
.nlA-praemie strong { display: block; margin-top: 6px; font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 74%; font-size: 26px; line-height: .98; text-transform: uppercase; }

.nlA-sk-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.nlA-sk-knapper .nlA-knap { width: auto; min-height: 52px; font-size: 19px; padding: 0 26px; }
.nlA-pillink {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    font: 700 16px/1 var(--nlA-tal); color: var(--nlA-creme);
}
.nlA-pillink span { border-bottom: 2px solid rgba(255, 242, 228, .35); padding-bottom: 2px; transition: border-color .2s; }
.nlA-pillink svg { width: 16px; height: 16px; transition: transform .2s; }
.nlA-pillink:hover span { border-color: var(--nlA-sol); }
.nlA-pillink:hover svg { transform: translateX(3px); }

/* Top 5 */
.nlA-top5 { grid-area: top; padding: 24px 22px 18px; border-radius: 22px; background: var(--nlA-blaek-2); }
.nlA-kort-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 14px; }
.nlA-kort-hoved h3 { margin: 0; font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 72%; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--nlA-creme); }
.nlA-kort-hoved .nlA-pillink { min-height: 0; font-size: 14.5px; color: var(--nlA-daemp); white-space: nowrap; }
.nlA-top5 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nlA-top5 li {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 58px; padding: 6px 14px 6px 10px; border-radius: 14px; transition: background-color .2s, transform .2s;
}
.nlA-top5 li:hover { background: var(--nlA-blaek-3); }
.nlA-rang { font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1; text-align: center; color: rgba(255, 242, 228, .42); font-variant-numeric: tabular-nums; }
.nlA-top5-navn { min-width: 0; }
.nlA-top5-navn strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--nlA-creme); }
.nlA-top5-navn small { display: block; font: 600 13px/1.3 var(--nlA-tal); color: var(--nlA-svag); }
.nlA-lvl { text-align: right; white-space: nowrap; }
.nlA-lvl b { font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1; color: var(--nlA-creme); font-variant-numeric: tabular-nums; }
.nlA-lvl b small { font-size: 14px; font-weight: 700; color: var(--nlA-svag); margin-right: 3px; letter-spacing: .04em; }
.nlA-lvl > small { display: block; font: 600 12.5px/1.3 var(--nlA-tal); color: var(--nlA-svag); }
/* Nr. 1 faar plakatens gradient – det eneste farvede felt i listen */
.nlA-top5 li:first-child { background: var(--nlA-grad); }
.nlA-top5 li:first-child .nlA-rang { color: #fff; }
.nlA-top5 li:first-child small, .nlA-top5 li:first-child .nlA-lvl b small { color: rgba(255, 255, 255, .86); }
.nlA-top5 li:first-child:hover { transform: translateY(-2px); }
.nlA-tom { padding: 26px 14px; border-radius: 14px; background: var(--nlA-blaek-3); color: var(--nlA-daemp); font-size: 15px; }
.nlA-tom b { display: block; margin-bottom: 4px; color: var(--nlA-creme); font-size: 16px; }

/* Naeste event */
.nlA-evt {
    grid-area: evt; position: relative; overflow: hidden; display: grid; grid-template-columns: 40% minmax(0, 1fr);
    min-height: 196px; border-radius: 22px; background: var(--nlA-blaek-2); color: var(--nlA-creme);
}
.nlA-evt.uden-billede { grid-template-columns: minmax(0, 1fr); }
.nlA-evt-billede { position: relative; overflow: hidden; background: var(--nlA-blaek-3); }
.nlA-evt-billede img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.85) brightness(.8); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.nlA-evt:hover .nlA-evt-billede img { transform: scale(1.05); }
.nlA-evt-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px; min-width: 0; }
.nlA-evt-tekst .nlA-chip { background: var(--nlA-blaek-3); }
.nlA-evt h3 { margin: 4px 0 0; max-width: 100%; font-family: var(--nlA-display); font-style: italic; font-weight: 900; font-stretch: 72%; font-size: 30px; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.nlA-evt-dato { margin: 0; font: 600 15px/1.35 var(--nlA-tal); color: var(--nlA-daemp); }
.nlA-evt-tid { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 190, 59, .14); color: var(--nlA-sol); font: italic 800 16px/1 var(--nlA-tal); white-space: nowrap; }
.nlA-evt-tid svg { width: 16px; height: 16px; }

/* ---------- Faellesskabet i tal ----------------------------------------
   Sidste sektion i den nye top. Bunden toner over i sitets graa base-100, saa
   overgangen til event/leaderboard-sektionen ikke bliver en haard kant. */
.nlA-tal-sektion { position: relative; padding: 110px 0 72px;
    background: linear-gradient(180deg, var(--nlA-blaek) 0%, #1a0c12 55%, hsl(var(--b1, 220 18% 20%)) 100%); }
.nlA-tal-grid { margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nlA-tal-felt { padding: 26px 26px 24px; border-radius: 22px; background: var(--nlA-blaek-2); transition: transform .3s ease, background-color .3s; }
.nlA-tal-felt:hover { transform: translateY(-4px); background: var(--nlA-blaek-3); }
.nlA-tal-felt b { display: block; font-family: var(--nlA-tal); font-style: italic; font-weight: 800; font-size: clamp(46px, 4.4vw, 68px); line-height: .95; letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--nlA-creme); }
.nlA-tal-felt span { display: block; margin-top: 8px; color: var(--nlA-daemp); font-size: 15.5px; }
.nlA-tal-felt:first-child { background: var(--nlA-grad); }
.nlA-tal-felt:first-child span { color: rgba(255, 255, 255, .9); }

/* ---------- Indgangen: én orkestreret bevaegelse ved sideindlaesning ----- */
@media (prefers-reduced-motion: no-preference) {
    .nlA-titel .nlA-l { animation: nlA-ind .8s cubic-bezier(.2, .9, .25, 1) both; }
    .nlA-titel .nlA-l2 { animation-delay: .08s; }
    .nlA-titel .nlA-l3 { animation-delay: .16s; }
    .nlA-sticker { animation: nlA-klask .6s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
    .nlA-undertekst, .nlA-fakta { animation: nlA-op .7s ease .3s both; }
    .nlA-billet-wrap { animation: nlA-op .8s cubic-bezier(.2, .9, .25, 1) .4s both; }
    .nlA-hero-billede { animation: nlA-zoom 2.4s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes nlA-ind { from { opacity: 0; transform: translateX(-60px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes nlA-klask { from { opacity: 0; transform: rotate(-30deg) scale(.4); } to { opacity: 1; transform: rotate(11deg) scale(1); } }
@keyframes nlA-op { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nlA-zoom { from { transform: scaleX(-1) scale(1.08); } to { transform: scaleX(-1) scale(1); } }

/* Ingen bevaegelse oenskes: baandene staar stille, og dubletten (der kun findes for
   den soemloese loekke) skjules. Tapen kan i stedet rulles til siden med fingeren. */
@media (prefers-reduced-motion: reduce) {
    .nlA-gaestebaand-spor, .nlA-tape-spor, .nlA-prik { animation: none !important; }
    .nlA-gaestebaand-hold[aria-hidden="true"], .nlA-tape-hold[aria-hidden="true"] { display: none; }
    .nlA-tape-vindue { overflow-x: auto; }
    .nlA-nav *, .nlA-forside * { transition-duration: .01ms !important; }
}

/* ---------- Forsidens bredder ------------------------------------------- */
@media (max-width: 1180px) {
    .nlA-praemie strong { font-size: 22px; }
}
@media (max-width: 1023px) {
    .nlA-hero-indhold { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: calc(var(--nlA-navh) + 36px); padding-bottom: 110px; }
    .nlA-billet-wrap { max-width: 520px; }
    .nlA-tal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Én kolonne: i et halvt felt blev navnene i top 5 klippet allerede ved 820 px */
    .nlA-saeson-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kort" "top" "evt"; }
    .nlA-sk { min-height: 460px; }
}
/* Stickeren: paa desktop er den lavere end titlens foerste linje og sidder paent mellem
   "BYEN" og "SOVER". Mellem 640 og 1023 px er titlen mindre, mens stickeren holder sin
   minimumsstoerrelse (92 px) – saa ramte den R'et i "SOVER" (fundet ved kontrol 06-10-2026).
   640–767: én kolonne, masser af plads – den rykker til hoejre for "SOVER".
   768–1023: to kolonner, ingen plads at rykke paa – den skaleres med titlen i stedet. */
@media (min-width: 640px) and (max-width: 767px) {
    .nlA-sticker { left: calc(clamp(64px, 11.2vw, 176px) * 2.8); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .nlA-hero-indhold { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
    .nlA-titel { --ts: 12.4vw; font-size: 12.4vw; }
    .nlA-sticker { left: calc(12.4vw * 2.3); top: calc(12.4vw * -.08); width: calc(12.4vw * .82); }
    .nlA-byen b { font-size: 68px; }
}
@media (max-width: 639px) {
    .nlA-evt { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px auto; }
    .nlA-evt.uden-billede { grid-template-rows: auto; }
}
@media (max-width: 639px) {
    .nlA-hero { min-height: 0; }
    .nlA-forside.med-gaest .nlA-hero { min-height: 0; }
    .nlA-hero-indhold { padding-bottom: 92px; }
    .nlA-hero-billede { object-position: 6% 50%; }
    .nlA-hero-skygge {
        background: linear-gradient(180deg, rgba(21, 10, 14, .62) 0, rgba(21, 10, 14, .28) 130px, rgba(21, 10, 14, .34) 280px, rgba(21, 10, 14, .66) 420px, rgba(21, 10, 14, .86) 60%, var(--nlA-blaek) 92%);
    }
    .nlA-titel { font-size: 22vw; }
    .nlA-titel .nlA-l2 { padding-left: .16em; }
    .nlA-titel .nlA-l3 { padding-left: .32em; }
    .nlA-sticker { left: auto; right: 0; top: -2px; width: 96px; }
    .nlA-sticker b { font-size: 36px; }
    .nlA-sticker span { font-size: 12.5px; }
    .nlA-undertekst { margin-top: 22px; color: rgba(255, 242, 228, .94); text-shadow: 0 1px 14px rgba(21, 10, 14, .55); }
    .nlA-fakta { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .nlA-fakta li { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 11px; border-radius: 16px; font-size: 13px; line-height: 1.25; background: rgba(21, 10, 14, .55); }
    .nlA-fakta b { font-size: 24px; }
    .nlA-fakta small { display: none; }             /* "siden 2019": "7 år i drift" siger det samme paa det smalle felt */
    .nlA-billet { padding: 20px 18px 18px; border-radius: 22px; }
    .nlA-billet-wrap.med-stump .nlA-billet { border-radius: 22px 22px 0 0; }
    .nlA-byen b { font-size: 68px; }
    .nlA-byen span { font-size: 26px; }
    .nlA-stub { padding: 18px; border-radius: 0 0 22px 22px; }
    .nlA-tape { margin-top: -44px; }
    .nlA-tape-inder, .nlA-tape-maerke { height: 52px; }
    .nlA-tape-maerke { font-size: 16px; padding-right: 14px; }
    .nlA-tape-lang { display: none; }
    .nlA-tape-hold { font-size: 15px; }

    .nlA-saeson { padding-top: 96px; }
    .nlA-saeson-grid { margin-top: 30px; gap: 12px; }
    .nlA-hoved p { font-size: 16px; }
    .nlA-sk { min-height: 0; padding: 22px 18px; border-radius: 22px; }
    .nlA-praemie { position: relative; top: auto; right: auto; max-width: none; align-self: flex-start; margin: 18px 0 0 4px; transform: rotate(-2deg); padding: 12px 16px 13px; }
    .nlA-praemie strong { font-size: 22px; }
    .nlA-sk-titel { padding-top: 70px; font-size: 17vw; }
    .nlA-ur { gap: 8px; }
    .nlA-ur > div { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 14px; }
    .nlA-ur b { font-size: 44px; }
    .nlA-ur span { font-size: 12px; }
    .nlA-sk-knapper { gap: 6px 18px; }
    .nlA-sk-knapper .nlA-knap { width: 100%; }
    .nlA-top5 { padding: 20px 12px 12px; }
    .nlA-kort-hoved { margin: 0 6px 12px; }
    .nlA-kort-hoved h3 { font-size: 26px; }
    .nlA-top5 li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 6px 12px 6px 6px; }
    .nlA-rang { font-size: 26px; }
    .nlA-evt-tekst { padding: 18px 18px 20px; }
    .nlA-evt h3 { font-size: 27px; }

    .nlA-tal-sektion { padding: 84px 0 64px; }
    .nlA-tal-grid { gap: 10px; margin-top: 30px; }
    .nlA-tal-felt { padding: 20px 18px; border-radius: 18px; }
    .nlA-tal-felt span { font-size: 14px; }
}

/* 06-10-2026: smal kursiv versal-tekst laeser mellemrummene som ingenting ("TOP 5LIGE NU",
   "FAELLESSKABET ITAL"). Samme lille ord-luft som nl-base.css giver sine kort-titler. */
.nlA-hoved h2, .nlA-kort-hoved h3 { word-spacing: .07em; }