/* Lunar-siden, /erhverv/lunar (lunar_side.py). Godkendt af Ash 2026-10-08.
   Skrift, overskriftsvægt og farver kommer fra faelles.css. Præfiks lu-.
   --lu-film er præcis den farve, filmens kant har, når browseren afspiller
   den (målt i Chrome), så filmen flyder ud i heroen uden synlig kant. */
:root{--lu-film:#0F201A;--lu-lysgroen:#9FD48F;--lu-tekst:#E7ECE8;--lu-daemp:#A9B5AE;--lu-linje:rgba(231,236,232,.14);--lu-lys:#EDF5E9;
  --lu-gutter:clamp(16px,5vw,72px);--lu-bredde:1240px}

.lu-hero,.lu-sek,.lu-smaat{padding-inline:max(var(--lu-gutter),calc((100% - var(--lu-bredde)) / 2 + var(--lu-gutter)))}

/* hero: tilbud til venstre, film til højre, trinene under filmen */
.lu-hero{background:var(--lu-film);color:var(--lu-tekst)}
.lu-hero-gitter{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(16px,3vw,48px);align-items:center;padding-top:clamp(36px,5vw,72px)}
.lu-laas{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.lu-hjemstad{height:22px;width:auto;display:block}
.lu-lunar{height:22px;width:auto;display:block}
.lu-x{font-size:18px;color:var(--lu-daemp)}
.lu-hero h1{font-size:clamp(40px,4.8vw,68px);line-height:1.05;color:#fff;margin:0}
.lu-hero h1 > span{display:block;color:var(--lu-lysgroen)}
.lu-ingress{font-size:19px;color:var(--lu-daemp);max-width:28em;margin:22px 0 0}
.lu-hero .lu-knap{margin-top:30px}
.lu-film{aspect-ratio:1;width:100%;max-width:100%}
.lu-film video{width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent);mask-image:radial-gradient(closest-side,#000 88%,transparent)}

.lu-knap{display:inline-flex;align-items:center;gap:12px;padding:16px 23px;border-radius:4px;font-size:16px;font-weight:600;line-height:1.3;text-decoration:none;transition:background .2s}
.lu-knap-lys{background:var(--paper);color:var(--ink)}
.lu-knap-lys:hover{background:#fff}
.lu-knap-moerk{background:var(--ink);color:#fff}
.lu-knap-moerk:hover{background:var(--green)}

.lu-trin{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lu-linje)}
.lu-trin li{min-width:0}
.lu-trin button{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:flex-start;width:100%;cursor:pointer;padding:22px 18px 34px 0;position:relative;color:var(--lu-daemp);transition:color .3s}
.lu-trin button:focus-visible{outline:3px solid var(--brand-groen);outline-offset:-3px}
.lu-bar{position:absolute;top:-1px;left:0;right:18px;height:3px;overflow:hidden}
.lu-bar i{display:block;height:100%;background:var(--brand-groen);transform-origin:left;transform:scaleX(0)}
.lu-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--lu-linje);font-size:14px;font-weight:500;transition:all .3s}
.lu-trin-titel{display:block;font-size:17px;font-weight:500;line-height:1.3;padding-top:4px}
.lu-trin-tekst{display:block;font-size:15px;line-height:1.45;margin-top:4px}
.lu-trin .aktiv{color:#fff}
.lu-trin .aktiv .lu-nr{background:var(--brand-groen);border-color:var(--brand-groen);color:var(--ink)}
.lu-trin .faerdig .lu-nr{border-color:var(--brand-groen);color:var(--lu-lysgroen)}

/* lyse sektioner */
.lu-sek{padding-top:clamp(64px,8vw,104px)}
.lu-sek h2{font-size:clamp(32px,3.4vw,48px);margin:0 0 clamp(28px,3.5vw,44px)}
.lu-sek h2 span{color:var(--green)}

.lu-fordele{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lu-fordel{border-top:2px solid var(--ink);padding-top:20px;min-width:0}
.lu-fordel svg{width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.lu-fordel h3{font-size:21px;line-height:1.2;margin:0}
.lu-fordel p{color:var(--muted);font-size:16px;margin:6px 0 0}

.lu-pakker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lu-pakke{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:4px;min-width:0}
.lu-til{font-size:15px;color:var(--muted)}
.lu-pakke h3{font-size:28px;margin:0}
.lu-maerke{align-self:flex-start;background:var(--lu-lys);color:var(--green);font-size:14px;font-weight:500;border-radius:999px;padding:4px 12px;margin-top:8px}
.lu-tjek{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.lu-tjek li{display:flex;gap:12px;align-items:baseline;font-size:16px}
.lu-tjek li::before{content:"";flex:none;width:13px;height:7px;border-left:2.5px solid var(--brand-groen);border-bottom:2.5px solid var(--brand-groen);transform:translateY(-3px) rotate(-45deg)}
.lu-pakke-fod{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:24px}
.lu-pakke-fod p{color:var(--muted);margin:0}

.lu-ny{background:var(--ink);color:var(--lu-tekst);border-radius:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lu-ny > div{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:12px;min-width:0}
.lu-ny > div + div{border-left:1px solid var(--lu-linje)}
.lu-ny h2{font-size:clamp(28px,2.8vw,40px);color:#fff;margin:0}
.lu-ny p{color:var(--lu-daemp);max-width:30em;margin:0}
.lu-ny .lu-tal{font-family:var(--skrift-rubrik);font-size:clamp(44px,4.6vw,64px);font-weight:680;letter-spacing:-.015em;line-height:1;color:var(--lu-lysgroen);margin-top:auto;padding-top:12px}
.lu-ny .lu-tal small{display:block;font-family:var(--skrift-tekst);font-size:15px;font-weight:400;letter-spacing:0;color:var(--lu-daemp);margin-bottom:6px}
.lu-ny .lu-knap{align-self:flex-start;margin-top:auto}

.lu-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:start}
.lu-faq h2{margin:0}
.lu-faq-liste{border-top:1px solid var(--border)}
.lu-faq details{border-bottom:1px solid var(--border)}
.lu-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:500;font-size:18px}
.lu-faq summary::-webkit-details-marker{display:none}
.lu-faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-4px);transition:transform .25s}
.lu-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.lu-faq details p{color:var(--muted);padding-bottom:20px;max-width:58ch;margin:0}

.lu-smaat{font-size:14px;color:var(--muted);padding-top:48px;margin:0;max-width:none}

/* Kortet på erhvervsforsiden (lunar_side.fremhaev, godkendt 2026-10-09): mørkt kort med telefonfilmen.
   Kortets farve er filmens kantfarve. erhverv-forside.css sætter selv farve på links og margin på p,
   så de regler står med .lu-fremhaev foran. */
.lu-fremhaev{padding:clamp(48px,6vw,88px) 5% 0}
.lu-f-kort{margin:0;background:#0F201A;color:#E7ECE8;border-radius:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;overflow:hidden}
.lu-f-tekst{padding:clamp(32px,4.5vw,64px);min-width:0}
.lu-f-laas{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:#A9B5AE;font-size:18px}
.lu-f-laas svg{height:22px;width:auto;display:block}
.lu-fremhaev h2{font-size:clamp(34px,3.8vw,54px);line-height:1.05;color:#fff;margin:0}
.lu-fremhaev h2 > span{display:block;color:#9FD48F}
.lu-fremhaev .lu-f-tekst p{color:#A9B5AE;font-size:18px;margin:18px 0 0;max-width:30em}
.lu-fremhaev .lu-f-tjek{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.lu-f-tjek li{display:flex;gap:12px;align-items:baseline;color:#fff;font-size:16px}
.lu-f-tjek li::before{content:"";flex:none;width:13px;height:7px;border-left:2.5px solid #51AE3C;border-bottom:2.5px solid #51AE3C;transform:translateY(-3px) rotate(-45deg)}
.lu-fremhaev .lu-f-knap{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:16px 23px;border-radius:4px;background:#F1F2EE;color:#0F2019 !important;font-size:16px;font-weight:600;text-decoration:none}
.lu-fremhaev .lu-f-knap:hover{background:#fff;color:#0F2019}
.lu-f-film{align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0}
.lu-f-film video{width:100%;max-width:560px;aspect-ratio:1;display:block;-webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent);mask-image:radial-gradient(closest-side,#000 88%,transparent)}
@media (max-width:860px){
  .lu-f-kort{grid-template-columns:minmax(0,1fr)}
  .lu-f-tekst{padding-bottom:0}
  .lu-f-film video{max-width:420px;margin:-12px auto -20px}
}

@media (max-width:1000px){
  .lu-hero-gitter{grid-template-columns:minmax(0,1fr)}
  .lu-film{max-width:520px;margin:-8px auto -24px}
  .lu-trin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lu-fordele{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .lu-pakker,.lu-faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .lu-ny{grid-template-columns:minmax(0,1fr)}
  .lu-ny > div + div{border-left:0;border-top:1px solid var(--lu-linje)}
}
@media (max-width:520px){
  .lu-trin button{padding-right:12px}
  .lu-bar{right:12px}
  .lu-fordele{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.lu-trin button,.lu-nr,.lu-knap{transition:none}}