var e=Object.defineProperty,n=(n,t,i)=>((n,t,i)=>t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i)(n,"symbol"!=typeof t?t+"":t,i);const t="https://{DOMAIN}",i="Über 1 Million Produkte",s=/* @__PURE__ */new Date("2026-02-02T23:59:59+01:00"),o=t+"/vergleichen/deals?tid=CH24_XMas_Teaser_Desktop";class l extends HTMLElement{constructor(){var e,t;super(),n(this,"productSlug","shofur"),n(this,"shadow",null),n(this,"env"),n(this,"systemTime"),n(this,"deviceOutput"),n(this,"ctaUrl",""),n(this,"headlineText",""),n(this,"sublineText",""),this.systemTime=Number(this.getAttribute("system-time")||0),this.env=null!=(e=this.getAttribute("env"))?e:"",this.deviceOutput=null!=(t=this.getAttribute("device-output"))?t:"desktop",this.updateProperties()}static get observedAttributes(){return["deviceoutput","device-output","language","user","platform","env","system-time"]}updateProperties(){let e;new Date(1e3*this.systemTime)<=s?(this.headlineText="mobile"===this.deviceOutput?"Möbel Deals bis&nbsp;zum&nbsp;02.02.":"Möbel Winterdeals bis&nbsp;zum&nbsp;02.02.",this.sublineText="Bis zu 55&nbsp;%&nbsp;sparen",e=o):(this.headlineText="mobile"===this.deviceOutput?"Bis zu 50&nbsp;%&nbsp;auf Möbel&nbsp;sparen":"Das größte&nbsp;Vergleichsportal für&nbsp;Möbel",this.sublineText="mobile"===this.deviceOutput?"":"Preise vergleichen und bis&nbsp;zu&nbsp;50&nbsp;%&nbsp;sparen",e=t),this.ctaUrl=e.replace("{DOMAIN}",["dev","int","test"].includes(this.env)?"moebel.check24-test.de":"moebel.check24.de")}attributeChangedCallback(e,n,t){var i,s;n!==t&&(this.systemTime=Number(this.getAttribute("system-time")||0),this.env=null!=(i=this.getAttribute("env"))?i:"",this.deviceOutput=null!=(s=this.getAttribute("device-output"))?s:"desktop",this.updateProperties(),this.shadow&&this.render())}connectedCallback(){var e,n;this.shadow||(this.shadow=this.attachShadow({mode:"open"})),this.systemTime=Number(this.getAttribute("system-time")||0),this.env=null!=(e=this.getAttribute("env"))?e:"",this.deviceOutput=null!=(n=this.getAttribute("device-output"))?n:"desktop",this.updateProperties(),this.render(),this.dispatchBackgroundUpdate()}dispatchBackgroundUpdate(){this.dispatchEvent(new CustomEvent("c24-background-update",{bubbles:!0,detail:{productSlug:this.productSlug,styles:{}}}))}render(){this.shadow&&(this.shadow.innerHTML=`\n      <style>\n        :host {\n          display: block;\n          height: 360px;\n          position: relative;\n          background: transparent;\n          font-family: Verdana, sans-serif;\n        }\n\n        .teaser-container {\n          width: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          max-width: 960px;\n          margin: 0 auto;\n          padding: 0;\n          text-align: center;\n        }\n\n        .c24-teaser-headline {\n          font-size: 30px;\n          font-weight: bold;\n          color: #181818;\n          line-height: 1.2;\n          margin: 50px 30px 0;\n        }\n\n        .c24-teaser-subline {\n          font-size: 18px;\n          font-weight: normal;\n          color: #181818;\n          line-height: 1.3;\n          margin: 16px 30px 0;\n        }\n\n        .c24-yellow-box {\n          display: inline-flex;\n          position: absolute;\n          bottom: 60px;\n          align-items: center;\n          justify-content: space-between;\n          height: 64px;\n          width: fit-content;\n          margin: 0 auto;\n          padding: 4px 6px 4px 32px;\n          border: 3px solid #FFBB1C;\n          border-radius: 32px;\n          background: #FFFFFF;\n          color: #181818;\n          font-size: 16px;\n          font-weight: normal;\n          text-decoration: none;\n          cursor: pointer;\n          white-space: nowrap;\n          transition: border-color 0.2s ease;\n          gap: 30px;\n          box-sizing: border-box;\n        }\n\n        .c24-yellow-box-2-columns {\n          display: grid;\n          grid-template-columns: repeat(2, auto);\n          height: 100%;\n          justify-content: space-between;\n        }\n\n        .c24-yellow-text-box-wrapper {\n          font-size: 14px;\n          line-height: 20px;\n          box-sizing: border-box;\n          border-radius: 3px;\n          border: none;\n          outline: none;\n          display: flex;\n          place-items: center;\n        }\n\n        .c24-yellow-text-box-wrapper:not(:last-child) {\n          margin-right: 30px;\n        }\n\n        .c24-yellow-box-text {\n          font-size: 16px;\n          padding-left: 10px;\n          flex: 0 0 auto;\n        }\n\n        .c24-yellow-box-button-link {\n          line-height: 22px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          padding: 13px 30px;\n          border-radius: 90px;\n          background: #0563C1;\n          color: #ffffff;\n          font-size: 16px;\n          font-weight: 400;\n          white-space: nowrap;\n          flex-shrink: 0;\n          transition: background 0.2s ease;\n        }\n\n        .c24-yellow-box:hover {\n          background: #FFFFFF;\n          border-color: #FFBB1C;\n        }\n\n        .c24-yellow-box:hover .c24-yellow-box-button-link {\n          background: #064E9C;\n        }\n\n        .c24-yellow-box:active {\n          background: #FFFFFF;\n          border-color: #FFBB1C;\n        }\n\n        .c24-yellow-box:active .c24-yellow-box-button-link {\n          background: #064E9C;\n        }\n\n        .teaser-link {\n          position: absolute;\n          inset: 0;\n          display: none;\n          text-decoration: none;\n        }\n\n        /* tablet + mobile */\n        @media (max-width: 959px) {\n          .teaser-link {\n            display: block;\n            cursor: pointer;\n          }\n\n          .c24-yellow-box {\n            display: none;\n          }\n        }\n\n        /* mobile */\n        @media (max-width: 768px) {\n          :host {\n            height: 230px;\n            font-family: Arial, sans-serif;\n          }\n\n          .c24-teaser-headline {\n            margin-top: 30px;\n            font-size: 20px;\n          }\n\n          .c24-teaser-subline {\n            font-size: 18px;\n            margin: 8px 35px 0;\n          }\n        }\n      </style>\n      <div class="teaser-container">\n        <a\n          class="teaser-link"\n          href="${this.ctaUrl}"\n          aria-label="${i}"\n          tabindex="-1"\n        ></a>\n        <h2 class="c24-teaser-headline">${this.headlineText}</h2>\n        <p class="c24-teaser-subline">${this.sublineText}</p>\n\n        <a class="c24-yellow-box" href="${this.ctaUrl}" aria-label="${i}">\n          <div class="c24-yellow-box-2-columns">\n            <div class="c24-yellow-text-box-wrapper ">\n              <div class="c24-yellow-box-text">${i}</div>\n            </div>\n            <span class="c24-yellow-box-button-link">Angebote entdecken</span>\n          </div>\n        </a>\n\n      </div>\n    `)}}export{l as default};
//# sourceMappingURL=moebel-teaser.client.mjs.map