/* FAKTIVE sektion 5 2026: "Fire regelsæt. Én dokumentation." som instrument.
   Hører sammen med assets/sektion5-2026.js. Uden JavaScript står sektionen, som den gjorde før.
   Instrumentet: målekanaler til venstre, ringen i midten, regelsættene til højre.
   Ringens venstre halvdel er én bue, hvor hver kanal har sit landingspunkt, og som
   fyldes flydende, mens målingerne lander. Højre halvdel er buen, sporene ud til
   regelsættene udgår fra. I midten FAKTIVE-mærkets Λ.
   GSAP styrer tidslinjen (s5.js); CSS tegner kun tilstandene. */

/* sektionen klipper sit indhold; uden betydning her, men panelets skygge skal kunne ses */
#regelsaet.framework-matrix{overflow:visible}

.ev{position:relative;max-width:1200px;margin:clamp(34px,3.6vw,58px) auto 0;padding:0 32px}

.ev-panel{position:relative;border-radius:20px;
  padding:clamp(22px,2.4vw,36px) clamp(20px,2.4vw,36px) clamp(20px,2.2vw,32px);
  transition:padding .7s cubic-bezier(.65,0,.35,1)}
/* den mørke flade er sit eget lag, så den kan tones ud, når brugeren vælger lys baggrund */
.ev-flade{position:absolute;inset:0;z-index:0;border-radius:20px;overflow:hidden;pointer-events:none;
  background:linear-gradient(152deg,#30223A 0%,#3C2A44 48%,#291C30 100%);
  box-shadow:0 36px 80px -46px rgba(40,26,48,.85),0 1px 0 rgba(242,231,220,.06) inset;
  transition:opacity .7s cubic-bezier(.65,0,.35,1)}
/* måleark: fint gitter, som på instrumentpapir */
.ev-flade::before{content:"";position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(242,231,220,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,231,220,.04) 1px,transparent 1px);
  background-size:40px 40px}
/* gløden bag ringen, når den er fuld */
.ev-panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(38% 50% at 50% 52%,rgba(228,87,36,.16),transparent 72%);
  transition:opacity 1.6s ease}
.ev-panel.fuld::after{opacity:1}

