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

   Siden er et opslagsværk over alt, BestSecurity leverer bag FAKTIVE Engine, bygget med husets egne greb:
     toppen (creme) med foto og faktabånd · kataloget (aubergine): de ni områder står stort og fast i venstre side,
     det aktive fremhævet med kobberstregen, mens alle løsninger scroller i højre side · leverandørerne (lys):
     logoer i egen form og farve · kontakt (aubergine)
   Uden JS og ved reduceret bevægelse står alt færdigt. Under scroll ændres kun transform og opacity. */

/* ---------- toppen ---------- */
.ls-top .rg-sti{color:var(--rg-kobber-tekst) !important}
/* titlen på tre linjer, så den bliver i venstre spalte og aldrig løber ind i fotoet */
section.hero.ls-top h1{white-space:normal;font-size:clamp(40px,5.4vw,84px) !important;line-height:.98 !important}
.ls-h1-l{display:block;white-space:nowrap}
.ls-foto picture{display:contents}
/* fotoets personer står helt oppe ved billedets kant: udtoningen foroven er derfor kort: helt væk bag menuens links (så de står frit), og
   fuldt fremme lige under menuen, så ansigterne står klart; mod teksten og forneden toner fotoet ud som på de andre undersider */
@media (min-width:761px){
  .ls-foto{-webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 6%,rgba(0,0,0,.3) 30%,#000 58%),linear-gradient(to bottom,transparent 0,transparent 50px,#000 calc(var(--nav-h) + 40px),#000 66%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 6%,rgba(0,0,0,.3) 30%,#000 58%),linear-gradient(to bottom,transparent 0,transparent 50px,#000 calc(var(--nav-h) + 40px),#000 66%,transparent 100%)}
}
@media (max-width:760px){
  .ls-foto .rg-foto-lag{--rg-fokus:50% 0%}
  .ls-foto{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 72%,transparent 100%)}
}
.ls-knapper{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 30px;margin-top:32px}
.ls-knapper .rg-mere{margin:0}
.ls-se{font-size:16px;color:var(--rg-aub);text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(60,42,68,.3);transition:border-color .3s ease}
@media (hover:hover){ .ls-se:hover{border-bottom-color:var(--rg-kobber)} }
.ls-se:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:3px}
.rg-js .ls-knapper{opacity:0;transform:translateY(16px);transition:opacity .9s ease .45s,transform 1.1s var(--rg-ud) .45s}
.rg-klar .ls-knapper{opacity:1;transform:none}

