/* FAKTIVE platformsiden 2026 (platform.html).
   Bygges af .arbejde/undersider/byg-platform.py; bygger oven på assets/regelsaet-2026.css (farver, skrift, toppen
   med foto, overlinjer) og hører sammen med assets/platform-2026.js.

   Fladerne skifter, så to naboer aldrig har samme baggrund:
     toppen (creme) med foto · "Det gør vi for jer" (mørk aubergine med lys-tåge) · "Når det sker" (creme, fem
     kapitler med foto og mørke eksempelkort) · kontakt og footer (aubergine) */

/* ---------- toppen ---------- */
.pl-top .rg-sti{color:var(--rg-kobber-tekst) !important}
/* titlen står på to linjer ("Hele jeres compliance / ét sted.") i stedet for på én som regelsætternes navne */
section.hero.pl-top h1{white-space:normal;max-width:9.5em;font-size:clamp(52px,6.6vw,108px) !important;line-height:.98 !important;text-wrap:balance}
/* skiltet oven på fotoet, indtil der er et billede af selve platformen. Det står uden for det udtonede foto
   (så det ikke toner ud med det), over den del af fotoet, der står helt frem */
.pl-snart{position:absolute;z-index:2;right:var(--rg-kant);bottom:clamp(40px,6vw,72px);margin:0;padding:11px 16px;border-radius:8px;
  background:rgba(255,253,251,.88);border:1px solid rgba(60,42,68,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rg-aub)}
.rg-js .pl-snart{opacity:0;transform:translateY(12px);transition:opacity .9s ease .7s,transform 1.1s var(--rg-ud) .7s}
.rg-klar .pl-snart{opacity:1;transform:none}
.pl-demo{margin-top:32px}
.rg-js .pl-demo{opacity:0;transform:translateY(16px);transition:opacity .9s ease .45s,transform 1.1s var(--rg-ud) .45s}
.rg-klar .pl-demo{opacity:1;transform:none}

.rg-sek .lede{margin:20px 0 0;max-width:40em;font-size:clamp(18px,1.4vw,20px);line-height:1.6;font-weight:300;color:var(--rg-tekst);text-wrap:pretty}

/* ---------- de fem situationer ---------- */
.pl-situationer{background:var(--rg-creme)}
.pl-sit .rg-ref{margin-bottom:12px}
.pl-sit h3{margin:0 0 14px;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.12;
  letter-spacing:-.01em;color:var(--rg-aub);text-wrap:balance}
.pl-sit-sker{margin:0;font-size:17px;line-height:1.65;font-weight:300;color:var(--rg-tekst);text-wrap:pretty}
.pl-sit-svar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(24px,3vw,40px);align-content:start;padding-top:4px}
.pl-sit-svar > div{padding-left:18px;border-left:1px solid var(--rg-streg)}
.pl-sit-svar > .pl-faktive{border-left:2px solid var(--rg-kobber)}
.pl-sit-svar h4{margin:0 0 10px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rg-tekst)}
.pl-faktive h4{color:var(--rg-kobber-tekst)}
.pl-sit-svar p{margin:0;font-size:16px;line-height:1.65;font-weight:300;color:var(--rg-blaek);text-wrap:pretty}

/* "Det gør FAKTIVE": kobberstregen står langs teksten (kapitlerne tegner den frem, se .pl-kap-klar) */
.pl-sit-svar > .pl-faktive{position:relative;border-left-color:transparent}
.pl-faktive::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--rg-kobber);
  transform-origin:top;transform:scaleY(1)}

