[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 + 0.1)); width: 100%; padding-bottom: 2rem; translate: 0 100%; font-size: 1.5em; font-weight: bold; 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: bold; 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: 0.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: 0.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:0.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: 0.4em; background-color: var(--BG_GREY_LIGHT); color: black; height: fit-content; font-size: var(--font_size); font-weight: bold; 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: white; 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 0.3s ease-in-out; height:auto; + div:has( shopping-cart-preview) { top:51px; padding-top:10px; } } &: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) ); } }}shop-filter.fixed+div tab-bar-full-width{border-top:5px solid #fff}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:0.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:black; } 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: bold; 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: 0px 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 0.75s ease; justify-content: center; align-items: center; & span span { opacity: 0; max-width: 0px; overflow: hidden; transition: opacity 0.75s ease, max-width 0.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: black !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}