:host{display:block;height:100%}html{box-sizing:border-box;height:100%;background:#eee}*,*:before,*:after{box-sizing:inherit}body{padding:40px 0 0;margin:0;height:100%;color:#2c2c2c}svg{fill:#2c2c2c}#payment-wrapper{--accent-color: #0a74aa;--accent-font-color: white;font-family:Arial,Helvetica,sans-serif;height:100%}#payment-wrapper.dachbaustoffe{--accent-color: orange;--accent-font-color: black}#payment-wrapper .inner{display:flex;flex-flow:column;align-items:center;background:white;width:clamp(240px,80vw,800px);margin:0 auto;padding:20px 0;border-radius:10px}#payment-wrapper .inner img.logo{width:clamp(170px,50vw,340px);max-width:300px;margin:10px auto 20px;display:block}#payment-wrapper .inner .disable li:not(.info,.accept,.back){pointer-events:none;opacity:.2}#payment-wrapper .inner .payment-info{text-align:center}#payment-wrapper .inner .payment-info .payment-info-heading{border-top:1px dashed;text-align:center;text-transform:uppercase;font-size:clamp(18px,3vw,26px);line-height:1.4;padding:20px 15px 0;margin-top:0}#payment-wrapper .inner .payment-info svg{width:clamp(70px,30vw,100px);height:clamp(70px,30vw,100px)}#payment-wrapper .inner .payment-info .payment-info-text{border-bottom:1px dashed;padding:0 20px 20px;max-width:600px;text-wrap:balance;line-height:1.6;text-align:center}#payment-wrapper .inner ul.payment-list{padding:0;margin:0;list-style:none;background:white}#payment-wrapper .inner ul.payment-list li{max-width:700px;padding:0 30px}#payment-wrapper .inner ul.payment-list li.info{text-align:center;font-size:clamp(13px,1.8vw,16px);line-height:1.5;text-wrap:balance}#payment-wrapper .inner ul.payment-list li.info .price{font-size:clamp(17px,1.8vw,30px);font-weight:700}#payment-wrapper .inner ul.payment-list li.accept{-webkit-user-select:none;user-select:none;text-align:center;display:flex;flex-flow:column;justify-content:center;border-top:1px dashed;border-bottom:1px dashed;margin:0 30px 30px;padding:10px;line-height:1.8;text-wrap:balance}#payment-wrapper .inner ul.payment-list li.accept a{font-weight:700;color:#000}#payment-wrapper .inner ul.payment-list li.accept a:hover{filter:brightness(1.2);text-decoration:none}#payment-wrapper .inner ul.payment-list li.accept label.check-wrapper{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px;font-size:18px;font-weight:700;color:#3a660b;text-decoration:underline}#payment-wrapper .inner ul.payment-list li.accept label.check-wrapper:hover{text-decoration:none}#payment-wrapper .inner ul.payment-list li.accept label input{width:20px;height:20px;accent-color:var(--accent-color);color:var(--accent-font-color)}#payment-wrapper .inner ul.payment-list li.accept label:hover{cursor:pointer;filter:brightness(1.2)}#payment-wrapper .inner ul.payment-list li button:not(.back){background-color:#2c2e2f;color:#fff;border-radius:4px;display:inline-block;text-align:center;height:55px;min-height:35px;max-height:55px;margin-bottom:17px;max-width:750px;width:100%;border:none;font-size:clamp(15px,2.8vw,21px);font-weight:700;padding:0 20px}#payment-wrapper .inner ul.payment-list li button:not(.back):hover{filter:brightness(1.2);cursor:pointer}@media only screen and (min-width: 200px){#payment-wrapper .inner ul.payment-list li button:not(.back){height:35px;min-height:35px;max-height:55px;margin-bottom:11px}}@media only screen and (min-width: 300px){#payment-wrapper .inner ul.payment-list li button:not(.back){height:45px;min-height:35px;max-height:55px;margin-bottom:14px}}@media only screen and (min-width: 500px){#payment-wrapper .inner ul.payment-list li button:not(.back){height:55px;min-height:40px;max-height:55px;margin-bottom:17px}}#payment-wrapper .inner .error-wrapper{display:flex;flex-flow:column;align-items:center}#payment-wrapper .inner .error-wrapper svg{width:100px;height:100px}#payment-wrapper .inner .error-wrapper h1{font-size:clamp(30px,3vw,45px);font-weight:700;margin-bottom:0}#payment-wrapper .inner .error-wrapper h2{text-align:center}#payment-wrapper button.back{background:none;border:none;text-decoration:underline;font-size:clamp(13px,1.8vw,16px)}#payment-wrapper button.back:hover{cursor:pointer;font-weight:700}#payment-wrapper p.done{display:flex;justify-content:center;align-items:center;font-size:clamp(13px,1.8vw,17px);text-align:center;line-height:1.5;border-top:1px dashed;border-bottom:1px dashed;padding:10px 0;width:clamp(240px,80vw,400px)}#payment-wrapper p.done svg{width:calc(40px + 1vw);height:calc(40px + 1vw);fill:var(--accent-color)}#payment-wrapper p.thx{font-size:clamp(14px,1.8vw,17px)}