@media (max-width:760px){
  /* fra 760 px står fotoet under teksten (regelsaet-2026.css); skiltet lægges ind over fotoets nederste del */
  .pl-snart{position:relative;right:auto;bottom:auto;display:table;margin:-76px auto 0;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .rg-js .pl-demo,.rg-js .pl-snart{opacity:1;transform:none;transition:none}
}

/* ---------- platformvinduet: ét roligt panel, et stykke af produktet (som kravkortenes kontrolpanel) ---------- */
.pl-vindue{margin:0;padding:22px 24px 20px;border-radius:18px;background:var(--rg-lys);border:1px solid rgba(60,42,68,.08);
  box-shadow:0 34px 70px -44px rgba(42,27,48,.5)}
.pl-v-eks{margin:0 0 16px;font-family:var(--font-text);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rg-tekst)}
.pl-v-titel{margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.2;color:var(--rg-aub)}
.pl-v-under{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--rg-tekst)}
.pl-v-linjer{list-style:none;margin:18px 0 0;padding:0}
.pl-v-linje{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--rg-streg)}
.pl-v-navn{font-size:15px;line-height:1.35;color:var(--rg-blaek)}
.pl-v-st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--rg-tekst);white-space:nowrap}
.pl-v-maalt{color:var(--rg-kobber-tekst);font-weight:500}
.pl-v-tekst{font-variant-numeric:proportional-nums}
/* hakket: en tynd ring, der fyldes, når linjen er klar */
.pl-v-hak{position:relative;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(60,42,68,.35)}
.pl-v-hak i{position:absolute;inset:4px;border-radius:50%;background:var(--rg-kobber)}
.pl-prik{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(60,42,68,.45)}
.pl-prik-maalt{background:var(--rg-kobber);box-shadow:none}
.pl-v-tael{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin-top:18px;padding:14px 16px;border-radius:12px;
  background:var(--rg-creme)}
.pl-v-tael-lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--rg-tekst)}
.pl-v-tael-tal{font-size:14px;color:var(--rg-tekst)}
.pl-v-tael-tal b{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:28px;color:var(--rg-aub);margin-right:4px}
.pl-v-maaler{grid-column:1 / -1;position:relative;display:block;height:3px;border-radius:3px;background:rgba(60,42,68,.12);overflow:hidden}
.pl-v-maaler i{position:absolute;inset:0;background:var(--rg-kobber);transform-origin:left center;transform:scaleX(var(--tid,.93))}
.pl-v-fod{margin:16px 0 0;padding:12px 0 0 14px;border-top:1px solid var(--rg-streg);position:relative;font-size:14.5px;line-height:1.45;color:var(--rg-aub);font-weight:500}
.pl-v-fod::before{content:"";position:absolute;left:0;top:14px;bottom:2px;width:2px;background:var(--rg-kobber)}

@media (max-width:600px){
  .pl-vindue{padding:18px 18px 16px}
  .pl-v-linje{grid-template-columns:18px minmax(0,1fr);row-gap:2px}
  .pl-v-st{grid-column:2}
}
/* =====================================================================================================
   "NÅR DET SKER": de fem situationer som kapitler i en lang læsning
   Ingen fastlåsning: man scroller igennem, og hvert kapitel har sin egen plads. Læserækkefølgen er
   foto → overskrift → tekst → eksempel. Fotoet er kapitlets etableringsbillede: et bredt bånd i indholdets
   bredde, der toner ud i cremen forneden. Eksempelkortet rejser sig op i den udtonede bund i højre side, så
   foto og eksempel hænger sammen, uden at kortet dækker det, fotoet viser (ansigterne står i båndets øverste
   del). platform-2026.js skrubber kortets tidslinje efter dets plads på skærmen og lader fotoet glide
   langsomt ind (--lp). Mobil: foto, tekst og kort under hinanden. Kun transform og opacity ændres under scroll.
   ===================================================================================================== */
.pl-kap .rg-hoved h2{max-width:14em;text-wrap:balance}
.pl-kap-liste{padding-bottom:clamp(48px,7vw,112px)}
.pl-kapitel{padding-top:clamp(96px,16vh,176px);scroll-margin-top:var(--nav-h)}
.pl-kapitel:first-child{padding-top:clamp(8px,1.5vw,20px)}
/* hjørnerne foroven har samme runding som eksempelkortet, så de to hører sammen; bunden toner ud */
.pl-kap-foto{position:relative;margin:0;height:clamp(300px,48vh,520px);overflow:hidden;border-radius:18px 18px 0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%)}
/* langsom dolly-ind: fotoet glider fra 108 % til 100 %, mens kapitlet passerer skærmen */
.pl-kap-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 30%);
  transform:scale(calc(1.08 - .08 * var(--lp,1)));transform-origin:50% 30%}
.pl-kap-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:start}
.pl-kap .pl-sit{display:block;padding:clamp(4px,1vw,12px) 0 0;border:0}
.pl-kap .pl-sit-sker{max-width:34em}
.pl-kap .pl-sit-svar{grid-template-columns:1fr;gap:22px;margin-top:28px;padding-top:0}
.pl-kap .pl-vindue{justify-self:end;width:100%;max-width:600px;margin-top:calc(-1 * clamp(110px,15vh,170px))}

