/* Hours: Sikkerhed og compliance, sidespecifikt lag.
   Indlaeses efter scene-base.css og er scopet til body.page-security.

   Siden bygger paa de faelles komponenter og tokens: DM Sans fra site-2026,
   sektionsluft var(--sc-sek), radius 7 px, kortflade var(--fg-kort),
   fluebenet .sc-tjek og knapperne .sc-knap-*. Der er ikke indfoert nye
   farver, radier eller skriftstoerrelser, kun de layoutformer siden
   mangler: undervejs-kortene, omraadegitteret og kontrolregisteret. */

/* ── Undervejs-pille ───────────────────────────────────────────────────
   Kun ét statusord paa siden har en pille, og det er "Undervejs". Den er
   stille graa paa var(--subtle), ikke gul: alt andet paa siden er i drift,
   saa pillen skal markere en undtagelse, ikke raabe. Ingen kant. */
body.page-security .se-pille {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  border: none;
}
body.page-security .se-pille-vent {
  background: var(--subtle);
  color: var(--t2);
}

/* ══ 1 · UNDERVEJS ══════════════════════════════════════════════════════
   Referencens kortformat: titel, statuspille, én forklaring. Kortene bruger
   samme flade som omraadekortene nedenfor, saa der ikke opstaar et ekstra
   kortsprog paa siden. Sektionen er hvid og centreret som resten. */
body.page-security .se-spor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Hvid flade med et let loeft, ikke den flade graa som omraadekortene:
   de to sektioner staar lige efter hinanden, og det der er undervejs skal
   laeses foerst. Skyggen er Hours' egen (samme som int-kortenes hover),
   ingen 1 px kant. */
