quick-shop{width:calc(100% - 90px);margin:auto; [data-name="qs_header"] { padding: 25px 0px; grid-column: span 2; display: grid; grid-template-columns: 2fr 3fr 1fr; gap: 15px; justify-items: end; align-items: center; h1 { font-size: 18px; display: flex; align-items: center; gap: 10px; img { width: 35%; } } p.hint { font-size: 11px; font-style: italic; } [data-name="discount-label"] { text-align: right; } }}quick-shop,quick-shop-qc,quick-calc>article[role=tabpanel]{display:grid;grid-template-columns:auto 1fr;gap:10px;justify-content:center;padding:0 40px;grid-template-columns:25% 75%;&.single_page { grid-template-columns: 1fr; } &[data-product_group=null] { grid-template-columns: auto; & shop-filter { max-width: 60vw; width: 60vw; --min_product_group_width: 100px; } & > div { width: 0; height: 0; overflow: hidden; } } loading-overlay { i { color: var(--COLOR_NEUTRAL_DARK) } }}quick-shop{padding:0}product-list-renderer{display:block;& [data-wrapper=product_list] { display: grid; gap: 1px; display: flex; flex-direction: column; } & h4 { --color: var(--COLOR_ACCENT_LIGHT); color: var(--color); border-bottom: 2px solid var(--COLOR_ACCENT_LIGHT); margin-bottom: 5px; }}@media screen and (max-width:1600px){quick-shop,quick-calc>article[role=tabpanel]{grid-template-columns:minmax(250px,350px)1fr}}#battery_packages,#inverter,#e_mobility{loading-overlay { align-items: flex-start; i { margin-top: 20px; } }}error-report,load-project-window{width:100%;height:100%;position:fixed;top:0;left:0;background:var(--BG_SHADOW);display:flex;justify-content:center;align-items:center;z-index:20;input { &[type="radio"] { display: none; } } input[type="radio"]:required:invalid+span { background: var(--BG_REQUIRED); border: 2px solid var(--COLOR_ACCENT_REQUIRED); padding: 8px; } label span { width: 100%; display: block; text-align: center; } h1 { display: flex; align-items: center; justify-content: space-between; font-size: 18px; margin-top: 10px; color: white; font-weight: bold; width: 100%; text-align: left; background: var(--COLOR_ACCENT_LIGHT); margin-bottom: 5px; padding: 10px; grid-column: span 2; height: 42px; i:not(:hover) { color: var(--COLOR_NEUTRAL_LIGHT); } } section { display: none; } container { background: var(--BG_WHITE); max-height: 80%; overflow: auto; padding: 20px; width: 50vw; } form { display: flex; flex-direction: column; gap: 5px; &:has(input[data-name="qc"]:checked) section[name="qc"] { display: block; } &:has(input[data-name="calculations"]:checked) section[name="calculations"] { display: block; } &:has(input[data-name="general"]:checked) section[name="general"] { display: block; } button[type="submit"] { margin: 10px; } } .zwei-spalten { gap: 5px; align-items: center; width: 100%; } .drei-spalten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } .greybox { min-height: 42px; justify-content: center; background: var(--BG_GREY_MIDDLE); padding: 5px 12px; gap: 5px; flex-direction: column; margin-top: 2px; position: relative; font-size: 13px; display: flex; }}