@media (max-width:900px){
  .pl-kapitel{padding-top:clamp(56px,12vw,88px)}
  .pl-kap-foto{height:clamp(220px,58vw,380px);margin:0 calc(-1 * var(--rg-kant, 20px));border-radius:0}
  .pl-kap-in{grid-template-columns:1fr;gap:32px}
  .pl-kap .pl-vindue{justify-self:stretch;max-width:none;margin-top:0}
}
@media (max-width:760px){ .pl-kap-foto{margin-left:-20px;margin-right:-20px} }

/* kapitlet bygges op én del ad gangen (platform-2026.js sætter .pl-kap-klar på listen og .pl-kap-vist på hver del).
   Uden JS og ved reduceret bevægelse sættes .pl-kap-klar aldrig, så alt står færdigt. Små forskydninger (14 px),
   så det læses som en toning; fotoet kommer lidt længere nedefra og langsommere, som kapitlets åbning. */
.pl-kap-klar .pl-kap-r{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s var(--rg-ud)}
.pl-kap-klar .pl-kap-foto.pl-kap-r{transform:translateY(36px);transition:opacity 1.1s ease,transform 1.4s var(--rg-ud)}
.pl-kap-klar .pl-kap-r.pl-kap-vist{opacity:1;transform:none}
/* overskriften: ordene kommer ét ad gangen (45 ms imellem); selve h3'en toner ikke, kun ordene */
.pl-kap-klar h3.pl-kap-r{opacity:1;transform:none}
.pl-ord{display:inline-block;transition:opacity .6s ease,transform .8s var(--rg-ud)}
.pl-kap-klar .pl-ord{opacity:0;transform:translateY(.35em)}
.pl-kap-klar .pl-kap-vist .pl-ord{opacity:1;transform:none}
.pl-kap-klar .pl-faktive::before{transform:scaleY(0);transition:transform 1.1s var(--rg-ud) .3s}
.pl-kap-klar .pl-faktive.pl-kap-vist::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){ .pl-kap-foto img{transform:none} }

/* sitets inline-regel giver alle h3 vægt 600 i smal skrift (!important); kapitlernes og udsagnsordenes overskrifter
   skal stå i husets brede skrift som resten af siden */
.pl-kap .pl-sit h3,.pl-vb .pl-vb-tekst h3{font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:400 !important;line-height:1.14 !important}

/* =====================================================================================================
   DET GØR VI FOR JER som seks udsagnsord (kapitel-varianten, godkendt 2026-09-25)
   Indledningen er en sætning af udsagnsord (kortlægger, genererer, vedligeholder, måler); sektionen gør den til
   design. Store skærme (fra 1101 px, platform-2026.js sætter .pl-vb-koerer): scenen står fast, mens de seks
   punkter afspilles. Til venstre de seks udsagnsord i husets brede skrift; det aktive står i aubergine, rykker
   frem, og en kobberstreg tegnes foran det. Til højre det aktive punkt: ikonet tegnes (og gør, hvad det
   betyder: måleren svinger op, pilene roterer), overskrift og tekst toner ind lag for lag.
   Grundform (mobil, uden JS, reduceret bevægelse): udsagnsord, overskrift og tekst under hinanden på hårlinjer.
   Kun transform og opacity ændres under scroll. Punkterne er egenskaber, ikke trin, derfor ingen numre.
   ===================================================================================================== */
/* titlens to sætninger står på hver sin linje */
.pl-vb .rg-hoved h2 .pl-h2-2{display:block}
/* indledningens første sætning som modsvar til titlen (resten ville gentage udsagnsordene) */
.pl-vb .pl-vb-lede{margin-top:16px;font-size:clamp(19px,1.7vw,25px);line-height:1.35;color:var(--rg-aub);font-weight:300}
.pl-vb-koerer .pl-vb-lede{margin:clamp(12px,2vh,20px) 0 0}
.pl-vb-ord{display:none}
.pl-vb-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rg-aub)}
.pl-vb-punkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(32px,5vw,80px);
  padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--rg-streg)}
.pl-vb-stort{grid-column:1;margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:400;
  font-size:clamp(34px,4.2vw,60px);line-height:1.04;letter-spacing:-.02em;color:var(--rg-aub)}
