@charset "UTF-8";
/* ==========================================================================
   nl-base.css – fælles plakat-system for ALLE indersider (06-10-2026)

   Brugeren: "hele siden, regler osv. matcher ikke – få det til at matche".
   Forsidens top (nl-top.css, nlA-*) er forbilledet: blæk/vin-grund, creme tekst,
   rød → orange → sol, Archivo kursiv 900 smal i versaler til overskrifter,
   Barlow Semi Condensed til tal og labels, skrå knapper, bløde mørke kort.

   Ren CSS, IKKE Tailwind: main.css er en build fra februar, og nye Tailwind-
   klasser findes ikke. Alt hedder nlP- ("plakat"), så intet støder ind i DaisyUI.
   Linkes fra layouts/layout.ejs med ?v= – den SKAL bumpes ved hver ændring,
   for Apache cacher /styles i 30 dage.

   Husregler (brugerens smag – de er ikke forslag):
     - INGEN 1px-kanter om kort. Tone adskiller: grund < flade < flade-2 < flade-3.
     - INGEN emoji som ikoner. Inline-SVG (stroke="currentColor").
     - INGEN glow-orbs, svævende partikler eller gradient-TEKST. Gradienten bor
       kun på flader: knapper, aktive markeringer, ét fremhævet kort.
     - Indersider er ikke kæmpe plakater: ét sidehoved, så rolig læsning.

   --------------------------------------------------------------------------
   MANUAL – kort beskrivelse + mindste markup. Forbillede: views/rules/rules.ejs
   --------------------------------------------------------------------------

   SIDEN
     .nlP-side            Sidens rod. Blæk-grund, creme tekst, Archivo, korrekt
                          fokusring. Farver også <main>/<body> (via :has), så
                          der aldrig er en grå stribe under en kort side.
                          <div class="nlP-side"> … </div>
     .nlP-wrap            Indholdsbredde (1360 px) + sidekant der følger menuen.
       .nlP-wrap--smal    880 px – formularer, én kolonne tekst.
     .nlP-layout          To kolonner: klistret indeks til venstre + indhold.
                          Én kolonne under 1024 px (indekset lægger sig øverst).
                          <div class="nlP-wrap nlP-layout">
                            <aside class="nlP-layout-aside"> … </aside>
                            <div class="nlP-layout-indhold"> … </div>
                          </div>

   SIDEHOVED (ét pr. side, lige under menuen)
     .nlP-hoved           Dæmpet solnedgangs-flade med korn. Valgfrit billede-
                          bånd: læg et <img> i .nlP-hoved-bg – det farvegraderes
                          som forsidens sæsonkort. Uden billede: ren flade.
       .nlP-hoved--lille  Lavere hoved til admin/formularer.
     .nlP-kicker          Lille label over titlen (sol, versaler, skrå streg foran).
     .nlP-titel           Stor kursiv titel. <em> i titlen = ordet i sol-farve.
                          Lange sammensatte ord: sæt &shy; ind (Ansøgnings&shy;skabeloner),
                          ellers knækker de midt i et bogstav-sted på mobil.
     .nlP-undertekst      Én-to linjers forklaring.
     .nlP-hoved-meta      Række af piller med nøgletal (b = tallet i sol).
     .nlP-handlinger      Knap-række (højre side på desktop).
       <header class="nlP-hoved">
         <div class="nlP-hoved-bg" aria-hidden="true"><img src="/assets/billede1.webp" alt=""></div>
         <div class="nlP-wrap nlP-hoved-inder">
           <div class="nlP-hoved-tekst">
             <p class="nlP-kicker">Regelsættet</p>
             <h1 class="nlP-titel">Server<em>regler</em></h1>
             <p class="nlP-undertekst">Læs og forstå vores retningslinjer.</p>
             <ul class="nlP-hoved-meta"><li class="nlP-pille"><b>4</b> regelsæt</li></ul>
           </div>
           <div class="nlP-handlinger"> <a class="nlP-knap" href="…">Ny regel</a> </div>
         </div>
       </header>
       Billedets fokuspunkt: style="--nlP-fokus: 30% 60%" på .nlP-hoved-bg.
       .nlP-hoved-bg--spejl spejler billedet (forsidens billede1 skal spejles).

   SEKTIONER
     .nlP-sektion         Lodret luft mellem sidens blokke.
     .nlP-sektion-hoved   Titel + evt. link/knap til højre.
     .nlP-sektion-titel   Kursiv versal-overskrift (h2).
     .nlP-sektion-tekst   Dæmpet tekst under titlen.
       <section class="nlP-sektion"><div class="nlP-wrap">
         <div class="nlP-sektion-hoved"><div>
           <h2 class="nlP-sektion-titel">Sæsonen</h2>
           <p class="nlP-sektion-tekst">…</p></div>
           <a class="nlP-link" href="…"><span>Se alle</span><svg …/></a>
         </div> …
       </div></section>

   KORT
     .nlP-kort            Blødt mørkt kort (flade, 22 px hjørner, ingen kant).
       --fremhaevet       Rød→orange gradient (kun ÉT pr. visning – det er
                          "nr. 1"-feltet). Tekst bliver hvid.
       --glas             Mørkt glas med blur – kun oven på billeder.
       --dyb              Én tone lysere – til kort inde i kort.
       --link             Klikbart kort (a.nlP-kort): løfter sig ved hover.
       --lille            Mindre polstring.
     .nlP-kort-hoved      Titel-række øverst i kortet (titel + link).
     .nlP-kort-titel      Kursiv versal kort-titel (h3).
       <article class="nlP-kort">
         <div class="nlP-kort-hoved"><h3 class="nlP-kort-titel">Top 5</h3></div> …
       </article>

   KNAPPER (a eller button – samme udseende)
     .nlP-knap            Primær: skrå rød→orange flade, lige tekst ovenpå.
       --sekundaer        Creme 10 % flade.
       --ghost            Kun tekst; flade ved hover.
       --moerk            Blæk flade – til brug PÅ et fremhævet (gradient) kort.
       --fare             Slet/afvis: dæmpet rød, fuld rød ved hover.
       --lille            40 px høj (værktøjslinjer, tabeller).
       --blok             Fuld bredde.
     [disabled] / aria-disabled="true" giver halv styrke og ingen hover.
     .er-aktiv            Tændt tilstand (rød flade) – fx "Læs op" der er blevet til "Stop".
       <a class="nlP-knap" href="/x"><svg …/>Spil nu</a>
       <button type="submit" class="nlP-knap nlP-knap--sekundaer nlP-knap--lille">Gem</button>
     .nlP-link            Tekstlink m. understreg + pil (Barlow).
       <a class="nlP-link" href="…"><span>Se alle</span><svg …/></a>

   PILLER OG MÆRKER
     .nlP-pille           Rund label (30 px). <b> = tal i sol. .nlP-prik = statusprik.
       --god --advarsel --fejl --info --varm(gradient)
       <span class="nlP-pille nlP-pille--god"><i class="nlP-prik"></i>Åben</span>
     .nlP-maerke          Lille kantet stempel (NY, OPDATERET, ADMIN). Sol som standard.
       --god --fejl --varm --neutral
       <span class="nlP-maerke">Ny</span>
     .nlP-prik            7 px statusprik i currentColor. --puls = pulserer.

   FORMULARER
     .nlP-formular        Lodret stak af felter med god luft.
     .nlP-felt            Ét felt: label + kontrol + hjælp/fejl, lodret.
     .nlP-felt-label      Label (Barlow). <small> i den = "valgfri" o.l.
     .nlP-felt-hjaelp     Hjælpetekst under feltet.
     .nlP-felt-fejl       Fejltekst (rød). Sæt aria-invalid="true" på kontrollen.
     .nlP-input           Selve kontrollen – virker på input, textarea og select.
                          (Inputs inde i .nlP-felt får stilen automatisk.)
     .nlP-valg            Checkbox/radio + tekst på én linje.
       <form class="nlP-formular" method="post" action="…">
         <div class="nlP-felt">
           <label class="nlP-felt-label" for="titel">Titel <small>(skal udfyldes)</small></label>
           <input class="nlP-input" id="titel" name="title">
           <p class="nlP-felt-hjaelp">Vises øverst på regelsiden.</p>
         </div>
         <label class="nlP-valg"><input type="checkbox" name="x"> Send besked</label>
       </form>

   TABELLER
     .nlP-tabel-wrap      Rulleramme (vandret rul på smalle skærme) + flade.
     .nlP-tabel           Mørk, luftig tabel, zebra i tone, ingen streger.
       --stak             Under 640 px bliver hver række et lille kort. Kræver
                          data-label="Kolonnenavn" på hver <td>.
       <div class="nlP-tabel-wrap"><table class="nlP-tabel nlP-tabel--stak">
         <thead><tr><th>Navn</th><th class="nlP-tal">Timer</th></tr></thead>
         <tbody><tr><td data-label="Navn">Mads</td><td data-label="Timer" class="nlP-tal">12</td></tr></tbody>
       </table></div>

   LISTER
     .nlP-liste           Lodret liste af rækker (ul/ol, ingen punkter).
     .nlP-raekke          Én række: nr | tekst (strong + small) | slut. a, button eller div.
       .er-aktiv          Gradient-række (nr. 1 / valgt).
       .er-her            Rolig markering af "her er du" (indholdsfortegnelser).
     .nlP-raekke-nr       Stort kursivt tal (Barlow).
     .nlP-raekke-tekst    Titel (strong) + undertekst (small), klippes med "…".
     .nlP-raekke-slut     Højre side: piller, tal, pil.
       <ul class="nlP-liste"><li><a class="nlP-raekke" href="#a">
         <span class="nlP-raekke-nr">1</span>
         <span class="nlP-raekke-tekst"><strong>Generelle regler</strong><small>3.7.2026</small></span>
         <span class="nlP-raekke-slut"><span class="nlP-maerke">Ny</span></span>
       </a></li></ul>

   TOM TILSTAND
     .nlP-tom             Centreret boks: ikon, titel, tekst, evt. knap.
       <div class="nlP-tom"><span class="nlP-tom-ikon"><svg …/></span>
         <h3 class="nlP-tom-titel">Ingen ansøgninger</h3><p>Der er intet her endnu.</p></div>

   BESKEDER
     .nlP-besked          Info-boks med ikon. --succes --advarsel --fejl (info er standard).
       <div class="nlP-besked nlP-besked--succes" role="status"><svg …/>
         <div><strong>Gemt</strong><p>Din ansøgning er sendt.</p></div></div>

   FANER
     .nlP-faner           Fanebjælke (rulbar på mobil).
     .nlP-fane            Én fane (a eller button). Aktiv: .er-aktiv,
                          aria-selected="true" eller aria-current="page".
     .nlP-fane-tal        Lille tæller i fanen.
       <nav class="nlP-faner"><a class="nlP-fane er-aktiv" href="?f=1">Aktive <span class="nlP-fane-tal">3</span></a></nav>

   FOLD (harmonika – ren CSS, checkbox-drevet, så eksisterende JS der sætter
   checkbox.checked bliver ved med at virke)
     .nlP-fold            Kortet.  .nlP-fold-tjek = checkboxen (skjult, men fokusérbar)
     .nlP-fold-hoved      <label for> = klikflade.  .nlP-fold-pil = pilen.
     .nlP-fold-indhold > .nlP-fold-krop   Indholdet (glider op/ned).
     .nlP-fold-tekst > .nlP-fold-titel + .nlP-fold-meta   Titel og metalinje i hovedet.
     .nlP-naar-lukket / .nlP-naar-aaben   Tekst i hovedet der kun vises lukket/åben.
     .nlP-fold-fod        Knap-række nederst i indholdet (højrestillet).
     .nlP-vaerktoej       Linje: info til venstre, handlinger til højre.
       <div class="nlP-fold" id="a">
         <input type="checkbox" class="nlP-fold-tjek" id="a-tjek">
         <label class="nlP-fold-hoved" for="a-tjek"> … <span class="nlP-fold-pil"><svg …/></span></label>
         <div class="nlP-fold-indhold"><div class="nlP-fold-krop"> … </div></div>
       </div>

   LANG TEKST
     .nlP-prose           Regler, vilkår, markdown: overskrifter, lister, links,
                          citater, tabeller, kode. Læsebredde ~75 tegn.
     .nlP-afsnit / .nlP-afsnit-titel / .nlP-pnr
                          Sættes af JS på regel-HTML'en (se rules.ejs): et <p> der
                          starter med <strong> bliver et afsnit med kursiv titel,
                          og "§1.2."-numre bliver orange tal. Uden JS: alm. fed tekst.

   ANDET
     .nlP-indeks          Indholdsfortegnelse (kort med .nlP-liste). Brug i aside.
                          .nlP-indeks-titel = lille label, .nlP-indeks-note = hjælpelinje.
     .nlP-cta             Afslutnings-kort (tekst + knap). Kombinér med .nlP-kort--fremhaevet
                          og en .nlP-knap--moerk. .nlP-cta-titel = overskriften.
     .nlP-stat            Nøgletals-felt: <b> stort tal + <span> label. --varm = gradient.
     .nlP-nr              Stort kursivt nummer (regel 1, 2, 3 …). --varm = sol.
     .nlP-flyd            Flydende knap nederst til VENSTRE (højre hjørne er
                          optaget af guide-telefonen og "til toppen"). Panel: .nlP-flyd-panel
                          (Tailwinds .hidden skjuler det), tæller: .nlP-tal-boble.
       --kun-smal         Kun under 1024 px (når siden har et klistret indeks).
       .er-gemt           Glider væk (sæt/fjern fra JS).
     .nlP-korn            Kornlag (absolut, dækker forælderen).

   HJÆLPEKLASSER
     .nlP-stak (--s --l)          Lodret flex med mellemrum 8/16/28 px.
     .nlP-linje (--mellem)        Vandret flex, ombryder, centreret.
     .nlP-gitter (--2 --3 --4)    Gitter. Uden tal: auto-fill á min. 260 px.
                                  --3/--4 → 2 kolonner < 1024, 1 kolonne < 640.
     .nlP-mt-0 -s -m -l -xl       margin-top 0/8/16/28/48.
     .nlP-daemp .nlP-svag .nlP-sol .nlP-creme   Tekstfarver.
     .nlP-tal                     Barlow + faste ciffer-bredder.
     .nlP-skjult                  Kun for skærmlæsere.
     .nlP-ikon                    18 px SVG.
   ========================================================================== */

