/* NRG UI – shared interaction, motion and icon layer for all .dc.html pages.
   Layout stays in the inline styles of each page; this file only adds states,
   transitions and scroll animations. Everything degrades to the static page
   when the file or nrg-ui.js is missing. */

:root{
  --nrg-navy:#14252D;--nrg-navy-2:#1B313B;--nrg-light:#F5F6F7;--nrg-grey:#E6E9EB;
  --nrg-mint:#8EDBC3;--nrg-mint-2:#7CCFB4;--nrg-slate:#66777D;--nrg-line:#D3D8DB;
  --nrg-ease-out:cubic-bezier(.22,1,.36,1);
  --nrg-shadow-lift:0 20px 40px -24px rgba(20,37,45,.45);
  --nrg-hh:73px;
}
html{scroll-padding-top:calc(var(--nrg-hh) + 16px)}
main [id]{scroll-margin-top:0!important}

/* ---------- Icons ---------- */
.nrg-i{flex:none;display:inline-block;vertical-align:middle;overflow:visible}
.nrg-arrow{transition:transform .28s var(--nrg-ease-out)}

/* ---------- Buttons ---------- */
.nrg-btn{gap:10px;-webkit-tap-highlight-color:transparent;transition:background-color .18s,border-color .18s,color .18s,box-shadow .28s var(--nrg-ease-out),transform .28s var(--nrg-ease-out)}
.nrg-btn:active{transform:scale(.98);transition-duration:.08s}
.nrg-btn[disabled]{cursor:progress}
@media (hover:hover){
  .nrg-btn:not([disabled]):hover{transform:translateY(-1px)}
  .nrg-btn-primary:not([disabled]):hover{box-shadow:0 12px 24px -14px rgba(20,37,45,.55)}
  .nrg-btn:hover .nrg-arrow,.nrg-link:hover .nrg-arrow,.nrg-card:hover .nrg-arrow{transform:translateX(4px)}
  .nrg-btn:hover .nrg-arrow-down{transform:translateY(3px)}
  .nrg-btn:hover .nrg-arrow-left{transform:translateX(-4px)}
}

/* ---------- Text links: mint underline, navy line grows on hover ---------- */
.nrg-ul{padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--nrg-mint),var(--nrg-mint));background-size:0% 2px,100% 2px;background-position:0 100%,0 100%;background-repeat:no-repeat;transition:background-size .38s var(--nrg-ease-out)}
@media (hover:hover){.nrg-link:hover .nrg-ul,.nrg-card:hover .nrg-ul{background-size:100% 2px,100% 2px}}

/* ---------- Cards ---------- */
.nrg-card{transition:transform .32s var(--nrg-ease-out),box-shadow .32s var(--nrg-ease-out),border-color .2s,background-color .2s}
.nrg-stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.nrg-tile{transition:background-color .25s,color .25s}
@media (hover:hover){
  .nrg-card:hover{transform:translateY(-4px);box-shadow:var(--nrg-shadow-lift);border-color:#9AA6AA!important}
  .nrg-card:hover .nrg-tile{background-color:var(--nrg-navy)!important;color:var(--nrg-mint)!important}
  .nrg-card-dark:hover .nrg-tile{background-color:var(--nrg-mint)!important;color:var(--nrg-navy)!important}
}
.nrg-card:focus-within{box-shadow:var(--nrg-shadow-lift)}

/* ---------- Header ---------- */
.nrg-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:transparent;transition:background-color .3s}
.nrg-header{transition:box-shadow .3s}
html[data-nrg-scrolled] .nrg-header{background:transparent!important;box-shadow:0 12px 28px -24px rgba(20,37,45,.55)}
html[data-nrg-scrolled] .nrg-header::before{background-color:rgba(245,246,247,.9);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}
.nrg-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--nrg-mint);transform-origin:0 50%;transform:scaleX(var(--nrg-p,0));pointer-events:none}
.nrg-nav-a{transition:border-color .2s,color .2s}
#nrg-menu-btn>span{transition:transform .3s var(--nrg-ease-out),opacity .2s}
#nrg-menu-btn[aria-expanded="true"]>span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nrg-menu-btn[aria-expanded="true"]>span:nth-child(2){opacity:0;transform:scaleX(.2)}
#nrg-menu-btn[aria-expanded="true"]>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#nrg-mnav{animation:nrg-drop .32s var(--nrg-ease-out)}
#nrg-mnav nav>a,#nrg-mnav nav+div>*{animation:nrg-up .45s var(--nrg-ease-out) backwards}
#nrg-mnav nav>a:nth-child(2){animation-delay:.04s}#nrg-mnav nav>a:nth-child(3){animation-delay:.08s}
#nrg-mnav nav>a:nth-child(4){animation-delay:.12s}#nrg-mnav nav>a:nth-child(5){animation-delay:.16s}
#nrg-mnav nav+div>*{animation-delay:.2s}#nrg-mnav nav+div>*+*{animation-delay:.24s}