.pl-vb-tekst{grid-column:2}
.pl-vb-tekst h3{margin:0 0 10px;font-size:clamp(21px,1.8vw,26px) !important;color:var(--rg-aub);text-wrap:balance}
.pl-vb-tekst p{margin:0;max-width:34em;font-size:17px;line-height:1.65;font-weight:300;color:var(--rg-tekst);text-wrap:pretty}

@media (max-width:760px){
  .pl-vb-punkt{grid-template-columns:1fr;grid-template-rows:none}
  .pl-vb-stort,.pl-vb-tekst{grid-column:1;grid-row:auto}
  .pl-vb-stort{margin-bottom:14px}
  /* når punkterne står under hinanden, gentog overskriften det store ord lige over sig («Samler» /
     «Samler jeres aftaler»). Ordet skjules, og overskriften står større, som når scenen kører på
     computer (mobil-gennemgangen 2026-10) */
  .pl-vb-stort{display:none}
  .pl-vb .pl-vb-tekst h3{font-size:28px !important;letter-spacing:-.015em;margin-bottom:12px}
}
/* mobil og smalle skærme med bevægelse: hvert punkt toner frem, når det når skærmen (.pl-vb-klar / .pl-vist) */
.pl-vb-klar .pl-vb-punkt{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s var(--rg-ud)}
.pl-vb-klar .pl-vb-punkt.pl-vist{opacity:1;transform:none}

/* ---------- store skærme: den fastlåste scene ---------- */
/* scenen centrerer selv sit indhold i skærmhøjden, så sektionens egen luft foroven og forneden ville komme oveni */
.rg-sek.pl-vb-scenen{padding-top:0;padding-bottom:0}
.pl-vb-koerer{height:calc(100vh - var(--nav-h) + var(--n) * 50vh)}
.pl-vb-koerer .pl-vb-scene{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden}
/* scenen: titlen er scenens hoved og bliver stående, mens man scroller gennem de seks punkter (så der ikke opstår
   et tomrum mellem titlen og ordene, og man hele tiden kan se, hvad ordene svarer på). Titlen til venstre,
   indledningen til højre på linje med titlens bund; herunder ordene og punktet i samme to spalter.
   Rækkerne er centreret og kun så høje som indholdet, så listen til højre strækkes præcis til ordenes højde */
.pl-vb-koerer .pl-vb-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);column-gap:clamp(48px,6vw,112px);
  row-gap:clamp(26px,4.6vh,56px);align-content:center;align-items:stretch;height:100%}
/* hierarki: titlen er det største på scenen, udsagnsordene det næste, forklaringen det mindste. En hårlinje i
   aubergine skiller titelblokken fra listen (som sidens andre lister) */
.pl-vb-koerer .pl-vb-hoved{grid-column:1 / -1;max-width:none;margin:0;padding-bottom:clamp(18px,3vh,32px);border-bottom:1px solid var(--rg-aub)}
/* titelblokken følger sidens eget mønster (overlinje, titel, indledning under hinanden), med titlen over hele
   bredden på præcis to linjer: "Præcis det her." / "Ikke mere, ikke mindre." */
.pl-vb-koerer .pl-vb-hoved h2.big{margin:0;white-space:nowrap;font-size:clamp(38px,min(4.1vw,6.4vh),66px) !important;line-height:1.02 !important}
.pl-vb-koerer .pl-vb-ord{display:flex;flex-direction:column;align-items:flex-start}
.pl-vb-knap{position:relative;display:block;margin:0;padding:.06em 0;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(32px,min(3.5vw,5.3vh),54px);line-height:1.08;letter-spacing:-.02em;
  color:rgba(60,42,68,.17);transition:color .6s ease}
.pl-vb-knap span{display:inline-block;transition:transform .8s var(--rg-ud)}
/* kobberstregen foran det aktive ord */
.pl-vb-knap::before{content:"";position:absolute;left:0;top:50%;width:.62em;height:2px;margin-top:-1px;background:var(--rg-kobber);
  transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--rg-ud)}