.ev-top{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:16px;margin-bottom:clamp(16px,1.8vw,26px)}
.ev-etiket{display:block;font-family:var(--font-text);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#F2A17E;margin-bottom:7px}
.ev-titel{display:block;font-family:var(--font-display);font-stretch:108%;font-weight:600;
  font-size:clamp(17px,1.6vw,22px);color:#FDF8F2;letter-spacing:-.008em}
/* svaret på spørgsmålet i titlen; skifter med knappen til højre */
.ev-spoergsmaal{flex:1 1 30em;min-width:0}
.ev-svar{margin:9px 0 0;max-width:58em;font-size:14.5px;line-height:1.6;color:#C6B4BD;text-wrap:pretty}
.ev-navnhel{white-space:nowrap}
.ev-vaelg{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(242,231,220,.07);border:1px solid rgba(242,231,220,.13)}
/* markeringen er sit eget element, som glider hen under det valgte */
.ev-markor{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#FDF8F2;
  box-shadow:0 4px 16px rgba(10,4,14,.28);pointer-events:none}
.ev-vaelg button{all:unset;position:relative;z-index:1;cursor:pointer;padding:9px 16px;border-radius:999px;min-height:42px;
  display:flex;align-items:center;font-family:var(--font-text);font-size:13px;font-weight:600;
  color:#C6B4BD;transition:background-color .35s ease,color .35s ease}
.ev-vaelg button:hover{color:#FDF8F2}
.ev-vaelg button:focus-visible{outline:3px solid #F2A17E;outline-offset:3px}
.ev-vaelg button[aria-pressed="true"]{color:#3C2A44;transition-delay:.12s}

.ev-scene{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.84fr) clamp(210px,19vw,256px) minmax(0,.8fr);
  column-gap:clamp(40px,5.6vw,88px);row-gap:16px;align-items:center}
.ev-tegning{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}

/* sporene har pathLength="1", så de kan tegnes uden at kende deres længde */
.spor{fill:none;stroke:rgba(242,231,220,.16);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.spor.motor{stroke:rgba(124,199,155,.34);stroke-dasharray:.012 .024;stroke-dashoffset:0}
.puls{fill:#FFE2CF;filter:drop-shadow(0 0 3px rgba(255,170,130,.95))}
.puls.motor{fill:#B7E6C9;filter:drop-shadow(0 0 3px rgba(124,199,155,.95))}

/* ---------- kanalerne ---------- */
.ev-kanaler{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px}
.ev-kanal{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:8px;
  background:rgba(242,231,220,.045);border:1px solid rgba(242,231,220,.09);
  opacity:0;transform:translateX(-12px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
/* display:flex ovenfor slår [hidden] ud, så den sættes tilbage udtrykkeligt */
.ev-kanal[hidden]{display:none}
.ev-kanal.inde{opacity:1;transform:none}
.ev-kanal i{flex:none;width:6px;height:6px;border-radius:50%;background:#F2A17E;opacity:.55}
.ev-kanal.sender i{animation:ev-send .9s ease-out}
.ev-kanal b{font-family:var(--font-display);font-stretch:104%;font-size:14.5px;font-weight:600;color:#FDF8F2}
.ev-kanal small{margin-left:auto;font-size:11.5px;color:#B4A3AE;white-space:nowrap}
.ev-kanal.motor{border-style:dashed;border-color:rgba(124,199,155,.4);background:rgba(124,199,155,.07)}
.ev-kanal.motor i{background:#7CC79B}
/* Engines kilder har lange navne; undertitlen står derfor under navnet, så navnet
   får hele bredden og ikke knækker */
.ev-kanal.motor{flex-wrap:wrap;row-gap:1px}
.ev-kanal.motor b{flex:1 1 auto;min-width:0}
.ev-kanal.motor small{flex-basis:100%;margin-left:17px}

/* ---------- ringen ---------- */
.ev-midte{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.ev-ring{display:block;width:100%;aspect-ratio:1;overflow:visible}
.ring-skala line{stroke:rgba(242,231,220,.22);stroke-width:1}
.ring-skala line.lang{stroke:rgba(242,231,220,.42)}
.ring-skala{opacity:0}
.ring-inder{fill:none;stroke:rgba(242,231,220,.1);stroke-width:1}
.ring-spor{fill:none;stroke:rgba(242,231,220,.12);stroke-width:7;stroke-linecap:round}
.ring-fyld{fill:none;stroke:#E45724;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ring-fyld.motor{stroke:#7CC79B}
.ring-glimt{fill:none;stroke:#FFE2CF;stroke-width:7;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,170,130,.9))}
.ring-glimt.motor{stroke:#D5F2E0;filter:drop-shadow(0 0 4px rgba(124,199,155,.9))}
.ring-ud{fill:none;stroke:#F2A17E;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ring-boelge{fill:none;stroke:#F2A17E;stroke-width:1.4;opacity:0}
.ring-maerke{fill:#E45724;opacity:.28}
.ev-navn{text-align:center}
.ev-navn b{display:block;font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(14px,1.25vw,17px);color:#FDF8F2}
.ev-navn span{display:block;margin-top:4px;font-family:var(--font-text);font-size:10.5px;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#B4A3AE}

/* ---------- aflæsningerne ---------- */
.ev-liste{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px}
.ev-aflaes{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;
  background:rgba(242,231,220,.045);border:1px solid rgba(242,231,220,.09);opacity:.4;transform:translateX(10px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),background-color .6s ease,border-color .6s ease}
.ev-aflaes.daekket{opacity:1;transform:none;background:rgba(242,231,220,.085);
  border-color:color-mix(in srgb,var(--fw) 52%,transparent)}
.ev-aflaes.ping{animation:ev-ping .9s cubic-bezier(.16,1,.3,1)}
.ev-aflaes i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fw)}
.ev-aflaes b{font-family:var(--font-display);font-stretch:104%;font-size:15px;font-weight:600;color:#FDF8F2}
.ev-aflaes .ekstra{display:none;font-size:11px;color:#7CC79B;letter-spacing:.03em}
.ev-aflaes small{margin-left:auto;font-family:var(--font-text);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#B4A3AE}
.ev-flue{flex:none;width:18px;height:18px;border-radius:50%;position:relative;opacity:0;transform:scale(.4);
  background:color-mix(in srgb,var(--fw) 80%,#fff);
  transition:opacity .3s ease .15s,transform .45s cubic-bezier(.34,1.56,.64,1) .15s}
.ev-aflaes.daekket .ev-flue{opacity:1;transform:none}
.ev-flue::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;
  border-right:2px solid #2E2036;border-bottom:2px solid #2E2036;transform:rotate(42deg)}

/* ---------- bundlinjen og forklaringen ---------- */
.ev-bund{position:relative;z-index:3;display:flex;align-items:center;gap:14px;
  margin-top:clamp(16px,1.8vw,24px);padding-top:16px;border-top:1px solid rgba(242,231,220,.1)}
.ev-status{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#C6B4BD}
.ev-status i{flex:none;width:7px;height:7px;border-radius:50%;background:#7CC79B;
  animation:ev-liv 2.4s ease-out infinite}

/* panelet står stille, når det ikke er i syne */
.ev-panel.pause,.ev-panel.pause *,.ev-panel.pause::after,
.ev-panel.pause *::before,.ev-panel.pause *::after{animation-play-state:paused !important}

@keyframes ev-send{0%{opacity:.55;box-shadow:0 0 0 0 rgba(242,161,126,.6)}
  25%{opacity:1}100%{opacity:.55;box-shadow:0 0 0 9px rgba(242,161,126,0)}}
@keyframes ev-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fw) 65%,transparent)}
  100%{box-shadow:0 0 0 12px transparent}}
@keyframes ev-liv{0%{box-shadow:0 0 0 0 rgba(124,199,155,.45)}100%{box-shadow:0 0 0 8px rgba(124,199,155,0)}}

@media (max-width:980px){
  .ev{padding:0 24px}
  .ev-scene{grid-template-columns:1fr;gap:18px}
  .ev-tegning{display:none}
  /* to kolonner, så aflæsningerne ikke havner under skærmkanten */
  .ev-kanaler{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ev-kanal{padding:9px 11px}
  .ev-kanal b{font-size:13.5px}
  .ev-kanal small{display:none}
  .ev-kanal.motor{grid-column:1/-1}
  .ev-ring{width:min(190px,56vw)}
}

/* Reduceret bevægelse: sidens egen regel slår al animation og overgang fra
   (index.html: *{animation:none !important;transition:none !important}),
   så sluttilstanden står her som almindelig CSS. */
@media (prefers-reduced-motion:reduce){
  .ev-tegning .puls{display:none}
  .ev-kanal{opacity:1;transform:none}
  .spor,.ring-fyld,.ring-ud{stroke-dashoffset:0}
  .ring-skala{opacity:1}
  .ring-maerke{opacity:1}
  .ev-panel::after{opacity:1}
  .ev-aflaes{opacity:1;transform:none;background:rgba(242,231,220,.085);
    border-color:color-mix(in srgb,var(--fw) 52%,transparent)}
  .ev-flue{opacity:1;transform:none}
}

/* ===== vælgeren under panelet =====
   Farver målt mod hvid: blæk #2A2321 (15:1), brødtekst #5C4F48 (7,9:1),
   småtekst #7A6B63 (5,1:1), kobber #B23F14 til småtekst (5,8:1),
   kobber #E45724 kun til stor tekst (3,5:1, over kravet på 3:1 for stor tekst). */
/* overlinjen over beskrivelsen: type · pakke */
.ev-reg-over{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--font-text);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7A6B63}
.ev-reg-art::after{content:"·";margin-left:14px;color:rgba(42,35,33,.3)}

/* Navnene står i sidens rubrikskrift;
   det aktive i fuld blæk (GDPR i kobber), de andre svage. Kobberlinjen under det aktive
   navn er uret: når den er fuld, skifter vælgeren. */
.ev-vaelger{margin-top:clamp(40px,4vw,64px)}
/* Sektionens sidste linje: prisnoten, adskilt fra vælgeren af en tynd linje, med
   teksten til venstre og linket til priserne til højre (under hinanden på mobil). */
.ev-slut{display:flex;align-items:baseline;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;
  margin-top:clamp(44px,4.6vw,68px);padding-top:clamp(20px,2vw,26px);border-top:1px solid rgba(42,35,33,.16)}
.ev-slut-tekst{margin:0;flex:1 1 30em;max-width:46em;font-size:16px;line-height:1.6;font-weight:300;color:#4A3F3A}
.ev-slut-link{flex:none;font-size:16px;font-weight:600;color:#B23F14;text-decoration:none;white-space:nowrap;
  background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.16,1,.3,1)}
.ev-slut-link:hover,.ev-slut-link:focus-visible{background-size:100% 1px}
.ev-slut-link:focus-visible{outline:2px solid #E45724;outline-offset:4px;border-radius:2px}

.ev-vg-faner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px clamp(20px,2.4vw,40px);
  border-top:1px solid rgba(42,35,33,.2);border-bottom:1px solid rgba(42,35,33,.2)}
.ev-vg-fane{all:unset;position:relative;cursor:pointer;display:flex;align-items:flex-start;gap:8px;
  padding:clamp(20px,2vw,28px) 0 clamp(18px,1.8vw,24px);-webkit-tap-highlight-color:transparent}
.ev-vg-navn{font-family:var(--font-display);font-stretch:125%;font-weight:520;letter-spacing:-.02em;line-height:1;
  font-size:clamp(24px,2.55vw,38px);white-space:nowrap;color:rgba(42,35,33,.26);
  transition:color .45s ease}
.ev-vg-fane:hover .ev-vg-navn{color:rgba(42,35,33,.55)}
.ev-vg-fane.aktiv .ev-vg-navn{color:#2A2321}
.ev-vg-fane.med .ev-vg-navn{color:rgba(228,87,36,.36)}
.ev-vg-fane.med.aktiv .ev-vg-navn{color:#E45724}
.ev-vg-fane:focus-visible{outline:2px solid #E45724;outline-offset:4px;border-radius:4px}
/* uret: en kobberlinje, der løber fuld under det aktive navn */
.ev-vg-tid{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#E45724;
  transform:scaleX(0);transform-origin:left center}
.ev-vg-fane.aktiv .ev-vg-tid{transform:scaleX(1)}
.ev-vaelger.koerer .ev-vg-fane.aktiv.taeller .ev-vg-tid{animation:ev-vg-ur 6.5s linear both}
/* musen stopper ikke uret; men står man på et navn med tastaturet, holder det pause,
   så man kan nå at læse (klik giver ikke :focus-visible og pauser derfor ikke) */
.ev-vaelger:has(.ev-vg-fane:focus-visible) .ev-vg-tid{animation-play-state:paused !important}
@keyframes ev-vg-ur{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* feltet: alle fem ligger i samme celle, så højden er den højeste, og intet hopper.
   Beskrivelsen sættes som citatet i sektion 3: stor, let vægt, i blæk. Ved hvert skift
   glider ordene op ét for ét bag en maske (--n er ordets nummer, sat af s5.js). */
.ev-vg-felt{display:grid;padding-top:clamp(26px,2.6vw,38px)}
.ev-vg-side{grid-area:1/1;align-self:start;visibility:hidden;transition:visibility 0s linear .35s}
.ev-vg-side.aktiv{visibility:visible;transition:visibility 0s}
.ev-vg-side .ev-reg-over{margin:0 0 14px;opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .3s ease,transform .3s ease}
.ev-vg-side.aktiv .ev-reg-over{opacity:1;transform:none;transition:opacity .5s ease .1s,transform .7s cubic-bezier(.16,1,.3,1) .1s}
.ev-vg-side.med .ev-reg-pakke{color:#B23F14}
/* hele bredden, så selv NIS2 står på 2 linjer, og feltet ikke er højere end nødvendigt */
.ev-vg-side > p:not(.ev-reg-over){margin:0;max-width:none;font-family:var(--font-text);
  font-size:clamp(20px,2vw,29px);line-height:1.38;font-weight:300;letter-spacing:-.005em;color:#2A2321;text-wrap:pretty}
/* hvert ord i sin egen maske */
.ev-vg-o{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.ev-vg-o > span{display:inline-block;transform:translate3d(0,105%,0);
  transition:transform .35s cubic-bezier(.5,0,.75,0)}
.ev-vg-side.aktiv .ev-vg-o > span{transform:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1) calc(.18s + var(--n) * 14ms)}

/* indtoning */
.ev-vaelger.venter .ev-vg-felt,.ev-vaelger.venter .ev-slut{
  opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.ev-vaelger.venter .ev-vg-navn{display:inline-block;transform:translate3d(0,110%,0);clip-path:inset(0 0 100% 0);
  transition:transform 1s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1),color .45s ease}
.ev-vaelger.venter .ev-vg-fane:nth-child(2) .ev-vg-navn{transition-delay:.07s}
.ev-vaelger.venter .ev-vg-fane:nth-child(3) .ev-vg-navn{transition-delay:.14s}
.ev-vaelger.venter .ev-vg-fane:nth-child(4) .ev-vg-navn{transition-delay:.21s}
.ev-vaelger.venter .ev-vg-fane:nth-child(5) .ev-vg-navn{transition-delay:.28s}
.ev-vaelger.venter .ev-vg-felt{transition-delay:.3s}
.ev-vaelger.venter.vist .ev-vg-felt,.ev-vaelger.venter.vist .ev-slut{opacity:1;transform:none}
.ev-vaelger.venter.vist .ev-vg-navn{transform:none;clip-path:inset(0 0 -20% 0)}

@media (max-width:860px){
  .ev-vg-faner{justify-content:flex-start;column-gap:22px}
  .ev-vg-fane{padding:14px 0 12px}
}
@media (prefers-reduced-motion:reduce){
  .ev-vg-side .ev-reg-over,.ev-vg-o > span{transition:none !important;transform:none !important}
  .ev-vg-side .ev-reg-over{opacity:1}
}

/* regelsættene i panelet skifter vælgeren, men markeres ikke; kun tastaturets fokusring vises */
.ev-aflaes[role=button]:focus-visible{outline:2px solid #F2A17E;outline-offset:3px}

/* ===== lys baggrund: instrumentet i det fri (.ev-panel.fri, brugerens valg) =====
   Ingen mørk boks: instrumentet står direkte på sektionens lyse baggrund og flugter med
   vælgeren nedenunder. Alle farver er vendt til lys bund; kobber og grøn er gjort dybere,
   så de kan ses på hvidt. En svag kobberglød bag ringen giver lidt atmosfære. */
.ev-panel.fri{padding:clamp(8px,1vw,14px) 0 0}
.ev-panel.fri .ev-flade{opacity:0}
.ev-panel.fri::after{background:radial-gradient(30% 46% at 50% 56%,rgba(228,87,36,.10),transparent 72%)}
.ev-panel.fri .ev-etiket{color:#B23F14}
.ev-panel.fri .ev-titel{color:#2A2321}
.ev-panel.fri .ev-svar{color:#5C4F48}
.ev-panel.fri .ev-vaelg{background:rgba(60,42,68,.05);border-color:rgba(60,42,68,.12)}
.ev-panel.fri .ev-markor{background:#3C2A44;box-shadow:0 6px 18px -6px rgba(60,42,68,.45)}
.ev-panel.fri .ev-vaelg button{color:#5C4F48}
.ev-panel.fri .ev-vaelg button:hover{color:#2A2321}
.ev-panel.fri .ev-vaelg button[aria-pressed="true"]{color:#FDF8F2}
.ev-panel.fri .ev-vaelg button:focus-visible{outline-color:#E45724}
/* spor og målinger */
.ev-panel.fri .spor{stroke:rgba(60,42,68,.2)}
.ev-panel.fri .spor.motor{stroke:rgba(59,122,64,.5)}
.ev-panel.fri .puls{fill:#E45724;filter:drop-shadow(0 0 3px rgba(228,87,36,.55))}
.ev-panel.fri .puls.motor{fill:#3B7A40;filter:drop-shadow(0 0 3px rgba(59,122,64,.5))}
/* kanalerne */
.ev-panel.fri .ev-kanal{background:#fff;border-color:rgba(60,42,68,.12);box-shadow:0 1px 2px rgba(60,42,68,.04)}
.ev-panel.fri .ev-kanal i{background:#E45724;opacity:.7}
.ev-panel.fri .ev-kanal b{color:#2A2321}
.ev-panel.fri .ev-kanal small{color:#7A6B63}
.ev-panel.fri .ev-kanal.motor{border-color:rgba(59,122,64,.5);background:rgba(59,122,64,.05)}
.ev-panel.fri .ev-kanal.motor i{background:#3B7A40;opacity:1}
/* ringen */
.ev-panel.fri .ring-skala line{stroke:rgba(60,42,68,.22)}
.ev-panel.fri .ring-skala line.lang{stroke:rgba(60,42,68,.45)}
.ev-panel.fri .ring-inder{stroke:rgba(60,42,68,.1)}
.ev-panel.fri .ring-spor{stroke:rgba(60,42,68,.08)}
.ev-panel.fri .ring-fyld.motor{stroke:#3B7A40}
.ev-panel.fri .ring-glimt{stroke:#FFB08A;filter:drop-shadow(0 0 4px rgba(228,87,36,.55))}
.ev-panel.fri .ring-glimt.motor{stroke:#8FD0A8;filter:drop-shadow(0 0 4px rgba(59,122,64,.55))}
.ev-panel.fri .ring-ud{stroke:#EE8A5E}
.ev-panel.fri .ring-boelge{stroke:#E45724}
.ev-panel.fri .ev-navn b{color:#2A2321}
.ev-panel.fri .ev-navn span{color:#7A6B63}
/* regelsættene */
.ev-panel.fri .ev-aflaes{background:#fff;border-color:rgba(60,42,68,.1)}
.ev-panel.fri .ev-aflaes.daekket{background:#fff;border-color:color-mix(in srgb,var(--fw) 45%,transparent);
  box-shadow:0 8px 22px -14px color-mix(in srgb,var(--fw) 80%,transparent)}
.ev-panel.fri .ev-aflaes b{color:#2A2321}
.ev-panel.fri .ev-aflaes small{color:#7A6B63}
.ev-panel.fri .ev-aflaes .ekstra{color:#2F6534}
.ev-panel.fri .ev-flue{background:var(--fw)}
.ev-panel.fri .ev-flue::after{border-color:#fff}
/* blinket, når en måling lander: blødere på lys bund, ellers bliver aubergine til en grå ring */
.ev-panel.fri .ev-aflaes.ping{animation-name:ev-ping-fri}
@keyframes ev-ping-fri{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fw) 28%,transparent)}
  100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--fw) 0%,transparent)}}
/* bundlinjen */
.ev-panel.fri .ev-bund{border-top-color:rgba(60,42,68,.12)}
.ev-panel.fri .ev-status{color:#5C4F48}
.ev-panel.fri .ev-status i{background:#3B7A40}
@media (max-width:760px){
  .ev-panel.fri .ev-aflaes{background:#fff}
}

/* indledningen: samme læserytme som sektion 4 (linjehøjde 1,7, let vægt, mørkere farve)
   og kortere linjer, så den centrerede tekst er rolig at læse. Afstanden til rubrikken
   står som style-attribut i index.html og overskrives derfor med !important. */
#regelsaet .matrix-intro .sub{font-size:clamp(17px,1.35vw,19px);line-height:1.7;font-weight:300;color:#5C4F48;
  max-width:54em;margin-left:auto;margin-right:auto;margin-top:26px !important;text-wrap:balance}
/* bred nok til 3 linjer på desktop (cirka 110 tegn pr. linje; ønsket for at spare scroll) */
#regelsaet .matrix-intro{max-width:1136px}
/* på smalle skærme er teksten over 6 linjer, hvor balance ikke virker; pretty undgår et enligt ord til sidst */
@media (max-width:600px){#regelsaet .matrix-intro .sub{text-wrap:pretty}}
/* rubrikken: afbalancerede linjer, så "gang." og "steder." ikke står alene på mobil */
#regelsaet .matrix-intro h2 .ev-h2-del{display:block;text-wrap:balance}

/* ===== skifte mellem mørk og lys flade: farverne glider over et øjeblik ===== */
.ev-panel.skifter-flade :is(.ev-etiket,.ev-titel,.ev-svar,.ev-vaelg,.ev-vaelg button,.ev-markor,.ev-kanal,.ev-kanal b,
  .ev-kanal small,.ev-kanal i,.ev-aflaes,.ev-aflaes b,.ev-aflaes small,.ev-navn b,.ev-navn span,.ev-bund,.ev-status,.ev-lys){
  transition:color .7s ease,background-color .7s ease,border-color .7s ease,box-shadow .7s ease,opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1) !important}
.ev-panel.skifter-flade :is(.spor,.ring-skala line,.ring-inder,.ring-spor,.ring-ud,.ring-maerke){transition:stroke .7s ease,fill .7s ease !important}

/* ===== skyderen FAKTIVE | + FAKTIVE Engine ===== */
.ev-vaelg{cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ev-vaelg.traekkes,.ev-vaelg.traekkes button{cursor:grabbing}
.ev-markor{will-change:transform}
/* en lille grøn prik ved Engine inviterer, indtil skyderen er prøvet */
.ev-inviter{flex:none;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#7CC79B;
  animation:ev-liv 2s ease-out infinite;transition:opacity .4s ease,width .4s ease,margin .4s ease}
.ev-vaelg.provet .ev-inviter{opacity:0;width:0;margin-right:0;animation:none}
.ev-panel.fri .ev-inviter{background:#3B7A40}

/* ===== lys/mørk-kontakten nederst til højre ===== */
.ev-lys{all:unset;box-sizing:border-box;position:relative;margin-left:auto;flex:none;cursor:pointer;
  width:58px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;
  background:rgba(242,231,220,.08);border:1px solid rgba(242,231,220,.16);transition:background-color .4s ease,border-color .4s ease}
/* trykfladen er større end kontakten, så den er let at ramme med en finger (mindst 44 px) */
.ev-lys::after{content:"";position:absolute;inset:-8px -4px}
.ev-lys:hover{background:rgba(242,231,220,.14)}
.ev-lys:focus-visible{outline:2px solid #F2A17E;outline-offset:3px}
.ev-lys svg{position:relative;z-index:1;width:13px;height:13px;fill:none;stroke:#C6B4BD;stroke-width:1.5;stroke-linecap:round;
  transition:stroke .4s ease}
.ev-lys .maane{fill:#FDF8F2;stroke:none}
.ev-lys .knop{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:rgba(242,231,220,.16);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .4s ease}
.ev-panel.fri .ev-lys{background:rgba(60,42,68,.05);border-color:rgba(60,42,68,.14)}
.ev-panel.fri .ev-lys:hover{background:rgba(60,42,68,.09)}
.ev-panel.fri .ev-lys:focus-visible{outline-color:#E45724}
.ev-panel.fri .ev-lys .knop{transform:translateX(28px);background:#fff;box-shadow:0 2px 6px rgba(60,42,68,.2)}
.ev-panel.fri .ev-lys .maane{fill:#9C8C85}
.ev-panel.fri .ev-lys .sol{stroke:#E45724}

@media (prefers-reduced-motion:reduce){
  .ev-inviter{animation:none}
  .ev-flade,.ev-panel{transition:none}
}

/* mindre luft under prisnoten, som er sektionens sidste linje; sektion 6 har selv luft i toppen */
#regelsaet.framework-matrix{padding-bottom:clamp(48px,5vw,72px)}