/* Sitets fælles header og footer. Bruges på alle sider; indlæses efter sidens egen CSS. */
/* Header og footer ser ens ud,uanset sidens egen skriftstørrelse og linjehøjde */
.site,.sf{font-size:15px;line-height:1.65}/* ---------- sitets header (som eShop) ---------- */
.site{background:#fff;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)))}.site-in{width:100%;margin:0 auto;display:flex;align-items:center;gap:24px;min-height:84px;padding:14px max(20px,env(safe-area-inset-left,0px))}
@media (min-width:595px){.site-in{width:595px}}
@media (min-width:735px){.site{margin-inline:0}.site-in{width:735px;padding-inline:35px}}
@media (min-width:840px){.site-in{width:840px}}
@media (min-width:1015px){.site-in{width:1015px}}
@media (min-width:1260px){.site-in{width:1260px;min-height:120px}}
@media (min-width:1365px){.site-in{width:1365px}}
@media (min-width:1715px){.site-in{width:1715px;padding-inline:70px}}.logo2{display:block;color:#000;line-height:0}.logo2 svg,.logo2 img{width:145px;height:auto;aspect-ratio:552.97/131.68;display:block}.snav{display:none;margin-left:auto;gap:22px;font-size:13.5px}.snav>a,.snav .um-btn{color:#333;text-decoration:none;white-space:nowrap}.snav>a:hover,.snav>a.on,.snav .um-btn:hover,.snav .um-btn.on{color:var(--nw-accent)}.ico{display:flex;gap:10px;margin-left:auto}.ic{display:block;width:46px;height:46px;color:#000;line-height:0}.ic svg,.ic img,.ic .ic-m{width:100%;height:100%;display:block}.ic:hover{color:var(--nw-accent)}
@media (min-width:1015px){.logo2 svg,.logo2 img{width:175px}}
@media (min-width:1260px){.snav{display:flex}.snav+.ico{margin-left:70px}}
@media (max-width:734px){.ic{width:40px;height:40px}.ico{gap:8px}}/* ---------- sitets footer (White_med_footer.ai) ---------- */
.sf{background:#fff;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)));margin-top:105px;overflow:hidden;font-family:var(--font)}.sf-in{width:100%;margin:0 auto;padding:70px max(20px,env(safe-area-inset-left,0px)) 0}.sf-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid #bababa}.sf-claim{margin:0;color:var(--nw-ink);font-weight:500;font-size:27.8px;white-space:nowrap;line-height:1.1;letter-spacing:-.005em}.sf-tel{display:inline-flex;align-items:center;gap:12px;color:var(--nw-accent);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}.sf-tel:hover{color:var(--nw-accent)}.sf-ti{display:block;width:48px;height:48px;color:var(--nw-accent);line-height:0}.sf-ti svg,.sf-ti .ic-m{width:100%;height:100%}.sf-top .sf-tel{display:none}.sf-copy{margin:10px 0 0;font-size:14px;font-weight:300;color:#c8c8c8;line-height:1.3}.sf-body{display:grid;grid-template-columns:minmax(0,1fr)}.sf-h{margin:0 0 14px;color:var(--nw-accent);font-size:16.3px;font-weight:600;line-height:1.25}.sf-c ul{list-style:none;margin:0;padding:0}.sf-c li{font-size:14.25px;line-height:27px;color:#a4a4a4}.sf-c li a{color:#a4a4a4;text-decoration:none}.sf-c li a:hover{color:var(--nw-accent)}.sf-a address{font-style:normal;display:grid;font-size:14.25px;line-height:27px;color:#4d4d4d}.sf-a address a{color:#4d4d4d;text-decoration:none}.sf-a address a:hover{color:var(--nw-accent)}.sf-info{display:contents}.sf-co{display:none}/* mobil: karrusel med servicekolonner,telefon,adresse */
.sf-svc{order:1;margin-top:50px}.sf-tel2{order:2;margin-top:70px}.sf-a{order:3;margin-top:40px}.sf-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.sf-track::-webkit-scrollbar{display:none}.sf-s{flex:0 0 100%;scroll-snap-align:start;background:#f5f5f5;border-radius:6px;padding:36px 23px 32px}.sf-dots{display:flex;justify-content:center;gap:10px;margin-top:30px}.sf-dots button{width:25px;height:4px;padding:0;border:0;border-radius:2px;background:#04006a;cursor:pointer;transition:width .25s,background .25s}.sf-dots button[aria-current="true"]{width:45px;background:var(--nw-accent)}.sf-word{margin-top:50px;color:#d7d7d7;line-height:0;overflow:hidden}.sf-word svg,.sf-word-m{display:block;width:980px;height:auto;aspect-ratio:1577/200}
@media (min-width:595px){.sf-in{width:595px}}
@media (min-width:735px){.sf{margin-inline:0}.sf-in{width:735px;padding-inline:35px}.sf-claim{font-size:30.7px}.sf-top .sf-tel{display:inline-flex}.sf-tel2{display:none}.sf-copy{text-align:right}.sf-info{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:35px;align-items:start;padding-bottom:35px;border-bottom:1px solid #bababa;margin-top:15px}.sf-a{order:0;margin-top:0;background:#ebf5ff;border-radius:6px;padding:35px 20px 35px 35px}.sf-co{display:block;padding-top:35px}.sf-svc{order:0;margin-top:35px}.sf-track{gap:35px}.sf-s{flex:0 0 280px;background:#fff;border:1px solid #e5e5e5;padding:35px 20px 30px 35px}
}
@media (min-width:840px){.sf-in{width:840px}}
@media (min-width:1015px){.sf-in{width:1015px}.sf-claim{font-size:43.8px}.sf-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:visible}.sf-s{background:none;border:0;padding:0;border-radius:0}.sf-dots{display:none}.sf-c li{font-size:13.2px}.sf-a address{font-size:13.2px}.sf-word{margin-top:70px}.sf-word svg,.sf-word-m{width:100%}
}
@media (min-width:1260px){.sf-in{width:1260px}.sf-claim{font-size:52.6px}.sf-track{grid-template-columns:repeat(4,315px)}
}
@media (min-width:1365px){.sf-in{width:1365px}.sf-body{grid-template-columns:minmax(0,1fr) auto auto;margin-top:70px;align-items:start}.sf-info{display:contents}.sf-svc{grid-column:1;grid-row:1;margin-top:0}.sf-track{grid-template-columns:245px 210px 245px 211px}.sf-co{grid-column:2;grid-row:1;padding:0 0 0 35px;border-left:1px solid #a4a4a4;width:208px;margin-left:35px}.sf-a{grid-column:3;grid-row:1;background:none;padding:0;border-radius:0;width:176px}.sf-word{margin-top:94px}
}
@media (min-width:1715px){.sf-in{width:1715px;padding-inline:70px}.sf-track{grid-template-columns:280px 245px 280px 245px}.sf-co{width:210px}.sf-a{width:280px}.sf-c li,.sf-a address{font-size:14.25px}
}.mbar.sf-hide{opacity:0;pointer-events:none;transition:opacity .2s}.sf-a .nw{white-space:nowrap}.site{position:relative;z-index:35}.hmb{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:46px;padding:0 4px;border:0;background:none;cursor:pointer;margin-left:6px}.hmb span{display:block;height:2.5px;border-radius:2px;background:#000;transition:transform .2s,opacity .2s}.hmb[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}.hmb[aria-expanded="true"] span:nth-child(2){opacity:0}.hmb[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media (max-width:1259px){.snav.open{display:grid;position:absolute;left:0;right:0;top:100%;background:#fff;padding:10px max(20px,env(safe-area-inset-left,0px)) 20px;gap:0;box-shadow:0 14px 24px rgba(16,24,40,.08);font-size:15px}.snav.open>a{padding:12px 0;border-top:1px solid var(--nw-surface-2)}}
@media (min-width:735px) and (max-width:1259px){.snav.open{padding-inline:35px}}
@media (min-width:1260px){.hmb{display:none}}
@media (max-width:734px){.hmb{width:34px;height:40px;margin-left:2px}}/* footeren slutter siden */
html body{padding-bottom:0}.sf{margin-bottom:0}
/* Rettelser: headeren stak ud over siden ved 360 og 1260 px */
@media (max-width:389px){.site .logo2 svg,.site .logo2 img{width:120px}.site .ico{gap:6px}}
@media (min-width:1260px) and (max-width:1364px){.site .snav+.ico{margin-left:24px}}
/* Ikoner som filer (public/site/ico/). Ensfarvede ikoner tegnes med en maske i tekstfarven, så hover-farven virker */
.ic-m{display:block;background-color:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-tel{--m:url(../ico/telefon.svg)}.ic-kurv{--m:url(../ico/kurv.svg)}.ic-minside{--m:url(../ico/min-side.svg)}
.sf-word-m{background-color:currentColor;-webkit-mask:url(../ico/bluecircle-ord.svg) 0 0/100% 100% no-repeat;mask:url(../ico/bluecircle-ord.svg) 0 0/100% 100% no-repeat}

/* ---------- brødkrumme med sprogvalg på de overførte sider (components/sider/SideShell.tsx) ---------- */
.bc-wrap{box-sizing:border-box;padding:23px 20px;font-family:var(--font,Montserrat,sans-serif)}
@media (min-width:735px){.bc-wrap{padding-inline:35px}}
@media (min-width:1715px){.bc-wrap{padding-inline:70px}}
.bc-wrap .bc-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.bc-wrap .bc{display:flex;align-items:center;flex-wrap:wrap;margin:0;font-size:14px;font-weight:400;line-height:24px;color:#898989}
.bc-wrap .bc a,.bc-wrap .bc span{color:#898989;text-decoration:none}
.bc-wrap .bc a:hover{color:var(--nw-accent)}
.bc-wrap .bc .home{display:flex;width:24px;height:24px;margin:0 8px 0 0;align-items:center;justify-content:center}
.bc-wrap .bc .home img{display:none}
.bc-wrap .bc .home::before{content:"";display:block;width:24px;height:24px;background:var(--nw-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 2.8l10 8.4h-2.6v9.6H4.6v-9.6H2zM12 12.6a2.7 2.7 0 1 0 0 5.4a2.7 2.7 0 1 0 0-5.4z%22/%3E%3C/svg%3E") center/24px 24px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 2.8l10 8.4h-2.6v9.6H4.6v-9.6H2zM12 12.6a2.7 2.7 0 1 0 0 5.4a2.7 2.7 0 1 0 0-5.4z%22/%3E%3C/svg%3E") center/24px 24px no-repeat}
.bc-wrap .bc .home:hover::before{background:var(--nw-accent)}
.bc-wrap .bc .sep{display:inline-flex;width:24px;height:24px;margin:0 4px;align-items:center;justify-content:center;line-height:0}
.bc-wrap .bc .sep img{width:6px;height:9.75px}
.bc-wrap .bc-lang{display:flex;gap:2px;font-size:12px;font-weight:600;line-height:15px}
.bc-wrap .bc-lang a{padding:5px 8px;border-radius:4px;color:var(--nw-muted);text-decoration:none}
.bc-wrap .bc-lang a:hover{color:var(--nw-accent)}
.bc-wrap .bc-lang a[aria-current="true"]{background:var(--nw-surface-2);color:var(--nw-ink)}

/* ---------- headeren opfører sig ens på alle sider (site.js) ----------
   Helt i toppen og over en hero: sidens eget udseende. Rulning nedad: headeren glider væk.
   Rulning opad: den kommer frem igen med blå baggrund og hvid tekst. */
.site:not(.site--hero){position:sticky;top:0;transition:transform .3s ease-out,background-color .3s ease-out}
html body .site.site.is-hidden{transform:translateY(-100%);pointer-events:none}
html body .site.site.is-solid{background:var(--nw-accent)}
html body .site.is-solid .logo2 img{filter:brightness(0) invert(1)}
html body .site.is-solid .snav>a,html body .site.is-solid .snav .um-btn{color:#fff}
html body .site.is-solid .snav>a.on,html body .site.is-solid .snav .um-btn.on{color:#00d4ff}
html body .site.is-solid .snav>a:hover,html body .site.is-solid .snav .um-btn:hover{color:var(--nw-accent)}
html body .site.is-solid .ic:not(.wa){color:#fff}
html body .site.is-solid .ic:not(.wa):hover{color:var(--nw-accent)}
html body .site.is-solid .hmb span{background:#fff}
html body .site.is-solid .snav.open>a,html body .site.is-solid .snav.open .um-btn{color:#333}
html body .site.is-solid .snav.open>a:hover,html body .site.is-solid .snav.open>a.on,html body .site.is-solid .snav.open .um-btn:hover,html body .site.is-solid .snav.open .um-btn.on{color:var(--nw-accent)}
@media (prefers-reduced-motion:reduce){.site{transition:none!important}}

/* ---------- mørkt tema (følger brugerens indstilling; farver som Alt om UPS-anlæg) ---------- */




/* Brødkrummen holder kant med logoet og sidens indhold på alle sider (hjem-ikonet står på sidens kant, ikke rykket ind) */
html body .bc .home,html body .bch-bc .bch-home{margin-left:0!important}

/* ---------- Knapper: samme hover-effekt overalt som sitets knapper (fp-btn) ----------
   Hover-farven fejer ind fra venstre, teksten og pilen skifter farve, og pilen drejer 45°.
   --sw: farven der fejer ind, --swf: tekst/pil under hover. Knapper uden egen effekt fra det nuværende site. */
:is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta){
  --sw:var(--nw-ink);--swf:#fff;position:relative;isolation:isolate;overflow:hidden;
  transition:color .45s ease,border-color .2s ease .25s,background-color .45s ease}
:is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta)::before{
  content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:0;height:100%;border-radius:inherit;background:var(--sw);transition:width .45s ease;pointer-events:none}
:is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover::before{width:100%}
html body :is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover{border-color:var(--sw)!important;color:var(--swf)!important}
html body :is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover :is(span,p){color:var(--swf)!important;transition:color .45s ease}
html body :is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover svg :is(line,path){stroke:var(--swf)}
html body :is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover svg polygon{fill:var(--swf)}
/* hover-farver efter knappens farve (samme par som sitets øvrige knapper) */
.side-cer-loven :is(.s03-btn-navy,.s16-btn3,.s24-btn14){--sw:var(--nw-accent)}
.side-cer-loven .s03-btn-ghost,.toc-cta{--sw:var(--nw-accent)}
.side-cer-loven .s19-btn2,.dcc-endbtn.s12-btn,.dcc-endbtn.s03-reach{--sw:#04006a}
.side-cer-loven .s26-btn{--sw:#fff;--swf:var(--nw-accent)}
/* fp-knapper hvor hover-farven var den samme som knappens egen */
.side-rengoering-af-datacentre-og-serverrum .s03-btn1{--awb-bg-hover:var(--nw-ink)!important}
.side-rengoering-af-datacentre-og-serverrum .s03-btn2{--awb-bg-hover:var(--nw-accent)!important}
.side-rengoering-af-datacentre-og-serverrum .s03-btn3{--awb-bg-hover:var(--nw-accent)!important}

@media (prefers-reduced-motion:reduce){:is(.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta)::before{transition:none}}
html body .toc-cta:hover{background:transparent}
html body .toc-cta{--sw:var(--nw-accent)}
/* Hover-fejningen dækker også knappens kant: kanten skifter ikke farve for sig selv bagefter.
   (Knappen klippes til sin runde form med clip-path i stedet for overflow, så fejningen kan gå ud over kanten.) */
html body :is(.fp-btn,.btnp,.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta){--bw:1px;overflow:visible;clip-path:inset(0 round 9999px)}
html body :is(.fp-btn,.btnp){--bw:2px}
html body :is(.fp-btn,.btnp,.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta)::before{top:calc(-1*var(--bw) - 3px);bottom:calc(-1*var(--bw) - 3px);left:calc(-1*var(--bw) - 3px);right:auto;height:auto;border-radius:9999px}
html body :is(.fp-btn,.btnp,.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover::before{width:calc(100% + 2*var(--bw) + 6px)}
/* Under fejningen må knappens egen baggrund og kant ikke skifte farve (så ses en kant i den gamle farve om den nye flade):
   ved hover skifter de først, når fejningen dækker hele knappen; når musen går væk, skifter de straks tilbage under fejningen */
html body :is(.fp-btn,.btnp,.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta){transition:color .45s ease,background-color 0s,border-color 0s!important}
html body :is(.fp-btn,.btnp,.side-cer-loven :is(.s03-btn,.s07-btn,.s15-btn2,.s16-btn2,.s16-btn3,.s17-btn,.s19-btn2,.s24-btn13,.s24-btn14,.s26-btn),.dcc-endbtn,.toc-cta):hover{transition:color .45s ease,background-color 0s linear .45s,border-color 0s linear .45s!important}

/* Huset i brødkrummen er kun et symbol (ikke et link): ingen hover-effekt */
html body .bc span.home,html body .bch-bc span.bch-home{cursor:default;pointer-events:none}
html body .bc span.home:hover::before,html body .bch-bc span.bch-home:hover::before{background:var(--nw-accent)}
/* Brødkrummen under heroen ligger på næste sektions baggrund (site.js sætter --bcbg og bc-dark, når sektionen har sin egen farve) */
.bc-wrap.bc-bg{background:var(--bcbg);box-shadow:0 0 0 100vmax var(--bcbg);clip-path:inset(0 -100vmax)}
.bc-wrap.bc-dark .bc a,.bc-wrap.bc-dark .bc span{color:rgba(255,255,255,.85)}
.bc-wrap.bc-dark .bc a:hover{color:#fff}
.bc-wrap.bc-dark .bc .home::before{background:#fff}
.bc-wrap.bc-dark .bc .sep img{filter:brightness(0) invert(1);opacity:.7}
.bc-wrap.bc-dark .bc-lang a{color:rgba(255,255,255,.75)}
.bc-wrap.bc-dark .bc-lang a:hover{color:#fff}
.bc-wrap.bc-dark .bc-lang a[aria-current="true"]{background:rgba(255,255,255,.16);color:#fff}
html body .bc .sep img,html body .bch-bc .bch-sep img{width:6px!important;height:9.75px!important}

/* Knapper med pil: altid 32 px fra pilens spids til knappens ydre kant (inkl. kanten), og mindst 20 px mellem tekst og pil.
   Er teksten lang (fx på engelsk/tysk), bliver knappen bredere i stedet for at klemme pilen ud mod kanten. */
html body .fp-btn.fp-btn { padding-right: 30px !important; min-width: max-content !important; }
html body .fp-btn.fp-btn .fp-btn-label { margin-right: 12px; }
html body .btnp.btnp { padding-right: 30px; }
html body .dcc-endbtn.dcc-endbtn { padding-right: 31px !important; min-width: max-content !important; }
html body .dcc-endbtn.dcc-endbtn .dcc-endbtn-arrow { margin-right: 0 !important; }
html body .side-cer-loven :is(.s03-btn, .s17-btn, .s19-btn2, .s24-btn, .s24-btn2, .s24-btn13, .s24-btn14, .s26-btn) { padding-right: 31px !important; min-width: max-content !important; }
html body .side-cer-loven :is(.s07-btn, .s15-btn2, .s16-btn2, .s16-btn3) { padding-right: 32px !important; min-width: max-content !important; }
html body .side-cer-loven :is(.s03-btn, .s07-btn, .s15-btn2, .s16-btn2, .s16-btn3, .s17-btn, .s19-btn2, .s24-btn, .s24-btn2, .s24-btn13, .s24-btn14, .s26-btn) > span:last-child { margin-right: 0 !important; }
html body .side-cer-loven :is(.s03-btn, .s07-btn, .s15-btn2, .s16-btn2, .s16-btn3, .s17-btn, .s19-btn2, .s24-btn, .s24-btn2, .s24-btn13, .s24-btn14, .s26-btn) > span:first-child,
html body .dcc-endbtn.dcc-endbtn .dcc-endbtn-label { max-width: none !important; overflow: visible !important; }
/* Forsidens knapper med skrå pil (drejet 45°): 32 px fra den skrå pils spids til kanten */
html body .fp-btn.fp-btn.fs03-btn { padding-right: 27px !important; }

/* Footer: 35 px fra "Engineering continuity" ned til linjen */
html body .sf-top{padding-bottom:35px}
/* ---------- UPS-menu: stort fold-ud-panel under "UPS-anlæg" (components/UpsMega.tsx) ---------- */
.um{display:contents}
.um-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* UPS-anlæg er et link som de andre menupunkter (samme farver overalt); det folder menuen ud i stedet for at skifte side */
.um-car{width:10px;height:6px;transition:transform .25s ease}
.um-btn[aria-expanded="true"] .um-car{transform:rotate(180deg)}
.um-panel{display:none;color:var(--nw-ink);font-size:14px;line-height:1.4;text-align:left}
.um-panel a{text-decoration:none;color:inherit}
.um-eb{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nw-accent)}
.um-eb2{margin-top:28px}
.um-arw{width:16px;height:13px;flex:none;transition:transform .25s ease}
a:hover>.um-arw,a:hover .um-arw{transform:translateX(4px)}
.um-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.um-all{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--nw-accent)!important}
.um-makers{display:grid;gap:14px}
.um-maker{background:#f4f7fb;border-radius:14px;padding:14px 18px 16px}
.um-mk-top{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:end}
.um-mk-img{grid-row:1/3;width:56px;height:70px;display:flex;align-items:flex-end;justify-content:center}
.um-mk-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease}
.um-mk-top:hover .um-mk-img img{transform:translateY(-3px) scale(1.04)}
.um-mk-name{font-size:19px;font-weight:600;line-height:1.1}
.um-mk-top:hover .um-mk-name{color:var(--nw-accent)}
.um-mk-n{font-size:12.5px;color:#8a94a6;padding-bottom:6px}
.um-mk-list{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #e1e7ef;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.um-mk-list a{font-size:13.5px;color:#333}
.um-mk-list a:hover,.um-list a:hover,.um-feat li a:hover{color:var(--nw-accent)}
.um-types{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.um-types-l{font-size:12.5px;color:#8a94a6;margin-right:4px}
.um-chip{display:inline-block;padding:7px 14px;border:1px solid #d6dde7;border-radius:999px;font-size:13px;color:var(--nw-ink);transition:border-color .2s,background-color .2s,color .2s}
.um-chip:hover{border-color:var(--nw-accent);background:var(--nw-accent);color:#fff!important}
.um-feat{border-radius:16px;padding:22px 22px 20px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,var(--nw-accent) 0%,var(--nw-accent) 45%,var(--nw-ink) 100%)}
.um-feat-t{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:22px;font-weight:600;line-height:1.15;color:#fff!important}
.um-feat ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.22);display:grid;gap:8px}
.um-feat li a{font-size:13.5px;color:#dbe6ff}
.um-feat li a:hover{color:var(--nw-accent)!important}
.um-list{list-style:none;margin:16px 0 0;padding:0;display:grid}
.um-list li{border-bottom:1px solid var(--nw-surface-2)}
.um-list a{display:block;padding:9px 0;font-size:14px;color:#333}
.um-sel{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;border-radius:16px;background:linear-gradient(135deg,var(--nw-accent-tint) 0%,var(--nw-accent-tint-2) 100%);padding:20px 16px 0 22px;overflow:hidden}
.um-sel img{height:150px;width:auto;mix-blend-mode:multiply;transform:translateY(6px);transition:transform .35s ease}
.um-sel:hover img{transform:translateY(0)}
.um-sel-txt{display:grid;gap:6px;padding-bottom:20px;align-self:center}
.um-sel-t{font-size:22px;font-weight:600;line-height:1.1}
.um-sel-s{font-size:13.5px;color:var(--nw-ink-3)}
.um-sel-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--nw-accent)}
.um-tl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.um-tl a{display:flex;align-items:center;gap:14px;padding:9px 10px 9px 0;border-radius:12px;transition:background-color .2s}
.um-tl a:hover{background:#f4f7fb}
.um-ico{flex:none;width:42px;height:42px;border-radius:12px;background:#f4f7fb;color:var(--nw-accent);display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}
.um-tl a:hover .um-ico{background:var(--nw-accent);color:#fff}
.um-ico svg{width:22px;height:22px}
.um-tl-t{display:block;font-size:14.5px;font-weight:600}
.um-tl-s{display:block;font-size:12.5px;color:#8a94a6}
/* store skærme: panelet folder ud under headeren og fylder det meste af skærmen */
@media (min-width:1260px){
  .um-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--nw-surface-2);box-shadow:0 30px 60px rgba(13,13,66,.12);max-height:calc(100vh - 84px);overflow:auto;overscroll-behavior:contain}
  .um.open .um-panel{display:block;animation:um-in .28s ease both}
  .um-in{width:100%;margin:0 auto;padding:35px 35px 42px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr);gap:35px}
  .um-makers{grid-template-columns:1fr 1fr}
  .um-mk-list{grid-template-columns:1fr;gap:4px}
  .um.open .um-panel{box-shadow:0 30px 60px rgba(13,13,66,.12),0 50vh 0 50vh rgba(13,13,66,.28)}
}
@media (min-width:1715px){.um-in{width:1715px;padding-inline:70px;gap:70px}.um-mk-list{grid-template-columns:1fr 1fr;gap:6px 14px}.um-mk-img{width:64px;height:82px}}
@keyframes um-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* små skærme: grupperne ligger inde i mobilmenuen */
@media (max-width:1259px){
  .snav.open .um-btn{display:flex;justify-content:space-between;width:100%;padding:12px 0;border-top:1px solid var(--nw-surface-2);font-size:15px}
  .um.open .um-panel{display:block;padding:6px 0 18px}
  .um-in{display:grid;gap:26px}
  .um-mk-list{grid-template-columns:1fr 1fr}
  .um-feat-t{font-size:19px}
  .um-sel img{height:120px}
}
@media (min-width:735px) and (max-width:1259px){.um-makers{grid-template-columns:1fr 1fr}.um-in{grid-template-columns:1fr 1fr;column-gap:35px}.um-series{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.um.open .um-panel{animation:none}.um-car,.um-arw,.um-mk-img img,.um-sel img{transition:none}}
/* UPS-menuen i mørkt tema (farver som Alt om UPS-anlæg) */


/* Headeren er 120 px høj fra 1260 px: panelet fylder resten af skærmen */
@media (min-width:1260px){.um-panel{max-height:calc(100vh - 120px)}}

/* ---------- Footer i forsidens eksklusive udtryk (alle sider) ----------
   Varm flade var(--nw-page), dyb navy var(--nw-ink), brødtekst var(--nw-ink-3), messing var(--nw-accent) / var(--nw-accent-dark), hårstreger var(--nw-line), stenflade #e9e3d8.
   Opbygning og mål pr. breakpoint er de eksisterende ovenfor – her er kun farver, typografi, flader og streger. */
html body .sf{background:var(--nw-page)}
html body .sf-top{border-bottom-color:var(--nw-line)}
html body .sf-claim{color:var(--nw-ink);font-weight:200;letter-spacing:-.03em}
html body .sf-tel{gap:14px;color:var(--nw-ink);font-weight:400;letter-spacing:.04em;transition:color .3s}
html body .sf-tel:hover{color:var(--nw-accent)}
html body .sf-ti{width:44px;height:44px;color:var(--nw-accent)}
html body .sf-copy{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--nw-accent-dark)}
html body .sf-h{margin-bottom:18px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--nw-accent-dark)}
html body .sf-c li{color:var(--nw-muted);font-weight:300}
html body .sf-c li a{color:var(--nw-ink);font-weight:300;transition:color .3s}
html body .sf-c li a:hover{color:var(--nw-accent)}
html body .sf-a address{color:var(--nw-ink-3);font-weight:300}
html body .sf-a address a{color:var(--nw-ink);transition:color .3s}
html body .sf-a address a:hover{color:var(--nw-accent)}
html body .sf-s{background:#fff;border-radius:4px}
html body .sf-dots button{background:#d9d1c3;border-radius:1px}
html body .sf-dots button[aria-current="true"]{background:var(--nw-accent)}
html body .sf-word{color:#e9e3d8}
@media (min-width:735px){
  html body .sf-info{border-bottom-color:var(--nw-line)}
  html body .sf-a{background:#fff;border-radius:4px}
  html body .sf-s{background:#fff;border-color:var(--nw-line);border-radius:4px}
}
@media (min-width:1015px){html body .sf-s{background:none;border:0;border-radius:0}}
@media (min-width:1365px){html body .sf-a{background:none;border-radius:0}html body .sf-co{border-left-color:var(--nw-line)}}




/* Mobil: footeren står i sidens fulde bredde med 20 px til kanterne (den negative sidemargen skubbede teksten ud til kanten) */
@media (max-width:734px){html body .sf{margin-inline:0}}

/* ---------- Header i forsidens eksklusive udtryk (alle sider, alle tilstande) ----------
   Spærret versal i menuen med en messingstreg under aktiv side og ved hover, tynde ikonringe, tynd hamburger.
   Uden hero: varm flade var(--nw-page) med hårstreg. Over en hero: gennemsigtig med hvid tekst. Rullet ned: dyb navy med glød og messingstreg.
   UPS-menuen og mobilmenuen: varm flade, hvide kort, messingtitler. Opbygning og mål pr. breakpoint er de eksisterende. */
html body .site.site:not(.site--hero){background:var(--nw-page);box-shadow:inset 0 -1px 0 var(--nw-line)}
html body .site.site .snav{gap:22px;font-size:11px;line-height:16px;font-weight:500}
html body .site.site .snav>a,html body .site.site .snav .um-btn{position:relative;padding-block:6px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--nw-ink);transition:color .3s}
html body .site.site .snav>a::after,html body .site.site .snav .um-btn::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--nw-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
html body .site.site .snav>a:hover::after,html body .site.site .snav>a.on::after,html body .site.site .snav .um-btn:hover::after,html body .site.site .snav .um-btn.on::after,html body .site.site .um.open .um-btn::after{transform:scaleX(1)}
html body .site.site .snav>a:hover,html body .site.site .snav>a.on,html body .site.site .snav .um-btn:hover,html body .site.site .snav .um-btn.on{color:var(--nw-ink)}
html body .site.site .um-car{width:8px;height:5px}
/* ikoner: tynde ringe */
html body .site.site .ico{gap:10px;align-items:center}
html body .site.site .ic{width:42px;height:42px;color:var(--nw-ink);transition:color .3s}
html body .site.site .ic:hover{color:var(--nw-accent)}
html body .site.site .ic .ic-tel{--m:url(../ico/telefon-lux.svg)}
html body .site.site .ic .ic-minside{--m:url(../ico/min-side-lux.svg)}
html body .site.site .ic.wa img{display:none}
html body .site.site .ic.wa::before{content:'';display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:url(../ico/whatsapp-lux.svg) center/contain no-repeat;mask:url(../ico/whatsapp-lux.svg) center/contain no-repeat}
@media (max-width:734px){html body .site.site .ic{width:38px;height:38px}html body .site.site .ico{gap:8px}}
/* hamburger: tre tynde streger */
html body .site.site .hmb{width:28px;height:38px;padding:0;margin-left:4px;gap:7px}
html body .site.site .hmb span{width:28px;height:1.5px;border-radius:0;background:var(--nw-ink)}
html body .site.site .hmb[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
html body .site.site .hmb[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
/* over en hero og rullet ned: hvid tekst og hvide ikoner */
html body .site.site.site--hero .snav>a,html body .site.site.site--hero .snav .um-btn,html body .site.site.is-solid .snav>a,html body .site.site.is-solid .snav .um-btn,
html body .site.site.site--hero .ic,html body .site.site.is-solid .ic{color:#fff}
html body .site.site.site--hero .snav>a:hover,html body .site.site.site--hero .snav>a.on,html body .site.site.site--hero .snav .um-btn:hover,html body .site.site.site--hero .snav .um-btn.on,
html body .site.site.is-solid .snav>a:hover,html body .site.site.is-solid .snav>a.on,html body .site.site.is-solid .snav .um-btn:hover,html body .site.site.is-solid .snav .um-btn.on{color:#fff}
html body .site.site.site--hero .snav>a::after,html body .site.site.site--hero .snav .um-btn::after,html body .site.site.is-solid .snav>a::after,html body .site.site.is-solid .snav .um-btn::after{background:var(--nw-accent)}
html body .site.site.site--hero .ic:hover,html body .site.site.is-solid .ic:hover{color:var(--nw-accent)}
html body .site.site.site--hero .hmb span,html body .site.site.is-solid .hmb span{background:#fff}
@media (min-width:1260px){html body .site.site.site--hero .snav{border-top-color:rgba(255,255,255,.35)}}
html body .site.site.site.is-solid{background:linear-gradient(90deg,var(--nw-ink) 0%,var(--nw-ink) 55%,var(--nw-ink-2) 100%);box-shadow:inset 0 -1px 0 rgba(176,141,87,.35)}
html body .site.site.is-solid .logo2 img{filter:brightness(0) invert(1)}
/* mobilmenuen (under 1260 px): varm flade, spærret versal, hårstreger */
@media (max-width:1259px){
  html body .site.site .snav.open{background:var(--nw-page);box-shadow:0 1px 0 var(--nw-line),0 24px 40px rgba(14,13,58,.12);font-size:12px}
  html body .site.site .snav.open>a,html body .site.site .snav.open .um-btn{padding:16px 0;border-top:1px solid var(--nw-line);color:var(--nw-ink);font-size:12px;letter-spacing:.2em}
  html body .site.site .snav.open>a::after,html body .site.site .snav.open .um-btn::after{display:none}
  html body .site.site .snav.open>a:hover,html body .site.site .snav.open>a.on,html body .site.site .snav.open .um-btn:hover,html body .site.site .snav.open .um-btn.on{color:var(--nw-accent-dark)}
  html body .site.site .snav.open a{color:var(--nw-ink)}
}
/* UPS-menuen */
html body .site.site .um-panel{color:var(--nw-ink)}
html body .site.site .um-eb{font-size:12px;font-weight:500;letter-spacing:.24em;color:var(--nw-accent-dark)}
html body .site.site .um-all,html body .site.site .um-sel-go{color:var(--nw-ink)!important;font-weight:500;letter-spacing:.04em}
html body .site.site .um-maker{background:#fff;border-radius:4px}
html body .site.site .um-mk-name,html body .site.site .um-sel-t,html body .site.site .um-feat-t{font-weight:300;letter-spacing:-.01em}
html body .site.site .um-mk-top:hover .um-mk-name,html body .site.site .um-mk-list a:hover,html body .site.site .um-list a:hover,html body .site.site .um-feat li a:hover{color:var(--nw-accent)}
html body .site.site .um-mk-list,html body .site.site .um-list li{border-color:var(--nw-line)}
html body .site.site .um-mk-list a,html body .site.site .um-list a{color:var(--nw-ink-3)}
html body .site.site .um-mk-n,html body .site.site .um-types-l,html body .site.site .um-tl-s{color:var(--nw-muted)}
html body .site.site .um-chip{border-color:var(--nw-line);border-radius:999px;color:var(--nw-ink)}
html body .site.site .um-chip:hover{border-color:var(--nw-ink);background:var(--nw-ink);color:#fff!important}
html body .site.site .um-feat{border-radius:4px;background:radial-gradient(120% 120% at 100% 0%,var(--nw-ink-2) 0%,var(--nw-ink) 60%,var(--nw-ink) 100%)}
html body .site.site .um-feat ul{border-top-color:rgba(210,182,138,.35)}
html body .site.site .um-feat li a{color:var(--nw-line-3)}
html body .site.site .um-feat li a:hover{color:var(--nw-accent)!important}
html body .site.site .um-sel{border-radius:4px;background:#e9e3d8}
html body .site.site .um-sel-s{color:var(--nw-ink-3)}
html body .site.site .um-tl a{border-radius:4px}
html body .site.site .um-tl a:hover{background:#fff}
html body .site.site .um-ico{border-radius:4px;background:#fff;color:var(--nw-ink)}
html body .site.site .um-tl a:hover .um-ico{background:var(--nw-ink);color:#fff}
@media (min-width:1260px){
  html body .site.site .um-panel{background:var(--nw-page);border-top-color:var(--nw-line);box-shadow:0 30px 60px rgba(14,13,58,.12)}
  html body .site.site .um.open .um-panel{box-shadow:0 30px 60px rgba(14,13,58,.12),0 50vh 0 50vh rgba(14,13,58,.35)}
}
/* mørkt tema */



/* 1260–1714: menuen skal kunne stå på én linje ved siden af logo og ikoner */
@media (min-width:1260px) and (max-width:1714px){html body .site.site .snav{gap:18px}html body .site.site .snav>a,html body .site.site .snav .um-btn{letter-spacing:.11em}}
@media (max-width:1259px){html body .site.site .snav.open{gap:0}}

/* Hover-farver på hele sitet (ønske 10/11-2026): mouse over er mørk blå (navy) eller messing – aldrig Bluecircle-blå.
   Links i footer, UPS-menu og brødkrummer: messing. Udfyldte felter (chips, ikoner): navy. Mørkt tema: lys messing. */
html body .sf-tel:hover,html body .sf-c li a:hover,html body .sf-a address a:hover{color:var(--nw-accent-dark)}
html body .site.site .um-mk-top:hover .um-mk-name,html body .site.site .um-mk-list a:hover,html body .site.site .um-list a:hover{color:var(--nw-accent-dark)}
html body .bc-wrap .bc a:hover,html body .bc-wrap .bc-lang a:hover{color:var(--nw-accent-dark)}
html body .bc span.home:hover::before,html body .bch-bc span.bch-home:hover::before{background:var(--nw-accent-dark)}


/* Brødkrummen i det nye udtryk (10/11-2026): tyndt hus i messing, dæmpet tekst, aktuel side i navy, sprogvalg som spærret versal */
html body .bc-wrap .bc .home::before{background:var(--nw-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M3.5 11 12 4l8.5 7%22/%3E%3Cpath d=%22M5.8 9.4V20h12.4V9.4%22/%3E%3Cpath d=%22M10.2 20v-5.4h3.6V20%22/%3E%3C/svg%3E") center/22px 22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M3.5 11 12 4l8.5 7%22/%3E%3Cpath d=%22M5.8 9.4V20h12.4V9.4%22/%3E%3Cpath d=%22M10.2 20v-5.4h3.6V20%22/%3E%3C/svg%3E") center/22px 22px no-repeat}
html body .bc-wrap .bc{font-size:13px;font-weight:300;letter-spacing:.02em}
html body .bc-wrap .bc a,html body .bc-wrap .bc span{color:var(--nw-muted)}
html body .bc-wrap .bc [aria-current="page"]{color:var(--nw-ink)}
html body .bc-wrap .bc .sep img{opacity:.55}
html body .bc-wrap .bc-lang{gap:4px;font-size:11px;font-weight:500;letter-spacing:.16em}
html body .bc-wrap .bc-lang a{border-radius:2px;color:var(--nw-muted)}
html body .bc-wrap .bc-lang a[aria-current="true"]{background:transparent;color:var(--nw-ink);box-shadow:inset 0 -1px 0 var(--nw-accent);border-radius:0}

html body .bc-wrap.bc-dark .bc .home::before{background:var(--nw-accent)}
html body .bc-wrap.bc-dark .bc [aria-current="page"]{color:#fff}
/* Logoet mases aldrig */
.site .logo2{flex-shrink:0}
/* Fra 1260 px: kan menuen ikke stå på én linje ved siden af logo og ikoner (fx de længere tyske og finske menupunkter),
   sætter site.js klassen navk, og headeren bruger menuknappen og mobilmenuen som under 1260 px */
@media (min-width:1260px){
  html body .site.site.navk .snav{display:none}
  html body .site.site.navk .snav+.ico{margin-left:auto}
  html body .site.site.navk .hmb{display:flex}
  html body .site.site.navk .snav.open{display:grid;position:absolute;left:0;right:0;top:100%;padding:10px 35px 20px;gap:0;background:var(--nw-page);box-shadow:0 1px 0 var(--nw-line),0 24px 40px rgba(14,13,58,.12);font-size:12px;max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain}
  html body .site.site.navk .snav.open>a,html body .site.site.navk .snav.open .um-btn{display:flex;justify-content:space-between;width:100%;padding:16px 0;border-top:1px solid var(--nw-line);color:var(--nw-ink);font-size:12px;letter-spacing:.2em}
  html body .site.site.navk .snav.open>a::after,html body .site.site.navk .snav.open .um-btn::after{display:none}
  html body .site.site.navk .snav.open>a:hover,html body .site.site.navk .snav.open>a.on,html body .site.site.navk .snav.open .um-btn:hover,html body .site.site.navk .snav.open .um-btn.on{color:var(--nw-accent-dark)}
  html body .site.site.navk .snav.open a{color:var(--nw-ink)}
  html body .site.site.navk .um-panel{position:static;max-height:none;overflow:visible;border-top:0;background:transparent;box-shadow:none;animation:none}
  html body .site.site.navk .um.open .um-panel{display:block;padding:6px 0 18px;box-shadow:none}
  html body .site.site.navk .um-in{width:auto;padding:0;grid-template-columns:1fr 1fr;gap:26px;column-gap:35px}
  html body .site.site.navk .um-series{grid-column:1/-1}
  html body .site.site.navk .um-mk-list{grid-template-columns:1fr 1fr}
  html body .site.site.navk .um-feat-t{font-size:19px}
  html body .site.site.navk .um-sel img{height:120px}
}

/* Tilgængelighed: telefonlinket i footerens adresse skiller sig ud fra teksten omkring det med en diskret understregning */
html body .sf-c address a.nw{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(176,141,87,.55)}