.pl-vb-knap.er-aktiv{color:var(--rg-aub)}
.pl-vb-knap.er-aktiv span{transform:translateX(.9em)}
.pl-vb-knap.er-aktiv::before{transform:scaleX(1);transition-delay:.12s}
.pl-vb-knap:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:6px;border-radius:4px}
@media (hover:hover){ .pl-vb-knap:not(.er-aktiv):hover{color:rgba(60,42,68,.42)} }
/* ordene glider ind ét ad gangen, når scenen kommer ind på skærmen (.pl-vb-inde) */
.pl-vb-koerer .pl-vb-knap{opacity:0;transform:translateY(28px);transition:color .6s ease,opacity .8s ease,transform 1s var(--rg-ud)}
.pl-vb-koerer.pl-vb-inde .pl-vb-knap{opacity:1;transform:none}
.pl-vb-koerer .pl-vb-knap:nth-child(2){transition-delay:0s,.07s,.07s}
.pl-vb-koerer .pl-vb-knap:nth-child(3){transition-delay:0s,.14s,.14s}
.pl-vb-koerer .pl-vb-knap:nth-child(4){transition-delay:0s,.21s,.21s}
.pl-vb-koerer .pl-vb-knap:nth-child(5){transition-delay:0s,.28s,.28s}
.pl-vb-koerer .pl-vb-knap:nth-child(6){transition-delay:0s,.35s,.35s}
/* højre side: punkterne ligger oven på hinanden; det aktive toner ind lag for lag, det forrige toner hurtigt ud.
   De inaktive skjules kun visuelt, så skærmlæsere stadig finder alle seks */
/* listen strækkes til ordenes højde, og punktet starter på højde med det første ord, så det ikke hopper, når teksterne har forskellig længde */
.pl-vb-koerer .pl-vb-liste{position:relative;align-self:stretch;border:0}
.pl-vb-koerer .pl-vb-punkt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding:.9vh 0 0;border:0;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.pl-vb-koerer .pl-vb-punkt.er-aktiv{opacity:1;pointer-events:auto;transition:none}
.pl-vb-koerer .pl-vb-stort{display:none}
.pl-vb-koerer .pl-vb-tekst h3{font-size:clamp(25px,min(2.3vw,4vh),36px) !important;margin-bottom:14px;letter-spacing:-.015em}
.pl-vb-koerer .pl-vb-tekst p{max-width:29em;font-size:clamp(17px,min(1.35vw,2.4vh),20px);line-height:1.58}
.pl-vb-koerer .pl-vb-tekst > *{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .5s var(--rg-ud)}
.pl-vb-koerer .pl-vb-punkt.er-aktiv .pl-vb-tekst > *{opacity:1;transform:none;transition:opacity .7s ease .14s,transform .9s var(--rg-ud) .14s}
.pl-vb-koerer .pl-vb-punkt.er-aktiv .pl-vb-tekst > p{transition-delay:.4s}
.pl-vb-koerer .pl-vb-tekst > h3,.pl-vb-koerer .pl-vb-punkt.er-aktiv .pl-vb-tekst > h3{opacity:1;transform:none}
.pl-vb-koerer .pl-vb-punkt:not(.er-aktiv) .pl-ord{opacity:0;transform:translateY(.35em);transition:none}
/* en tynd lineal under ordene viser, hvor langt man er i scenen (--f sættes af platform-2026.js) */
.pl-vb-lineal{display:none}
.pl-vb-koerer .pl-vb-lineal{position:relative;display:block;width:min(100%,360px);height:1px;margin-top:clamp(28px,4vh,44px);background:var(--rg-streg)}
.pl-vb-lineal b{position:absolute;inset:0;background:var(--rg-kobber);transform-origin:left center;transform:scaleX(var(--f,0))}
@media (prefers-reduced-motion:reduce){
  .pl-vb-klar .pl-vb-punkt{opacity:1;transform:none;transition:none}
}

/* ---------- dynamisk baggrund: arbejdslys i sektionens egen lyse flade ----------
   To store, bløde lysfelter i husets toner (sand og en meget lys aubergine) driver langsomt rundt (46 s og
   70 s pr. omgang), så rummet lever uden at trække opmærksomheden. Ovenpå glider et blødt aubergine-lys (samme
   familie som regelsætssidernes følgelys) hen bag det aktive udsagnsord, når punktet skifter, og strækker sig ind
   mod forklaringen, så ordet og dets tekst står i samme lys (platform-2026.js flytter det). Ingen nye farver;
   kun transform og opacity. Reduceret bevægelse: felterne står stille, lyset står ved første punkt. */
