/* FAKTIVE sektion 11 2026: "Priser".
   Hører sammen med assets/sektion11-2026.js, som bygger opmærkningen; uden JavaScript
   gælder de gamle .plan-regler, og sektionen står som før.

   Baggrunden er husets creme, så sektionen tydeligt er en ny efter den hvide FAQ og før
   den mørke kontaktsektion. Tre kort: hvide med hårfin kant, Gold aubergine og løftet.
   Hvert kort har en bagside (aubergine, pakkens navn og Λ'et fra logoet) og vender sig
   med scrollen; JavaScript sætter --vend (0 til -180deg) og --loeft pr. kort.
   Farver: aubergine #3C2A44, brødtekst #5C4F48, dæmpet #7A6B63, kobber #B23F14, orange #E45724. */

#priser.s11-klar{--s11-aub:#3C2A44; --s11-aub2:#2C1F33; --s11-tekst:#5C4F48; --s11-daemp:#7A6B63; --s11-kobber:#B23F14;
  --s11-orange:#E45724; --s11-streg:rgba(60,42,68,.12); --s11-ud:cubic-bezier(.16,1,.3,1);
  background:#F2E7DC;position:relative;overflow:clip;isolation:isolate}
#priser.s11-klar > .wrap{position:relative;z-index:1}

/* ---------- levende baggrund i samme creme: dagslys gennem persienner ----------
   To lag brede, bløde striber: lyse (dagslys) og svagt mørkere (skygge), drejet skråt og i hver
   sin vinkel. Stribelaget glider sidelæns i en uendelig løkke (præcis én periode pr. tur, så der
   ikke er noget hop), og lagene flytter sig desuden lidt med scrollen (--bgp). Kun transform.
   Kanterne tones ud, så striberne ikke skærer mod FAQ'en og kontaktsektionen. */
.s11-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.s11-lys{position:absolute;inset:-35% -45%;display:block}
.s11-lys i{position:absolute;top:0;bottom:0;left:0;will-change:transform}
.s11-lys-1{transform:translate3d(0,calc(var(--bgp,0) * -60px),0) rotate(-20deg)}
.s11-lys-1 i{width:calc(100% + 600px);animation:s11-persienne-1 30s linear infinite;
  background:repeating-linear-gradient(90deg,rgba(255,253,249,0) 0,rgba(255,253,249,.75) 150px,rgba(255,253,249,0) 300px,rgba(255,253,249,0) 600px)}
.s11-lys-2{transform:translate3d(0,calc(var(--bgp,0) * 50px),0) rotate(-13deg)}
.s11-lys-2 i{width:calc(100% + 940px);animation:s11-persienne-2 52s linear infinite;
  background:repeating-linear-gradient(90deg,rgba(196,166,140,0) 0,rgba(196,166,140,.26) 220px,rgba(196,166,140,0) 440px,rgba(196,166,140,0) 940px)}
@keyframes s11-persienne-1{to{transform:translate3d(-600px,0,0)}}
@keyframes s11-persienne-2{to{transform:translate3d(-940px,0,0)}}

/* ---------- hoved ---------- */
.s11-hoved{text-align:center;max-width:44em;margin:0 auto}
#priser.s11-klar h2.big,#priser.s11-klar h1.big{margin:10px auto 0;max-width:none}
/* overskriften kommer frem ord for ord bag en maske */
.s11-ord{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.s11-ord > span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--s11-ud) calc(var(--o) * 70ms)}
.s11-hoved-inde .s11-ord > span{transform:none}
.s11-lede{margin:18px auto 0;max-width:30em;font-size:19px;line-height:1.55;font-weight:300;color:var(--s11-tekst)}

/* ---------- kortene og vendingen ---------- */
.s11-kortene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;
  margin-top:clamp(48px,5vw,68px);perspective:1600px}
.s11-kort{--vend:0deg; --loeft:0px; --rx:0deg; --ry:0deg; --lx:50%; --ly:0%;
  position:relative;display:flex;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--s11-ud)}
.s11-kort.s11-vipper{transition:transform .12s linear}
.s11-mest{--hoej:-14px}
.s11-flip{position:relative;flex:1;display:flex;transform-style:preserve-3d;
  transform:translate3d(0,var(--hoej,0px),var(--loeft)) rotateY(var(--vend))}