/* ---------- Dialog ---------- */
.nrg-modal{animation:nrg-fade .2s ease-out}
.nrg-dialog{animation:nrg-pop .34s var(--nrg-ease-out)}

/* ---------- Back to top ---------- */
.nrg-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1.5px solid rgba(245,246,247,.25);background:var(--nrg-navy);color:var(--nrg-light);cursor:pointer;box-shadow:0 12px 28px -14px rgba(20,37,45,.7);opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);transition:opacity .2s,transform .3s var(--nrg-ease-out),visibility 0s linear .3s,background-color .2s}
html[data-nrg-top] .nrg-top{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--nrg-ease-out),visibility 0s,background-color .2s}
.nrg-top svg{transition:transform .25s var(--nrg-ease-out)}
@media (hover:hover){.nrg-top:hover{background:var(--nrg-navy-2)}.nrg-top:hover svg{transform:translateY(-2px)}}

/* ---------- Section sub-navigation with scroll-spy ---------- */
.nrg-chip{transition:background-color .2s,color .2s,border-color .2s}
.nrg-chip[data-active]{background:var(--nrg-navy)!important;color:var(--nrg-light)!important}
@media (min-width:901px){
  .nrg-subnav{position:sticky;top:var(--nrg-hh);z-index:30;background:rgba(245,246,247,.92);-webkit-backdrop-filter:saturate(1.5) blur(10px);backdrop-filter:saturate(1.5) blur(10px)}
  html:has(.nrg-subnav){scroll-padding-top:calc(var(--nrg-hh) + 96px)}
}
.nrg-toc a{transition:padding-left .25s var(--nrg-ease-out),box-shadow .25s,color .2s}
.nrg-toc a[data-active]{padding-left:10px!important;box-shadow:inset 3px 0 0 var(--nrg-mint);font-weight:700}

/* ---------- FAQ accordion ---------- */
.nrg-faq-btn>span:first-child{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s}
.nrg-pm{transition:background-color .25s,transform .3s var(--nrg-ease-out)}
@media (hover:hover){
  .nrg-faq-btn:hover>span:first-child{text-decoration-color:var(--nrg-mint)}
  .nrg-faq-btn[aria-expanded="false"]:hover .nrg-pm{background-color:rgba(142,219,195,.35)!important}
}
.nrg-acc{transition:grid-template-rows .36s var(--nrg-ease-out),visibility .36s}
.nrg-acc>div>*{transition:opacity .28s ease .04s,transform .36s var(--nrg-ease-out)}
.nrg-acc[data-open="false"]>div>*{opacity:0;transform:translateY(-6px);transition-delay:0s}

/* ---------- Form fields and choice cards ---------- */
.nrg-field{transition:border-color .15s,box-shadow .2s}
.nrg-field:focus{border-color:var(--nrg-navy)!important}
@media (hover:hover){.nrg-field:hover:not(:focus):not([aria-invalid="true"]){border-color:var(--nrg-slate)!important}}
select.nrg-field{-webkit-appearance:none;appearance:none;padding-right:44px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314252D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:18px 18px!important;cursor:pointer}
.nrg-choice{transition:border-color .18s,background-color .18s,box-shadow .25s var(--nrg-ease-out),transform .25s var(--nrg-ease-out)}
.nrg-choice:has(input:focus-visible){outline:3px solid var(--nrg-navy);outline-offset:2px}
.nrg-choice:has(input:checked) .nrg-tile{background-color:var(--nrg-navy)!important;color:var(--nrg-mint)!important}
@media (hover:hover){
  .nrg-choice:hover{transform:translateY(-2px);box-shadow:0 14px 28px -22px rgba(20,37,45,.55)}
  .nrg-choice:hover:not(:has(input:checked)){border-color:var(--nrg-slate)!important}
}

