@charset "utf-8";@font-face{font-family:'OpenSans';font-style:normal;font-weight:400;font-display:swap;src:local('Open Sans'),url('./../assets/fonts/OpenSans/static/OpenSans/OpenSans-Regular.ttf') format('truetype')}:root{--contentWidth:calc(100% - 22rem);--contentMaxWidth:140rem;--blurringFilter:blur(5px) contrast(.3);--blurringBgColor:hsla(0,0%,0%,.05);--blurringBorder:1px solid #555;--accentColor01:#70CAF0;--accentColor02:#BEE4F9;--accentColor03:#22ADE9;--mobileControlsHeight:5rem;--fa:'Font Awesome 6 Free';accent-color:var(--accentColor01)}@property --color-1{syntax:'<color>';inherits:true;initial-value:#FFF}@property --color-2{syntax:'<color>';inherits:true;initial-value:#000}*,*::before,*::after{background:none;margin:0;padding:0;border:none;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{font-size:62.5%}html,html[data-theme="light"]{--fontColorMain:#EEE}html[data-theme="dark"]{--fontColorMain:#DDD}html,body{width:100%;height:100svh;overscroll-behavior:contain;position:relative;top:0;left:0;overflow:hidden}body{font:normal normal 400 1.6rem/normal OpenSans,sans-serif;color:var(--fontColorMain);background-image:url('../assets/images/konfigurator/bg-desktop_uhd.webp');background-attachment:fixed;background-position:center center;background-repeat:no-repeat;background-size:cover;@media screen and (min-width:801px) and (max-width:1920px){background-image:url('../assets/images/konfigurator/bg-desktop_fhd.webp')}}a{text-decoration:none;&:not(.button)[target="_blank"]::after{content:'\f08e';font-family:var(--fa);font-weight:900;font-size:.9em;margin-left:.5rem}}ul{list-style:none}hr{width:100%;height:1px;display:block}input{box-shadow:none;outline:none}input::-moz-focus-inner{border:0}.button,button,select{font:inherit;color:inherit;cursor:pointer}select option{color:#000}.button.disabled,button:disabled,select:disabled{cursor:initial}code{color:inherit;display:block}code pre{white-space:pre-wrap}mark{color:inherit;background:rgba(255,236,128,.4)}.mobile{display:none}.small{font-size:.9em}.error{outline:2px solid #A00;box-shadow:0 0 1rem .2rem #A00}.success{outline:2px solid #0A0;box-shadow:0 0 1rem .2rem #0A0}p.feedback{margin:1rem;padding:1rem}p.feedback.error{color:#A00}p.feedback.success{color:#0A0}.flex{display:flex;justify-content:space-between;flex-wrap:nowrap;gap:4rem}.flex:not(.navbuttons)>*{flex:1 1 auto}.flex.w50>*{flex:0 1 50%}.flex.w100>*{flex:0 0 100%}div.flex.evenly{gap:1rem;&>*{flex:1 0 0}&>label{display:block}& img{width:90%;position:relative;top:0;left:5%;display:block}& span{font-size:1.4rem}}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4rem;@media (max-width:100rem){grid-template-columns:repeat(3,1fr)}@media (max-width:80rem){grid-template-columns:repeat(2,1fr)}}.center{text-align:center}.title{margin-top:3rem}button.center,.button.center{margin:0 auto;display:block}section div:is(.mainstep,.substep) button,section div.card div.navbuttons button,section div.navbuttons a.button{display:block;margin:2rem auto;padding:1rem;border:2px solid var(--accentColor03);transition:all 200ms linear;&:hover,&:focus-visible{background:var(--accentColor02);color:#000}}section div.card div.navbuttons{margin:4rem 0;&.flex{display:flex;justify-content:center;flex-wrap:nowrap;gap:4rem}&.flex button,&.flex a.button{margin:0}&:not(.flex) button,&:not(.flex) a.button{width:100%;display:block}}section div#wrapperinfos.card *:is(button,a.button){--color-1:var(--accentColor02);--color-2:var(--accentColor03);--speed:200ms;width:fit-content;color:#FFF;background-image:linear-gradient(to bottom,var(--color-1) 0%,var(--color-2) 100%);display:block;padding:1.4rem 2.4rem;margin:1rem 0;box-shadow:0 3px 3px 0 rgba(0,0,0,.6),inset 0 0 0 0 rgba(0,0,0,0);text-shadow:0 -1px 0 #999;border-radius:1.4rem;transition:--color-1 var(--speed) var(--speed) linear,--color-2 var(--speed) linear,text-shadow calc(var(--speed) * 2) linear,box-shadow calc(var(--speed) * 2) linear}section div#wrapperinfos.card *:is(button:hover,button:focus-visible,a.button:hover,a.button:focus-visible){--color-1:var(--accentColor03);--color-2:var(--accentColor02);text-shadow:0 1px 0 #999;box-shadow:0 0 0 0 rgba(0,0,0,0),inset 0 3px 3px 0 rgba(0,0,0,.6)}section div#wrapperinfos.card *:is(button:disabled){background:#999}section fieldset{padding:1rem;margin:1rem 0;border:2px solid #DDD}h3{--leftSpace:4rem;--overSize:10rem;font-size:4rem;font-weight:bold;text-align:left;text-shadow:-1px 0 #FFF,0 1px #FFF,1px 0 #FFF,0 -1px #FFF;display:inline-block;position:absolute;top:7rem;left:var(--leftSpace);&::after{content:'';width:calc(100% + var(--overSize));height:1px;background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%);position:absolute;left:-1rem;bottom:-5px}@media screen and (min-width:1550px){left:0}}h3{color:var(--accentColor01);text-shadow:-2px -2px 0 rgba(255,255,255,.6),2px 2px 0 rgba(0,0,0,.4);&::after{height:2px;background:linear-gradient(to right,rgba(112,202,240,1) 0%,rgba(112,202,240,1) calc(100% + var(--leftSpace) - var(--overSize)),rgba(112,202,240,0) 100%)}}header{width:100%;height:5rem;color:#000;position:absolute;top:0;left:0;z-index:2;transition:all 250ms linear;&::before{content:'';width:100%;height:100%;position:absolute;inset:0;opacity:0;z-index:-1;background:var(--blurringBgColor);border-bottom:var(--blurringBorder);backdrop-filter:var(--blurringFilter);transition:all 250ms linear}&:not(:has(div#controls:focus-within)):focus-within{--lineColor:#EEE;color:#EEE}&:not(:has(div#controls:focus-within)):focus-within::before{opacity:1}}@media (hover:hover) and (pointer:fine){header:not(:has(div#controls:hover)):hover{--lineColor:#EEE;color:#EEE}header:not(:has(div#controls:hover)):hover::before{opacity:1}}header div.wrapper{width:var(--contentWidth);max-width:var(--contentMaxWidth);height:inherit;position:relative;top:0;left:0;margin:0 auto}header figure{height:inherit;display:flex;align-items:center}header figure a{height:80%;display:block}header img{height:100%}nav{font-size:1.4rem;height:inherit}nav ul{height:inherit;display:flex;justify-content:flex-end}nav ul li{height:inherit;&:has(label){padding-left:2rem}}nav ul li>*{height:inherit}nav ul li a{color:inherit;display:flex;align-items:center;flex-wrap:nowrap;padding:0 2rem;transition:all 200ms linear;&:hover,&:focus-visible{color:var(--accentColor01);background:rgba(0,0,0,.2)}}nav ul li label{position:relative;top:0;left:0}div#controls{--ctrlWidth:6rem;width:var(--ctrlWidth);border-radius:var(--ctrlWidth);padding:1rem;position:absolute;top:50vh;left:calc((var(--ctrlWidth) + 2rem) * -1);translate:0 -50%;z-index:2;&::before{content:'';width:100%;height:100%;background:var(--blurringBgColor);display:block;position:absolute;inset:0;opacity:0;border:var(--blurringBorder);border-radius:var(--ctrlWidth);backdrop-filter:var(--blurringFilter);transition:all 250ms linear}&:hover::before{opacity:1}@media screen and (min-width:1550px){left:0}}div#controls button{font-size:4rem;width:100%;aspect-ratio:1;color:var(--accentColor03);background:var(--accentColor02);display:flex;justify-content:center;align-items:center;position:relative;top:0;left:0;border-radius:51%;&:last-of-type{margin-top:1rem}&:disabled{color:#999;background:#CCC}}div#controls div.breadcrumbs{width:1.2rem;position:relative;top:0;left:50%;translate:-50%}div#controls div.breadcrumbs div.bc-dot{width:100%;aspect-ratio:1;margin:1.2rem 0;position:relative;top:0;left:0;cursor:pointer;transition:all 200ms ease;&::before{content:'';width:100%;height:100%;background:#FFF;border-radius:1rem;display:block;box-shadow:inset 1px 0 0 0 rgba(0,0,0,.6)}&:hover{scale:2}&.active::before{background:var(--accentColor03);cursor:initial}&.disabled{cursor:initial}&.disabled::before{background:#CCC}}div#controls div.breadcrumbs div.bc-dot span{color:#000;background:#FFF;padding:.6rem 1rem;position:absolute;top:50%;left:1rem;translate:0 -50%;border-radius:1rem;pointer-events:none;transform-origin:left;transform:scale(.75);opacity:0;visibility:hidden;transition:none 200ms ease;transition-property:left,transform,opacity,visibility;&::before{content:'';width:1rem;height:2px;background:inherit;display:block;position:absolute;top:50%;right:100%;translate:0 -50%;transition:width 200ms ease}}div#controls div.breadcrumbs div.bc-dot:hover span{left:1.8rem;transform:scale(.5);opacity:1;visibility:visible;&::before{width:3rem}}div#controls div.breadcrumbs div.bc-dot.active span{color:#FFF;background:var(--accentColor03)}div#controls div.breadcrumbs div.bc-dot.disabled span{background:#CCC}main{width:100%;height:100%;position:relative;top:0;left:0}main form{width:100%;height:100%;overflow:hidden;perspective:100rem;transform-style:preserve-3d}main form section{width:100%;height:100%;background-attachment:fixed;background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;left:0;overflow:auto;overflow-x:hidden;translate:0 0 -80rem;transition:all 500ms ease;&::after{content:'';display:block;position:absolute;inset:0;background:linear-gradient(125deg,rgba(150,150,150,1) 0%,rgba(150,150,150,1) 35%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%,rgba(150,150,150,1) 65%,rgba(150,150,150,1) 100%);opacity:.6;visibility:visible;transition:all 500ms ease;filter:blur(3px)}&.active::after{opacity:0;visibility:hidden;filter:blur(0)}}section div.wrapper{width:100%;max-width:var(--contentMaxWidth);height:100%;position:relative;top:0;left:0;margin:0 auto;padding:17rem 0 4rem 0}section div.wrapper>div.flex{width:var(--contentWidth);max-width:var(--contentMaxWidth);min-height:100%;margin:0 auto 4rem auto}section div.wrapper figure.themepicture{text-align:center;align-content:center;padding:2rem;z-index:-1}main form section[data-name="solarmodule"] figure.themepicture img{width:70%;margin-right:-10rem}main form section[data-name="powerstorage"] figure.themepicture img{width:60%;margin-right:-10rem}main form section[data-name="inverter"] figure.themepicture img{width:70%;margin-right:-10rem}main form section[data-name="substructure"] figure.themepicture img{width:100%;margin-right:-4rem}main form section[data-name="accessories"] figure.themepicture img{width:100%;margin-right:-4rem}section div.wrapper a:not([class]){color:var(--accentColor01);&:hover,&:focus-visible{border-bottom:1px dashed var(--accentColor01)}}section div.card{width:100%;padding:1rem;background:var(--blurringBgColor);border:var(--blurringBorder);backdrop-filter:var(--blurringFilter);position:relative;top:0;left:0}section div.card:has(div.welcome){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}section div.card div.welcome{width:100%;max-width:80rem;& img{width:100%}& h1{text-align:center;margin-bottom:3rem}& p{text-align:center}& p + p{margin-top:2rem}& + div.navbuttons{margin:0}}section div.card *:where(div.mainstep,div.substep){width:100%;max-width:45rem;margin:0 auto}section div.substep + div.substep{margin-top:2rem}section label:not(.toggle-wrapper,:has(textarea),:has(input[type="radio"]),:has(input[type="checkbox"])){font:inherit;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin:2rem 0;position:relative;top:0;left:0}section label:has(select){padding:1rem 1.4rem;border:2px dashed transparent}section label select{width:100%;display:block;padding:1rem}section div:is(.mainstep,.substep) label:not(.toggle-wrapper) div.input-wrapper{position:relative;top:0;left:0}section div:is(.mainstep,.substep) label:not(.toggle-wrapper,.slider)>input,section div:is(.mainstep,.substep) label:not(.toggle-wrapper) div.input-wrapper{flex:1 1 auto;max-width:calc(100% - 13rem);color:#EEE}section label:not(.toggle-wrapper) input{font:inherit;color:inherit;border-bottom:2px solid #FFF;padding:.6rem 1rem;&:focus{border-bottom-color:var(--accentColor03)}}section div.card label:not(.toggle-wrapper) div.input-wrapper input{width:100%;display:block}section div.card label span.unit{font-size:.9em;position:absolute;top:50%;right:1rem;translate:0 -50%}section div:is(.mainstep,.substep) label input[type="radio"],section div:is(.mainstep,.substep) label input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;z-index:-1}section div:is(.mainstep,.substep) label:has(input[type="radio"],input[type="checkbox"]){padding:1rem 1.4rem;border:2px solid transparent;&:has(input:hover){border-style:dashed;border-color:var(--accentColor03)}&:has(input:checked){background:var(--accentColor02);color:#000;border-style:solid;border-color:var(--accentColor03)}&:has(input:focus-visible){border-style:dashed;border-color:var(--accentColor03)}&:has(input:disabled){display:none}}section div:is(.mainstep,.substep) label:has(input[type="checkbox"][name="monitoring"]){margin-top:2rem}section div:is(.mainstep,.substep) label:has(select:hover,select:focus-visible){border-color:var(--accentColor03)}section:is([data-name="solarmodule"],[data-name="substructure"]) div.substep label span.amountbuttons{position:absolute;top:50%;right:.5rem;translate:0 -50%;display:flex;flex-wrap:nowrap;gap:1rem}section:is([data-name="solarmodule"],[data-name="substructure"]) div.substep label span.amountbuttons button{font-size:1.8rem;margin:0;padding:0 .5rem;border-color:transparent;border-style:dashed;&:hover{background:none;color:var(--accentColor01)}&:focus-visible{color:inherit;background:none;border-color:var(--accentColor03)}}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.manufacturer{display:flex;flex-wrap:nowrap;gap:2rem}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.manufacturer label{text-align:center;margin:0 auto}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.manufacturer label span{display:block}div#introscreen{width:100%;height:100%;font-family:system-ui,sans-serif;font-size:1.8rem;color:#000;background:#FFF;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3;opacity:1;transition:opacity 500ms linear;& img{width:30rem;margin-bottom:5rem}& div.loading{margin-bottom:2rem}& p{text-align:center}}div.loading{height:5rem;aspect-ratio:1;border-radius:51%;border:3px solid var(--accentColor02);border-top-color:var(--accentColor03);&.spin{animation:spin 1s linear infinite}}div.card div.loading{position:relative;top:50%;left:50%;translate:-50% -50%}div.card div.buttonLoadingWrapper div.loading{height:3rem;position:initial;top:initial;left:initial;translate:initial}@keyframes spin{0%{rotate:0deg}100%{rotate:360deg}}div#planningwrapper label.toggle-wrapper{font-weight:bold;outline:4px solid #FF0;padding:2rem!important;gap:2rem!important}label.toggle-wrapper{--toggleHeight:2rem;--toggleGap:.3rem;--toggleColor:radial-gradient(farthest-corner circle at 50% 50%,#DDD 25% 25%,#999 30% 30%,#999 35% 35%,#DDD 45% 45%,#FFF 60% 60%);display:flex;align-items:center;flex-wrap:nowrap;gap:1rem;& input{position:absolute;opacity:0;pointer-events:none;z-index:-1}&:has(input:checked) div.toggle-element{background:#3C3}&:has(input:checked) div.toggle-element::before{left:calc(100% - (var(--toggleHeight) - (var(--toggleGap) * 2)))}&:has(input:hover,input:focus-visible) div.toggle-element::before{background:radial-gradient(farthest-corner circle at 50% 50%,#00F9FF 25% 25%,#00C0FF 30% 30%,#00C0FF 35% 35%,#00A2FF 45% 45%,#FFF 60% 60%)}&:has(input:disabled) div.toggle-element::before{background:radial-gradient(farthest-corner circle at 50% 50%,#fffeaa 25% 25%,#eeeb3b 30% 30%,#eeeb3b 35% 35%,#aaa81d 45% 45%,#FFF 60% 60%)}& div.toggle-element{width:calc(var(--toggleHeight) * 1.8);height:var(--toggleHeight);background:#555;padding:var(--toggleGap);border-radius:var(--toggleHeight);box-shadow:inset 1px 0 2px 0 rgba(0,0,0,.2);transition:all 200ms linear;overflow:hidden;flex-shrink:0;&::before{content:'';height:100%;aspect-ratio:1;background:radial-gradient(farthest-corner circle at 50% 50%,#DDD 25% 25%,#999 30% 30%,#999 35% 35%,#DDD 45% 45%,#FFF 60% 60%);border-radius:51%;box-shadow:1px 0 3px 0 rgba(0,0,0,.6);display:block;position:relative;top:0;left:0;transition:left 200ms ease}}}div.tutorial-tooltip{--gap:3rem;--arrowSize:2rem;--borderWidth:4px;--borderColor:var(--accentColor02);--bgColor:var(--accentColor01);width:25rem;font-size:1.4rem;font-weight:bold;color:#000;position:absolute;background:var(--bgColor);border:var(--borderWidth) solid var(--borderColor);padding:1rem 1.4rem;border-radius:2rem;pointer-events:none;transition:all 500ms linear;opacity:0;&::before,&::after{content:'';width:0;height:0;border:solid transparent;position:absolute}&::before{border-width:var(--arrowSize)}&::after{border-width:calc(var(--arrowSize) - (var(--borderWidth) + 2px))}}div#controls div.tutorial-tooltip{top:50%;left:calc(var(--ctrlWidth) + var(--gap));translate:0 -50%;&::before,&::after{top:50%;right:100%}&::before{border-right-color:var(--borderColor);margin-top:calc(var(--arrowSize) * -1)}&::after{border-right-color:var(--bgColor);margin-top:calc((var(--arrowSize) - (var(--borderWidth) + 2px)) * -1)}}label:has(input#extendAnimation) div.tutorial-tooltip{top:calc(100% + var(--gap));right:0;&::before,&::after{bottom:100%;left:50%}&::before{border-bottom-color:var(--borderColor);margin-left:calc(var(--arrowSize) * -1)}&::after{border-bottom-color:var(--bgColor);margin-left:calc((var(--arrowSize) - (var(--borderWidth) + 2px)) * -1)}}button#menu div.tutorial-tooltip{top:calc(100% + var(--gap));right:0;&::before,&::after{bottom:100%;left:calc(100% - 2rem)}&::before{border-bottom-color:var(--borderColor);margin-left:calc(var(--arrowSize) * -1)}&::after{border-bottom-color:var(--bgColor);margin-left:calc((var(--arrowSize) - (var(--borderWidth) + 2px)) * -1)}}div#tutorial button{font-weight:bold;font-size:1.4rem;color:inherit;padding:1.4rem;background:var(--accentColor01);position:absolute;bottom:10%;left:50%;translate:-50% 0;border:4px solid var(--accentColor02);border-radius:2rem}label:where(:has(input[type="checkbox"]:not([disabled])),:has(input[type="radio"]:not([disabled]))){cursor:pointer}section:is([data-name="powerstorage"],[data-name="inverter"]) div.substep label:has(input[name="Modulleistung"]) button{margin:1rem 0 1rem auto}section[data-name="powerstorage"] div.substep label.slider{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:2rem;margin:1rem 0}section[data-name="powerstorage"] div.substep label.slider input{flex:1 1 100%;padding:0;margin:0}section[data-name="powerstorage"] div.substep label.slider span{flex:0 0 10rem;text-align:right;display:initial}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.invertercombinations{margin:1rem 0 2rem 0}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.invertercombinations div.invcombs{display:flex;flex-wrap:nowrap;gap:2rem}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.invertercombinations label{margin:1rem auto 0 auto}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.invertercombinations label:has(input:checked){background:var(--accentColor02);border-color:var(--accentColor03)}section:where([data-name="powerstorage"],[data-name="inverter"]) div.substep div.invertercombinations label.error{border-color:#A00;box-shadow:0 0 1rem .2rem #A00}section div.mainstep div.skip-hint p{padding:2rem 0}section:is([data-name="substructure"],[data-name="accessories"]) div.substep label:not(:has(input[type="text"])){display:block}section[data-name="substructure"] div.substep[data-rooftop="normalroof"] p{padding-bottom:1rem}section[data-name="result"] div.cart{container:resultSection / inline-size}section[data-name="result"] div#wrapperresult a{&:hover,&:focus-visible{border:none}&::after{display:none}}section[data-name="result"] div.section{display:flex;flex-wrap:wrap;gap:4rem 2rem;margin-top:4rem;container:resultArticle / inline-size;&:nth-child(1 of .section){margin-top:0}}section[data-name="result"] div.section div.article-element{flex:1 1 40%;display:flex;flex-wrap:nowrap;gap:2rem;border:2px dashed transparent;padding:1rem;&:has(a:focus-visible){border-color:var(--accentColor03)}}section[data-name="result"] div.section div.article-element a{color:inherit}section[data-name="result"] div.section div.article-element figure{flex:0 0 12rem;height:15rem;margin:0}section[data-name="result"] div.section div.article-element figure img{width:100%;height:100%!important;object-fit:contain}section[data-name="result"] div.section div.article-element figure a{width:100%;height:100%;text-align:center;display:block}section[data-name="result"] div.section div.article-element p{flex:1 1 100%}section[data-name="result"] div.section div.article-element p span{display:block}section[data-name="result"] div.section div.article-element p span.name{font-weight:bold}section[data-name="result"] div.section div.article-element p span.number{margin-bottom:.6rem}section[data-name="result"] div.section div.article-element p span.price{margin-top:.6rem}section[data-name="result"] div.section div.article-element p span:is(.number,.tax){font-size:.9em}@container resultArticle (width < 73rem){section[data-name="result"] div.section div.article-element{display:block}section[data-name="result"] div.section div.article-element figure{height:12rem;margin-bottom:1rem}}@container resultSection (width < 42rem){section[data-name="result"] div.section{display:block}section[data-name="result"] div.section div.article-element figure{height:auto;margin-bottom:1rem}section[data-name="result"] div.section div.article-element figure img{width:80%}section[data-name="result"] div.section div.article-element + div.article-element{margin-top:2rem}}section[data-name="result"] div#wrapperinfos p.small{margin-top:.8rem}section[data-name="result"] div#wrapperinfos p:nth-child(1 of .small){padding-top:1rem}section[data-name="result"] div#planningwrapper{position:relative;top:0;left:0;padding-top:2rem;margin-top:2rem;&::before,&::after{content:'';width:100%;height:1px;display:block;position:absolute;left:0}&::before{background:rgba(0,0,0,.2);top:-2px}&::after{background:rgba(255,255,255,.4);top:-1px}}section[data-name="result"] div#planningwrapper div#planningform{display:none}section[data-name="result"] div#planningwrapper label input#planningtoggle{position:absolute;opacity:0;pointer-events:none;z-index:-1}section[data-name="result"] div#planningwrapper>label:has(input#planningtoggle){justify-content:space-between;margin:0;padding:.6rem .4rem;transition:all 200ms linear;&:hover,&:focus{background:rgba(255,255,255,.4)}}section[data-name="result"] div#planningwrapper>label:has(input#planningtoggle:checked) + div#planningform{display:block}section[data-name="result"] div#planningwrapper label:has(input[type="file"]){--fontcolor:rgba(255,255,255,.6);--dragmarkerBg:rgb(130,255,130);--mouseoverBg:var(--accentColor01);width:100%;height:20rem;color:var(--fontcolor);border:2px dashed var(--fontcolor);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;cursor:pointer;transition:all 100ms linear;&.dragmarker{background:var(--dragmarkerBg)}&:has(input:hover,input:focus-visible){background:var(--mouseoverBg)}&.mouseover{background:var(--mouseoverBg)}& *{pointer-events:none}& span{font-size:2rem;font-weight:bold}& input[type="file"]{position:absolute;opacity:0;pointer-events:none;z-index:-1}&::before{content:'\f302';font-size:8rem;font-family:var(--fa);font-weight:900}}section[data-name="result"] div#planningform label textarea{font:inherit;width:100%;height:20rem;display:block;border-bottom:2px solid #FFF;padding:.6rem 1rem;resize:none;&:focus{border-bottom-color:var(--accentColor03)}}section[data-name="result"] div#planningform label:has(textarea){display:block;margin-top:3rem}section[data-name="result"] div#planningform label:has(input[type="checkbox"]){font-size:1.4rem;display:block;margin:3rem 0 2rem 0;& input{position:absolute;opacity:0;pointer-events:none;z-index:-1}&::before{content:'';font-size:1.6rem;color:var(--accentColor03);width:2.2rem;height:2.2rem;margin-right:1rem;display:flex;justify-content:center;align-items:center;border:2px solid #FFF;float:left}}section div#planningform label:has(input[type="checkbox"]:checked)::before{content:"\2713";border-color:var(--accentColor03)}section[data-name="result"] div#planningform label:has(input[type="checkbox"]:is(:hover,:focus-visible))::before{background:var(--accentColor02)}section[data-name="result"] div#planningwrapper ul#attachments{list-style:disc inside;&:empty{display:none}}section[data-name="result"] div#planningwrapper ul#attachments li{font-size:1.4rem;position:relative;top:0;left:0}section[data-name="result"] div#planningwrapper ul#attachments li i{font-size:1.6rem;width:2rem;position:absolute;top:50%;right:0;translate:0 -50%;display:flex;justify-content:center;align-items:center;cursor:pointer}section[data-name="result"] div#planningform label:not(.toggle-wrapper,:has(textarea),:has(input[type="radio"]),:has(input[type="checkbox"])) input{flex:1 1 60%;max-width:calc(100% - 15rem);gap:1rem}section[data-name="result"] div.buttonLoadingWrapper{position:relative;top:0;left:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:2rem}@media screen and (max-width:800px),screen and (max-device-aspect-ratio:10/10){body{background-image:url('../assets/images/konfigurator/bg-mobile.webp')}.desktop{display:none}.mobile{display:block}div.flex.evenly{display:block;& img{width:40%;left:30%}& span{font-size:1.4rem;display:block;text-align:center}}h3{--leftSpace:2rem;--overSize:5rem;font-size:2.6rem}header{--lineColor:#555}header div.wrapper{width:100%;max-width:none;margin:0;padding:0 1rem;align-items:center}header div.wrapper figure{height:80%}button#menu{--lineWidth:5rem;--lineSpace:1rem;flex:0 0 var(--lineWidth);width:var(--lineWidth);height:100%;padding:0 1rem;display:flex;align-items:center;cursor:pointer;position:relative;top:0;left:0;& div.line{width:100%;height:3px;background:var(--lineColor);position:relative;top:0;left:0;transition:background 0s 250ms ease;&::before,&::after{content:'';width:100%;height:100%;background:var(--lineColor);display:block;position:absolute;left:0;transition:all 250ms ease;transition-duration:250ms,250ms,0s;transition-delay:250ms,0s,250ms}&::before{bottom:var(--lineSpace);transition-property:bottom,rotate,background}&::after{top:var(--lineSpace);transition-property:top,rotate,background}}&.close div.line{background:transparent;&::before,&::after{transition-delay:0s,250ms}&::before{bottom:0;rotate:45deg}&::after{top:0;rotate:-45deg}}}div#tutorial button{bottom:50%;translate:-50% 50%;border-radius:1rem}div.tutorial-tooltip{--gap:2rem;--arrowSize:1.4rem;width:20rem;border-radius:1rem}div#controls div.tutorial-tooltip{top:auto;bottom:calc(100% + var(--gap));left:50%;translate:-50% 0;&::before,&::after{top:100%;left:50%;margin-top:0;border-right-color:transparent}&::before{border-top-color:var(--borderColor);margin-left:calc(var(--arrowSize) * -1)}&::after{border-top-color:var(--bgColor);margin-left:calc((var(--arrowSize) - (var(--borderWidth) + 2px)) * -1)}}header div.wrapper nav{width:60%;height:calc(100vh - 5rem - var(--mobileControlsHeight));background:var(--blurringBgColor);display:block;position:absolute;top:5rem;left:calc(100% + 1rem);backdrop-filter:var(--blurringFilter);transition:all 500ms ease;&.show{left:100%;translate:-100% 0}}header div.wrapper nav ul{height:auto;display:block}header div.wrapper nav ul li{&:not(:first-of-type){border-top:1px solid rgba(255,255,255,.4)}&:not(:last-of-type){border-bottom:1px solid rgba(0,0,0,.2)}}header div.wrapper nav ul li a{padding:2rem}header div.wrapper nav ul li label.toggle-wrapper{padding:2rem 0}div#controls{width:100%;height:var(--mobileControlsHeight);top:100svh;left:0;display:flex;flex-wrap:nowrap;padding:0;border:none;border-radius:0;translate:0 -100%;&::before{display:none}}div#controls button{flex:0 0 50%;width:auto;height:100%;border-radius:0;&:last-of-type{margin:0}&:first-of-type i{margin-top:.5rem}&:last-of-type i{margin-top:-.5rem}}div#controls div.breadcrumbs{display:none}div#introscreen{& img{width:60%;margin-bottom:5rem}}section div.wrapper{padding:13rem 1rem 0 1rem}section div.wrapper>div.flex{width:100%;max-width:none;display:block;margin-bottom:0;padding-bottom:calc(var(--mobileControlsHeight) + 2rem)}section div.wrapper figure.themepicture{text-align:center;align-content:center;padding:0;position:absolute;top:50%;right:0;translate:50% -50%}main form section[data-name] figure.themepicture img{width:70%;margin-top:5rem;margin-right:2rem}main form section[data-name="substructure"] figure.themepicture img{width:90%;margin-top:20rem;margin-right:10rem}main form section[data-name="accessories"] figure.themepicture img{width:90%;margin-top:20rem;margin-right:10rem}div.card div.loading{top:0;translate:-50% 0;margin:3rem 0}section[data-name="result"] div#planningwrapper label:has(input[type="file"]){& span{font-size:1.6rem;font-weight:bold}}section[data-name="result"] div.card + div.card{margin-top:2rem}}