.s11-3d .s11-flip{will-change:transform}
/* når kortet ligger med forsiden op, slippes 3D-laget, så teksten står skarpt */
.s11-3d .s11-oppe .s11-flip{transform:translateY(var(--hoej,0px));will-change:auto}
.s11-kort:not(.s11-vipper){transform:none}

/* forsiden */
.s11-for{position:relative;flex:1;display:flex;flex-direction:column;padding:32px 30px 30px;border-radius:20px;overflow:hidden;
  background:#FFFDFB;box-shadow:0 0 0 1px var(--s11-streg),0 1px 2px rgba(60,42,68,.04),0 14px 34px -14px rgba(60,42,68,.16);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transition:box-shadow .5s var(--s11-ud)}
.s11-vipper .s11-for{box-shadow:0 0 0 1px rgba(60,42,68,.16),0 2px 4px rgba(60,42,68,.05),0 30px 60px -22px rgba(60,42,68,.3)}
/* en blank refleks, som når et kort vippes i lyset */
.s11-refleks{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--lx) var(--ly),rgba(255,255,255,.55),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
.s11-vipper .s11-refleks{opacity:1}
/* siden der drejer væk fra lyset, bliver mørkere (--skyg sættes af scrollen) */
.s11-skygge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#1E1424;opacity:var(--skyg,0)}
/* skyggen på underlaget: trækker sig sammen og blegner, når kortet løfter sig */
.s11-3d .s11-kort::after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:36px;z-index:-1;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(44,31,51,.16),rgba(44,31,51,0));
  transform:translateZ(-1px) scaleX(var(--fald,1));opacity:calc(var(--fald,1) * 1.4 - .4)}

