[role=tabpanel]:not([aria-current=page]){display:none}navi-pads{display:block;max-width:83.75rem;margin:auto;&[aria-label=QuickCalc]{max-width:calc(100% - 80px);margin:auto} #nav_left { display: flex; button { min-width: 65px; } } &>ol { display: flex; padding: 0 20px; font-size: 11px; --pad_width: 120px; justify-content: space-between; margin-bottom: 0; border-bottom: 10px solid var(--COLOR_ACTIVE_DARK); margin-bottom: 20px; li { width: var(--pad_width); transition: width 1s; max-height: 177px; &.invisible { --pad_width: 0; font-size: 0; opacity: 0; } &:has(navi-pad.hidden) { display: none; } } >.arrow { --margin_horizontal: 5px; --margin_vertical: 39px; } >.to_next { --arrow_height: 100px; margin: 0 0 0 20px; font-weight: bold; >* { cursor: pointer; } .confirm { height: var(--arrow_height); text-align: center; .parallelogram { z-index: auto; &::before { background: var(--BG_ACTIVE_INVERT); } &::after { background: var(--BG_ACTIVE); } } p { margin: 0; width: calc(var(--pad_width) - 10px); padding-left: 15px; font-size: 1.3em; z-index: 1; } &:hover { .parallelogram::before { border-bottom: unset; background: var(--BG_ACTIVE_INVERT_HOVER); } .parallelogram::after { border-top: unset; background: var(--BG_ACTIVE_HOVER); } } } .skip { border: none; border-radius: 5px; padding: 8px 11px; margin: 2px 0 0 -9px; width: var(--pad_width); font-size: inherit; font-weight: inherit; background: var(--BG_NEUTRAL); &:hover { background: var(--BG_NEUTRAL_HOVER); } } } div[data-name="pad_container"] { display: flex; justify-content: center; gap: 3px; padding: 0; --pad_width: 120px; } } &.invisible { width: 0; &>ol>* { opacity: 0; } } &[aria-label="QuickPlan"]:has(li:last-child navi-pad[aria-current="active"]) .confirm, &[aria-label="QuickCalc"]:has(li:last-child navi-pad[aria-current="active"]) .confirm { display: none; }}navi-pad{--arrow_height:100px;--background_color:var(--COLOR_PRIMARY_LIGHT);--border_color:var(--COLOR_PRIMARY_DARK);color:var(--NEUTRAL_DARK);text-align:center;transition:opacity .3s;width:var(--pad_width);display:grid;isolation:isolate;position:relative;z-index:10;.top{display:flex;justify-content:center;align-items:center;margin-left:10px;width:var(--pad_width);height:var(--arrow_height);padding:15px;.icon{height:4rem}}.bottom{position:relative;--max_lines:3;--line_height:1.5;--padding_top:8px;--padding_left:10px;background-color:var(--background_color);border-top:2px solid var(--border_color);width:var(--pad_width);height:calc(var(--max_lines) * 1em * var(--line_height) + var(--padding_top));min-height:calc(var(--max_lines) * 1em * var(--line_height) + var(--padding_top));overflow:hidden;line-height:var(--line_height);font-size:11px;margin:0;padding:var(--padding_top)var(--padding_left);overflow:hidden;.ellipse{position:absolute;left:0;bottom:calc(7px * var(--line_height) + 3px);line-height:calc(-10 * (var(--line_height)/2 + .1));width:100%;padding-bottom:2rem;translate:0 100%;font-size:1.5em;font-weight:700;background-color:var(--background_color);z-index:11}}.empty-importent{height:19.5px;background-color:var(--background_color);width:var(--pad_width);margin:0}.importend{background-color:var(--background_color);width:var(--pad_width);font-weight:700;font-size:13px;line-height:1.5;margin:0}&:hover{position:absolute;z-index:11;.bottom{height:fit-content}.ellipse{display:none}}&[aria-disabled=true]{opacity:.6}&:not([aria-disabled=true]){cursor:pointer;--background_color:var(--COLOR_PRIMARY_LIGHT);&:not([aria-current=active]):hover{--background_color:var(--COLOR_PRIMARY_MIDDLE)}}&[aria-current=active]{--background_color:var(--BG_ACTIVE_BLUE);--border_color:var(--COLOR_ACCENT_BLACK);color:var(--COLOR_NEUTRAL_LIGHT);.icon{filter:brightness(2.5)}}i{font-size:xxx-large;color:#999}}:where(navi-pad,.to_next) .parallelogram{position:absolute;z-index:-1;height:var(--arrow_height,100px);&::before, &::after{content:"";display:block;background-color:var(--background_color);width:var(--pad_width);height:calc(var(--arrow_height)/2);transform:skew(20deg);position:relative;margin-left:9px}&::before{border-bottom:unset}&::after{transform:skew(-20deg);border-top:unset}}quick-plan:has(#qc_discount_entry[aria-current=page]),quick-plan:has(#qc_content[aria-current=page]),quick-plan:has(#ktd[aria-current=page]),quick-plan:has(#zusf[aria-current=page]),quick-plan:has(#save_send[aria-current=page]){weiter-butts{display:none}}quick-calc:has(article[aria-current=page]#end_customer_pricing .unfinished) navi-pads[aria-label=QuickCalc],quick-calc:has(article[aria-current=page]#end_customer_pricing input:invalid) navi-pads[aria-label=QuickCalc],quick-calc:has(article[aria-current=page] shopping-cart-preview:not(#preview_tab_inverter_1) .no_articles,article[aria-current=page] quick-draw[data-finished=false],article[aria-current=page]#end_customer_pricing #move_fk,article[aria-current=page]#shopping_cart cart-order .inactive) navi-pads[aria-label=QuickCalc],quick-plan:has(article[aria-current=page]#od1 speicher-vergleich .reload_schaetzung:not(.hidden),article[aria-current=page] speicher-vergleich path[d="M47.39999999999998,108.5V108.5 H900.6 V108.5z"],article[aria-current=page] #ktd_datenschutz:not(:checked),article[aria-current=page] ktd-decide,article[aria-current=page] select:required:invalid,article[aria-current=page] #ertpr_container loading-overlay,article[aria-current=page] #ertpr_container pick-place,article[aria-current=page] :not(.hidden)>input:required:invalid) navi-pads[aria-label=QuickPlan],quick-plan:has(article[aria-current=page] objektdaten-2-eingabe[data-finished=false]) navi-pads[aria-label=QuickPlan],quick-plan:has(article[aria-current=page] objektdaten-2-eingabe[data-finished=false]){.to_next .confirm{opacity:.6;pointer-events:none;.parallelogram{&::before{background:var(--BG_GREY_LIGHT);border:2px solid var(--COLOR_PRIMARY_DARK);border-bottom:unset}&::after{background:var(--BG_GREY_LIGHT);border:2px solid var(--COLOR_PRIMARY_DARK);border-top:unset}}}}quick-plan:has(article[aria-current=page]#od1 speicher-vergleich .reload_schaetzung:not(.hidden),article[aria-current=page] speicher-vergleich path[d="M47.39999999999998,108.5V108.5 H900.6 V108.5z"],article[aria-current=page] #ktd_datenschutz:not(:checked),article[aria-current=page] ktd-decide,article[aria-current=page] select:required:invalid,article[aria-current=page] #ertpr_container loading-overlay,article[aria-current=page] #ertpr_container pick-place,article[aria-current=page] :not(.hidden)>input:required:invalid),quick-plan:has(article[aria-current=page] objektdaten-2-eingabe[data-finished=false]),quick-plan:has(article[aria-current=page] objektdaten-2-eingabe[data-finished=false]){weiter-butts button{pointer-events:none;box-shadow:none;border:1px solid var(--COLOR_PRIMARY_MIDDLE);--background:var(--BG_DISABLED);color:var(--COLOR_PRIMARY_DARK);padding:7px 10px}}quick-plan:has(article[aria-current=page]#qc) navi-pads[aria-label=QuickPlan]:has(navi-pad[aria-controls=wkb1][aria-disabled=true]),quick-plan:has(article[aria-current=page]#od1 speicher-vergleich .reload_schaetzung:not(.hidden),article[aria-current=page] speicher-vergleich path[d="M47.39999999999998,108.5V108.5 H900.6 V108.5z"],article[aria-current=page] #ktd_datenschutz:not(:checked),article[aria-current=page] select:required:invalid,article[aria-current=page] input:required:invalid) navi-pads[aria-label=QuickPlan],quick-plan:has(article[aria-current=page] objektdaten-2-eingabe[data-finished=false]) navi-pads[aria-label=QuickPlan],quick-calc:has(article[aria-current=page]#end_customer_pricing #move_fk) navi-pads[aria-label=QuickCalc]{li:has([aria-current=active])~li navi-pad:not([aria-current=active]){pointer-events:none;opacity:.7;--background_color:var(--COLOR_PRIMARY_LIGHT);--border_color:var(--COLOR_PRIMARY_DARK)}}quick-plan:has(article[aria-current=page]#od1 objektdaten-1[data-loaded=true]){navi-pads[aria-label=QuickPlan] .to_next .confirm{opacity:1!important;pointer-events:all;.parallelogram{&::before{background:var(--BG_ACTIVE_INVERT)!important;border:none!important}&::after{border:none!important;background:var(--BG_ACTIVE)!important}}}weiter-butts button{--background:var(--BG_ACTIVE) !important;pointer-events:all!important;color:var(--COLOR_NEUTRAL_DARK)!important}}quick-plan{navi-pads[aria-label=QuickCalc]:has(li:last-child navi-pad[aria-current=active]) .confirm{display:block;p{position:relative;padding-top:15px}}}quick-calc:has(article[aria-current=page]#end_customer_pricing .unfinished) navi-pads[aria-label=QuickCalc] navi-pad[aria-controls=end_customer_pdf],quick-calc:has(article[aria-current=page]#end_customer_pricing input:invalid) navi-pads[aria-label=QuickCalc] navi-pad[aria-controls=end_customer_pdf],quick-calc:has(article[aria-current=page]#shopping_cart cart-order .inactive) navi-pads[aria-label=QuickCalc] navi-pad[aria-controls=end_customer_pricing],quick-calc:has(article[aria-current=page]#shopping_cart cart-order .inactive) navi-pads[aria-label=QuickCalc] navi-pad[aria-controls=end_customer_pdf]{opacity:.6;pointer-events:none}tab-bar-full-width{--font_size:1rem;--active_extra_size:0.4em;display:flex;align-items:end;height:calc(var(--font_size) + var(--active_extra_size));& p{padding:0;margin:0}& > section{display:flex;align-items:center;padding:.4em;background-color:var(--BG_GREY_LIGHT);color:#000;height:fit-content;font-size:var(--font_size);font-weight:700;transition:1s;&:has( h3){border-bottom:3px solid var(--COLOR_ACCENT_LIGHT)}& > img{width:2em;height:fit-content}&[aria-current=true]{background-color:var(--BG_ACTIVE_BLUE_LIGHT);color:#fff;border-top:calc(var(--active_extra_size)/2)solid var(--COLOR_ACCENT_LIGHT);border-bottom:calc(var(--active_extra_size)/2)solid var(--COLOR_ACCENT_LIGHT);flex-grow:1;pointer-events:none;&.auto_invert img{filter:invert(1)}}}&:has(.shop-title){section{min-height:51px;display:flex;gap:20px}}&:has(section + section) section:not([aria-current=true]){cursor:pointer}}div:has( shopping-cart-preview){position:sticky;z-index:1;--info_shipping:0px;&:has( .info-shipping){--info_shipping:30px}tab-bar-full-width{position:sticky;z-index:2;top:45px;transition:all .3s ease-in-out;height:auto;+ div:has( shopping-cart-preview){top:51px;padding-top:10px}}}shop-filter.fixed+div tab-bar-full-width{border-top:5px solid #fff}quick-shop div:has(shopping-cart-preview):has(div shopping-cart-preview shop-article input[name=toggle_details]:checked) product-list-renderer h3.shop_title:has(+sort-row),quick-calc article[aria-current=page] div:has(shopping-cart-preview):has(div shopping-cart-preview shop-article input[name=toggle_details]:checked) product-list-renderer h3.shop_title:has(+sort-row){top:calc(350px + var(--info_shipping));+sort-row{top:calc(400px + var(--info_shipping))}}string-design-inputs,quick-draw-inputs{aside[role=region]{min-width:250px;max-width:450px} [data-type="quick-draw"]:has(.helpicon) { grid-template-columns: 33% auto 22px; .helpicon { position: static; } .tooltip { margin-left: 30px; position: fixed; height: fit-content; } } label { word-break: break-all; font-size: 11px; } .input_container { &[data-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min_product_group_width), 1fr)); gap: 3px; label { cursor: pointer; background-color: var(--COLOR_PRIMARY_MIDDLE); border: 3px solid transparent; aspect-ratio: 16 / 9; img { padding: 20px; max-height: 100%; } &:has(input:checked) { background-color: var(--BG_ACTIVE_BLUE); border: 3px solid var(--COLOR_ACCENT_DARK); } &:has(img):not(:has(input:checked)):hover { background: var(--COLOR_PRIMARY_LIGHT) } &:has(img):not(:has(input:checked)):hover { background: var(--COLOR_PRIMARY_LIGHT) } } } } & select, & input { font-size: 11px !important; height: 30px !important; }}quick-draw-inputs{display:flex;justify-content:center;&:has(.loading:not(.hidden)){aside{opacity:.4;pointer-events:none}}fieldset{&:has([data-field]){&:not(:has([required])){display:none}}&:has(.tooltip){position:relative}}quickdraw-address-search{.suggestions{position:absolute;background:#fff;max-height:150px;max-width:400px;overflow-y:auto;z-index:4;div{padding:10px;cursor:pointer;font-size:11px}}input{width:-webkit-fill-available}}legend:has(i){display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}.loading{position:absolute;width:30%;display:grid;.load_arrow{--fa-animation-duration:0.75s;justify-self:center;width:max-content;color:#000}p{font-size:18px}}}string-design,quick-draw{display:grid;grid-template-columns:auto 1fr;gap:10px;justify-content:center;position:relative;p[data-name=hinweis-pflicht]{display:none}&:has(:required:not(:valid)) p[data-name=hinweis-pflicht]{display:block;position:absolute;top:25%;font-weight:700;left:55%;z-index:5} :has(> .tooltip), :has(> .helpicon) { position: static; &:hover .tooltip { max-width: unset; } } .tooltip table { width: 600px; }}string-design-editor,quick-draw-editor{display:flex;flex-direction:column;& string-design-toolbar .flex-container{align-items:center;gap:10px;&:first-child{width:70%}button{width:100%}}& string-design-toolbar, & quick-draw-toolbar{gap:10px;display:flex;background-color:var(--COLOR_PRIMARY_LIGHT);height:42px;align-items:center;justify-content:space-between;user-select:none;padding:0 10px}& string-design-canvas, & quick-draw-canvas{height:100%;width:100%;& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}& input[type=number]{-moz-appearance:textfield}}& label:has(> input[type=radio]){display:inline-flex;min-width:50px;width:50px;max-width:50px;overflow:hidden;white-space:nowrap;transition:max-width .75s ease;justify-content:center;align-items:center;& span span{opacity:0;max-width:0;overflow:hidden;transition:opacity .75s ease,max-width .75s ease;white-space:nowrap;display:none}& span span{opacity:1;max-width:250px;transition-delay:0s;display:contents}&:has(> input[type=radio]){width:auto;max-width:250px}&:disabled span span, &:disabled span{background:var(--BG_INACTIVE);border:2px solid var(--COLOR_INACTIVE);color:var(--COLOR_INACTIVE);padding:8px;pointer-events:none}} [data-name="module_count_parent"] { padding: 5px; background: var(--COLOR_ACCENT_DARK); color: white; width: fit-content; position: absolute; top: 50px; right: 0; z-index: 1; } #draw-modules { align-items: center; padding: 10px; min-width: 170px; }}.string-design-container{position:fixed;width:100%;height:100%;top:0;left:0;isolation:isolate;z-index:20;background-color:var(--BG_SHADOW);padding:10px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;.element-container{display:flex;flex-direction:column;background:var(--BG_WHITE);padding:15px;width:95%;button[data-type=close]{align-self:flex-end}}roof-tabs{border-bottom:3px solid var(--COLOR_ACCENT_DARK)}string-design{padding-top:10px;p.anmerkung{text-align:right}.flex-container.test{width:40%}}}:not(:root):fullscreen::backdrop{background:#fff}quick-draw-toolbar{input[type=radio]{display:none}.flex-container{gap:10px;&:first-child{gap:2px;border-bottom:3px solid var(--COLOR_ACCENT_DARK);label:first-child{span{width:100%}}}}}quick-draw:has(:required:not(:valid)) quick-draw-toolbar .flex-container:first-child{border-color:var(--COLOR_PRIMARY_DARK)}quick-draw{.fa-ban{color:#000!important}}quick-draw:has(:required:not(:valid)) quick-draw-editor label span,quick-draw label:has(input:disabled) span{background:var(--BG_DISABLED);border:2px solid var(--COLOR_PRIMARY_MIDDLE);color:var(--COLOR_PRIMARY_DARK);padding:8px;pointer-events:none}quick-draw:has(:required:not(:valid)) quick-draw-editor{label span, label:has(input:checked) span, [data-name=module_count_parent]{background:var(--BG_DISABLED);border:2px solid var(--COLOR_PRIMARY_MIDDLE);color:var(--COLOR_PRIMARY_DARK);padding:8px;pointer-events:none}}#strangplanung_container,#speicherauslegung_container,#modules_container{display:flex;justify-content:flex-end}@media screen and (max-width:1500px){string-design-editor,quick-draw-editor{quick-draw-toolbar{height:auto;flex-wrap:wrap} [data-name="module_count_parent"] { top: 100px; }}}quick-draw-editor #draw-modules,quick-draw-editor #draw-modules[disabled],quick-draw-editor #draw-modules[data-lock="1"]{background:var(--BG_DISABLED);color:var(--COLOR_PRIMARY_DARK);opacity:.6;pointer-events:none;cursor:not-allowed}quick-draw:not(:has(:required:not(:valid))) quick-draw-editor #draw-modules:not([disabled]):not([data-lock="1"]){background:var(--BG_ACTIVE);color:var(--COLOR_NEUTRAL_DARK);opacity:1;pointer-events:auto;cursor:pointer}quick-draw:not(:has(:required:not(:valid))) quick-draw-editor #draw-modules:not([disabled]):not([data-lock="1"]):hover{background:var(--BG_ACTIVE_HOVER)}quick-draw roof-tabs single-tab[data-attention=true]:not([aria-current=true]),quick-draw roof-tabs single-tab[data-finished=false]:not([aria-current=true]),quick-draw roof-tabs single-tab[data-attention=true]:not([aria-current=true]) .content_container,quick-draw roof-tabs single-tab[data-finished=false]:not([aria-current=true]) .content_container{background:var(--BG_ACTIVE);color:var(--COLOR_NEUTRAL_DARK);border-color:var(--COLOR_ACCENT_DARK)}quick-draw roof-tabs single-tab[aria-current=true],quick-draw roof-tabs single-tab[aria-current=true] .content_container{background:var(--BG_DISABLED);color:var(--COLOR_PRIMARY_DARK)}quick-draw:has(:required:not(:valid)) quick-draw-editor quick-draw-canvas{opacity:.4;pointer-events:none}quick-draw:has(:required:not(:valid)) quick-draw-editor quick-draw-toolbar{opacity:1!important;pointer-events:auto!important}quick-draw quick-draw-toolbar label[data-attention],quick-draw:has(:required:not(:valid)) quick-draw-toolbar label[data-attention]{opacity:1!important;pointer-events:auto!important;cursor:pointer}quick-draw quick-draw-toolbar label[data-attention]>span,quick-draw:has(:required:not(:valid)) quick-draw-toolbar label[data-attention]>span{background:var(--BG_ACTIVE)!important;color:var(--COLOR_NEUTRAL_DARK)!important;border:2px solid var(--COLOR_ACCENT_DARK)!important}quick-draw quick-draw-toolbar label[data-attention]>span:hover,quick-draw:has(:required:not(:valid)) quick-draw-toolbar label[data-attention]>span:hover{background:var(--BG_ACTIVE_HOVER)!important}