.pl-vb-scene{position:relative}
.pl-vb-in{position:relative;z-index:1}
.pl-vb-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pl-vb-felt,.pl-vb-lys{position:absolute;display:block;border-radius:50%;will-change:transform}
.pl-vb-felt-1{width:78vw;height:78vw;left:-22vw;top:-30vw;
  background:radial-gradient(closest-side,rgba(215,183,163,.34),rgba(215,183,163,0));animation:pl-vb-drift-1 46s ease-in-out infinite alternate}
.pl-vb-felt-2{width:64vw;height:64vw;right:-18vw;bottom:-26vw;
  background:radial-gradient(closest-side,rgba(116,84,132,.12),rgba(116,84,132,0));animation:pl-vb-drift-2 70s ease-in-out infinite alternate}
@keyframes pl-vb-drift-1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.08)}100%{transform:translate3d(3vw,15vh,0) scale(.96)}}
@keyframes pl-vb-drift-2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10vw,-6vh,0) scale(1.1)}100%{transform:translate3d(-4vw,-14vh,0) scale(.95)}}
/* lyset på det aktive punkt findes kun i scenen; det ligger centreret om y=0 og flyttes med translate */
.pl-vb-lys{display:none}
.pl-vb-koerer .pl-vb-lys{display:block;left:calc(var(--rg-kant) - 14vw);width:min(96vw,1500px);height:clamp(260px,40vh,420px);top:0;
  margin-top:calc(clamp(260px,40vh,420px) / -2);opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(50% 50% at 42% 50%,rgba(116,84,132,.2),rgba(116,84,132,.07) 55%,rgba(116,84,132,0))}
.pl-vb-koerer.pl-vb-inde .pl-vb-lys{opacity:1}
.pl-vb-felt{animation-play-state:paused}
.pl-vb-synlig .pl-vb-felt{animation-play-state:running}
@media (prefers-reduced-motion:reduce){ .pl-vb-felt{animation:none} }

/* ---------- den mørke flade (section.pl-vb-moerk) ----------
   Bløde lysfelter skinner først på en mørk flade. Sektionen står i husets aubergine; to tonale felter i lysere
   aubergine og en svag sand driver langsomt, og lyset bag det aktive ord er lyst og køligt (ingen kobberglød).
   Siden får rytmen creme · mørk · creme · mørk (kontakten), uden at to mørke flader mødes. */