body.page-security .se-sporkort {
  background: #fff;
  border-radius: 7px;
  padding: 26px 24px 28px;
  text-align: left;
  box-shadow: 0 10px 26px rgba(17, 24, 20, .07), 0 1px 2px rgba(26, 25, 22, .05);
}
body.page-security .se-sporkort-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
body.page-security .se-sporkort h3 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--t1);
  margin: 0;
}
body.page-security .se-sporkort-hd .se-pille { margin-left: 0; }
body.page-security .se-sporkort p {
  font-size: .89rem;
  line-height: 1.62;
  color: var(--t2);
  margin: 0;
}
body.page-security .se-opdateret {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--t3);
}
@media (max-width: 1000px) { body.page-security .se-spor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { body.page-security .se-spor { grid-template-columns: 1fr; } }

/* ══ 2 · OMRAADERNE ════════════════════════════════════════════════════
   Otte kort: hvordan vi arbejder med hvert omraade. Samme rolige kortflade
   som .hs-kort paa de oevrige sider, med et ikon foroven.
   De otte staar i to spejlede halvdele: fire kort + figurflade, og under
   den figurflade + fire kort. Begge halvdele bruger samme .se-par, saa
   kortstoerrelser, billedproportioner og spacing er identiske - kun
   raekkefoelgen i DOM'en vender. Fladen har figurernes eget format
   (1159 x 1358), saa hele kompositionen staar med ved alle bredder. */
/* Sektionen ligger taettere paa "Se dokumentation" end den fulde
   sektionsluft, fordi den ikke laengere har sit eget centrerede hoved. */
body.page-security .se-sek-omraader { padding-top: clamp(56px, 6.4vw, 92px); }

/* --se-figur-h er det maal, tekstspalten sigter efter paa desktop: teksten
   foroven, kortene nede paa linje med figurfladens underkant. Fladen selv
   faar sin hoejde af figurernes format, ikke af denne variabel. */
body.page-security .se-par {
  --se-figur-h: clamp(480px, 45vw, 648px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(40px, 5vw, 80px);
  /* stretch, ikke start: kortene blev hoejere end figuren og haengte
     9-115 px under dens underkant afhaengigt af vinduesbredden. Naar
     begge spalter fylder raekkens hoejde, flugter de af konstruktion. */
  align-items: stretch;
}
body.page-security .se-par--spejlet { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
body.page-security .se-par-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 48px);
  min-height: var(--se-figur-h);
}
body.page-security .se-par-hoved { max-width: 46ch; }
body.page-security .se-par-hoved .sc-h2 { margin-top: 0; text-align: left; }
body.page-security .se-par-sub {
  color: var(--prose);
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  margin: var(--sc-3) 0 0;
}
body.page-security .se-par-kort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.page-security .se-figur {
  width: 100%;
  max-width: 560px;
  /* Figurerne er tegnet i ét fast format, og hele motivet skal med. Derfor
     faar fladen billedets eget forhold i stedet for at blive strakt efter
     kortene: blev den strakt (op til 877 px i et 1024 px vindue), skar cover
     en fjerdedel af billedets bredde af. Ved 560 px bredde giver forholdet
     656 px - det maal fladen havde i forvejen paa desktop, saa spalterne
     flugter fortsat der. */
  aspect-ratio: 1159 / 1358;
  height: auto;
  align-self: start;
  margin: 0;
  border-radius: 7px;
  background: var(--sc-flade);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* ankeret for figurbilledet, der ligger absolut hen over fladen */
  position: relative;
}
/* Fladen skubbes ud mod sin egen kant, saa de to sektioner spejler hinanden
   praecist: figuren yderst, kortene ind mod midten. */
body.page-security .se-par > .se-figur:last-child  { justify-self: end; }
body.page-security .se-par > .se-figur:first-child { justify-self: start; }
/* Billedet skal fylde fladen, ikke bestemme den. I grid-konteksten slog
   height:100% ikke igennem - img'et blev sin egen naturlige hoejde (572 px i
   en 399 px flade paa tablet) og haeftede i toppen. Absolut placering binder
   det til fladens fire kanter ved alle bredder.
   Figurerne er komponeret i fladens eget format, saa de staar centreret. */
body.page-security .se-figur img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}
/* ══ 2c · SIKKERHEDSSCENEN paa globus-figuren ═══════════════════════════
   Fotoet er ét rasterbillede, saa flag og skyer kan ikke skilles ad. I
   stedet ligger scenen som et lag ovenpaa: punkter paa Europa, forbindelser
   mellem dem, et beskyttelsesfelt om omraadet og en verifikation til sidst.
   Hierarkiet er fastholdt - figuren og globussen foerst, laget bagefter, saa
   intet element ligger oven paa figuren selv.

   ÉN DELT TIDSLINJE. Alle dele bruger --se-loop og faar deres forskydning
   fra keyframe-PROCENTER, ikke fra animation-delay: en delay paa en
   uendelig animation forskyder elementets cyklus permanent i forhold til
   scenens, saa noget staar tilbage naar resten er tonet ud. Samme regel som
   paa forsidens kort. 100 % er identisk med 0 %, saa loop-wrappet er tavst.

   Sekvensen over 19 s: svebet scanner kloden (6-19 %), syv punkter taender
   i koelvandet vest mod oest (12-30 %), seks forbindelser tegnes (30-44 %),
   feltet lukkes om Europa (44-56 %), kvitteringskortet kommer og faar sine
   tre flueben ét ad gangen (57-77 %), feltet skifter til Hours-groen ved det
   sidste (78 %), rolig sluttilstand (78-88 %), ud og forfra.

   .inde kommer fra .reveal-scroll-observeren i js/main.js. Uden den ville
   loopet koere videre langt uden for skaermen. forside-garba.css er ikke
   indlaest her, saa klassen har ingen anden virkning end den herunder. */
body.page-security .se-figur--scene {
  --se-loop: 19s;
  --se-ud: cubic-bezier(.22, 1, .36, 1);
}
body.page-security .se-scene {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--se-ud);
}
body.page-security .se-figur--scene.inde .se-scene { opacity: 1; }
body.page-security .se-figur--scene.inde { opacity: 1; }
body.page-security .se-net { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Baggrundslaget: en drift saa lille at den ikke laeses som en bevaegelse,
   kun som liv i himlen. Egen, langsommere rytme end sekvensen. */
body.page-security .se-figur--scene.inde img {
  will-change: transform;
  animation: se-drift 34s ease-in-out infinite alternate;
}
@keyframes se-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.022); }
}

/* ── Trin 1: omraadet scannes ────────────────────────────────────────
   Et blodt lysbaand glider ÉN gang hen over kloden og saetter sekvensen i
   gang. Det er klippet til globussens egen cirkel, saa lyset bliver paa
   kuglen i stedet for at feje hen over figuren og himlen. Kun translateX,
   saa svebet ikke koster andet end en transform. */
