/* Rettelser af layoutfejl fundet ved test af alle breakpoints */
/* Paneler med brede tabeller må ikke gøre siden bredere end skærmen; tabellen scroller inde i panelet */
.panel{grid-template-columns:minmax(0,1fr)}
/* Lange typebetegnelser på kabinetkort brydes i stedet for at stikke ud */
.spc>*{min-width:0}
.spc h4,.spc .ref,.spc dd{overflow-wrap:anywhere}
/* Sitets fælles header og footer: shoppens sider har ingen sidemargen på body */
body.bs .site,body.bs .sf{margin-inline:0}
/* Kildehenvisning nederst i indholdet (stod før i prototypens footer) */
.kilde{margin:0;font-size:.8rem;color:var(--txt)}
/* Sprogvalg til højre for brødkrummen (samme udformning som på Alt om UPS-anlæg) */
.bc-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:23px}
.bc-row>.bc{margin-top:0}
.bc-row>.bch-bc{flex:1 1 auto}
.bc-lang{display:flex;gap:2px;font-size:12px;font-weight:600;line-height:15px}
.bc-lang a{padding:5px 8px;border-radius:4px;color:var(--muted,#5a6b7b);text-decoration:none}
.bc-lang a:hover{color:var(--accent,var(--nw-accent))}
.bc-lang a[aria-current="true"]{background:var(--accent-soft,var(--nw-accent-tint-3));color:var(--fg,#13202d)}

/* ---------- Mørkt tema (følger brugerens indstilling) – samme farver som resten af sitet (Alt om UPS-anlæg) ----------
   Shoppens egne farver er variabler; her får de mørke værdier. html:root vinder over sidernes egne :root-blokke. */


/* >>> MØRKT TEMA (genereret af tools/shop_dark.py) >>> */

/* <<< MØRKT TEMA <<< */

/* Valgt produkt i "Andre …"-listen: lys flade med mørk tekst i mørkt tema */

/* Mørkt tema: producentnavn, antal produkter og "nu"-markøren i batteriplanlæggeren skal kunne ses */

/* Mørkt tema: produktfotos har hvid baggrund – billedfeltet får en hvid flade med runde hjørner (som kortet i lyst tema), så fotoet ikke står som en hvid firkant */

/* Mørkt tema: aktivt menupunkt og hover i headeren som på resten af sitet */

/* Ikonerne i de cyan cirkler ("Mere end et produkt i en kurv") forbliver mørke – cirklen er lys i begge temaer */

/* Mørkt tema: headeren øverst på siden har sidens mørke farve (shoppens egen CSS gav den hvid baggrund på enkelte sider) */

/* Mørkt tema: diagram "Effekt mod gulvareal" (prikker og infoboks), StratusPower-siden (egne farver) og idriftsættelsens lovkrav-boks */


/* >>> EKSKLUSIVT UDTRYK (genereret af tools/shop_lux.py) >>> */
html:root .legend .l-mod,html:root .legend .l-red{background:radial-gradient(circle at 72% 50%,var(--nw-ink) 0 2.2px,transparent 2.7px),var(--ill-mod);box-shadow:inset 3px 0 0 var(--nw-ink)}
html:root .dia .il-led{fill:var(--nw-ink)}
html:root .dia .il-led2{fill:var(--nw-accent-dark)}
html:root .dia .il-disp{fill:var(--nw-ink)}
html:root .dia .il-dispt{fill:var(--nw-accent-dark)}
html:root .dia .il-run{fill:var(--nw-ink)}
html:root .dia .il-ledhalo{fill:var(--nw-ink)}
html:root .srch input{color:var(--nw-ink)}
html:root .bc a:hover{color:var(--nw-accent-dark)}
html:root .ovh h1{color:var(--nw-ink)}
html:root .ovh p{color:var(--nw-ink-3)}
html:root .kc:hover,html:root .kc:focus-visible{border-color:var(--nw-accent)}
html:root .kt i{background:var(--nw-accent)}
html:root .kp{color:var(--nw-ink)}
html:root .kb{background:var(--nw-accent)}
html:root .kc:hover .kb{background:var(--nw-accent)}
html:root .snav a:hover,html:root .snav a.on{color:var(--nw-accent-dark)}
html:root .ic:hover{color:var(--nw-accent-dark)}
html:root .uhd h1{color:var(--nw-ink)}
html:root .ubtn{background:var(--nw-accent)}
html:root .uc:hover .ubtn{background:var(--nw-accent)}
html:root .uc:hover h3{color:var(--nw-accent-dark)}
html:root .uc:focus-visible{outline:2px solid var(--nw-accent)}
html:root .fs .side .all{color:var(--nw-accent-dark)}
html:root .hero{background:linear-gradient(90deg,var(--nw-ink) 0%,var(--nw-ink) 30%,var(--nw-ink) 50%,var(--nw-accent) 72%,var(--nw-accent) 100%)}
html:root .tiles a:hover{color:var(--nw-accent-dark)}
html:root .band{background:linear-gradient(135deg,var(--nw-ink),var(--nw-ink))}
html:root .band .eb{color:var(--nw-accent-dark)}
html:root .band p{color:var(--nw-surface-2)}
html:root .btnp{background:var(--nw-accent)}
html:root .tool label{color:var(--nw-muted)}
html:root .tool .v{border:1px solid var(--nw-line);background:var(--nw-page)}
html:root .tool hr{border-top:1px solid var(--nw-line)}
html:root .tool h4{color:var(--nw-accent-dark)}
html:root .tool .r{background:var(--nw-page)}
html:root .tool .r span{color:var(--nw-muted)}
html:root .sec h2{color:var(--nw-ink)}
html:root .sec .more{color:var(--nw-accent-dark)}
html:root .fpc .im{border-bottom:1px solid var(--nw-line)}
html:root .fpc small{color:var(--nw-muted)}
html:root .fpc .row{color:var(--nw-muted)}
html:root .fpc .row b{color:var(--nw-accent-dark)}
html:root .fpc:hover h3{color:var(--nw-accent-dark)}
html:root .wt .h,html:root .wt .w{border-top:1px solid var(--nw-line)}
html:root .sv p{color:var(--nw-muted)}
html:root .sv .lm{color:var(--nw-accent-dark)}
html:root .fcta .mail{color:var(--nw-surface-2)}
@media (min-width:735px){html:root .wt .h{color:var(--nw-accent-dark)}}
@media (min-width:735px){html:root .wt .w:first-of-type{border-top:1px solid var(--nw-line)}}
html:root .sv:hover h3,html:root .sv:focus-visible h3,html:root .fpc:hover h3,html:root .fpc:focus-visible h3{color:var(--nw-accent-dark)}
html:root .adw .eb{color:var(--nw-accent-dark)}
html:root .adw h2{color:var(--nw-ink)}
html:root .adw .kp div{border-left:2px solid var(--nw-accent)}
html:root .adw .kp b{color:var(--nw-ink)}
html:root .cmp-pick .slot{background:var(--nw-page)}
html:root .cmp-r .v{color:var(--nw-ink)}
html:root .cmp-r .v .s{color:var(--nw-muted)}
html:root .cmp-r .v.win .n{color:var(--nw-accent-dark)}
html:root .cmp-r .ck{background:var(--nw-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
html:root .cmp-r .bar{background:var(--nw-surface-2)}
html:root .cmp-r .v.win .bar i{background:var(--nw-accent)}
html:root .cmp-g h3{color:var(--nw-ink)}
html:root .cmp-load{background:var(--nw-page)}
html:root .cmp-load label{color:var(--nw-muted)}
html:root .cmp-load .row input{border:1px solid var(--nw-line);color:var(--nw-ink)}
html:root .cmp-load .row span{color:var(--nw-ink)}
html:root .cmp-load small{color:var(--nw-muted)}
html:root .cmp-load p{color:var(--nw-muted)}
html:root .cmp-tg{border:1px solid var(--nw-line);color:var(--nw-accent-dark)}
html:root .cmp-tg:hover{border-color:var(--nw-accent)}
html:root .cmp-pick .slot .rg{color:var(--nw-accent-dark)}
html:root .why2 .eb{color:var(--nw-accent-dark)}
html:root .why2 .wi{background:var(--nw-accent)}
html:root .why2 h3{color:var(--nw-ink)}
html:root .why2 h3 small{color:var(--nw-muted)}
html:root .why2 .wc p{border-top:1px solid var(--nw-line);color:var(--nw-ink)}
html:root .why2 .wc p b{color:var(--nw-accent-dark)}
html:root .en .enbest{background:var(--nw-page)}
html:root .en .enbest .l{color:var(--nw-muted)}
html:root .en .enbest b{color:var(--nw-ink)}
html:root .en .enbest small{color:var(--nw-muted)}
html:root .nx{color:var(--nw-ink)}
html:root .nx .eb{color:var(--nw-accent-dark)}
html:root .nx .eb svg{color:var(--nw-accent-dark)}
html:root .nx h2{color:var(--nw-ink)}
html:root .nx label{color:var(--nw-muted)}
html:root .nx select,html:root .nx input[type=number]{border:1px solid var(--nw-line);background:var(--nw-page);color:var(--nw-ink)}
html:root .nx select:focus,html:root .nx input:focus{outline:2px solid var(--nw-accent)}
html:root .nx input[type=range]{accent-color:var(--nw-accent)}
html:root .nx a.lk{color:var(--nw-accent-dark)}
html:root .cmp-pick .slot small{color:var(--nw-muted)}
html:root .cmp-t{border-top:1px solid var(--nw-line)}
html:root .cmp-r .k{color:var(--nw-muted)}
html:root .cmp-r .best{color:var(--nw-accent-dark)}
html:root .en .kwv{color:var(--nw-ink)}
html:root .en .kwv small{color:var(--nw-muted)}
html:root .en .res{background:linear-gradient(135deg,var(--nw-ink) 0%,var(--nw-accent) 100%)}
html:root .en .res .lb{color:var(--nw-accent-dark)}
html:root .en .res .sub{color:var(--nw-surface-2)}
html:root .en .kp div{border-left:2px solid var(--nw-accent)}
html:root .en .kp span{color:var(--nw-surface-2)}
html:root .en .bars .bl{color:var(--nw-surface-2)}
html:root .en .bars .b i{background:var(--nw-accent)}
html:root .bp .tv small{color:var(--nw-muted)}
html:root .bp .st.ok{color:var(--nw-ink)}
html:root .bp .tl{background:var(--nw-surface-2)}
html:root .bp .tl .life{background:linear-gradient(90deg,var(--nw-accent),var(--nw-accent))}
html:root .bp .tl .rng{background:repeating-linear-gradient(135deg,var(--nw-accent) 0 6px,var(--nw-accent) 6px 12px)}
html:root .bp .ax{color:var(--nw-muted)}
html:root .bp .facts div{background:var(--nw-page)}
html:root .bp .facts span{color:var(--nw-muted)}
html:root .pgh h2{color:var(--ink,var(--nw-ink))}
html:root .pgl{color:var(--nw-accent-dark)}
html:root .side a.cat.on{color:var(--nw-accent-dark)}
html:root .tchips a{border:1px solid var(--nw-line);color:var(--nw-ink)}
html:root .tchips a:hover{border-color:var(--nw-accent);color:var(--nw-accent-dark)}
html:root .sp-hero{background:var(--nw-ink)}
html:root .sp-hero p{color:var(--nw-surface-2)}
html:root .sp-hero .hf{color:var(--nw-surface-2)}
html:root .sp-cyber li{background:var(--nw-surface-2)}
html:root .sp-sv.gr{background:linear-gradient(135deg,var(--nw-ink) 0%,var(--nw-accent) 100%)}
html:root .sp-cta{background:var(--nw-ink)}
html:root .sp-cta p{color:var(--nw-surface-2)}
html:root .idr-hero,html:root .idr-sec{border-bottom:1px solid var(--line,var(--nw-line))}
html:root .idr-hero h1{color:var(--nw-ink)}
html:root .idr-sec h2{color:var(--nw-ink)}
html:root .idr-sec .intro{color:var(--nw-ink)}
html:root .idr-call{border-left:4px solid var(--nw-accent);color:var(--nw-ink)}
html:root .idr-call b{color:var(--nw-ink)}
html:root .idr-list b{color:var(--nw-ink)}
html:root .idr-flow .n{background:var(--nw-ink)}
html:root .idr-flow li:nth-child(5) .n{background:var(--nw-accent)}
html:root .idr-flow .t{color:var(--nw-ink)}
html:root .idr-flow li::before,html:root .idr-flow li::after{background:var(--nw-line)}
html:root .idr-sec th{color:var(--nw-muted);border-bottom:1px solid var(--nw-line)}
html:root .idr-sec td{color:var(--nw-ink)}
@media (max-width:734px){html:root .idr-sec .tbl td[data-l]::before{color:var(--nw-muted)}}
html:root .bc a:hover{color:var(--nw-ink)}
html:root .kc:hover,html:root .kc:focus-visible{border-color:var(--nw-ink)}
html:root .kt i{background:var(--nw-ink)}
html:root .kb{background:var(--nw-ink)}
html:root .kc:hover .kb{background:var(--nw-ink)}
html:root .ubtn{background:var(--nw-ink)}
html:root .uc:hover .ubtn{background:var(--nw-ink)}
html:root .uc:hover h3{color:var(--nw-ink)}
html:root .uc:focus-visible{outline:2px solid var(--nw-ink)}
html:root .snav a:hover,html:root .snav a.on{color:var(--nw-ink)}
html:root .panel h3.sub{color:var(--nw-ink)}
html:root [fill="var(--nw-ink)" i]{fill:var(--nw-ink)}
html:root [fill="#0d2c4a" i]{fill:var(--nw-ink)}
html:root [fill="#13202d" i]{fill:var(--nw-ink)}
html:root [fill="#1840f5" i]{fill:var(--nw-ink)}
html:root [fill="#1d7a46" i]{fill:var(--nw-ink)}
html:root [fill="var(--nw-accent)" i]{fill:var(--nw-accent-dark)}
html:root [fill="var(--nw-accent)" i]{fill:var(--nw-ink)}
html:root [stroke="var(--nw-ink)" i]{stroke:var(--nw-ink)}
html:root [stroke="var(--nw-ink)" i]{stroke:var(--nw-ink)}
html:root [stroke="var(--nw-accent)" i]{stroke:var(--nw-accent-dark)}
html:root [style*="var(--nw-accent)" i]{color:var(--nw-accent-dark)!important}

/* <<< EKSKLUSIVT UDTRYK <<< */

/* ---------- Eksklusivt udtryk: shoppens farvevariabler i sitets palet (lyst tema; mørkt tema står ovenfor) ---------- */
html:root {
  --pg:var(--nw-page); --card:#ffffff; --ink:var(--nw-ink); --txt:var(--nw-ink-3); --mute:var(--nw-muted); --ln:var(--nw-line); --acc:var(--nw-ink); --acc-d:var(--nw-ink-3); --accs:var(--nw-surface-2);
  --bg:var(--nw-page); --surface:#ffffff; --fg:var(--nw-ink); --muted:var(--nw-muted); --line:var(--nw-line); --accent:var(--nw-ink); --accent-soft:var(--nw-surface-2);
  --ok:var(--nw-ink); --pass:var(--nw-accent); --tn:var(--nw-accent); --acb:var(--nw-muted);
  --ill-cab:var(--nw-surface-2); --ill-panel:#f7f4ee; --ill-blank:var(--nw-line);
}


/* ---------- Eksklusivt udtryk: typografi, flader og knapper (samme sprog som sitets sider) ---------- */
html:root :is(.hero h1, .band h2, .sec h2, .adw h2, .nx h2, .ovh h1, .uhd h1, .prod h1, .hd1 h1, header h1) { font-weight: 300; letter-spacing: -.02em; }
html:root :is(.hero h1) { font-size: 30px; line-height: 1.15; font-weight: 200; }
@media (min-width: 1015px) { html:root .hero h1 { font-size: 40px; } html:root :is(.band h2, .sec h2, .adw h2, .nx h2) { font-size: 28px; } }
html:root :is(.fpc h3, .map h2, .side h2, main .panel h2, h2) { font-weight: 500; }
html:root :is(.band .eb, .adw .eb, .why2 .eb, .nx .eb, .eb) { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
html:root :is(.band .eb, .adw .eb, .why2 .eb, .nx .eb) { display: flex; align-items: center; gap: 12px; }
html:root :is(.band .eb, .adw .eb, .why2 .eb)::before { content: ''; width: 34px; height: 1px; background: currentColor; flex: none; }
html:root .band .eb, html:root .hero .eb { color: var(--nw-accent); }
html:root :is(.hero, .band, .tiles, .usp, .pbrand, .fpc, .panel, .side, .en .res) { border-radius: 4px; }
html:root .hero { background: radial-gradient(120% 140% at 100% 0%, var(--nw-ink-2) 0%, var(--nw-ink) 55%, var(--nw-ink) 100%); }
html:root .band, html:root .en .res { background: radial-gradient(120% 140% at 100% 0%, var(--nw-ink-2) 0%, var(--nw-ink) 60%); }
html:root .band p { color: var(--nw-line-3); }
html:root .hero p { font-weight: 300; color: var(--nw-line-3); }
html:root .btnp { --bb: var(--nw-ink); --bh: var(--nw-ink-3); --fg: #ffffff; color: #fff; background: var(--bb); border-color: var(--bb); font-weight: 500; }
html:root :is(.band, .hero) .btnp { --bb: #ffffff; --bh: var(--nw-accent); --fg: var(--nw-ink); color: var(--nw-ink); }
html:root .tiles a, html:root .usp div { font-weight: 500; }
html:root .fpc small { font-weight: 500; letter-spacing: .2em; color: var(--nw-accent-dark); }
html:root .pbrand { font-weight: 700; letter-spacing: -.01em; }


/* Brødkrummen i shoppen som på sitets sider: tyndt hus i messing, dæmpet tekst, aktuel side i navy */
html body .bc-row .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-row .bc .home svg{display:none}
html body .bc-row .bc .home{width:22px;height:22px}
html body .bc-row .bc .home::before{content:'';display:block;width:22px;height:22px}
html body .bc-row .bc{font-size:13px;font-weight:300;letter-spacing:.02em}
html body .bc-row .bc a,html body .bc-row .bc span{color:var(--nw-muted)}
html body .bc-row .bc [aria-current="page"]{color:var(--nw-ink)}
html body .bc-row .bc-lang{gap:4px;font-size:11px;font-weight:500;letter-spacing:.16em}
html body .bc-row .bc-lang a{color:var(--nw-muted)}
html body .bc-row .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 .bch-bc .bch-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 .bch-bc .bch-home svg{display:none}
html body .bch-bc .bch-home{width:22px;height:22px}
html body .bch-bc .bch-home::before{content:'';display:block;width:22px;height:22px}
html body .bch-bc{font-size:13px;font-weight:300;letter-spacing:.02em}
html body .bch-bc a,html body .bch-bc span{color:var(--nw-muted)}
html body .bch-bc [aria-current="page"]{color:var(--nw-ink)}
html body .bch-bc-lang{gap:4px;font-size:11px;font-weight:500;letter-spacing:.16em}
html body .bch-bc-lang a{color:var(--nw-muted)}
html body .bch-bc-lang a[aria-current="true"]{background:transparent;color:var(--nw-ink);box-shadow:inset 0 -1px 0 var(--nw-accent);border-radius:0}


/* 840-breakpointet: indholdet følger headerens kant (logoet) */
@media (min-width:840px) and (max-width:1014px){html:root .in{width:840px}}

/* Link fra batteriernes produktsider til siden om test af UPS-batterier */
html body .bt-lnk { flex-basis: 100%; margin: 14px 0 0; font-size: 13px; }
html body .bt-lnk a { color: var(--nw-ink); text-decoration: underline; text-decoration-color: var(--nw-accent); text-underline-offset: 4px; }
html body .bt-lnk a::after { content: ' →'; }
html body .bt-lnk a:hover { color: var(--nw-accent-dark); }


/* StratusPower-siden: kildelinjen under afslutningsboksen er fjernet – afstanden fra boksen til footeren svarer nu til sitets andre sider (11/11-2026) */
html:root .sp:has(> .sp-cta:last-child) { padding-bottom: 49px; }

/* Skyderne får ingen ramme rundt om sig, når man trækker i dem */
html:root:root body input[type=range]:focus,html:root:root body input[type=range]:focus-visible{outline:none}

/* Statusmærket i batteriplanlæggeren: blåt i stedet for grønt */
html:root:root .bp .st.ok{background:#e6f1fe;color:var(--nw-ink-2)}
/* Mørkt tema: tekst i de mørke bånd (afsluttende kontaktboks) og energiberegnerens resultatboks var mørk på mørk; resultatboksen får navy-gradienten fra lyst tema */