/* bagsiden: aubergine, pakkens navn og Λ'et */
.s11-bag{position:absolute;inset:0;display:flex;flex-direction:column;padding:30px;border-radius:20px;
  overflow:hidden;color:#F2E7DC;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(180deg);
  background:linear-gradient(160deg,#4A3553 0%,var(--s11-aub) 50%,var(--s11-aub2) 100%);
  box-shadow:0 0 0 1px rgba(44,31,51,.6),0 24px 50px -20px rgba(44,31,51,.5)}
.s11-bag-lambda{position:relative;width:46px}
.s11-bag-lambda svg{display:block;width:100%;height:auto;fill:var(--s11-orange)}
.s11-bag-navn{position:relative;margin-top:auto;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(34px,3.4vw,48px);
  line-height:1;letter-spacing:-.02em;color:#fff}
.s11-bag-hvem{position:relative;margin-top:12px;font-size:15px;color:#C9B2A6}

/* ---------- forsidens indhold ---------- */
.s11-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
/* pakkenavnene står som modulnavnene (NIS2 osv.): Mona Sans bred (125 %), vægt 400.
   Sitets fælles regel sætter alle h3 til normal bredde og vægt 600 med !important, så det tvinges her */
#priser .s11-for h3{font-family:var(--font-display) !important;font-stretch:125% !important;font-weight:400 !important}
.s11-for h3{margin:0;font-family:var(--font-display);font-stretch:125%;font-size:22px;line-height:1.2;
  color:var(--s11-aub)}
/* "Mest valgt": ingen knap; samme brede skrift som "Gold", lidt mindre og i varm orange */
.s11-maerke{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:15px;line-height:1.2;color:#F4A07A}
.s11-mest .s11-top{align-items:baseline}

/* Gold-kortets kant er kortets egen kant (border 1,5 px), så den går helt ud til kanten uden en mørk
   rand udenom. Baggrunden har tre lag: den mørke flade (kun inden for kanten), et dæklag der skjuler
   den del af kanten, som endnu ikke er tegnet (--kant-vinkel), og selve kanten med en lys glans,
   der vandrer roligt rundt (--glans). */
@property --kant-vinkel{syntax:"<angle>";inherits:false;initial-value:360deg}
@property --glans{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes s11-glans{to{--glans:360deg}}
.s11-til{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--s11-daemp)}
.s11-pris{margin:26px 0 0;display:flex;align-items:baseline;gap:8px;color:var(--s11-aub)}
/* proportionale tal: Mona Sans' tabeltal har skråstreg i nullet, der ligner Ø */
.s11-tal{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(40px,3.8vw,52px);line-height:1;
  letter-spacing:-.02em;display:inline-block}
.s11-tal.s11-ord{font-size:clamp(34px,3.1vw,42px)}
.s11-enhed{font-size:15px;color:var(--s11-daemp)}
.s11-md{margin:10px 0 0;min-height:1.5em;font-size:14px;line-height:1.5;color:var(--s11-daemp)}
.s11-knap{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:26px;border-radius:12px;
  font-family:var(--font-text);font-stretch:100%;font-size:15px;font-weight:500;text-decoration:none;color:#fff;background:var(--s11-orange);
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 20px -8px rgba(228,87,36,.55);
  transition:background-color .25s ease,box-shadow .25s ease,transform .2s ease}
.s11-knap:hover{background:#EE6230;box-shadow:0 1px 2px rgba(0,0,0,.14),0 12px 26px -8px rgba(228,87,36,.62)}
.s11-knap:active{transform:scale(.985)}
.s11-knap:focus-visible,.s11-tel a:focus-visible{outline:2px solid var(--s11-orange);outline-offset:3px}
.s11-punkter{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--s11-streg);display:grid;gap:12px}
.s11-punkter li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--s11-tekst)}
.s11-punkter li:first-child{font-weight:500;color:var(--s11-aub)}
.s11-for svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--s11-kobber);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.s11-punkter svg{margin-top:.1em}
/* når kortet er vendt, falder punkterne på plads ét ad gangen, og "Mest valgt" kommer til sidst */
.s11-3d .s11-punkter li{opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .6s var(--s11-ud)}
.s11-3d .s11-afsloeret .s11-punkter li{opacity:1;transform:none;transition-delay:calc(.15s + var(--j) * 80ms)}
/* kanten tegnes rundt fra toppen, når kortet er vendt */
.s11-3d .s11-mest .s11-for{--kant-vinkel:0deg;transition:--kant-vinkel 1.3s cubic-bezier(.65,0,.35,1) .2s,box-shadow .5s var(--s11-ud)}
.s11-3d .s11-mest.s11-afsloeret .s11-for{--kant-vinkel:360deg}
.s11-3d .s11-maerke{opacity:0;transform:translateX(6px);transition:opacity .5s ease .7s,transform .7s var(--s11-ud) .7s}
.s11-3d .s11-afsloeret .s11-maerke{opacity:1;transform:none}
.s11-tel{margin:auto 0 0;padding-top:22px;font-size:14px;line-height:1.5;color:var(--s11-daemp)}
.s11-tel a{color:var(--s11-aub);font-weight:500;white-space:nowrap;text-decoration:none;border-bottom:1px solid rgba(60,42,68,.3)}
.s11-tel a:hover{border-color:var(--s11-aub)}

/* Gold: mørkt */
.s11-mest .s11-for{--kant-vinkel:360deg;border:1.5px solid transparent;
  background:
    linear-gradient(170deg,#48334F 0%,var(--s11-aub) 45%,var(--s11-aub2) 100%) padding-box,
    conic-gradient(from 0deg,transparent var(--kant-vinkel),#3C2A44 0) border-box,
    conic-gradient(from var(--glans),#E45724 0deg,#F59A6E 26deg,#FFE7D8 40deg,#F59A6E 54deg,#E45724 84deg,
      #C44A1F 170deg,#E45724 260deg,#D9582A 320deg,#E45724 360deg) border-box;
  animation:s11-glans 7s linear infinite;
  box-shadow:0 0 26px -6px rgba(228,87,36,.38),0 2px 4px rgba(44,31,51,.2),0 30px 60px -20px rgba(44,31,51,.55)}
.s11-mest.s11-vipper .s11-for{box-shadow:0 0 34px -6px rgba(228,87,36,.48),0 2px 4px rgba(44,31,51,.2),0 40px 70px -22px rgba(44,31,51,.6)}
.s11-mest .s11-refleks{background:radial-gradient(420px circle at var(--lx) var(--ly),rgba(255,214,190,.28),rgba(255,214,190,0) 60%);mix-blend-mode:screen}
.s11-mest h3,.s11-mest .s11-pris{color:#fff}
.s11-mest .s11-til,.s11-mest .s11-enhed,.s11-mest .s11-md{color:#C9B2A6}
.s11-mest .s11-knap{box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 20px -8px rgba(228,87,36,.6)}
.s11-mest .s11-punkter{border-top-color:rgba(255,255,255,.12)}
.s11-mest .s11-punkter li{color:#E0CFC4}
.s11-mest .s11-punkter li:first-child{color:#fff}
.s11-mest .s11-for svg{stroke:#F08A5D}
/* bagsiderne følger pakkens navn: Silver perlemor, Gold kobber, Enterprise aubergine */
.s11-kort-0 .s11-bag{color:var(--s11-aub);background:linear-gradient(160deg,#FBF8FA 0%,#ECE5EC 52%,#D9D0DA 100%);
  box-shadow:0 0 0 1px rgba(60,42,68,.12),0 24px 50px -22px rgba(60,42,68,.32)}
.s11-kort-0 .s11-bag-lambda svg{fill:var(--s11-aub)}
.s11-kort-0 .s11-bag-navn{color:var(--s11-aub)}
.s11-kort-0 .s11-bag-hvem{color:#6F6270}
.s11-mest .s11-bag{background:linear-gradient(160deg,#D8683A 0%,#B84A1C 48%,#8F3514 100%);
  box-shadow:0 0 0 1px rgba(143,53,20,.5),0 28px 56px -20px rgba(143,53,20,.45)}
.s11-mest .s11-bag-lambda svg{fill:#F7EFE6}
.s11-mest .s11-bag-hvem{color:#F8D8C6}

/* ---------- tilkøbsmoduler: én smal linje mellem to hårfine streger, intet at trykke på ---------- */
.s11-moduler{display:flex;align-items:center;gap:14px 0;flex-wrap:wrap;margin-top:clamp(48px,5vw,64px);padding:20px 0;
  border-top:1px solid var(--s11-streg);border-bottom:1px solid var(--s11-streg)}
.s11-mod-titel{margin:0;padding-right:28px;font-size:14px;font-weight:500;color:var(--s11-kobber);white-space:nowrap}
.s11-mod-liste{list-style:none;margin:0;padding:0;flex:1;display:flex}
.s11-mod-liste li{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 24px;
  box-shadow:inset 1px 0 0 var(--s11-streg)}
.s11-mod-liste svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--s11-kobber);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.s11-mod-liste b{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:16px;color:var(--s11-aub);white-space:nowrap}
.s11-mod-liste span{font-size:13.5px;color:var(--s11-daemp)}
/* modulerne toner ind efter hinanden, når linjen kommer frem */
.s11-mod-liste li{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .8s var(--s11-ud);
  transition-delay:calc(.1s + var(--m) * 90ms)}
.s11-mod-inde .s11-mod-liste li{opacity:1;transform:none}
.s11-fod{margin:26px 0 0;text-align:center;font-size:14px;color:var(--s11-daemp)}

/* ---------- touch og smalle skærme: ingen 3D, kortene glider ind ---------- */
.s11-2d .s11-flip{transform:translate3d(0,var(--glid,0px),0)}
.s11-2d .s11-kort{opacity:var(--synlig,1);transform:none}
.s11-2d .s11-bag{display:none}
.s11-fod{transition:opacity .8s ease,transform 1s var(--s11-ud)}
.s11-hoved .eyeline,.s11-lede{transition:opacity .8s ease .2s,transform 1s var(--s11-ud) .2s}
.s11:not(.s11-hoved-inde) .s11-hoved .eyeline,.s11:not(.s11-hoved-inde) .s11-lede{opacity:0;transform:translateY(12px)}
.s11:not(.s11-inde) .s11-fod{opacity:0}

@media (max-width:999px){
  .s11-kortene{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;gap:16px}
  .s11-mest{--hoej:0px}
  .s11-moduler{max-width:480px;margin-left:auto;margin-right:auto}
  .s11-mod-liste{flex-direction:column;gap:12px}
  .s11-mod-liste li{padding:0;box-shadow:none}
  .s11-mod-titel{width:100%}
}
@media (max-width:599px){
  .s11-for{padding:26px 22px 24px}
}
@media (prefers-reduced-motion:reduce){
  .s11-flip{transform:translate3d(0,var(--hoej,0px),0) !important}
  .s11-kort{transform:none !important;opacity:1 !important}
  .s11-bag,.s11-refleks,.s11-skygge{display:none}
  .s11-mod-liste li{opacity:1;transform:none}
  .s11-lys i,.s11-mest .s11-for{animation:none}
  .s11-ord > span,.s11-punkter li,.s11-maerke{transform:none !important;opacity:1 !important}
  .s11 *{transition-duration:.01ms !important}
}