/* ---------- kataloget (aubergine): fast liste over de ni områder, løsningerne scroller ---------- */
.ls-kat{position:relative;background:var(--rg-aub);color:#F2E7DC}
/* dynamisk baggrund som husets andre mørke sektioner: tre store, bløde felter i sektionens egne toner, der driver
   langsomt (kun transform; står stille ved reduceret bevægelse). Laget følger skærmen, så felterne altid ses */
.ls-felter{position:absolute;inset:0;z-index:0;pointer-events:none}
.ls-felter-in{position:sticky;top:0;height:100vh;overflow:hidden}
.ls-felter i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
.ls-felter i:nth-child(1){left:38%;top:-38%;background:radial-gradient(closest-side,rgba(98,72,112,.55),rgba(98,72,112,0));animation:ls-drift1 42s ease-in-out infinite alternate}
.ls-felter i:nth-child(2){left:-28%;top:38%;background:radial-gradient(closest-side,rgba(26,15,32,.6),rgba(26,15,32,0));animation:ls-drift2 56s ease-in-out infinite alternate}
.ls-felter i:nth-child(3){left:48%;top:44%;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(228,87,36,.07),rgba(228,87,36,0));animation:ls-drift3 68s ease-in-out infinite alternate}
@keyframes ls-drift1{to{transform:translate3d(-18vmax,22vmax,0) scale(1.15)}}
@keyframes ls-drift2{to{transform:translate3d(24vmax,-16vmax,0) scale(.9)}}
@keyframes ls-drift3{to{transform:translate3d(-26vmax,-12vmax,0) scale(1.2)}}
/* sitets generelle regel giver alle sektioner 110 px luft; hovedet styrer selv sin luft */
.ls-kat-top{position:relative;z-index:1;padding:clamp(88px,10vw,136px) 0 0;background:none;color:inherit}
.ls-kat-in{position:relative;z-index:1;padding-bottom:clamp(72px,8vw,112px)}
/* katalogets overlinje er bevidst ikke husets .eyeline: så tæller menuens kapitelmærke kun de ni områder (01-09) */
.ls-overlinje{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#E9A57F}
.ls-kat-h{margin:16px 0 0;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;color:#FFFDFB}
.ls-kat-lede{margin:20px 0 0;max-width:34em;font-size:clamp(18px,1.5vw,21px);line-height:1.55;font-weight:300;color:#D7B7A3;text-wrap:pretty}
.ls-kat-krop{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(242,231,220,.3)}
/* listen over områder: stor bred skrift; det aktive område står lyst med husets kobberstreg foran */
.ls-om-liste{list-style:none;margin:0;padding:clamp(28px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}
.ls-om-liste a{position:relative;display:inline-block;padding:10px 0;font-family:var(--font-display);font-stretch:125%;font-size:clamp(19px,2.2vw,22px);line-height:1.2;
  color:#D7B7A3;text-decoration:none;transition:color .35s ease}
@media (hover:hover){ .ls-om-liste a:hover{color:#FFFDFB} }
.ls-om-liste a:focus-visible,.ls-pris:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:3px}
.ls-pris{display:none}
/* et område: navn, indledning og dets løsninger på hårlinjer */
.ls-omraade{position:relative;padding:clamp(40px,5vw,56px) 0 clamp(8px,1vw,16px);background:none;color:inherit;border-top:1px solid rgba(242,231,220,.3);
  /* ved hop fra listen lander områdets kant bag menuen (sitets scroll-padding er 96 px), så menuens kapitelmærke
     skifter til området med det samme, og overlinjen står lige under menuen */
  scroll-margin-top:-58px}
.ls-omraade:first-child{margin-top:clamp(28px,3vw,40px)}
.ls-omraade h2{margin:0;font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:400 !important;
  font-size:clamp(28px,4.4vw,40px) !important;line-height:1.06 !important;letter-spacing:-.02em !important;color:#FFFDFB !important;text-wrap:balance}
.ls-om-lede{margin:14px 0 0;max-width:30em;font-size:clamp(17px,1.4vw,19px);line-height:1.55;font-weight:300;color:#D7B7A3;text-wrap:pretty}
.ls-raekker{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0}
/* en række: navnet på almindeligt dansk, produktnavnet småt og én sætning; "Med i Engine" står til højre for navnet */
.ls-raekke{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:baseline;
  padding:clamp(18px,2vw,24px) 0;border-top:1px solid rgba(242,231,220,.14)}
.ls-raekke h3{margin:0;font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:400 !important;
  font-size:clamp(20px,1.7vw,24px) !important;line-height:1.2 !important;color:#FFFDFB !important;text-wrap:balance}
.ls-produkt,.ls-tekst{grid-column:1 / -1}
.ls-produkt{margin:6px 0 0;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12.5px;line-height:1.45;color:#BCA394}
.ls-tekst{margin:10px 0 0;max-width:38em;font-size:16px;line-height:1.6;font-weight:300;color:#EADDD2;text-wrap:pretty}
/* de fem rækker, der er Engines dele: ren tekst med husets korte kobberstreg (ingen pille), linker til Cybersecurity */
.ls-med{margin:0}
.ls-med a{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-stretch:125%;font-weight:500;
  font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:#E9A57F;text-decoration:none}
.ls-med a::before{content:"";flex:none;width:14px;height:2px;background:var(--rg-kobber)}
/* trykfladen er 44 px høj, selv om teksten er lille */
.ls-med a{position:relative}
.ls-med a::after{content:"";position:absolute;inset:-14px 0}
/* henvisningen (løsningen står under et andet område) */
.ls-tekst a{color:#FFFDFB;text-decoration:none;padding-bottom:2px;border-bottom:1px solid rgba(242,231,220,.35);transition:border-color .3s ease}
.ls-tekst a::after{content:"\00a0→";color:var(--rg-kobber)}
@media (hover:hover){
  .ls-med a:hover{text-decoration:underline;text-underline-offset:4px}
  .ls-tekst a:hover{border-bottom-color:var(--rg-kobber)}
}
.ls-med a:focus-visible,.ls-tekst a:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:3px}
/* med bevægelse: katalogets hoved, områderne og rækkerne toner roligt frem (loesninger-2026.js sætter .ls-vist) */
.ls-kat-hoved,.ls-omraade > h2,.ls-om-lede,.ls-raekke,.ls-logoer li{transition:opacity .7s ease var(--d,0s),transform .9s var(--rg-ud) var(--d,0s)}
.ls-klar .ls-kat-hoved:not(.ls-vist),.ls-klar .ls-omraade > h2:not(.ls-vist),.ls-klar .ls-om-lede:not(.ls-vist),.ls-klar .ls-raekke:not(.ls-vist),.ls-klar .ls-logoer li:not(.ls-vist){opacity:0;transform:translateY(14px)}

/* store skærme: listen står fast i venstre side, i én spalte og i stor skrift; områdets navn står som overlinje */
@media (min-width:1101px){
  .ls-kat-krop{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);column-gap:clamp(48px,7vw,112px)}
  .ls-kat-fast{position:sticky;top:calc(var(--nav-h) + 28px);padding:clamp(36px,4vw,56px) 0 40px}
  .ls-om-liste{display:block;padding:0}
  .ls-om-liste a{display:block;padding:4px 0 4px 0;font-size:clamp(26px,2.5vw,36px);line-height:1.22;color:rgba(242,231,220,.36);transition:color .35s ease,transform .5s var(--rg-ud)}
  .ls-om-liste a::before{content:"";position:absolute;left:0;top:50%;width:26px;height:2px;margin-top:-1px;background:var(--rg-kobber);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--rg-ud)}
  .ls-om-liste a[aria-current]{color:#FFFDFB;transform:translateX(42px)}
  .ls-om-liste a[aria-current]::before{left:-42px;transform:none}
  .ls-pris{display:inline-flex;align-items:baseline;gap:10px;margin-top:clamp(24px,3vw,36px);font-family:var(--font-display);font-stretch:125%;font-size:16px;color:#F2E7DC;
    text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(242,231,220,.3);transition:border-color .3s ease}
  .ls-pris::after{content:"→";color:var(--rg-kobber)}
  .ls-pris:hover{border-bottom-color:var(--rg-kobber)}
  .ls-omraade:first-child{margin-top:0;border-top:0}
  .ls-omraade h2{font-size:12px !important;line-height:1.4 !important;letter-spacing:.2em !important;font-weight:500 !important;text-transform:uppercase;color:#E9A57F !important}
  .ls-om-lede{margin-top:12px;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#F2E7DC}
  .ls-pkt{display:none}   /* overlinjen står uden punktum */
}
/* lavt vindue: listen må ikke blive højere end skærmen */
@media (min-width:1101px) and (max-height:760px){ .ls-om-liste a{font-size:clamp(22px,2vw,28px);padding:2px 0} }
@media (max-width:700px){
  .ls-raekke{grid-template-columns:1fr}
  .ls-med{margin-top:8px}
  .ls-om-liste{grid-template-columns:1fr}
}

/* ---------- leverandørerne (lys): logoer i egen form og farve ---------- */
.ls-lev{position:relative;padding:clamp(64px,7vw,96px) 0;background:var(--rg-lys);color:var(--rg-blaek)}
.ls-lev-t{margin:14px 0 0;font-family:var(--font-display);font-stretch:125%;font-size:clamp(20px,1.9vw,26px);line-height:1.25;color:var(--rg-aub)}
.ls-logoer{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:clamp(28px,3vw,40px) 0 0;border-top:1px solid var(--rg-streg);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px clamp(32px,5vw,72px)}
.ls-logoer li{display:flex;align-items:center;height:40px}
.ls-logoer img{display:block;width:auto;max-width:100%}

@media (prefers-reduced-motion:reduce){
  .rg-js .ls-knapper{opacity:1;transform:none;transition:none}
  .ls-felter i{animation:none}
  .ls-kat-hoved,.ls-omraade > h2,.ls-om-lede,.ls-raekke,.ls-logoer li,.ls-om-liste a,.ls-om-liste a::before{transition:none}
}