*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{font-family:Oswald,sans-serif;font-size:16px;line-height:24px;font-weight:400;--color-antrazit: #383e42;--color-eisenglimmer: #575556;--color-tiefschwarz: #0e0e10;--color-silber: #a1a1a0;--color-text-light: #222722;--color-background-light: rgba(255, 255, 255, 1);--color-railing_gray-light: #bdbcbc;--color-railing_gray-dark: #010101;--color-railing_gold-light: #a89366;--color-green-light: #7ad0ac;--color-blue-light: #8395cd;--color-text-dark: rgba(255, 255, 255, 1);--color-background-dark: var(--color-railing_gold-light);--activeBorder: #00B1E9;--border: #999;--danger: #e4bb06;--headline: #0f1f33;--glassline-blue: #00B1E9;--select-border: #777;--select-focus: #0f1f33;--select-arrow: var(--select-border);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.btn{padding:.25rem 1.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-primary{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity));padding:.25rem 1.5rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(0 177 233 / var(--tw-bg-opacity))}.forbidden-next-btn{cursor:default;--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.forbidden-next-btn:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.standard-color-item{height:7rem;cursor:pointer}.selection-container{display:none}.container-active{display:flex;flex-direction:column}.active{border-width:4px;--tw-border-opacity: 1;border-color:rgb(0 177 233 / var(--tw-border-opacity))}body{font-size:16px;color:var(--color-railing_gray);background-color:var(--color-background);min-height:100vh}.page-nav-items{width:250px;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.page-nav-items ul{display:flex;flex-direction:column;list-style:none}.pagination-item{margin-right:2rem;cursor:pointer}.pagination-number{margin-right:.5rem;display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity));font-size:1.25rem;line-height:1.75rem}.step-active{cursor:default;--tw-bg-opacity: 1;background-color:rgb(0 177 233 / var(--tw-bg-opacity))}.step-done{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity));opacity:.5}.step-error{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.forbid-continue{cursor:default}.form{margin-bottom:2rem;display:flex;flex-direction:column}.page-nav-items li{margin:.5rem 0}.page-nav-items a{text-decoration:none;color:var(--color-railing_gray);cursor:pointer;transition:color .3s ease-in-out}.page-nav-items a:hover{color:var(--color-railing_gold)}.slide{left:1.75rem}.page-bottom{position:fixed;bottom:0;left:0;width:100%;height:100px;display:grid;place-items:center;grid-template-columns:repeat(3,1fr);background-color:var(--color-railing_gray);color:var(--color-background)}.app{display:flex;flex-direction:column;width:100%}.app-config{display:flex;flex-direction:column;width:100%;height:40vh;margin-top:-8rem}.app-steps{position:relative;height:5vh;width:100%;margin-top:5rem;margin-bottom:2.5rem;background-color:var(--glassline-blue)}@keyframes animateborder{0%{border-top-right-radius:0;border-bottom-right-radius:0}50%{border-top-right-radius:50%;border-bottom-right-radius:50%}to{border-top-right-radius:0;border-bottom-right-radius:0}}.step1,.step2,.step3,.step4,.step5{color:var(--color-background)}#step1,#step2,#step3,#step4,#step5{width:32px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:white;border:2px solid var(--color-background);border-radius:50%;margin:0 1rem;color:#000}progress::-moz-progress-bar{background:var(--glassline-blue)}progress::-webkit-progress-value{background:var(--glassline-blue)}progress{color:var(--glassline-blue)blue}.grundform-item{transition:.2s ease-in-out}.kantenlaengen{width:100%;margin-top:1rem;padding:.5rem}.kantenlaengen-grid{width:100%;display:grid;grid-template-columns:repeat(1,1fr);grid-gap:1rem}.kantenlaengen-images img{width:90%;height:90%}.kantenlaengen-item-flex{display:flex;flex-direction:column;justify-content:center;align-items:center}.kantenlaenge-flaeche1,.kantenlaenge-flaeche2,.kantenlaenge-flaeche3{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.kantenlaenge-flaeche1 label,.kantenlaenge-flaeche2 label,.kantenlaenge-flaeche3 label{margin-right:1rem;color:var(--color-railing_gray)}input::-webkit-inner-spin-button{display:none}.befestigung-item:hover,.gelaender-item:hover{border:1px solid var(--color-railing_gold-light)}.farbe-item{border:5px solid transparent}.farbe-item.active{border:5px solid var(--activeBorder)}.farbe-item.active .farbe-title,.farbe-item:hover .farbe-title{background-color:var(--activeBorder);color:#fff}.farbe-item:hover{border:5px solid var(--activeBorder)}#antrazit{background-color:var(--color-antrazit);color:var(--color-background-light)}#eisenglimmer{background-color:var(--color-eisenglimmer);color:var(--color-railing_gold)}#tiefschwarz{background-color:var(--color-tiefschwarz);color:var(--color-background-light)}#silber{background-color:var(--color-silber);color:var(--color-background-light)}#weissaluminium{background-color:#a5a5a5;color:var(--color-background-light)}.weissaluminium,#verkehrsweiss{background-color:#f6f6f6;color:var(--color-background-light)}.verkehrsweiss{background-color:#a5a5a5;color:var(--color-background-light)}#grauweiss,.grauweiss{background-color:#e7ebda;color:var(--color-background-light)}#cremeweiss,.cremeweiss{background-color:#fdf4e3;color:var(--color-background-light)}#reinweiss,.reinweiss{background-color:#fff;color:var(--color-background-light)}#orangebraun,.orangebraun{background-color:#a65e2e;color:var(--color-background-light)}#opalgruen,.opalgruen{background-color:#015d52;color:var(--color-background-light)}#verkehrsblau,.verkehrsblau{background-color:#063971;color:var(--color-background-light)}#verkehrsgelb,.verkehrsgelb{background-color:#fad201;color:var(--color-background-light)}.antrazit{background-color:var(--color-antrazit);color:var(--color-background-light)}.eisenglimmer{background-color:var(--color-eisenglimmer);color:var(--color-railing_gold)}.tiefschwarz{background-color:var(--color-tiefschwarz);color:var(--color-background-light)}.silber{background-color:var(--color-silber);color:var(--color-background-light)}.step6container{display:flex;flex-direction:column;height:100%}.result{position:relative;width:20em;margin-top:2rem}.result h2{font-size:1.5rem;font-weight:700;color:var(--color-railing_gray);margin-bottom:1rem}.result h3{font-size:1.25rem;font-weight:700;color:var(--color-railing_gray);margin-bottom:1rem}.iFormImage,.lFormImage{display:none}.active{border:1px solid var(--activeBorder);background-color:#e7f8ff}.step1submit{position:relative;display:flex;width:100%;justify-content:center;margin-top:2rem;z-index:9999999}.step2submit,.step3submit,.step4submit,.step5submit{position:relative;display:flex;width:100%;justify-content:space-between;margin-top:2rem;z-index:9999999}#step6submit{background-color:var(--color-green);cursor:pointer}.loader-container{position:absolute;left:35em;top:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(100% - 40rem);margin:0 auto;transform:translate(-50%,-50%);z-index:9999}#loader{width:40%;height:2rem;margin-top:.5rem}label{color:var(--color-text);font-size:1rem}h1{padding:1rem 0}p{padding:.5rem 0}section,h1,p,span,svg{transition:background-color .5s,color .5s}.gui{position:fixed;top:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:999}.back-to-top{position:fixed;right:1rem;bottom:1rem;border-radius:100%;background:var(--color-green-light);padding:.5rem;border:none;opacity:100%;cursor:pointer;transition:opacity .5s}.back-to-top:hover{opacity:60%}.back-to-top-icon{width:1rem;height:1rem;color:var(--activeBorder)}#completed{width:32px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#0195d8;border:2px solid var(--color-background);border-radius:50%;margin:0 1rem;color:#fff}@media screen and (min-width: 70em){body{overflow-x:hidden}.demo-text{position:absolute;display:grid;width:35em;height:100px;place-items:center;margin-left:1rem;top:54%;left:0;font-size:xx-large;background-color:#7777771a;color:#fff;transform:translateY(-52%);transform:skewY(25deg);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:9999}.page-wrapper{position:relative;height:100%;width:100%;max-width:unset}.page{position:relative}nav{flex-direction:row}.page-nav{width:100%}.page-bottom{height:5vh}.page-nav-items ul{flex-direction:row}.page-nav-items li{margin:0 .5rem}.app{display:flex;flex-direction:column;left:0}.app-config{padding:1.5rem;border-left:1px solid lightgray;right:0;height:100%;margin-top:0}.app-steps{height:unset;margin-top:0;margin-bottom:0;margin-left:0}.kantenlaengen-grid{grid-template-columns:repeat(2,1fr)}.befestigung{margin:0 1rem}}.step-text{position:relative}.step-text:before{content:"";position:absolute;top:0;height:100%;width:40%;border-bottom:4px solid #ffffff33;transform:translateY(-4px)}#laenge1,#laenge2,#laenge3,#fussboden,#versatz{width:7rem}input [type=checkbox],[type=radio]{height:1rem;width:1rem;color:#fff;background-color:#fff;border-color:#d3d3d3;border-width:1px;--tw-shadow: 0 0 #0000}input [type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: transparent;border-color:#d3d3d3;border-width:1px}[type=radio]{border-radius:0!important}[type=radio]:checked{background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="black" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> </svg>')!important;border-color:#d3d3d3;border-width:1px}[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:#d3d3d3;background-color:currentColor}