:root {
    /* Aliaser oven på forsidens tokens, så en farve kun skal rettes ét sted.
       Fallbacks i tilfælde af at nl-top.css en dag ikke er linket. */
    --nlP-grund: var(--nlA-blaek, #150a0e);
    --nlP-flade: var(--nlA-blaek-2, #1f0f15);
    --nlP-flade-2: var(--nlA-blaek-3, #2b141d);
    --nlP-flade-3: #3a1b27;
    --nlP-vin: var(--nlA-vin, #4a0d1e);
    --nlP-roed: var(--nlA-roed, #d9271c);
    --nlP-orange: var(--nlA-orange, #f2621c);
    --nlP-sol: var(--nlA-sol, #ffbe3b);
    --nlP-creme: var(--nlA-creme, #fff2e4);
    --nlP-daemp: var(--nlA-daemp, rgba(255, 242, 228, .78));
    --nlP-svag: var(--nlA-svag, rgba(255, 242, 228, .6));
    --nlP-hvisk: rgba(255, 242, 228, .42);
    --nlP-grad: var(--nlA-grad, linear-gradient(100deg, #d9271c 0%, #ee4a1d 45%, #f9821f 100%));
    /* Status – lyse nok til at kunne læses som TEKST på blæk */
    --nlP-god: #5be38d;
    --nlP-advarsel: #ffbe3b;
    --nlP-fejl: #ff8a7d;
    --nlP-info: #a9b1ff;
    --nlP-display: var(--nlA-display, "Archivo", "Arial Narrow", Arial, sans-serif);
    --nlP-tal-font: var(--nlA-tal, "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif);
    --nlP-tekst: var(--nlA-tekst, "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif);
    --nlP-navh: var(--nlA-navh, 76px);
    --nlP-kant: var(--nlA-kant, clamp(16px, 4vw, 56px));
    --nlP-maks: 1360px;
    --nlP-smal: 880px;
    --nlP-r: 22px;
    --nlP-r-s: 14px;
    --nlP-ease: cubic-bezier(.2, .8, .2, 1);
    --nlP-korn: 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");
}

/* ==========================================================================
   SIDEN
   ========================================================================== */
.nlP-side {
    position: relative;
    min-height: 60vh;
    padding-bottom: clamp(64px, 8vw, 120px);
    background: var(--nlP-grund);
    color: var(--nlP-creme);
    font-family: var(--nlP-tekst);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;               /* mørke scrollbars, datovælgere og select-lister */
    overflow-x: clip;                 /* skrå knapper/kornlag må aldrig give vandret rul */
}
/* <main> er flex-1 i layoutet; uden det her stod DaisyUI's grå base-100 under en kort side */
body:has(.nlP-side), body:has(.nlP-side) > main { background: var(--nlP-grund); }

.nlP-side a { color: inherit; text-decoration: none; }
.nlP-side svg { flex-shrink: 0; }
.nlP-side :focus-visible { outline: 3px solid var(--nlP-sol); outline-offset: 3px; border-radius: 10px; }
/* [hidden] taber ellers til komponenternes display:flex/grid */
.nlP-side [hidden] { display: none !important; }
.nlP-side ::selection { background: rgba(242, 98, 28, .45); color: #fff; }

.nlP-wrap { width: 100%; max-width: var(--nlP-maks); margin: 0 auto; padding: 0 var(--nlP-kant); }
.nlP-wrap--smal { max-width: calc(var(--nlP-smal) + 2 * var(--nlP-kant)); }

/* To kolonner: klistret indeks + indhold */
.nlP-layout {
    display: grid; gap: 28px 40px; align-items: start;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.nlP-layout-aside {
    position: sticky; top: calc(var(--nlP-navh) + 24px);
    max-height: calc(100vh - var(--nlP-navh) - 48px); overflow-y: auto; scrollbar-width: none;
    display: grid; gap: 14px;
}
.nlP-layout-aside::-webkit-scrollbar { display: none; }
.nlP-layout-indhold { min-width: 0; }
@media (max-width: 1023px) {
    .nlP-layout { grid-template-columns: minmax(0, 1fr); }
    .nlP-layout-aside { position: static; max-height: none; overflow: visible; }
}

/* ==========================================================================
   SIDEHOVED
   ========================================================================== */
.nlP-hoved {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(40px, 5.2vw, 76px) 0 clamp(40px, 5vw, 64px);
    background: var(--nlP-vin);
}
/* Fladen: solnedgang øverst til højre (som forsidens lys), blæk nederst og til venstre,
   så titlen altid står på mørk grund. Billedet (hvis der er et) ligger ovenpå. */
.nlP-hoved-bg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(75% 150% at 96% -20%, #c4501d 0%, #8a2716 32%, rgba(74, 13, 30, 0) 68%),
        linear-gradient(185deg, #3f101a 0%, #2a0c14 55%, var(--nlP-grund) 100%);
}
.nlP-hoved-bg img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: var(--nlP-fokus, 50% 45%);
    /* Samme behandling som forsidens sæsonkort: afmættet og mørkere, så farven
       kommer fra graderingen herunder og ikke fra billedets egne farver */
    filter: saturate(.75) brightness(.72) contrast(1.1);
}
.nlP-hoved-bg--spejl img { transform: scaleX(-1); }   /* som forsiden: solen til højre, teksten på den mørke side */
/* Solnedgangs-graderingen: farven fra gradienten, lyset fra billedet (mix-blend: color).
   z-index 1/2: ::before kommer FØR <img> i DOM'en og blev derfor malet under billedet –
   så graderingen ramte kun fladen bag det, og billedet stod gråt (set 06-10-2026). */
.nlP-hoved-bg::before {
    content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color; opacity: .92;
    background: linear-gradient(200deg, #ffb347 0%, #f5651e 30%, #c42a19 62%, #3a0f0d 100%);
}
/* Læselighed: mørkt i venstre side (titlen) og glidende over i sidens grund i bunden,
   så der ingen kant er mellem hovedet og indholdet */
.nlP-hoved-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(90deg, rgba(21, 10, 14, .78) 0%, rgba(21, 10, 14, .42) 42%, rgba(21, 10, 14, 0) 78%),
        linear-gradient(180deg, rgba(21, 10, 14, .3) 0%, rgba(21, 10, 14, 0) 28%, rgba(21, 10, 14, .16) 64%, var(--nlP-grund) 100%);
}
/* Solens lys oppe til højre (soft-light, som forsidens .nlA-hero-lys). Ligger over
   billedet men under teksten; .nlP-hoved er isoleret, så det kun blander med billedet. */
.nlP-hoved::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light;
    background: radial-gradient(55% 90% at 90% 0%, rgba(255, 214, 120, .85), rgba(255, 140, 40, .22) 48%, transparent 72%);
}
.nlP-hoved::after, .nlP-korn {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .13; mix-blend-mode: overlay; background-image: var(--nlP-korn);
}
.nlP-hoved-inder {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
}
.nlP-hoved-tekst { min-width: 0; max-width: 860px; }
.nlP-hoved--lille { padding: clamp(32px, 4vw, 52px) 0 clamp(28px, 3.4vw, 40px); }
.nlP-hoved--lille .nlP-titel { font-size: clamp(38px, 4.6vw, 68px); }

.nlP-kicker {
    display: inline-flex; align-items: center; gap: 11px; margin: 0 0 16px;
    font: 800 14px/1 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .14em;
    color: var(--nlP-sol);
}
/* Den skrå streg er menuens aktiv-markering – samme tegn hele vejen igennem */
.nlP-kicker::before {
    content: ""; width: 26px; height: 5px; border-radius: 3px; flex-shrink: 0;
    background: var(--nlP-grad); transform: skewX(-20deg);
}
.nlP-titel {
    margin: 0;
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 66%;
    font-size: clamp(46px, 6.6vw, 104px); line-height: .86; letter-spacing: -.01em; text-transform: uppercase;
    color: var(--nlP-creme); overflow-wrap: break-word; text-wrap: balance;
    text-shadow: 0 4px 34px rgba(21, 10, 14, .35);
}
.nlP-titel em { font-style: inherit; color: var(--nlP-sol); }
.nlP-undertekst {
    margin: 18px 0 0; max-width: 36em;
    font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--nlP-daemp); text-wrap: pretty;
}
.nlP-hoved-meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nlP-hoved-meta .nlP-pille { min-height: 38px; padding: 0 16px; font-size: 15px; background: rgba(255, 242, 228, .1); }
.nlP-hoved-meta .nlP-pille b { font-size: 21px; }
@media (min-width: 1024px) {
    .nlP-hoved-meta .nlP-pille { background: rgba(255, 242, 228, .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.nlP-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* ==========================================================================
   SEKTIONER
   ========================================================================== */
.nlP-sektion { padding-top: clamp(40px, 5vw, 72px); }
.nlP-sektion-hoved {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
    gap: 12px 28px; margin-bottom: 22px;
}
.nlP-sektion-titel {
    margin: 0;
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 68%;
    font-size: clamp(32px, 3.6vw, 52px); line-height: .92; letter-spacing: -.005em; text-transform: uppercase;
    color: var(--nlP-creme);
}
.nlP-sektion-titel em { font-style: inherit; color: var(--nlP-sol); }
.nlP-sektion-tekst { margin: 8px 0 0; max-width: 40em; color: var(--nlP-daemp); text-wrap: pretty; }

/* ==========================================================================
   KORT
   ========================================================================== */
.nlP-kort {
    position: relative; min-width: 0;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: var(--nlP-r);
    background: var(--nlP-flade); color: var(--nlP-creme);
}
.nlP-kort--lille { padding: 16px 18px; border-radius: 18px; }
.nlP-kort--dyb { background: var(--nlP-flade-2); }
.nlP-kort--fremhaevet { background: var(--nlP-grad); color: #fff; }
.nlP-kort--fremhaevet .nlP-daemp, .nlP-kort--fremhaevet .nlP-svag,
.nlP-kort--fremhaevet .nlP-sektion-tekst, .nlP-kort--fremhaevet p { color: rgba(255, 255, 255, .9); }
.nlP-kort--glas { background: rgba(21, 10, 14, .9); }
@media (min-width: 1024px) {
    .nlP-kort--glas { background: rgba(21, 10, 14, .58); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
}
.nlP-kort--link { display: block; transition: transform .3s var(--nlP-ease), background-color .3s; }
.nlP-kort--link:hover { transform: translateY(-3px); background: var(--nlP-flade-2); }
.nlP-kort--fremhaevet.nlP-kort--link:hover { background: var(--nlP-grad); filter: brightness(1.05); }

.nlP-kort-hoved { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
/* word-spacing (06-10-2026, kontrol): i 72 % bredde + kursiv er mellemrummet så smalt, at
   et kort ord forsvandt ind i nabolaget – "Hop i kanalen" læstes "HOPI KANALEN", "RP spørgsmål"
   "RPSPØRGSMÅL". De store titler har luft nok og er urørte. */
.nlP-kort-titel {
    margin: 0;
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 72%;
    font-size: clamp(22px, 2vw, 28px); line-height: 1; text-transform: uppercase; color: inherit;
    word-spacing: .07em;
}

/* ==========================================================================
   KNAPPER – skrå flade bag teksten, så teksten selv står lige (som forsidens)
   ========================================================================== */
.nlP-knap {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px; margin: 0;
    border: 0; background: transparent; color: #fff; cursor: pointer;
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 78%;
    font-size: 18px; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, color .2s;
    -webkit-tap-highlight-color: transparent;
}
.nlP-knap::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: 12px; transform: skewX(-8deg);
    background: var(--nlP-grad); box-shadow: 0 12px 30px rgba(217, 39, 28, .34);
    transition: box-shadow .25s, filter .25s, background-color .25s;
}
.nlP-knap:hover { transform: translateY(-2px); color: #fff; }
.nlP-knap:hover::before { box-shadow: 0 16px 36px rgba(242, 98, 28, .5); filter: brightness(1.06); }
.nlP-knap:active { transform: translateY(0); }
/* Fokusringen følger den skrå form i stedet for en lige firkant omkring den */
.nlP-knap:focus-visible { outline: none; }
.nlP-knap:focus-visible::before { outline: 3px solid var(--nlP-sol); outline-offset: 3px; }
.nlP-knap svg { width: 20px; height: 20px; }

.nlP-knap--sekundaer { color: var(--nlP-creme); }
.nlP-knap--sekundaer::before { background: rgba(255, 242, 228, .1); box-shadow: none; }
.nlP-knap--sekundaer:hover { color: var(--nlP-creme); }
.nlP-knap--sekundaer:hover::before { background: rgba(255, 242, 228, .17); box-shadow: none; filter: none; }

.nlP-knap--ghost { color: var(--nlP-creme); }
.nlP-knap--ghost::before { background: transparent; box-shadow: none; }
.nlP-knap--ghost:hover { color: var(--nlP-creme); }
.nlP-knap--ghost:hover::before { background: rgba(255, 242, 228, .08); box-shadow: none; filter: none; }

.nlP-knap--moerk { color: var(--nlP-creme); }
.nlP-knap--moerk::before { background: var(--nlP-grund); box-shadow: 0 12px 28px rgba(21, 10, 14, .35); }
.nlP-knap--moerk:hover { color: #fff; }
.nlP-knap--moerk:hover::before { background: #000; box-shadow: 0 16px 34px rgba(21, 10, 14, .45); filter: none; }

.nlP-knap--fare { color: #ffb4a6; }
.nlP-knap--fare::before { background: rgba(255, 107, 94, .14); box-shadow: none; }
.nlP-knap--fare:hover { color: #fff; }
.nlP-knap--fare:hover::before { background: var(--nlP-roed); box-shadow: 0 12px 28px rgba(217, 39, 28, .35); filter: none; }

.nlP-knap--lille { min-height: 40px; padding: 0 16px; gap: 8px; font-size: 15px; }
.nlP-knap--lille::before { border-radius: 10px; }
.nlP-knap--lille svg { width: 16px; height: 16px; }
.nlP-knap--blok { display: flex; width: 100%; }

.nlP-knap.er-aktiv { color: #fff; }
.nlP-knap.er-aktiv::before { background: var(--nlP-roed); box-shadow: 0 10px 26px rgba(217, 39, 28, .38); }
.nlP-knap:disabled, .nlP-knap[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }

/* Tekstlink med pil (som forsidens "Se hele listen") */
.nlP-link {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    font: 700 16px/1 var(--nlP-tal-font); color: var(--nlP-creme); text-decoration: none;
}
.nlP-link span { border-bottom: 2px solid rgba(255, 242, 228, .35); padding-bottom: 2px; transition: border-color .2s; }
.nlP-link svg { width: 16px; height: 16px; transition: transform .2s; }
.nlP-link:hover span { border-color: var(--nlP-sol); }
.nlP-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   PILLER, MÆRKER, PRIKKER
   ========================================================================== */
.nlP-pille {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 30px; padding: 0 12px; border-radius: 999px;
    background: rgba(255, 242, 228, .1); color: var(--nlP-daemp);
    font: 700 14px/1 var(--nlP-tal-font); letter-spacing: .01em; white-space: nowrap;
}
.nlP-pille b { font-style: italic; font-weight: 800; font-size: 1.2em; color: var(--nlP-sol); font-variant-numeric: tabular-nums; }
.nlP-pille svg { width: 15px; height: 15px; }
.nlP-pille--god { background: rgba(91, 227, 141, .13); color: #8ff0b2; }
.nlP-pille--advarsel { background: rgba(255, 190, 59, .14); color: var(--nlP-sol); }
.nlP-pille--fejl { background: rgba(255, 107, 94, .15); color: #ffa497; }
.nlP-pille--info { background: rgba(169, 177, 255, .14); color: #c6cbff; }
.nlP-pille--varm { background: var(--nlP-grad); color: #fff; }
.nlP-pille--varm b { color: #fff; }

.nlP-maerke {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    height: 22px; padding: 0 8px; border-radius: 6px;
    background: var(--nlP-sol); color: var(--nlP-grund);
    font: italic 800 12px/1 var(--nlP-tal-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.nlP-maerke--god { background: var(--nlP-god); color: #062611; }
.nlP-maerke--fejl { background: var(--nlP-roed); color: #fff; }
.nlP-maerke--varm { background: var(--nlP-grad); color: #fff; }
.nlP-maerke--neutral { background: rgba(255, 242, 228, .14); color: var(--nlP-creme); }

.nlP-prik { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
.nlP-prik--puls { animation: nlP-puls 2.2s ease-out infinite; }
@keyframes nlP-puls { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* ==========================================================================
   FORMULARER
   ========================================================================== */
.nlP-formular { display: grid; gap: 22px; }
.nlP-felt { display: grid; gap: 8px; min-width: 0; }
.nlP-felt-label { display: block; font: 700 15.5px/1.25 var(--nlP-tal-font); letter-spacing: .01em; color: var(--nlP-creme); }
.nlP-felt-label small { font-size: 13.5px; font-weight: 600; color: var(--nlP-svag); }
.nlP-felt-hjaelp { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--nlP-svag); }
.nlP-felt-fejl { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--nlP-fejl); }

.nlP-input,
.nlP-felt input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.nlP-felt textarea,
.nlP-felt select {
    display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 16px;
    border: 0; border-radius: var(--nlP-r-s); outline: none;
    background: var(--nlP-flade-2); color: var(--nlP-creme);
    font: 500 16px/1.4 var(--nlP-tekst);   /* 16 px: iOS zoomer ellers ind ved fokus */
    box-shadow: inset 0 0 0 2px transparent;
    transition: background-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.nlP-kort--dyb .nlP-input, .nlP-kort--dyb .nlP-felt input, .nlP-kort--dyb .nlP-felt textarea, .nlP-kort--dyb .nlP-felt select { background-color: var(--nlP-flade-3); }
.nlP-input::placeholder, .nlP-felt input::placeholder, .nlP-felt textarea::placeholder { color: rgba(255, 242, 228, .4); }
.nlP-input:hover, .nlP-felt input:hover, .nlP-felt textarea:hover, .nlP-felt select:hover { background-color: var(--nlP-flade-3); }
/* Fokus: orange ring indeni (ingen kant i hvile – tone adskiller feltet fra kortet) */
.nlP-input:focus, .nlP-felt input:focus, .nlP-felt textarea:focus, .nlP-felt select:focus {
    background-color: var(--nlP-flade-3); box-shadow: inset 0 0 0 2px var(--nlP-orange);
}
.nlP-input[aria-invalid="true"], .nlP-felt [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--nlP-fejl); }
.nlP-input:disabled, .nlP-felt :disabled { opacity: .55; cursor: not-allowed; }
textarea.nlP-input, .nlP-felt textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
select.nlP-input, .nlP-felt select {
    padding-right: 46px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff2e4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.nlP-felt select option, select.nlP-input option { background: var(--nlP-flade); color: var(--nlP-creme); }

.nlP-valg { display: inline-flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 11px; cursor: pointer; color: var(--nlP-daemp); line-height: 1.4; }
.nlP-valg input, .nlP-felt input[type="checkbox"], .nlP-felt input[type="radio"] {
    width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--nlP-orange); cursor: pointer;
}
.nlP-valg:hover { color: var(--nlP-creme); }

/* ==========================================================================
   TABELLER
   ========================================================================== */
.nlP-tabel-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 18px; background: var(--nlP-flade);
}
.nlP-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; color: var(--nlP-daemp); }
.nlP-tabel th {
    padding: 15px 16px 12px; text-align: left; white-space: nowrap; vertical-align: bottom;
    font: 800 12.5px/1.2 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .1em; color: var(--nlP-svag);
}
.nlP-tabel td { padding: 13px 16px; vertical-align: middle; }
.nlP-tabel th:first-child, .nlP-tabel td:first-child { padding-left: 20px; }
.nlP-tabel th:last-child, .nlP-tabel td:last-child { padding-right: 20px; }
/* Zebra i tone i stedet for streger */
.nlP-tabel tbody tr:nth-child(odd) { background: rgba(255, 242, 228, .035); }
.nlP-tabel tbody tr { transition: background-color .15s; }
.nlP-tabel tbody tr:hover { background: var(--nlP-flade-2); }
.nlP-tabel td strong, .nlP-tabel td b { color: var(--nlP-creme); font-weight: 700; }
.nlP-tabel .nlP-tal { text-align: right; }
.nlP-tabel a:not(.nlP-knap) { color: var(--nlP-creme); border-bottom: 2px solid rgba(255, 242, 228, .25); }
.nlP-tabel a:not(.nlP-knap):hover { border-color: var(--nlP-sol); }
@media (max-width: 639px) {
    /* --stak: hver række bliver et lille kort med label foran hver værdi */
    .nlP-tabel--stak thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .nlP-tabel--stak, .nlP-tabel--stak tbody { display: block; }
    .nlP-tabel--stak tr { display: grid; gap: 6px; padding: 14px 16px; }
    .nlP-tabel--stak td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 !important; text-align: right; }
    .nlP-tabel--stak td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font: 800 12px/1.3 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .1em; color: var(--nlP-svag);
    }
    .nlP-tabel--stak td:not([data-label])::before { content: none; }
    .nlP-tabel--stak td:not([data-label]) { justify-content: flex-end; }   /* handlings-knapper til højre som værdierne */
}

/* ==========================================================================
   LISTER (rækker – samme form som forsidens top 5)
   ========================================================================== */
.nlP-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nlP-raekke {
    display: flex; align-items: center; gap: 14px;
    min-height: 58px; padding: 8px 14px 8px 10px; border-radius: var(--nlP-r-s);
    color: var(--nlP-creme); text-decoration: none;
    transition: background-color .2s, transform .2s;
}
a.nlP-raekke:hover, button.nlP-raekke:hover, .nlP-raekke--link:hover { background: var(--nlP-flade-2); }
button.nlP-raekke { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.nlP-raekke-nr {
    min-width: 40px; text-align: center; flex-shrink: 0;
    font: italic 800 28px/1 var(--nlP-tal-font); color: var(--nlP-hvisk); font-variant-numeric: tabular-nums;
}
.nlP-raekke-tekst { flex: 1; min-width: 0; }
.nlP-raekke-tekst strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; line-height: 1.3; }
.nlP-raekke-tekst small { display: block; margin-top: 1px; font: 600 13px/1.35 var(--nlP-tal-font); color: var(--nlP-svag); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlP-raekke-slut { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; color: var(--nlP-svag); }
.nlP-raekke-slut > svg { width: 16px; height: 16px; transition: transform .2s; }
a.nlP-raekke:hover .nlP-raekke-slut > svg { transform: translateX(3px); color: var(--nlP-creme); }
/* Aktiv/nr. 1: gradienten – det eneste farvede felt i listen */
.nlP-raekke.er-aktiv { background: var(--nlP-grad); color: #fff; }
.nlP-raekke.er-aktiv .nlP-raekke-nr, .nlP-raekke.er-aktiv small, .nlP-raekke.er-aktiv .nlP-raekke-slut { color: rgba(255, 255, 255, .9); }
/* "Her er du" i en indholdsfortegnelse: rolig tone + sol-nummer, ikke den fulde gradient */
.nlP-raekke.er-her { background: var(--nlP-flade-2); }
.nlP-raekke.er-her .nlP-raekke-nr { color: var(--nlP-sol); }

/* ==========================================================================
   TOM TILSTAND
   ========================================================================== */
.nlP-tom {
    display: grid; justify-items: center; gap: 10px; text-align: center;
    padding: clamp(32px, 5vw, 56px) 22px; border-radius: var(--nlP-r);
    background: var(--nlP-flade); color: var(--nlP-daemp);
}
.nlP-tom-ikon {
    width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px;
    display: grid; place-items: center;
    background: var(--nlP-flade-2); color: var(--nlP-orange); transform: rotate(-4deg);
}
.nlP-tom-ikon svg { width: 28px; height: 28px; }
.nlP-tom-titel {
    margin: 0; font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 72%;
    font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--nlP-creme);
}
.nlP-tom p { margin: 0; max-width: 34em; }
.nlP-tom .nlP-knap { margin-top: 10px; }

/* ==========================================================================
   BESKEDER
   ========================================================================== */
/* Info er varm-neutral med orange ikon: en blålig info-boks lignede et koldt, gråt kort
   midt i den varme palet (set på katalog-siden 06-10-2026) */
.nlP-besked {
    --nlP-b-farve: var(--nlP-orange);
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-radius: 16px;
    background: rgba(255, 242, 228, .07); color: var(--nlP-creme);
    font-size: 15px; line-height: 1.5;
}
.nlP-besked > svg, .nlP-besked-ikon { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; color: var(--nlP-b-farve); }
.nlP-besked strong { display: block; font: 800 16px/1.3 var(--nlP-tal-font); letter-spacing: .01em; }
.nlP-besked p { margin: 2px 0 0; color: var(--nlP-daemp); }
.nlP-besked > div { min-width: 0; flex: 1; }
.nlP-besked--succes { --nlP-b-farve: var(--nlP-god); background: rgba(91, 227, 141, .1); }
.nlP-besked--advarsel { --nlP-b-farve: var(--nlP-advarsel); background: rgba(255, 190, 59, .1); }
.nlP-besked--fejl { --nlP-b-farve: var(--nlP-fejl); background: rgba(255, 107, 94, .12); }

/* ==========================================================================
   FANER
   ========================================================================== */
.nlP-faner {
    display: flex; gap: 4px; max-width: 100%; width: max-content;
    padding: 5px; border-radius: 16px; background: var(--nlP-flade);
    overflow-x: auto; scrollbar-width: none;
}
.nlP-faner::-webkit-scrollbar { display: none; }
.nlP-fane {
    position: relative; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    height: 44px; padding: 0 16px; margin: 0; border: 0; border-radius: 12px;
    background: transparent; color: var(--nlP-daemp); cursor: pointer;
    font: 700 16px/1 var(--nlP-tal-font); letter-spacing: .01em; white-space: nowrap; text-decoration: none;
    transition: color .2s, background-color .2s;
}
.nlP-fane:hover { color: var(--nlP-creme); background: rgba(255, 242, 228, .06); }
/* Aktiv: menuens skrå gradient-streg under teksten */
.nlP-fane::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 3px; border-radius: 2px;
    background: var(--nlP-grad); transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .3s ease;
}
.nlP-fane.er-aktiv, .nlP-fane[aria-selected="true"], .nlP-fane[aria-current="page"] { color: var(--nlP-creme); background: var(--nlP-flade-3); }
.nlP-fane.er-aktiv::after, .nlP-fane[aria-selected="true"]::after, .nlP-fane[aria-current="page"]::after { transform: scaleX(1) skewX(-20deg); }
.nlP-fane svg { width: 17px; height: 17px; }
.nlP-fane-tal {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 7px;
    display: inline-grid; place-items: center;
    background: rgba(255, 242, 228, .1); color: var(--nlP-creme);
    font: italic 800 13px/1 var(--nlP-tal-font); font-variant-numeric: tabular-nums;
}
.nlP-fane.er-aktiv .nlP-fane-tal, .nlP-fane[aria-selected="true"] .nlP-fane-tal, .nlP-fane[aria-current="page"] .nlP-fane-tal { background: var(--nlP-grad); color: #fff; }

/* ==========================================================================
   FOLD (harmonika)
   Checkbox-drevet med vilje: sider som /rules åbner en regel fra JS med
   checkbox.checked = true, og det skal blive ved med at virke. Indholdet glider
   med grid-rows 0fr → 1fr, og visibility gør lukket indhold utilgængeligt for Tab.
   ========================================================================== */
.nlP-fold {
    position: relative; border-radius: var(--nlP-r); background: var(--nlP-flade);
    /* Ingen scroll-margin her: nl-top.css giver allerede html scroll-padding-top, og de to
       lægges sammen – så landede et anker en hel menuhøjde for langt nede */
    transition: background-color .25s;
}
.nlP-fold-tjek { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.nlP-fold-hoved {
    display: flex; align-items: center; gap: 18px;
    padding: 20px 20px 20px 22px; border-radius: var(--nlP-r);
    cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s;
}
.nlP-fold-hoved:hover { background: rgba(255, 242, 228, .03); }
.nlP-fold-tjek:focus-visible + .nlP-fold-hoved { outline: 3px solid var(--nlP-sol); outline-offset: 3px; }
.nlP-fold-pil {
    margin-left: auto; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--nlP-flade-2); color: var(--nlP-creme);
    transition: transform .35s var(--nlP-ease), background-color .2s;
}
.nlP-fold-pil svg { width: 20px; height: 20px; }
.nlP-fold-hoved:hover .nlP-fold-pil { background: var(--nlP-flade-3); }
.nlP-fold-tjek:checked + .nlP-fold-hoved .nlP-fold-pil { transform: rotate(180deg); background: var(--nlP-grad); color: #fff; }
.nlP-fold-indhold {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .4s var(--nlP-ease), visibility 0s .4s;
}
.nlP-fold-tjek:checked ~ .nlP-fold-indhold { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--nlP-ease); }
.nlP-fold-krop { min-height: 0; overflow: hidden; padding: 0 22px; }
/* Bundluft som pseudo-element: lodret padding på .nlP-fold-krop ville ikke kunne
   klappe sammen til 0 og lade en stribe stå tilbage, når folden er lukket */
.nlP-fold-krop::after { content: ""; display: block; height: 26px; }
.nlP-fold-tekst { flex: 1; min-width: 0; display: grid; gap: 6px; }
.nlP-fold-titel {
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 72%;
    font-size: clamp(24px, 2.3vw, 32px); line-height: 1; text-transform: uppercase; color: var(--nlP-creme);
    overflow-wrap: break-word; word-spacing: .07em; /* se .nlP-kort-titel */
}
.nlP-fold-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 14px/1.3 var(--nlP-tal-font); color: var(--nlP-svag); }
.nlP-fold-meta svg { width: 15px; height: 15px; }
.nlP-fold-tjek:checked + .nlP-fold-hoved .nlP-naar-lukket,
.nlP-fold-tjek:not(:checked) + .nlP-fold-hoved .nlP-naar-aaben { display: none; }
.nlP-fold-fod { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 28px; }
/* Linje med info til venstre og handlinger til højre (fx "Sidst opdateret" + "Læs op") */
.nlP-vaerktoej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 2px 0 26px; }

/* ==========================================================================
   LANG TEKST (.nlP-prose)
   ========================================================================== */
.nlP-prose {
    max-width: 75ch;
    color: var(--nlP-daemp); font-size: 17px; line-height: 1.75;
    overflow-wrap: break-word; text-wrap: pretty;
}
.nlP-prose > :first-child { margin-top: 0; }
.nlP-prose > :last-child { margin-bottom: 0; }
.nlP-prose p { margin: 0 0 1.1em; }
.nlP-prose h1, .nlP-prose h2 {
    margin: 1.6em 0 .55em; font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 70%;
    font-size: 1.95em; line-height: 1; text-transform: uppercase; color: var(--nlP-creme);
}
.nlP-prose h3 {
    margin: 1.5em 0 .5em; font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 76%;
    font-size: 1.35em; line-height: 1.08; text-transform: uppercase; color: var(--nlP-creme);
}
.nlP-prose h4, .nlP-prose h5, .nlP-prose h6 {
    margin: 1.4em 0 .4em; font: 800 .88em/1.3 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .1em; color: var(--nlP-sol);
}
.nlP-prose strong, .nlP-prose b { color: var(--nlP-creme); font-weight: 700; }
.nlP-prose em, .nlP-prose i { font-style: italic; }
.nlP-prose a {
    color: var(--nlP-sol); text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 3px; text-decoration-color: rgba(255, 190, 59, .4); transition: text-decoration-color .2s;
}
.nlP-prose a:hover { text-decoration-color: var(--nlP-sol); }
.nlP-prose ul, .nlP-prose ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.nlP-prose ul { list-style: none; }
.nlP-prose ol { list-style: decimal; }
.nlP-prose li { position: relative; margin: .4em 0; padding-left: .2em; }
/* Punkttegnet er menuens lille skrå streg */
.nlP-prose ul > li::before {
    content: ""; position: absolute; left: -1.1em; top: .74em;
    width: 10px; height: 4px; border-radius: 2px; background: var(--nlP-grad); transform: skewX(-20deg);
}
.nlP-prose ol > li::marker { font: italic 800 1em var(--nlP-tal-font); color: var(--nlP-orange); }
.nlP-prose blockquote {
    margin: 1.4em 0; padding: 16px 22px; border-radius: 16px;
    background: var(--nlP-flade-2); color: var(--nlP-creme); font-style: italic;
}
.nlP-prose blockquote p:last-child { margin-bottom: 0; }
.nlP-prose hr { height: 4px; width: 56px; margin: 2em 0; border: 0; border-radius: 2px; background: var(--nlP-grad); transform: skewX(-20deg); }
.nlP-prose code { padding: .12em .4em; border-radius: 6px; background: var(--nlP-flade-2); color: var(--nlP-creme); font: .9em/1.4 ui-monospace, Consolas, monospace; }
.nlP-prose pre { margin: 0 0 1.1em; padding: 16px 18px; overflow-x: auto; border-radius: var(--nlP-r-s); background: var(--nlP-flade-2); }
.nlP-prose pre code { padding: 0; background: none; }
.nlP-prose img { max-width: 100%; height: auto; border-radius: var(--nlP-r-s); }
.nlP-prose mark { padding: 0 .25em; border-radius: 4px; background: rgba(255, 190, 59, .22); color: var(--nlP-creme); }
.nlP-prose table { display: block; overflow-x: auto; width: 100%; margin: 0 0 1.1em; border-collapse: collapse; font-size: .92em; }
.nlP-prose th { padding: 10px 12px; text-align: left; font: 800 .8em/1.2 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .1em; color: var(--nlP-svag); }
.nlP-prose td { padding: 10px 12px; }
.nlP-prose tbody tr:nth-child(odd) { background: rgba(255, 242, 228, .04); }

/* Afsnit i regel-/vilkårs-HTML (klasserne sættes af JS – se rules.ejs).
   HTML'en fra editoren er "<p><strong>§1. Titel</strong><br><strong>§1.1.</strong> tekst<br>…",
   så uden JS er den bare fed tekst; med JS bliver titlen en rigtig overskrift. */
.nlP-prose .nlP-afsnit { margin-bottom: 1.7em; }
.nlP-prose .nlP-afsnit-titel {
    font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 74%;
    font-size: 1.32em; line-height: 1.08; text-transform: uppercase; letter-spacing: .005em; color: var(--nlP-creme);
}
/* Kun når titlen står alene på sin linje (JS'en så et <br> lige efter), bliver den en
   blok-overskrift og linjeskiftet skjules. "§8. Fair Play (tekst …)" forbliver inline. */
.nlP-prose .nlP-afsnit-titel.er-blok { display: block; margin: 0 0 .5em; }
.nlP-prose .nlP-afsnit-brud { display: none; }
.nlP-prose [data-new] { padding: 0 .25em; border-radius: 4px; background: rgba(255, 190, 59, .22); color: var(--nlP-creme); }
.nlP-prose .nlP-pnr {
    font-family: var(--nlP-tal-font); font-style: italic; font-weight: 800; font-size: 1.06em;
    color: var(--nlP-orange); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ANDET
   ========================================================================== */
/* Indholdsfortegnelse (aside) */
.nlP-indeks { padding: 18px 12px 12px; }
.nlP-indeks .nlP-kort-hoved { margin: 0 8px 10px; }
.nlP-indeks-titel { margin: 0; font: 800 13px/1 var(--nlP-tal-font); text-transform: uppercase; letter-spacing: .14em; color: var(--nlP-svag); }
.nlP-indeks .nlP-raekke { min-height: 52px; padding: 6px 12px 6px 6px; gap: 10px; }
.nlP-indeks .nlP-raekke-nr { min-width: 32px; font-size: 24px; }
.nlP-indeks .nlP-raekke-tekst strong { font-size: 15.5px; white-space: normal; }
.nlP-indeks-note { display: flex; gap: 10px; margin: 10px 8px 4px; font-size: 13.5px; line-height: 1.45; color: var(--nlP-svag); }
.nlP-indeks-note svg { width: 16px; height: 16px; margin-top: 2px; color: var(--nlP-orange); }

/* Afslutnings-kort: tekst til venstre, knap til højre (stables på mobil) */
.nlP-cta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
    padding: clamp(24px, 3vw, 40px);
}
.nlP-cta-titel {
    margin: 0; font-family: var(--nlP-display); font-style: italic; font-weight: 900; font-stretch: 68%;
    font-size: clamp(30px, 3.2vw, 46px); line-height: .92; text-transform: uppercase; color: inherit;
}
.nlP-cta p { margin: 8px 0 0; max-width: 34em; }

/* Stort kursivt nummer */
.nlP-nr {
    min-width: 1.15em; flex-shrink: 0; text-align: center;
    font: italic 800 clamp(40px, 3.6vw, 56px)/.85 var(--nlP-tal-font); letter-spacing: -.02em;
    color: var(--nlP-hvisk); font-variant-numeric: tabular-nums;
}
.nlP-nr--varm { color: var(--nlP-sol); }

/* Nøgletal */
.nlP-stat { padding: 22px 22px 20px; border-radius: var(--nlP-r); background: var(--nlP-flade); }
.nlP-stat b {
    display: block; font: italic 800 clamp(40px, 3.8vw, 60px)/.95 var(--nlP-tal-font); letter-spacing: -.015em;
    color: var(--nlP-creme); font-variant-numeric: tabular-nums;
}
.nlP-stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--nlP-daemp); }
.nlP-stat--varm { background: var(--nlP-grad); }
.nlP-stat--varm span { color: rgba(255, 255, 255, .9); }

/* Flydende knap – nederst til VENSTRE (guide-telefonen og "til toppen" ejer højre hjørne) */
.nlP-flyd { position: fixed; left: 20px; bottom: 22px; z-index: 55; }
.nlP-flyd-panel {
    position: absolute; left: 0; bottom: calc(100% + 12px);
    width: min(340px, calc(100vw - 40px)); max-height: min(420px, 60vh); overflow-y: auto;
    padding: 10px; border-radius: 18px;
    background: var(--nlP-flade-2); box-shadow: 0 26px 60px rgba(0, 0, 0, .6);   /* flade-2: panelet ligger oven på kort i flade-tonen */
}
.nlP-flyd-panel a.nlP-raekke:hover { background: var(--nlP-flade-3); }
/* Tailwinds .hidden (display:none) skal stadig kunne skjule panelet – det er den
   klasse rules.ejs' onclick slår til og fra */
.nlP-flyd-panel.hidden { display: none; }
.nlP-flyd .nlP-tal-boble {
    position: absolute; top: -8px; right: -10px; z-index: 1;
    min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--nlP-sol); color: var(--nlP-grund);
    font: italic 800 13px/1 var(--nlP-tal-font); box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.nlA-menu-aaben .nlP-flyd { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 1024px) { .nlP-flyd--kun-smal { display: none; } }
/* .er-gemt: siden kan gemme knappen mens det den peger på allerede er i syne
   (rules.ejs: så længe indholdsfortegnelsen er på skærmen) */
.nlP-flyd { transition: opacity .25s ease, transform .25s ease, visibility 0s 0s; }
.nlP-flyd.er-gemt { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }

/* ==========================================================================
   HJÆLPEKLASSER
   ========================================================================== */
.nlP-stak { display: flex; flex-direction: column; gap: 16px; }
.nlP-stak--s { gap: 8px; }
.nlP-stak--l { gap: 28px; }
.nlP-linje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nlP-linje--mellem { justify-content: space-between; }
.nlP-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.nlP-gitter--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nlP-gitter--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlP-gitter--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
    .nlP-gitter--3, .nlP-gitter--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .nlP-gitter--2, .nlP-gitter--3 { grid-template-columns: minmax(0, 1fr); }
    .nlP-gitter { gap: 10px; }
}
.nlP-mt-0 { margin-top: 0 !important; }
.nlP-mt-s { margin-top: 8px !important; }
.nlP-mt-m { margin-top: 16px !important; }
.nlP-mt-l { margin-top: 28px !important; }
.nlP-mt-xl { margin-top: 48px !important; }
.nlP-daemp { color: var(--nlP-daemp); }
.nlP-svag { color: var(--nlP-svag); }
.nlP-sol { color: var(--nlP-sol); }
.nlP-creme { color: var(--nlP-creme); }
.nlP-tal { font-family: var(--nlP-tal-font); font-variant-numeric: tabular-nums; }
.nlP-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nlP-ikon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   SMALLE SKÆRME
   ========================================================================== */
@media (max-width: 639px) {
    .nlP-side { font-size: 15.5px; }
    .nlP-hoved { padding: 36px 0 34px; }
    .nlP-hoved--lille { padding: 28px 0 26px; }
    .nlP-hoved-bg::after {
        background: linear-gradient(180deg, rgba(21, 10, 14, .45) 0%, rgba(21, 10, 14, .55) 50%, var(--nlP-grund) 100%);
    }
    .nlP-titel { font-size: clamp(42px, 13vw, 64px); }
    .nlP-hoved--lille .nlP-titel { font-size: clamp(34px, 10vw, 48px); }
    .nlP-kicker { font-size: 13px; margin-bottom: 12px; }
    .nlP-hoved-meta { gap: 6px; margin-top: 18px; }
    .nlP-hoved-meta .nlP-pille { min-height: 34px; padding: 0 13px; font-size: 14px; }
    .nlP-hoved-meta .nlP-pille b { font-size: 18px; }
    .nlP-handlinger { width: 100%; }
    .nlP-handlinger .nlP-knap { flex: 1 1 auto; }
    .nlP-kort { border-radius: 18px; }
    .nlP-knap { min-height: 50px; padding: 0 22px; font-size: 17px; }
    .nlP-knap--lille { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
    .nlP-fold { border-radius: 18px; }
    .nlP-fold-hoved { gap: 12px; padding: 16px 14px; border-radius: 18px; }
    .nlP-fold-pil { width: 40px; height: 40px; }
    .nlP-fold-krop { padding: 0 16px; }
    .nlP-prose { font-size: 16px; line-height: 1.7; }
    .nlP-tom-titel { font-size: 24px; }
    .nlP-flyd { left: 16px; bottom: 24px; }
}

/* Ingen bevægelse ønskes: folden springer, prikker står stille */
@media (prefers-reduced-motion: reduce) {
    .nlP-side *, .nlP-side *::before, .nlP-side *::after { transition-duration: .01ms !important; animation: none !important; }
}