:root{--breakpoint-phone-small: 400px;--breakpoint-phone: 640px;--breakpoint-tablet-min: 641px;--breakpoint-tablet-small: 768px;--breakpoint-tablet-large: 1000px;--breakpoint-tablet-max: 1023px;--breakpoint-pocket: 1023px;--breakpoint-lap-min: 1024px;--breakpoint-lap-max: 1279px;--breakpoint-desk-min: 1280px;--breakpoint-widescreen-min: 1440px}.roof-configurator__layout{display:flex;flex-direction:column;gap:30px}.roof-configurator__progress-wrapper{width:100%;margin-bottom:30px;background:#fff;border:1px solid #0b13201f;border-radius:3px;padding:20px 0 1px}.roof-configurator__progress{width:100%}.roof-configurator__steps{display:flex;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:15px;position:relative}.roof-configurator__progress-line{position:absolute;height:3px;background:#eef4fb;z-index:1;border-radius:2px;transition:all .3s ease-in-out}.roof-configurator__progress-line-active{position:absolute;height:3px;background:#2764ae;z-index:2;border-radius:2px;transition:all .3s ease-in-out}.roof-configurator__steps:before,.roof-configurator__steps:after{display:none!important}.roof-configurator__step{display:flex;flex-direction:column;align-items:center;opacity:.5;transition:opacity .2s ease-in-out;cursor:pointer;flex:1;min-width:70px;position:relative;z-index:3}.roof-configurator__step--active{opacity:1}.roof-configurator__step--completed{opacity:.8}.roof-configurator__step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:100%;background:#eef4fb;color:var(--text-color);font-weight:var(--text-font-bolder-weight);margin-bottom:8px;transition:background .2s ease-in-out,color .2s ease-in-out;position:relative;z-index:4;border:2px solid white}.roof-configurator__step--active .roof-configurator__step-number,.roof-configurator__step--completed .roof-configurator__step-number{background:#2764ae;color:#fff}.roof-configurator__step-label{font-size:calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));text-align:center;display:block}.roof-configurator__left-column,.roof-cofigurator__right-colomun{display:flex;flex-direction:column;gap:20px}.roof-configurator__preview{width:100%;background:#fff;border:1px solid #0b13201f;border-radius:3px;padding:20px}.roof-configurator__svg-container{position:relative;width:100%;max-width:500px;margin:0 auto}.roof-configurator__svg-container svg{width:100%;height:auto}.roof-configurator__logo-container{text-align:center;padding:40px 20px}.roof-configurator__logo{max-width:200px;height:auto;margin-bottom:20px}.roof-configurator__welcome{color:var(--heading-color);margin-bottom:10px;font-size:calc(var(--base-text-font-size) + 4px)}.roof-configurator__intro{color:var(--text-color);font-size:calc(var(--base-text-font-size) + 2px);line-height:1.5}.dimension-label{font-size:14px;fill:var(--text-color);font-family:var(--text-font-family)}.roof-configurator__price-container{width:100%;background:#fff;border:1px solid #0b13201f;border-radius:3px;padding:20px}.roof-configurator__price-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}.roof-configurator__price-title{color:var(--heading-color);font-size:calc(var(--base-text-font-size) + 2px);font-weight:var(--text-font-bolder-weight);margin:0}.roof-configurator__loading-indicator{display:flex;align-items:center;gap:8px;color:var(--accent-color);font-size:calc(var(--base-text-font-size) - 2px)}.roof-configurator__spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top:2px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}.roof-configurator__price-loader{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.roof-configurator__price-loader .roof-configurator__spinner{width:14px;height:14px;border-width:1.5px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.roof-configurator__price-breakdown{margin-bottom:15px}.roof-configurator__price-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.roof-configurator__price-label{color:var(--text-color);font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__price-value{color:var(--heading-color);font-weight:var(--text-font-bolder-weight);font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__price-total{display:flex;justify-content:space-between;align-items:center;padding:15px 0 5px;border-top:2px solid var(--border-color);margin-top:10px}.roof-configurator__price-total-label{color:#2764ae;font-size:calc(var(--base-text-font-size) + 1px);font-weight:var(--text-font-bolder-weight)}.roof-configurator__price-total-value{color:#2764ae;font-size:calc(var(--base-text-font-size) + 4px);font-weight:var(--text-font-bolder-weight)}.roof-configurator__right-column{width:100%}.roof-configurator__dimensions-info{color:var(--text-color);font-size:calc(var(--base-text-font-size) + 1px);line-height:1.5;margin-bottom:30px;padding:15px;background:rgba(var(--accent-color-rgb),.05);border-radius:6px;border-left:4px solid var(--accent-color)}.roof-configurator__dimensions-section{padding:25px}.roof-configurator__dimensions-title{color:var(--heading-color);font-size:calc(var(--base-text-font-size) + 3px);margin:0 0 20px}.roof-configurator__dimensions-grid{display:flex;flex-wrap:wrap;gap:15px}.roof-configurator__dimension-field{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative}@media screen and (min-width: 641px){.roof-configurator__dimensions-grid{gap:20px}.roof-configurator__dimension-field{flex:1 1 calc(50% - 10px)}}@media screen and (min-width: 1280px){.roof-configurator__dimensions-grid{gap:30px}.roof-configurator__dimension-field{flex:1 1 calc(50% - 15px)}}.roof-configurator__dimension-label{position:absolute;top:-7px;left:12px;font-weight:var(--text-font-bolder-weight);color:#2764ae;font-size:calc(var(--base-text-font-size) - 2px);background:#fff;padding:0 8px;z-index:4;pointer-events:none}.roof-configurator__dimension-field{position:relative}.roof-configurator__dimension-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1.5px solid #0b13201f;border-radius:6px;margin-top:8px;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.roof-configurator__dimension-input-wrapper:focus-within{border-color:#2764ae;box-shadow:0 0 0 2px #2764ae33}.roof-configurator__dimension-input-wrapper--error{border-color:var(--error-color)!important;box-shadow:0 0 0 2px rgba(var(--error-color-rgb),.2)!important}.roof-configurator__dimension-input-wrapper--error:focus-within{border-color:var(--error-color)!important;box-shadow:0 0 0 2px rgba(var(--error-color-rgb),.3)!important}.roof-configurator__dimension-prefix{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#eef4fb;color:#2764ae;border-radius:4px;font-weight:var(--text-font-bolder-weight);font-size:calc(var(--base-text-font-size) + 1px);margin:6px 6px 6px -14px;flex-shrink:0;transition:background-color .2s ease-in-out;z-index:4}.roof-configurator__dimension-input{flex:1;padding:12px 15px;border:none;background:transparent;font-size:calc(var(--base-text-font-size) + 1px);font-weight:var(--text-font-bolder-weight);color:#333;outline:none;-webkit-appearance:none;-moz-appearance:textfield}.roof-configurator__dimension-input::placeholder{color:#bbb;font-style:italic;opacity:.7}.roof-configurator__dimension-input:not(:placeholder-shown){color:#333;font-weight:var(--text-font-bolder-weight)}.roof-configurator__dimension-input:placeholder-shown{color:#bbb;font-style:italic}.roof-configurator__dimension-input::-webkit-outer-spin-button,.roof-configurator__dimension-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.roof-configurator__dimension-unit{color:#666;font-size:calc(var(--base-text-font-size) + 1px);font-weight:var(--text-font-bolder-weight);margin-right:15px;flex-shrink:0}.roof-configurator__dimension-input:focus+.roof-configurator__dimension-unit,.roof-configurator__dimension-input:focus{color:#2764ae}.roof-configurator__dimension-input:focus~.roof-configurator__dimension-prefix,.roof-configurator__dimension-input-wrapper:focus-within .roof-configurator__dimension-prefix{background:#2764ae;box-shadow:0 0 0 2px #2764ae4d;color:#fff}.roof-configurator__isolatie-grid{display:flex;flex-direction:column;gap:25px}.roof-configurator__isolatie-extras{display:grid;grid-template-columns:1fr;gap:15px;padding:20px}.roof-configurator__alerts{margin:20px 0}.roof-configurator__option-card.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(.8);position:relative}.roof-configurator__option-card.disabled:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0000001a;border-radius:6px;pointer-events:none}.roof-configurator__option-card.disabled:before{content:attr(data-tooltip);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:10}.roof-configurator__option-card.disabled:hover:before{opacity:1}.dimension-line{transition:stroke .2s ease-in-out,stroke-width .2s ease-in-out}.dimension-line.highlighted{stroke:var(--header-accent-color);stroke-width:3}.dimension-label{font-size:14px;fill:var(--text-color);font-family:var(--text-font-family);transition:fill .2s ease-in-out}.dimension-label.highlighted{fill:var(--header-accent-color);font-weight:700}.roof-configurator__option-cards{display:flex;flex-direction:column;gap:15px;margin:20px 0 30px}.roof-configurator .card__section+.card__section:before{display:none}@media screen and (min-width: 641px) and (max-width: 1023px){.roof-configurator__option-cards{flex-direction:row;flex-wrap:nowrap;gap:18px}}@media screen and (min-width: 1024px){.roof-configurator__option-cards{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}}@media screen and (min-width: 1280px){.roof-configurator__option-cards{flex-direction:row;flex-wrap:nowrap;gap:20px;justify-content:center;align-items:stretch}}@media screen and (min-width: 1600px){.roof-configurator__option-cards{gap:10px;justify-content:center;flex-wrap:nowrap}}.roof-configurator__option-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px;border:1px solid var(--border-color);border-radius:3px;cursor:pointer;transition:all .3s ease-in-out;text-align:center;min-height:220px;box-sizing:border-box;background:#eef4fb4d;position:relative;overflow:hidden;flex:1 1 100%}.roof-configurator__option-card:hover{border-color:#2764ae;transform:translateY(-3px);box-shadow:0 8px 25px #00000026;background:#eef4fb99}input[type=radio]:checked+.roof-configurator__option-card{border-color:#2764ae;box-shadow:0 0 0 1px #2764ae6e;transform:translateY(-1px)}.roof-configurator__option-card.disabled{opacity:.5;cursor:not-allowed}.roof-configurator__option-card.disabled:hover{transform:none;box-shadow:none}.roof-configurator__option-image{height:120px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;overflow:hidden;flex-shrink:0}.roof-configurator__option-image img{max-height:100%;max-width:100%;object-fit:contain}.roof-configurator__option-image svg{width:80px;height:80px;color:var(--heading-color)}.roof-configurator__option-content{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;gap:8px;width:100%}.roof-configurator__option-title{font-weight:var(--text-font-bolder-weight);color:var(--heading-color);margin:0;font-size:calc(var(--base-text-font-size) + 1px);line-height:1.4;text-align:center;word-wrap:break-word}.roof-configurator__option-desc{font-size:calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));color:var(--text-color);line-height:1.5;text-align:center;margin:0;opacity:.8;word-wrap:break-word}.roof-configurator__options{margin:20px 0 30px}.roof-configurator__toggle{margin-bottom:20px}.roof-configurator__toggle-label{display:flex;align-items:center;cursor:pointer;font-weight:var(--text-font-bolder-weight)}.roof-configurator__switch-input{display:none}.roof-configurator__switch{position:relative;width:50px;height:24px;background:var(--border-color);border-radius:12px;transition:background .3s ease;cursor:pointer}.roof-configurator__switch:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s ease}.roof-configurator__switch-input:checked+.roof-configurator__switch{background:#f9bc13}.roof-configurator__switch-input:checked+.roof-configurator__switch:before{transform:translate(26px)}.roof-configurator__switch-text{margin-left:10px;margin-right:7px;color:var(--text-color);font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__drainage-option-header{margin:30px 0 15px;font-weight:var(--text-font-bolder-weight);color:var(--heading-color)}.roof-configurator__drainage-option-header:first-of-type{margin-top:20px}.roof-configurator__drainage-option-header h5{margin:0;font-size:calc(var(--base-text-font-size) + 1px)}.roof-configurator__drainage-settings{margin-top:30px}.roof-configurator__option-card--recommended{position:relative}.roof-configurator__recommendation-banner{position:absolute;top:-8px;right:-8px;background:var(--accent-color);color:var(--secondary-background);font-size:calc(var(--base-text-font-size) - 3px);font-weight:var(--text-font-bolder-weight);padding:4px 8px;border-radius:3px;z-index:10;text-transform:uppercase;letter-spacing:.5px}.roof-configurator__info-box{margin-top:20px;padding:15px;background:#eef4fb80;border-left:4px solid #2764ae;border-radius:3px}.roof-configurator__info-box-content{color:var(--text-color);font-size:calc(var(--base-text-font-size) - 1px);line-height:1.4}.roof-configurator__info{margin-bottom:20px;color:var(--text-color)}.roof-configurator__alert{padding:15px;background:rgba(var(--error-color-rgb),.1);border:1px solid rgba(var(--error-color-rgb),.3);border-radius:3px;margin:20px 0}.roof-configurator__alert--info{background:#eef4fb80;border-left:4px solid #2764ae}.roof-configurator__help{font-size:calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));color:var(--text-color);margin-top:10px}.roof-configurator__calculation{margin-top:30px;padding:20px;background:#eef4fb80;border:1px solid var(--border-color);border-radius:3px}.roof-configurator__calculation h4{margin-bottom:15px}#lijm-breakdown>div{margin-bottom:8px}.roof-configurator__total{font-size:calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));font-weight:var(--text-font-bolder-weight);margin-top:15px;padding-top:15px;border-top:1px solid var(--border-color)}.roof-configurator__epdm-feedback{margin:25px 0;padding:20px;background:linear-gradient(135deg,#eef4fb,#f8fbff);border-radius:3px;border:1px solid #c8d9f2;box-shadow:0 2px 8px #2764ae1a}.roof-configurator__feedback-header p{margin:0 0 15px;color:var(--text-color);font-size:calc(var(--base-text-font-size) - 1px);opacity:.9}.roof-configurator__feedback-piece{background:#fffc;border-radius:3px;padding:15px;margin-bottom:12px;border-left:4px solid #2764ae}.roof-configurator__feedback-piece:last-child{margin-bottom:0}.roof-configurator__piece-title{font-weight:var(--text-font-bolder-weight);color:#2764ae;margin:0 0 8px;font-size:calc(var(--base-text-font-size) + 1px)}.roof-configurator__piece-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:8px}.roof-configurator__piece-detail{display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__piece-detail-label{color:var(--text-color)}.roof-configurator__piece-detail-value{font-weight:var(--text-font-bolder-weight);color:#2764ae}.roof-configurator__seam-info{margin-top:10px;padding:10px;background:#f9bc131a;border-radius:3px;border-left:3px solid #f9bc13;font-size:calc(var(--base-text-font-size) - 1px);color:var(--text-color)}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__epdm-feedback{margin:20px 0;padding:15px}.roof-configurator__piece-details{grid-template-columns:1fr;gap:6px}.roof-configurator__feedback-piece{padding:12px}}.roof-configurator__summary-content{padding:20px;margin-bottom:30px}.summary-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color)}.summary-item:last-child{border-bottom:none}.summary-item h4{margin:0;font-weight:var(--text-font-bolder-weight)}.summary-item.total-price{font-size:calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));font-weight:var(--text-font-bolder-weight);padding-top:15px}.roof-configurator__button-group-simple{gap:15px;margin-top:30px}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__button-group-simple{justify-content:flex-end}.step-info{margin-right:auto}}.roof-configurator__next{flex:2;gap:8px;background:#0b1320;color:#fff;flex-grow:5;padding:10px;border-radius:2px}.roof-configurator__next:hover{background:#0b1320a8!important;transform:translateY(-1px);box-shadow:0 4px 12px #2764ae32}.roof-configurator__prev{flex:1;color:#0b1320;background:transparent;flex-grow:2;padding:10px;border-radius:2px;background-color:#eef4fb}.roof-configurator__prev:hover{transform:translateY(-1px)}.roof-configurator__prev .material-icons{font-size:20px;margin:0}.roof-configurator__finish{background:#f9bc13!important;color:#0b1320!important;font-weight:700}.roof-configurator__finish:hover{background:#f9bc13b2!important}@media screen and (max-width: var(--breakpoint-phone)){.button{line-height:unset!important}.button-group-simple{flex-direction:column-reverse;gap:20px;align-items:center}.roof-configurator__next{order:1;width:100%;justify-content:center!important;flex:none!important;align-self:stretch}.roof-configurator__prev{order:2;align-self:flex-start;width:auto;flex:none!important;min-width:120px;height:auto}.step-info{order:3;text-align:center;margin:0}}@media screen and (min-width: var(--breakpoint-tablet-min)) and (max-width: var(--breakpoint-tablet-max)){.roof-configurator__prev{min-width:140px}.roof-configurator__next{min-width:200px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__prev{min-width:160px}.roof-configurator__next{min-width:240px}}.step-info{display:flex;flex-direction:column;gap:4px;font-size:calc(var(--base-text-font-size) - 1px);color:var(--text-color)}.step-number{font-weight:var(--text-font-bolder-weight);color:#2764ae}.step-title{color:var(--text-color);opacity:.8}.roof-configurator__button-group-custom{gap:15px;margin-top:30px}.roof-configurator__accordion{margin-bottom:5px;border:none;border-radius:6px;background:#ffffff80;overflow:visible;position:relative;z-index:1}.roof-configurator__accordion-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;cursor:pointer;background:#2764ae0d;transition:background-color .2s ease;position:relative;z-index:10}.roof-configurator__accordion-header:hover{background:#2764ae26}.roof-configurator__accordion-title{display:flex;align-items:center;gap:12px}.roof-configurator__accordion-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#2764ae;color:var(--secondary-background);border-radius:50%;font-weight:var(--text-font-bolder-weight)}.roof-configurator__accordion-text{font-weight:var(--text-font-bolder-weight);color:#2764ae;font-size:calc(var(--base-text-font-size) + 1px)}.roof-configurator__accordion-status{display:flex;align-items:center;gap:10px;margin-left:15px;font-size:calc(var(--base-text-font-size) - 1px);color:var(--text-color-light)}.roof-configurator__accordion-selection{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roof-configurator__accordion-arrow{transition:transform .3s ease;color:var(--text-color)}.roof-configurator__accordion-header[aria-expanded=true] .roof-configurator__accordion-arrow{transform:rotate(180deg)}.roof-configurator__accordion-content{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease-in-out,padding .3s ease-in-out;position:relative;z-index:1}.roof-configurator__accordion-content[aria-hidden=false]{max-height:2000px;padding:0 20px 20px;border-top:1px solid rgba(var(--border-color-rgb),.3);overflow:visible;position:static}.roof-configurator__accordion-description{margin-top:15px;margin-bottom:15px;color:var(--text-color)}.roof-configurator__accordion-subtitle{margin:20px 0 15px;color:var(--heading-color);font-size:calc(var(--base-text-font-size) + 0px);font-weight:var(--text-font-bolder-weight)}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__option-cards{grid-template-columns:1fr;gap:12px;margin:15px 0 25px;max-width:none}.roof-configurator__option-card{min-height:160px;padding:16px;box-shadow:0 2px 8px #00000014}.roof-configurator__option-image{height:90px;margin-bottom:12px}.roof-configurator__option-title{font-size:var(--base-text-font-size)}.roof-configurator__option-desc{font-size:calc(var(--base-text-font-size) - 2px);line-height:1.4}}@media screen and (min-width: 641px) and (max-width: 1023px){.roof-configurator__option-card{flex:1 1 calc(50% - 9px);min-height:240px;max-width:none;padding:22px}.roof-configurator__option-image{height:130px;margin-bottom:16px}.roof-configurator__option-title{font-size:calc(var(--base-text-font-size) + 2px)}.roof-configurator__option-desc{font-size:calc(var(--base-text-font-size) - 1px)}}@media screen and (min-width: 1024px){.roof-configurator__option-card{flex:1 1 calc(33.333% - 17px);min-height:260px;max-width:350px}.roof-configurator__option-image{height:140px;margin-bottom:18px}.roof-configurator__option-title{font-size:calc(var(--base-text-font-size) + 3px);margin-bottom:8px}.roof-configurator__option-desc{font-size:var(--base-text-font-size);line-height:1.6}}@media screen and (min-width: 1280px){.roof-configurator__option-card{flex:1 1 calc(50% - 15px);max-width:400px}}@media screen and (min-width: 1600px){.roof-configurator__option-card{flex:1 1 calc(33.333% - 23px);max-width:380px}}.roof-configurator__coating-options{margin:30px 0;padding:20px;background:#eef4fb80;border-radius:3px;border:1px solid var(--border-color)}.roof-configurator__coating-options h4{margin-bottom:20px;color:var(--heading-color)}.roof-configurator__contact-message{background:#eef4fb80;border:1px solid var(--border-color);border-radius:3px;padding:30px;text-align:center;font-size:1.1em}.roof-configurator__layout--mobile{flex-direction:column;gap:0}.roof-configurator__layout--mobile .roof-configurator__left-column{order:2;position:relative;top:auto;flex:none;margin-top:20px}.roof-configurator__layout--mobile .roof-configurator__right-column{order:1;flex:none}.roof-configurator__layout--tablet{flex-direction:column;gap:20px}.roof-configurator__layout--tablet .roof-configurator__left-column{flex:none;max-width:100%}.roof-configurator__layout--desktop{flex-direction:row;gap:30px}.roof-configurator__layout--desktop .roof-configurator__left-column{flex:0 0 40%;position:sticky;top:calc(var(--header-height) + 30px);order:1}.roof-configurator__layout--desktop .roof-configurator__right-column{order:2}@media screen and (min-width: var(--breakpoint-lap-min)) and (max-width: var(--breakpoint-lap-max)){.roof-configurator__layout--desktop{gap:35px}.roof-configurator__layout--desktop .roof-configurator__left-column{flex:0 0 42%}.roof-configurator__layout--desktop .roof-configurator__right-column{flex:0 0 58%}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__layout--desktop{gap:40px}.roof-configurator__layout--desktop .roof-configurator__left-column{flex:0 0 38%}.roof-configurator__layout--desktop .roof-configurator__right-column{flex:0 0 62%}}@media screen and (min-width: var(--breakpoint-widescreen-min)){.roof-configurator__layout--desktop{gap:50px}.roof-configurator__layout--desktop .roof-configurator__left-column{flex:0 0 35%}.roof-configurator__layout--desktop .roof-configurator__right-column{flex:0 0 65%}}.roof-configurator__steps--compact{justify-content:center;gap:8px;overflow-x:auto;padding:0 10px;scroll-snap-type:x mandatory}.roof-configurator__step--hidden{display:none}.roof-configurator__step--adjacent{transform:scale(.8)}.roof-configurator__step--visible{opacity:1;transform:scale(1);scroll-snap-align:center}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__steps{justify-content:center;gap:15px;overflow:visible;padding:0 20px;position:relative;margin-bottom:0}.roof-configurator__step{display:none}.roof-configurator__step--mobile-visible{display:flex!important;transition:all .3s ease}.roof-configurator__step.roof-configurator__step--mobile-visible{display:flex!important;opacity:1!important;visibility:visible!important}.roof-configurator__step--hidden.roof-configurator__step--mobile-visible{display:flex!important}.roof-configurator__step--mobile-prev{opacity:.6;transform:scale(1);order:1}.roof-configurator__step--mobile-prev .roof-configurator__step-number{background:#f9bc13;color:#fff;position:relative;border:2px solid white;box-shadow:0 0 0 1px #f9bc13}.roof-configurator__step--mobile-prev .roof-configurator__step-number:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff4d;border-radius:inherit}.roof-configurator__step--mobile-current{opacity:1;transform:scale(1);order:2}.roof-configurator__step--mobile-current .roof-configurator__step-number{background:#f9bc13;color:#fff;border:2px solid white;box-shadow:0 0 0 3px #f9bc1333}.roof-configurator__step--mobile-next{opacity:.4;transform:scale(1);order:3}.roof-configurator__step--mobile-next .roof-configurator__step-number{background:var(--border-color);color:var(--text-color)}.roof-configurator__step-label{font-size:calc(var(--base-text-font-size) - 2px);margin-top:6px}.roof-configurator__step-number{width:36px;height:36px;font-size:calc(var(--base-text-font-size) + 1px);margin-bottom:6px}.roof-configurator__step--mobile-current .roof-configurator__step-number{width:40px;height:40px;font-size:calc(var(--base-text-font-size) + 2px)}}.roof-configurator__price-container--mobile{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--background);border-top:2px solid var(--border-color);box-shadow:0 -2px 10px #0000001a;max-height:40vh;overflow-y:auto}.roof-configurator__price-toggle-arrow{font-size:16px;color:var(--accent-color);transition:transform .3s ease;margin-left:12px}.roof-configurator__price-toggle-arrow.collapsed{transform:rotate(0)}.roof-configurator__price-toggle-arrow.expanded{transform:rotate(180deg)}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__price-container--mobile .roof-configurator__price-header{cursor:pointer;-webkit-user-select:none;user-select:none}.roof-configurator__price-container--mobile .roof-configurator__price-breakdown{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,padding .3s ease;padding-top:0;padding-bottom:0}.roof-configurator__price-container--mobile .roof-configurator__price-breakdown.expanded{max-height:300px;opacity:1;padding-top:15px;padding-bottom:15px}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__option-card{flex-direction:row;text-align:left;min-height:80px;padding:15px;margin:0 10px}.roof-configurator__option-image{margin-right:15px;margin-bottom:0;display:flex;justify-content:flex-start;width:auto!important}.roof-configurator__option-content{align-items:flex-start;text-align:left;justify-content:center}.roof-configurator__accordion{border:none!important}.roof-configurator__accordion-content .roof-configurator__option-cards{margin:15px -20px 20px;padding:0 5px;gap:8px}.roof-configurator__accordion-content .roof-configurator__option-card{padding:16px 15px;min-height:84px;border-width:1px;border-radius:3px;box-shadow:0 2px 8px #00000014;background:#ffffffe6;transition:all .2s ease-in-out;position:relative;overflow:hidden;display:flex;align-items:stretch;gap:0}.roof-configurator__accordion-content .roof-configurator__option-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background-color .2s ease-in-out}.roof-configurator__accordion-content .roof-configurator__option-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f;border-color:#2764ae}.roof-configurator__accordion-content .roof-configurator__option-card:hover:before{background:var(--accent-color)}input[type=radio]:checked+.roof-configurator__accordion-content .roof-configurator__option-card,.roof-configurator__accordion-content input[type=radio]:checked+.roof-configurator__option-card{border-color:#1e2d7d;background:rgba(var(--accent-color-rgb),.08);transform:translateY(-1px)}.roof-configurator__accordion-content input[type=radio]:checked+.roof-configurator__option-card:before{background:var(--accent-color)}.roof-configurator__accordion-content .roof-configurator__option-image{width:33.333%;margin-right:15px;border-radius:8px;overflow:hidden;background:#eef4fb80;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;padding:0}.roof-configurator__accordion-content .roof-configurator__option-image img{width:100%;height:100%;object-fit:cover;border-radius:4px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.1));image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.roof-configurator__accordion-content .roof-configurator__option-image svg{width:100%;height:100%;max-width:none;max-height:none;color:var(--heading-color)}.roof-configurator__accordion-content .roof-configurator__option-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-right:8px;min-height:70px}.roof-configurator__accordion-content .roof-configurator__option-title{font-size:calc(var(--base-text-font-size) + 1px);font-weight:var(--text-font-bolder-weight);color:var(--heading-color);margin:0;line-height:1.3;text-align:left;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.roof-configurator__accordion-content .roof-configurator__option-desc{font-size:calc(var(--base-text-font-size) - 1px);line-height:1.4;color:var(--text-color);opacity:.85;margin:0;text-align:left;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;flex-grow:1;display:flex;align-items:flex-start}.roof-configurator__accordion-content input[type=radio]:checked+.roof-configurator__option-card .roof-configurator__option-title{color:var(--accent-color)}.roof-configurator__accordion-content input[type=radio]:checked+.roof-configurator__option-card .roof-configurator__option-desc{color:var(--accent-color);opacity:.9}.roof-configurator__accordion-content .roof-configurator__option-card:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.roof-configurator__accordion-content input[type=radio]:focus+.roof-configurator__option-card{outline:2px solid var(--accent-color);outline-offset:2px}.roof-configurator__accordion-content .roof-configurator__option-card.loading{opacity:.6;pointer-events:none}.roof-configurator__accordion-content .roof-configurator__option-card.loading:after{content:"";position:absolute;top:50%;right:15px;width:16px;height:16px;border:2px solid var(--border-color);border-top:2px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}}@media screen and (min-width: var(--breakpoint-tablet-min)) and (max-width: var(--breakpoint-tablet-max)){.roof-configurator__accordion-header{padding:14px 18px}.roof-configurator__accordion-content,.roof-configurator__accordion-content[aria-hidden=false]{padding:0 18px 18px}.roof-configurator__accordion-status{font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__accordion-selection{max-width:120px}}@media screen and (min-width: var(--breakpoint-lap-min)) and (max-width: var(--breakpoint-lap-max)){.roof-configurator__accordion-header{padding:16px 24px}.roof-configurator__accordion-content,.roof-configurator__accordion-content[aria-hidden=false]{padding:0 24px 24px}.roof-configurator__price-container{padding:25px}.roof-configurator__tooltip:before{max-width:300px;font-size:13px;padding:12px 16px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__accordion-header{padding:20px 30px}.roof-configurator__accordion-content,.roof-configurator__accordion-content[aria-hidden=false]{padding:0 30px 30px}.roof-configurator__price-container{padding:30px}.roof-configurator__tooltip:before{max-width:350px;font-size:14px;padding:14px 18px}.roof-configurator__steps{gap:20px}.roof-configurator__step{min-width:80px}.roof-configurator__step-number{width:36px;height:36px;font-size:calc(var(--base-text-font-size) + 2px)}}@media screen and (min-width: var(--breakpoint-widescreen-min)){.roof-configurator__svg-container{max-width:800px}.roof-configurator__layout{gap:40px}.roof-configurator__steps{gap:25px}.roof-configurator__step{min-width:90px}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__dimension-input-wrapper{min-height:50px}.roof-configurator__dimension-prefix{width:40px;height:40px;font-size:calc(var(--base-text-font-size) + 2px)}.roof-configurator__dimension-label{font-size:calc(var(--base-text-font-size) - 3px);top:-8px;left:10px;padding:0 4px;background:#eef4fb80}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__responsive-container{max-width:none!important;margin:0!important;padding:0!important}.roof-configurator__responsive-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.roof-configurator__responsive-container{background:var(--background, #fff);border:1px solid var(--border-color, #e5e5e5);border-radius:var(--border-radius, 8px);padding:var(--card-padding, 20px);margin:var(--card-margin, 15px);box-shadow:var(--card-shadow, 0 2px 4px rgba(0, 0, 0, .1))}.roof-configurator__right-column{padding:0!important}.roof-configurator__step-content+.card__section{padding:0!important}.roof-configurator__dimensions-section,.roof-configurator__calculation,.roof-configurator__summary-content,.roof-configurator__contact-message,.roof-configurator__accordions{margin:0}.roof-configurator__accordion{margin-bottom:0;border-radius:0;border-left:none!important;border-right:none!important}.roof-configurator__accordion:first-child{border-top:none}.roof-configurator__accordion:last-child{border-bottom:none}.roof-configurator__accordion-header{padding:16px 20px;flex-wrap:wrap;gap:8px}.roof-configurator__accordion-title{flex:1;min-width:0}.roof-configurator__accordion-text{font-size:calc(var(--base-text-font-size) + 0px)}.roof-configurator__accordion-status{margin-left:8px;margin-right:8px;font-size:calc(var(--base-text-font-size) - 2px)}.roof-configurator__accordion-selection{max-width:100px}.roof-configurator__accordion-content,.roof-configurator__accordion-content[aria-hidden=false]{padding:0 20px 20px}.roof-configurator__accordion-number{width:24px;height:24px;font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__accordion-arrow{width:18px;height:18px;flex-shrink:0}.roof-configurator__accordion{margin-bottom:12px}.roof-configurator__accordion-description{margin-top:12px;margin-bottom:12px;font-size:calc(var(--base-text-font-size) - 1px);line-height:1.4}.roof-configurator__accordion-subtitle{margin:15px 0 12px;font-size:calc(var(--base-text-font-size) + 0px)}}@media (hover: none) and (pointer: coarse){.roof-configurator__option-card{min-height:60px;padding:12px}.roof-configurator__accordion-header{min-height:48px;padding:14px 16px}.roof-configurator__accordion-content .roof-configurator__option-card{min-height:54px;padding:10px 12px}}@media screen and (max-width: var(--breakpoint-pocket)) and (orientation: landscape){.roof-configurator__progress-wrapper{padding:15px;margin-bottom:20px}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__progress-wrapper{margin-bottom:0}.roof-configurator__steps{margin-bottom:15px}.roof-configurator__step-label{font-size:calc(var(--base-text-font-size) - 3px)}.roof-configurator__price-container,.roof-configurator__price-container--mobile,#price-container,.roof-configurator__left-column .roof-configurator__price-container{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;overflow:hidden!important}.roof-configurator__left-column .roof-configurator__svg-container{display:none}.roof-configurator__step-content[data-step-content="2"] .roof-configurator__svg-container{display:block;width:100%;max-width:400px;margin:0 auto 20px;position:relative}}@media screen and (max-width: var(--breakpoint-phone-small)){.roof-configurator__accordion-header{padding:10px 12px}.roof-configurator__accordion-title{gap:6px}.roof-configurator__accordion-text{font-size:calc(var(--base-text-font-size) - 1px)}.roof-configurator__accordion-status{margin-left:6px;margin-right:6px}.roof-configurator__accordion-selection{max-width:80px}.roof-configurator__accordion-content .roof-configurator__option-card{padding:14px 12px;min-height:78px;box-shadow:0 1px 6px #00000014;display:flex;align-items:center;gap:0}.roof-configurator__accordion-content .roof-configurator__option-image{width:33.333%;margin-right:12px;border-radius:6px;background:#eef4fb66;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}.roof-configurator__accordion-content .roof-configurator__option-image img{width:100%;height:100%;object-fit:cover;border-radius:4px;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.roof-configurator__accordion-content .roof-configurator__option-image svg{width:100%;height:100%;max-width:none;max-height:none}.roof-configurator__accordion-content .roof-configurator__option-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding-right:6px;min-height:62px}.roof-configurator__accordion-content .roof-configurator__option-title{font-size:calc(var(--base-text-font-size) + 0px);margin:0;line-height:1.25;text-align:left;word-wrap:break-word;font-weight:var(--text-font-bolder-weight);color:var(--heading-color)}.roof-configurator__accordion-content .roof-configurator__option-desc{font-size:calc(var(--base-text-font-size) - 2px);line-height:1.3;opacity:.9;margin:0;text-align:left;word-wrap:break-word;color:var(--text-color);flex-grow:1;display:flex;align-items:flex-start}}.roof-configurator__tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;color:#f9bc13;vertical-align:middle;cursor:help;z-index:2147483647}.roof-configurator__tooltip svg{width:16px;height:16px;transition:color .2s ease-in-out}.roof-configurator__tooltip:hover svg{color:#e1a811}.roof-configurator__tooltip:before{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);background:#0b1320f2;color:#fff;padding:12px 16px;border-radius:6px;font-size:13px;line-height:1.5;white-space:normal;max-width:280px;width:max-content;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:2147483647;font-weight:400;box-shadow:0 4px 12px #0003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--text-font-family);text-align:center}.roof-configurator__tooltip:after{content:"";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(11,19,32,.95);opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:2147483647}.roof-configurator__tooltip:hover:before,.roof-configurator__tooltip:hover:after{opacity:1}.roof-configurator__tooltip--left:before{left:0;transform:translate(0)}.roof-configurator__tooltip--left:after{left:16px;transform:translate(0)}.roof-configurator__tooltip--right:before{left:auto;right:0;transform:translate(0)}.roof-configurator__tooltip--right:after{left:auto;right:16px;transform:translate(0)}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__tooltip:before{max-width:220px;font-size:12px;padding:10px 14px;bottom:calc(100% + 10px)}.roof-configurator__tooltip:after{bottom:calc(100% + 4px)}.roof-configurator__tooltip svg{width:14px;height:14px}}@media screen and (min-width: var(--breakpoint-tablet-min)) and (max-width: var(--breakpoint-tablet-large)){.roof-configurator__tooltip:before{max-width:250px;font-size:12px}}@media (prefers-contrast: high){.roof-configurator__tooltip:before{background:#000;border:2px solid white}.roof-configurator__tooltip:after{border-top-color:#000}}@media (prefers-reduced-motion: reduce){.roof-configurator__tooltip:before,.roof-configurator__tooltip:after,.roof-configurator__tooltip svg{transition:none}}.roof-configurator__button-group{display:flex;gap:10px;flex-wrap:wrap;margin:15px}.roof-configurator__size-button{padding:10px 20px;border:2px solid var(--border-color);border-radius:4px;background:#eef4fb80;color:var(--text-color);font-weight:var(--text-font-bolder-weight);cursor:pointer;transition:all .2s ease}.roof-configurator__size-button:hover{border-color:var(--accent-color);color:var(--accent-color)}input[type=radio]:checked+.roof-configurator__size-button{background:var(--accent-color);color:var(--secondary-background);border-color:var(--accent-color)}.accordion-blocked{position:relative}.accordion-blocked--light{opacity:.5;background-color:#eee;border-color:#e0e0e0}.accordion-blocked--light .roof-configurator__accordion-header{background-color:#f5f5f5;color:#999;cursor:not-allowed}.accordion-blocked--dark{opacity:.7;background-color:#ccc;border-color:#bbb;filter:desaturate(.5)}.accordion-blocked--dark .roof-configurator__accordion-header{background-color:#d5d5d5;color:#666;cursor:not-allowed}.accordion-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:inherit;pointer-events:none}.accordion-overlay--light{background-color:#eeec;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.accordion-overlay--dark{background-color:#cccc;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.accordion-overlay__text{background-color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;box-shadow:0 2px 8px #0000001a;border:1px solid #e0e0e0}.accordion-overlay--light .accordion-overlay__text{color:#666;border-color:#d0d0d0}.accordion-overlay--dark .accordion-overlay__text{color:#555;border-color:#bbb;background-color:#f8f8f8}.accordion-blocked .roof-configurator__accordion-arrow{opacity:.5}@media (max-width: var(--breakpoint-tablet-small)){.accordion-overlay__text{font-size:12px;padding:6px 12px}}.accordion-blocked .roof-configurator__accordion-header:hover{background-color:inherit!important;transform:none!important;box-shadow:none!important}.accordion-blocked .roof-configurator__accordion-header:focus{outline:none!important;box-shadow:none!important}.roof-configurator__accordion{transition:opacity .3s ease,background-color .3s ease,border-color .3s ease}.accordion-overlay{transition:opacity .3s ease}.accordion-blocked .roof-configurator__accordion-content{display:none!important}.accordion-blocked .roof-configurator__accordion-header{position:relative}.accordion-blocked .roof-configurator__accordion-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);pointer-events:none}.accordion-blocked .roof-configurator__accordion-check{opacity:.3}.accordion-blocked .roof-configurator__accordion-status{opacity:.6}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__layout{gap:25px}}@media screen and (min-width: var(--breakpoint-lap-min)){.roof-configurator__layout{gap:35px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__layout{gap:40px}}@media screen and (min-width: var(--breakpoint-widescreen-min)){.roof-configurator__layout{gap:50px}}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__progress-wrapper{padding:25px;margin-bottom:25px}}@media screen and (min-width: var(--breakpoint-lap-min)){.roof-configurator__progress-wrapper{padding:30px;margin-bottom:30px}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__preview{padding:15px}}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__preview{padding:25px}.roof-configurator__svg-container{max-width:500px}}@media screen and (min-width: var(--breakpoint-lap-min)){.roof-configurator__preview{padding:30px}.roof-configurator__svg-container{max-width:600px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__preview{padding:35px}.roof-configurator__svg-container{max-width:700px}}@media screen and (min-width: var(--breakpoint-widescreen-min)){.roof-configurator__svg-container{max-width:800px}}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__price-container{padding:25px}}@media screen and (min-width: var(--breakpoint-lap-min)){.roof-configurator__price-container{padding:30px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__price-container{padding:35px}}@media screen and (min-width: var(--breakpoint-tablet-min)){.roof-configurator__steps{gap:18px}.roof-configurator__step{min-width:75px}}@media screen and (min-width: var(--breakpoint-lap-min)){.roof-configurator__steps{gap:20px}.roof-configurator__step{min-width:80px}}@media screen and (min-width: var(--breakpoint-desk-min)){.roof-configurator__steps{gap:22px}.roof-configurator__step{min-width:85px}.roof-configurator__step-number{width:36px;height:36px;font-size:calc(var(--base-text-font-size) + 2px)}}@media screen and (min-width: var(--breakpoint-widescreen-min)){.roof-configurator__steps{gap:25px}.roof-configurator__step{min-width:90px}}.roof-configurator__info-text{background:#f9bc1326!important;border-left:4px solid #f9bc13!important;padding:12px 16px!important;margin:12px 0!important;font-size:.875rem!important;font-style:italic!important;line-height:1.4!important;border-radius:0 4px 4px 0!important;color:#333!important}.roof-configurator__validation-alert{display:none;background:rgba(var(--error-color-rgb),.1);border:1px solid rgba(var(--error-color-rgb),.3);border-left:4px solid var(--error-color);border-radius:4px;padding:12px 16px;margin-top:10px;font-size:calc(var(--base-text-font-size) - 1px);color:var(--error-color);line-height:1.4;animation:slideIn .3s ease-out}.roof-configurator__validation-alert.show{display:block}.roof-configurator__validation-alert--warning{background:#f9bc131a;border:1px solid rgba(249,188,19,.3);border-left:4px solid #f9bc13;color:#d4a017}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: var(--breakpoint-phone)){.roof-configurator__validation-alert{padding:10px 12px;margin-top:8px;font-size:calc(var(--base-text-font-size) - 2px)}}
/*# sourceMappingURL=/cdn/shop/t/73/assets/roof-configurator.css.map */