body.page-security .se-sveb { opacity: 0; }
body.page-security .se-figur--scene.inde .se-sveb { animation: se-sveb var(--se-loop) linear infinite both; }
@keyframes se-sveb {
  0%,6%    { transform: translateX(0);      opacity: 0 }
  8%       { transform: translateX(180px);  opacity: 1 }
  17%      { transform: translateX(1230px); opacity: 1 }
  19%      { transform: translateX(1400px); opacity: 0 }
  /* tilbage til udgangspunktet mens baandet er usynligt, saa 100 % er
     identisk med 0 % og loop-wrappet ikke giver et glimt */
  20%,100% { transform: translateX(0);      opacity: 0 }
}

/* ── Trin 2: punkterne paa Europa ────────────────────────────────────── */
body.page-security .se-kerne {
  fill: #fff;
  stroke: #0e6640;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
}
/* Ringen slaar ÉN gang ud naar punktet taender - ingen vedvarende blinken. */
body.page-security .se-puls {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
}
body.page-security .se-figur--scene.inde .se-node--1 .se-kerne { animation: se-kerne1 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--2 .se-kerne { animation: se-kerne2 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--3 .se-kerne { animation: se-kerne3 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--4 .se-kerne { animation: se-kerne4 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--5 .se-kerne { animation: se-kerne5 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--6 .se-kerne { animation: se-kerne6 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-node--7 .se-kerne { animation: se-kerne7 var(--se-loop) var(--se-ud) infinite both; }
@keyframes se-kerne1 { 0%,14.5% { opacity:0; transform:scale(.4) } 18%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne2 { 0%,22% { opacity:0; transform:scale(.4) } 25.5%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne3 { 0%,27% { opacity:0; transform:scale(.4) } 30.5%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne4 { 0%,17% { opacity:0; transform:scale(.4) } 20.5%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne5 { 0%,24.5% { opacity:0; transform:scale(.4) } 28%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne6 { 0%,12% { opacity:0; transform:scale(.4) } 15.5%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
@keyframes se-kerne7 { 0%,19.5% { opacity:0; transform:scale(.4) } 23%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.4) } }
body.page-security .se-figur--scene.inde .se-node--1 .se-puls { animation: se-puls1 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--2 .se-puls { animation: se-puls2 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--3 .se-puls { animation: se-puls3 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--4 .se-puls { animation: se-puls4 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--5 .se-puls { animation: se-puls5 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--6 .se-puls { animation: se-puls6 var(--se-loop) ease-out infinite both; }
body.page-security .se-figur--scene.inde .se-node--7 .se-puls { animation: se-puls7 var(--se-loop) ease-out infinite both; }
@keyframes se-puls1 { 0%,14.5% { opacity:0; transform:scale(1) } 16.5% { opacity:.55; transform:scale(1) } 23.5%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls2 { 0%,22% { opacity:0; transform:scale(1) } 24% { opacity:.55; transform:scale(1) } 31%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls3 { 0%,27% { opacity:0; transform:scale(1) } 29% { opacity:.55; transform:scale(1) } 36%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls4 { 0%,17% { opacity:0; transform:scale(1) } 19% { opacity:.55; transform:scale(1) } 26%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls5 { 0%,24.5% { opacity:0; transform:scale(1) } 26.5% { opacity:.55; transform:scale(1) } 33.5%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls6 { 0%,12% { opacity:0; transform:scale(1) } 14% { opacity:.55; transform:scale(1) } 21%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }
@keyframes se-puls7 { 0%,19.5% { opacity:0; transform:scale(1) } 21.5% { opacity:.55; transform:scale(1) } 28.5%,95% { opacity:0; transform:scale(2.7) } 96%,100% { opacity:0; transform:scale(1) } }

/* ── Trin 3: forbindelserne. Tegnes, ikke fades ind ──────────────────── */
body.page-security .se-linje {
  stroke: rgba(255,255,255,.92);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
body.page-security .se-linje--1 { stroke-dasharray: 120; stroke-dashoffset: 120; }
body.page-security .se-linje--2 { stroke-dasharray: 87; stroke-dashoffset: 87; }
body.page-security .se-linje--3 { stroke-dasharray: 97; stroke-dashoffset: 97; }
body.page-security .se-linje--4 { stroke-dasharray: 87; stroke-dashoffset: 87; }
body.page-security .se-linje--5 { stroke-dasharray: 68; stroke-dashoffset: 68; }
body.page-security .se-linje--6 { stroke-dasharray: 94; stroke-dashoffset: 94; }
body.page-security .se-figur--scene.inde .se-linje--1 { animation: se-tegn1 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-linje--2 { animation: se-tegn2 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-linje--3 { animation: se-tegn3 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-linje--4 { animation: se-tegn4 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-linje--5 { animation: se-tegn5 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-linje--6 { animation: se-tegn6 var(--se-loop) var(--se-ud) infinite both; }
@keyframes se-tegn1 { 0%,30% { stroke-dashoffset:120; opacity:1 } 35%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:120; opacity:0 } }
@keyframes se-tegn2 { 0%,31.8% { stroke-dashoffset:87; opacity:1 } 36.8%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:87; opacity:0 } }
@keyframes se-tegn3 { 0%,33.6% { stroke-dashoffset:97; opacity:1 } 38.6%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:97; opacity:0 } }
@keyframes se-tegn4 { 0%,35.4% { stroke-dashoffset:87; opacity:1 } 40.4%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:87; opacity:0 } }
@keyframes se-tegn5 { 0%,37.2% { stroke-dashoffset:68; opacity:1 } 42.2%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:68; opacity:0 } }
@keyframes se-tegn6 { 0%,39% { stroke-dashoffset:94; opacity:1 } 44%,88% { stroke-dashoffset:0; opacity:1 } 92% { stroke-dashoffset:0; opacity:0 } 96%,100% { stroke-dashoffset:94; opacity:0 } }

/* ── Trin 4: beskyttelsesfeltet om Europa ────────────────────────────── */
body.page-security .se-ring {
  stroke: rgba(255,255,255,.9);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1115;
  stroke-dashoffset: 1115;
}
body.page-security .se-felt { fill: rgba(200,238,221,0); }
body.page-security .se-figur--scene.inde .se-ring { animation: se-luk var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-felt { animation: se-fyld var(--se-loop) var(--se-ud) infinite both; }
@keyframes se-luk {
  0%,44%   { stroke-dashoffset:1115; opacity:1; stroke:rgba(255,255,255,.9) }
  56%      { stroke-dashoffset:0;    opacity:1; stroke:rgba(255,255,255,.9) }
  /* det sidste flueben faar feltet til at skifte fra neutral hvid til
     Hours-groen: verifikationen aflaeses paa selve omraadet, ikke kun i kortet */
  74%      { stroke-dashoffset:0;    opacity:1; stroke:rgba(255,255,255,.9) }
  78%,88% { stroke-dashoffset:0; opacity:1; stroke:rgba(14,102,64,.85) }
  92%      { stroke-dashoffset:0;    opacity:0; stroke:rgba(14,102,64,.85) }
  96%,100% { stroke-dashoffset:1115; opacity:0; stroke:rgba(255,255,255,.9) }
}
@keyframes se-fyld {
  0%,56%   { fill: rgba(200,238,221,0) }
  66%,88% { fill: rgba(200,238,221,.15) }
  92%,100% { fill: rgba(200,238,221,0) }
}

/* ── Trin 5: de tre kvitteringer ─────────────────────────────────────
   Hver kvittering er sit EGET kort, ikke tre linjer i ét panel. Fladen,
   radius 7 px og sidens egen skygge ligger derfor paa raekken, mens .se-kvit
   kun er stakken der holder dem. De tre kommer ind ét ad gangen og faar
   deres flueben ét ad gangen, saa verifikationen bliver tre haendelser og
   ikke en tilstand der bare er der. */
body.page-security .se-kvit {
  position: absolute; left: 16px; bottom: 16px;
  margin: 0; padding: 0;
  width: 168px;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
body.page-security .se-kvit-r {
  display: grid;
  grid-template-columns: 16px 1fr 15px;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(20,20,18,.04), 0 10px 24px rgba(20,20,18,.10);
  opacity: 0;
}
body.page-security .se-kvit-ik { display: grid; place-items: center; color: #6b6560; }
body.page-security .se-kvit-ik svg { width: 13px; height: 13px; }
body.page-security .se-kvit-tekst {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: .69rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--t1);
}
body.page-security .se-kvit-tjek {
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #c8eedd; color: #0e6640;
  transform-origin: center;
  opacity: 0;
}
body.page-security .se-kvit-tjek svg { width: 9px; height: 9px; }
/* Stakken har ingen egen indgang laengere. Havde .se-kvit stadig sin, ville
   den holde alle tre kort skjult til 62 % og udviske forskydningen mellem
   dem - de skal netop komme hver for sig. */
body.page-security .se-figur--scene.inde .se-kvit-r--1 { animation: se-raekke1 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-kvit-r--2 { animation: se-raekke2 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-kvit-r--3 { animation: se-raekke3 var(--se-loop) var(--se-ud) infinite both; }
@keyframes se-raekke1 { 0%,57% { opacity:0; transform:translateY(6px) } 61%,88% { opacity:1; transform:none } 92% { opacity:0; transform:none } 96%,100% { opacity:0; transform:translateY(6px) } }
@keyframes se-raekke2 { 0%,60% { opacity:0; transform:translateY(6px) } 64%,88% { opacity:1; transform:none } 92% { opacity:0; transform:none } 96%,100% { opacity:0; transform:translateY(6px) } }
@keyframes se-raekke3 { 0%,63% { opacity:0; transform:translateY(6px) } 67%,88% { opacity:1; transform:none } 92% { opacity:0; transform:none } 96%,100% { opacity:0; transform:translateY(6px) } }
body.page-security .se-figur--scene.inde .se-kvit-r--1 .se-kvit-tjek { animation: se-tjek1 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-kvit-r--2 .se-kvit-tjek { animation: se-tjek2 var(--se-loop) var(--se-ud) infinite both; }
body.page-security .se-figur--scene.inde .se-kvit-r--3 .se-kvit-tjek { animation: se-tjek3 var(--se-loop) var(--se-ud) infinite both; }
@keyframes se-tjek1 { 0%,67% { opacity:0; transform:scale(.72) } 70%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.72) } }
@keyframes se-tjek2 { 0%,70.5% { opacity:0; transform:scale(.72) } 73.5%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.72) } }
@keyframes se-tjek3 { 0%,74% { opacity:0; transform:scale(.72) } 77%,88% { opacity:1; transform:scale(1) } 92% { opacity:0; transform:scale(1) } 96%,100% { opacity:0; transform:scale(.72) } }

/* Mindre bevaegelse: den verificerede sluttilstand med det samme, ingen
   loop, intet sveb og ingen drift. Scenen fortaeller praecis det samme,
   den staar bare stille.
   BEMAERK: alt skal slukkes paa de FULDE, nummererede selektorer. En kort
   .se-puls-regel taber paa specificitet mod .se-node--1 .se-puls, og
   ringene blev ved med at slaa ud trods reduceret bevaegelse. */
@media (prefers-reduced-motion: reduce) {
  body.page-security .se-figur--scene.inde img { animation: none; }
  body.page-security .se-figur--scene.inde .se-node--1 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--2 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--3 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--4 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--5 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--6 .se-kerne,
  body.page-security .se-figur--scene.inde .se-node--7 .se-kerne,
  body.page-security .se-figur--scene.inde .se-linje--1,
  body.page-security .se-figur--scene.inde .se-linje--2,
  body.page-security .se-figur--scene.inde .se-linje--3,
  body.page-security .se-figur--scene.inde .se-linje--4,
  body.page-security .se-figur--scene.inde .se-linje--5,
  body.page-security .se-figur--scene.inde .se-linje--6,
  body.page-security .se-figur--scene.inde .se-kvit-r--1,
  body.page-security .se-figur--scene.inde .se-kvit-r--2,
  body.page-security .se-figur--scene.inde .se-kvit-r--3,
  body.page-security .se-figur--scene.inde .se-kvit-r--1 .se-kvit-tjek,
  body.page-security .se-figur--scene.inde .se-kvit-r--2 .se-kvit-tjek,
  body.page-security .se-figur--scene.inde .se-kvit-r--3 .se-kvit-tjek,
  body.page-security .se-figur--scene.inde .se-ring,
  body.page-security .se-figur--scene.inde .se-felt,
  body.page-security .se-figur--scene.inde .se-sveb { animation: none; }
  body.page-security .se-figur--scene.inde .se-node--1 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--2 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--3 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--4 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--5 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--6 .se-puls,
  body.page-security .se-figur--scene.inde .se-node--7 .se-puls { animation: none; opacity: 0; }
  body.page-security .se-sveb { opacity: 0; }
  body.page-security .se-kerne { opacity: 1; transform: none; }
  body.page-security .se-linje { stroke-dashoffset: 0; }
  body.page-security .se-ring  { stroke-dashoffset: 0; stroke: rgba(14,102,64,.85); }
  body.page-security .se-felt  { fill: rgba(200,238,221,.15); }
  body.page-security .se-kvit-r { opacity: 1; transform: none; }
  body.page-security .se-kvit-tjek { opacity: 1; transform: none; }
  body.page-security .se-scene { transition: none; }
}

body.page-security .se-kort {
  background: var(--fg-kort);
  border-radius: 7px;
  padding: 24px 22px 26px;
}
body.page-security .se-kort-ik {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: #fff;
  color: var(--t1);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
body.page-security .se-kort-ik svg { width: 18px; height: 18px; }
body.page-security .se-kort h3 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--t1);
  margin: 0 0 7px;
}
body.page-security .se-kort p {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--t2);
  margin: 0;
}
/* Under 1000 px falder halvdelene fra hinanden: figuren centreres, og
   kortene beholder deres 2 x 2 indtil skaermen er for smal til to spalter. */
@media (max-width: 1000px) {
  body.page-security .se-par,
  body.page-security .se-par--spejlet { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  /* Naar spalterne staar under hinanden, er der intet at flugte med:
     teksten skal ligge taet paa sine kort igen. */
  body.page-security .se-par-side { min-height: 0; justify-content: flex-start; }
  /* Fladen beholder billedets forhold ogsaa her. Den faste lave hoejde, der
     stod foer, gjorde den bred og lav og skar baade top og bund af motivet. */
  body.page-security .se-figur { max-width: 460px; }
  /* Punkterne maales i viewBox-enheder og skrumper derfor med fladen.
     Stregerne holder sig selv via non-scaling-stroke; radius skal loeftes
     her, saa punkterne bliver lige saa store paa skaermen som paa desktop. */
  body.page-security .se-kerne,
  body.page-security .se-puls { r: 12; }
  /* Kortet skal ikke fylde den halve flade paa en smal skaerm. */
  body.page-security .se-kvit { left: 11px; bottom: 11px; width: 138px; gap: 5px; }
  body.page-security .se-kvit-r { height: 26px; padding: 0 8px; gap: 6px; grid-template-columns: 14px 1fr 13px; }
  body.page-security .se-kvit-tekst { font-size: .63rem; }
  body.page-security .se-kvit-ik svg { width: 11px; height: 11px; }
  body.page-security .se-kvit-tjek { width: 13px; height: 13px; }
  body.page-security .se-kvit-tjek svg { width: 8px; height: 8px; }
  body.page-security .se-par > .se-figur:first-child,
  body.page-security .se-par > .se-figur:last-child { justify-self: center; }
}
@media (max-width: 560px) { body.page-security .se-par-kort { grid-template-columns: 1fr; } }

/* ══ 3 · KONTROLREGISTERET ═════════════════════════════════════════════
   Fire fagomraader. Alle kontroller er i drift, saa hver raekke baerer et
   flueben i stedet for et statusord, og beskrivelserne holder samme
   trelinjers rytme, saa grupperne staar symmetrisk. */
body.page-security .se-register {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* Grupperne er lige lange, ikke lige hoeje: en gruppe med faerre kontroller
     skal ikke straekkes og efterlade en tom bund i kortet. */
  align-items: start;
}
body.page-security .se-gruppe {
  background: var(--fg-kort);
  border-radius: 7px;
  padding: 26px 24px 28px;
}
body.page-security .se-gruppe-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
}
body.page-security .se-gruppe-hd svg { width: 16px; height: 16px; }
body.page-security .se-kontrol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 4px 16px;
  align-items: start;
  padding: 18px 0 0;
  margin-top: 18px;
  border-top: 1px solid rgba(26, 25, 22, .08);
}
/* Hver kontrol baerer en haengelaas, ikke et flueben: samme maerke paa alle
   raekker, saa registeret siger "laast", ikke "godkendt". Samme ikon som
   gruppeoverskriften "Kryptering og adgang", sort som teksten - ingen
   mintchip bag, den gjorde laasen svag og lignede et flueben paa afstand. */
body.page-security .se-laas {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  color: var(--t1);
  display: grid; place-items: center;
}
body.page-security .se-laas svg { width: 17px; height: 17px; }
body.page-security .se-kontrol b {
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--t1);
}
body.page-security .se-kontrol p {
  grid-column: 1 / -1;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--t2);
  margin: 5px 0 0;
  /* Fast rytme: hver beskrivelse fylder tre linjer, ogsaa naar teksten er
     et par ord kortere. Saa staar raekkerne symmetrisk med samme margen
     hele vejen ned, i stedet for at hoppe efter tekstlaengden. */
  min-height: calc(3 * 1.62em);
}
body.page-security .se-kontrol p a {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(26, 25, 22, .28);
}
body.page-security .se-kontrol p a:hover { text-decoration-color: var(--t1); }
@media (max-width: 900px) { body.page-security .se-register { grid-template-columns: 1fr; } }


/* ══ 4 · UDSAGNET ══════════════════════════════════════════════════════
   Ét sort panel midtvejs. Hvid overskrift, broedtekst i den daempede hvide
   der bruges paa alle moerke flader (samme vaerdi som heroens undertekst). */
body.page-security .se-udsagn {
  background: var(--ink);
  border-radius: 7px;
  padding: clamp(56px, 7vw, 108px) clamp(24px, 5vw, 80px);
  text-align: center;
}
body.page-security .se-udsagn h2 {
  color: var(--on-ink);
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
body.page-security .se-udsagn p {
  max-width: 64ch;
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}

/* ══ 5 · FAQ ═══════════════════════════════════════════════════════════
   Den globale .faq-item/.faq-question-anatomi (aabnes af js/main.js), med
   sidens egen chevron i stedet for plus-tegnet i cirklen. */
body.page-security .se-faq { max-width: 900px; margin-inline: auto; }
body.page-security .se-faq .faq-item { border-bottom: 1px solid var(--border); }
body.page-security .se-faq .faq-item:first-child { border-top: 1px solid var(--border); }
body.page-security .faq-question {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 22px 2px;
  gap: 24px;
}
body.page-security .faq-question:hover { color: var(--t1); }
body.page-security .faq-question:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 3px; border-radius: 4px; }
body.page-security .faq-icon {
  width: 22px; height: 22px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--t3);
  display: grid;
  place-items: center;
  transition: color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
body.page-security .faq-icon::before { content: none; }
body.page-security .faq-icon svg { width: 17px; height: 17px; display: block; }
body.page-security .faq-question:hover .faq-icon { color: var(--t1); }
body.page-security .faq-item.open .faq-icon {
  background: none;
  border: none;
  color: var(--green-txt);
  transform: rotate(180deg);
}
body.page-security .faq-answer p {
  padding: 0 2px 24px;
  max-width: 78ch;
  font-size: .93rem;
  line-height: 1.78;
  color: var(--t2);
}
body.page-security .faq-answer p a {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(26, 25, 22, .28);
}

/* ══ 6 · AFSLUTNING ════════════════════════════════════════════════════
   De to kontaktkort er fjernet 5/9: DPA-knappen foerer ind paa
   databehandleraftalen, hvor man kan anmode om en underskrevet aftale, og
   security@hours.dk stod baade i knappen og i kortet. To gange det samme.

   "Se databehandleraftalen" er ikke mint her: hvid flade, tynd graa kant
   og sort tekst, saa den staar som den rolige af de to knapper. Kun paa
   denne side - .sc-knap-lys er mint alle andre steder. */
/* Stoerrelsesundtagelsen (42 px / .88rem) er taget ud. Da den blev lavet,
   var det den eneste afslutning af sin slags paa sitet; nu deler elleve
   sider samme komponent, og begrundelsen "de staar alene under en kort
   tekst" gaelder dem alle. Knapperne foelger standarden: 50 px / .95rem.
   Den hvide sekundaerknap herunder er bevaret - den er et farvevalg, ikke
   en formafvigelse. */
body.page-security .sc-knap-lys {
  background: #fff;
  color: var(--t1);
  border: 1px solid rgba(26, 25, 22, .18);
}
body.page-security .sc-knap-lys:hover {
  background: #fff;
  border-color: rgba(26, 25, 22, .38);
}

/* Vejen videre til dokumentationen: ren tekst med en pil, som sitets
   oevrige tekstlinks. Ingen knapflade. Staar under statuskortene, saa
   den, der vil se beviserne, kan gaa direkte til docs.hours.dk. */
body.page-security .se-videre {
  display: flex;
  justify-content: center;
  margin: clamp(6px, 1vw, 12px) 0 0;
}
body.page-security .se-videre .sc-link { margin-top: 0; }