/* ---------- Request flow (Montageanfrage) ---------- */
.nrg-step:not(:last-child)::after{content:"";flex:1 1 auto;min-width:12px;height:2px;margin-left:4px;border-radius:1px;background:var(--nrg-line);transition:background-color .4s}
.nrg-step[data-done="true"]::after{background:var(--nrg-navy)}
.nrg-step-badge{transition:background-color .3s,border-color .3s,color .3s}
.nrg-step-btn{transition:opacity .2s}
@media (hover:hover){.nrg-step-btn:hover>span:last-child{text-decoration:underline;text-decoration-color:var(--nrg-mint);text-decoration-thickness:2px;text-underline-offset:4px}}
.nrg-enter{animation:nrg-up .45s var(--nrg-ease-out) backwards}
.nrg-pop-in{animation:nrg-pop-in .3s var(--nrg-ease-out) backwards}
.nrg-spin{animation:nrg-spin .8s linear infinite;transform-origin:50% 50%}
.nrg-check-draw circle{stroke-dasharray:64;stroke-dashoffset:64;animation:nrg-draw .6s var(--nrg-ease-out) .15s forwards}
.nrg-check-draw path{stroke-dasharray:12;stroke-dashoffset:12;animation:nrg-draw .35s var(--nrg-ease-out) .6s forwards}

/* ---------- Scroll reveal (classes/attributes set by nrg-ui.js) ---------- */
html.nrg-motion [data-reveal]:not([data-reveal="img"]):not([data-in]),
html.nrg-motion [data-stagger]:not([data-in])>*{opacity:0}
html.nrg-motion [data-reveal][data-in]:not([data-reveal="img"]){animation:nrg-up .7s var(--nrg-ease-out) backwards;animation-delay:calc(var(--nrg-d,0) * 90ms)}
html.nrg-motion [data-stagger][data-in]>*{animation:nrg-up .6s var(--nrg-ease-out) backwards;animation-delay:calc(var(--nrg-d,0) * 90ms + var(--nrg-c,0) * 60ms)}
[data-stagger]>:nth-child(2){--nrg-c:1}[data-stagger]>:nth-child(3){--nrg-c:2}[data-stagger]>:nth-child(4){--nrg-c:3}
[data-stagger]>:nth-child(5){--nrg-c:4}[data-stagger]>:nth-child(6){--nrg-c:5}[data-stagger]>:nth-child(7){--nrg-c:6}
[data-stagger]>:nth-child(8){--nrg-c:7}[data-stagger]>:nth-child(9){--nrg-c:8}[data-stagger]>:nth-child(n+10){--nrg-c:9}
html.nrg-motion [data-reveal="img"][data-in] figure>div:first-child,
html.nrg-motion figure[data-reveal="img"][data-in]>div:first-child{animation:nrg-zoom 1.4s var(--nrg-ease-out) backwards}
.nrg-line,.nrg-bar,.nrg-draw-x{transform-origin:0 50%}
.nrg-draw-y{transform-origin:50% 0}
html.nrg-motion [data-in] .nrg-line{animation:nrg-grow-x .8s var(--nrg-ease-out) .2s backwards}
html.nrg-motion [data-in] .nrg-bar{animation:nrg-grow-x .8s var(--nrg-ease-out) backwards;animation-delay:inherit}
html.nrg-motion [data-in] .nrg-draw-x{animation:nrg-grow-x 1s var(--nrg-ease-out) .35s backwards}
html.nrg-motion [data-in] .nrg-draw-y{animation:nrg-grow-y 1s var(--nrg-ease-out) .35s backwards}

@keyframes nrg-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes nrg-zoom{from{transform:scale(1.06)}to{transform:none}}
@keyframes nrg-grow-x{from{transform:scaleX(0)}}
@keyframes nrg-grow-y{from{transform:scaleY(0)}}
@keyframes nrg-fade{from{opacity:0}}
@keyframes nrg-pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes nrg-pop-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes nrg-drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes nrg-spin{to{transform:rotate(360deg)}}
@keyframes nrg-draw{to{stroke-dashoffset:0}}

/* Design canvas, print and reduced motion always show the final state. */
html[data-dc-canvas] [data-reveal],html[data-dc-canvas] [data-stagger]>*{opacity:1!important;animation:none!important}
@media print{
  html.nrg-motion [data-reveal],html.nrg-motion [data-stagger]>*{opacity:1!important;animation:none!important}
  .nrg-top,.nrg-progress{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  html.nrg-motion [data-reveal],html.nrg-motion [data-stagger]>*{opacity:1!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .nrg-check-draw *{stroke-dashoffset:0!important}
}