/* grundfarven svarer til tågens gennemsnit, så der ikke blinker en anden farve, før første billede er tegnet */
.pl-vb.pl-vb-moerk{background:#2C1F33;color:#F2E7DC}
.pl-vb-moerk .pl-vb-felt-1{background:radial-gradient(closest-side,rgba(122,88,138,.55),rgba(122,88,138,0))}
.pl-vb-moerk .pl-vb-felt-2{background:radial-gradient(closest-side,rgba(215,183,163,.13),rgba(215,183,163,0))}
.pl-vb-koerer .pl-vb-lys{background:radial-gradient(50% 50% at 42% 50%,rgba(116,84,132,.2),rgba(116,84,132,.07) 55%,rgba(116,84,132,0))}
.pl-vb-moerk .pl-vb-koerer .pl-vb-lys{background:radial-gradient(50% 50% at 40% 50%,rgba(190,160,205,.11),rgba(190,160,205,.05) 45%,rgba(190,160,205,.015) 75%,rgba(190,160,205,0))}
.pl-vb-moerk .eyeline{color:#E9A57F !important}
.pl-vb-moerk .rg-hoved h2.big{color:#FFFDFB !important}
.pl-vb-moerk .pl-vb-lede{color:#D7B7A3}
.pl-vb-moerk .pl-vb-koerer .pl-vb-hoved{border-bottom-color:rgba(242,231,220,.28)}
/* de inaktive ord er knapper: mindst 3:1 kontrast mod tågen (WCAG, stor tekst); før .2 = 1,8:1 */
.pl-vb-moerk .pl-vb-knap{color:rgba(242,231,220,.44)}
.pl-vb-moerk .pl-vb-knap.er-aktiv{color:#FFFDFB}
@media (hover:hover){ .pl-vb-moerk .pl-vb-knap:not(.er-aktiv):hover{color:rgba(242,231,220,.72)} }
.pl-vb-moerk .pl-vb-tekst h3,.pl-vb-moerk .pl-vb-stort{color:#FFFDFB}
.pl-vb-moerk .pl-vb-tekst p{color:#EADDD2}
.pl-vb-moerk .pl-vb-lineal{background:rgba(242,231,220,.16)}
.pl-vb-moerk .pl-vb-liste{border-top-color:rgba(242,231,220,.4)}
.pl-vb-moerk .pl-vb-punkt{border-bottom-color:rgba(242,231,220,.14)}

/* lys-tågen (WebGL, platform-2026.js): lærredet fylder baggrunden; når det findes, skjules CSS-felterne og -lyset,
   som ellers er faldback. Lærredet tegnes i lav opløsning og skaleres blødt op */
.pl-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-har-gl .pl-vb-felt,.pl-har-gl .pl-vb-lys{display:none !important}

/* ---------- brugerens animationer under punkternes tekst (canvas, platform-2026.js: motionScener) ----------
   Tegningerne er 320×186 og skaleres til lærredet. På store skærme bestemmer skærmhøjden størrelsen, så scenen
   altid kan være på skærmen; animationen toner ind lidt efter teksten */
/* under hinanden (mobil og 761-1100 px) må animationen ikke dominere over teksten */
.pl-vb-motion{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:320 / 186;margin-top:clamp(20px,3vh,32px)}
.pl-vb-koerer .pl-vb-motion{width:auto;max-width:100%;height:clamp(118px,18.5vh,210px);margin-top:clamp(14px,2.4vh,26px);margin-left:-14px}
.pl-vb-koerer .pl-vb-punkt.er-aktiv .pl-vb-tekst > .pl-vb-motion{transition-delay:.5s}
@media (max-width:760px){ .pl-vb-motion{max-width:360px} }

/* =====================================================================================================
   EKSEMPELKORTENE I KAPITLERNE med samme lys-tåge som "Det gør vi for jer" (brugerens ønske 2026-09-25)
   Kortet er mørkt i husets aubergine; tågen tegnes i .pl-v-bg bag indholdet (fælles motor i platform-2026.js).
   Uden WebGL står en mørk flade med to bløde felter. Teksten står i creme og sand; kobberprikkerne bliver.
   Kortet toner blødt ind (1,2-1,6 s, glider lidt op og vokser en anelse), i stedet for at blive skrubbet ind
   over en kort scrollstrækning; linjerne indeni afspilles derefter med scrollen som før.
   ===================================================================================================== */
.pl-kap .pl-vindue{position:relative;isolation:isolate;overflow:hidden;background:#2C1F33;border-color:rgba(242,231,220,.1);
  box-shadow:0 40px 80px -46px rgba(26,16,30,.75)}
.pl-kap .pl-v-bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 60% at 20% 20%,rgba(122,88,138,.45),rgba(122,88,138,0)),radial-gradient(60% 55% at 85% 90%,rgba(215,183,163,.1),rgba(215,183,163,0)),#2C1F33}
.pl-kap .pl-v-eks{color:#D7B7A3}
.pl-kap .pl-v-titel{color:#FFFDFB}
.pl-kap .pl-v-under{color:#D7B7A3}
.pl-kap .pl-v-linje{border-top-color:rgba(242,231,220,.13)}
.pl-kap .pl-v-navn{color:#F2E7DC}
.pl-kap .pl-v-st{color:#D7B7A3}
.pl-kap .pl-v-maalt{color:#F0936A}
.pl-kap .pl-v-hak{box-shadow:inset 0 0 0 1px rgba(242,231,220,.38)}
.pl-kap .pl-prik{box-shadow:inset 0 0 0 1px rgba(242,231,220,.5)}
.pl-kap .pl-prik-maalt{box-shadow:none}
.pl-kap .pl-v-tael{background:rgba(255,253,251,.06)}
.pl-kap .pl-v-tael-lab,.pl-kap .pl-v-tael-tal{color:#D7B7A3}
.pl-kap .pl-v-tael-tal b{color:#FFFDFB}
.pl-kap .pl-v-maaler{background:rgba(242,231,220,.16)}
.pl-kap .pl-v-fod{color:#FFFDFB;border-top-color:rgba(242,231,220,.13)}
/* blød indtoning (platform-2026.js sætter .pl-kort-klar på listen og .pl-kort-vist på kortet) */
.pl-kort-klar .pl-vindue{opacity:0;transform:translateY(34px) scale(.975);transform-origin:50% 100%;
  transition:opacity 1.3s cubic-bezier(.33,0,.2,1),transform 1.7s var(--rg-ud)}
.pl-kort-klar .pl-vindue.pl-kort-vist{opacity:1;transform:none}