var n=Object.defineProperty,e=(e,t,i)=>((e,t,i)=>t in e?n(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);const t={linkLabel:"Zum Internet-Vergleich",title:"Internet für Zuhause",subtitle:"Einfach vergleichen und sparen",legend:"Art des Vertrags:",new:"neuer Vertrag",change:"Vertrag wechseln",move:"Umzug",submit:"Tarife finden"},i={linkLabel:"To Internet Comparison",title:"Internet for your home",subtitle:"Compare and save",legend:"Type of contract:",new:"new contract",change:"change contract",move:"moving",submit:"Find tariffs"};class s extends HTMLElement{constructor(){super(...arguments),e(this,"deviceOutput","desktop"),e(this,"language","de-DE"),e(this,"platform","web"),e(this,"systemTime",0),e(this,"shadow",null),e(this,"boundHandleSubmit",this.handleSubmit.bind(this))}static get observedAttributes(){return["device-output","language","platform"]}attributeChangedCallback(n,e,t){if(e===t)return;const i=C24Home.validateAttributes(this.attributes);this.deviceOutput=i.deviceOutput,this.language=i.language,this.platform=i.platform,this.systemTime=Number(this.getAttribute("system-time")||0),this.shadow&&this.render()}handleSubmit(n){var e;n.preventDefault();const t=null==(e=n.target.customerType)?void 0:e.value,i=this.buildUrlWithCustomerType(t);window.location.assign(i)}connectedCallback(){var n;this.shadow||(this.shadow=this.attachShadow({mode:"open"}));const e=C24Home.validateAttributes(this.attributes);this.deviceOutput=e.deviceOutput,this.language=e.language,this.platform=e.platform,this.render(),null==(n=this.shadow)||n.addEventListener("submit",this.boundHandleSubmit)}disconnectedCallback(){var n;null==(n=this.shadow)||n.removeEventListener("submit",this.boundHandleSubmit)}buildUrlWithCustomerType(n){const e=new URL(null!=(s=null==(i=null==(t=globalThis.location)?void 0:t.hostname)?void 0:i.endsWith("check24.de"))&&s?"https://internet.check24.de/":"https://internet.check24-test.de/");var t,i,s;return new URLSearchParams(window.location.search).forEach((n,t)=>{"customerType"!==t&&e.searchParams.set(t,n)}),n&&e.searchParams.set("customerType",n),e.searchParams.set("tid3","home_teaser"),e.toString()}render(){if(!this.shadow)return;const n=this.getStyles(),e=this.getContent();this.shadow.innerHTML=`\n            <style>${n}</style>\n            ${e}\n        `}getContent(){const n=this.buildUrlWithCustomerType(void 0),e=function(n){return n?i:t}("en-GB"===this.language||"en-US"===this.language);return`\n            <div class="dsl-teaser-content">\n                <a class="teaser-link" href="${n}" aria-label="${e.linkLabel}">\n                    <div class="container">\n                        <div class="headlines">\n                            <h2 class="title">${e.title}</h2>\n                            <p class="subtitle">${e.subtitle}</p>\n                        </div>\n                    </div>\n                </a>\n                <form>\n                    <fieldset>\n                        <legend class="sr-only">${e.legend}</legend>\n                        <div>\n                            <input type="radio" name="customerType" value="new" id="new" />\n                            <label for="new">${e.new}</label>\n                        </div>\n                        <div>\n                            <input type="radio" name="customerType" value="change" id="change" />\n                            <label for="change">${e.change}</label>\n                        </div>\n                        <div>\n                            <input type="radio" name="customerType" value="move" id="move" />\n                            <label for="move">${e.move}</label>\n                        </div>\n                    </fieldset>\n                    <button type="submit">${e.submit}</button>\n                </form>\n            </div>\n        `}getStyles(){return'/*\n * Shared teaser styles (used by both client and server).\n * Scoped under .dsl-teaser-content for consistent structure.\n */\n\n.dsl-teaser-content {\n    font-family: Verdana, sans-serif;\n    line-height: normal; /* reset to protect against inherited line-height */\n    display: block;\n    height: 360px; /* Desktop & Tablet specification */\n    position: relative;\n    width: 100%;\n}\n\n.dsl-teaser-content .teaser-link {\n    display: block;\n    height: 100%;\n    color: inherit;\n    text-decoration: none;\n}\n\n.dsl-teaser-content .container {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.dsl-teaser-content .headlines {\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    text-align: center;\n    color: white;\n}\n\n.dsl-teaser-content .title {\n    font-size: 1.875rem;\n    font-weight: 700;\n    margin: 0;\n    letter-spacing: -0.32px;\n}\n\n.dsl-teaser-content .subtitle {\n    font-size: 1.125rem;\n    font-weight: 400;\n    letter-spacing: -0.32px;\n    margin-top: 1rem;\n    margin-bottom: 0;\n}\n\n.dsl-teaser-content form {\n    all: unset;\n    display: flex;\n    justify-content: space-between;\n    gap: 2.375rem;\n    border: 3px solid #ffbb1c;\n    background: white;\n    border-radius: 50px;\n    height: 48px;\n    padding: 5px 5px 5px 1.5rem;\n    position: absolute;\n    bottom: 60px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: calc(100% - 2rem);\n    max-width: 672px; /* bigger than allowed but anything else looks bad */\n}\n\n.dsl-teaser-content fieldset {\n    all: unset;\n    display: flex;\n    flex: 3;\n    justify-content: space-between;\n    align-items: center;\n    color: #181818;\n}\n\n.dsl-teaser-content label {\n    font-size: 1rem;\n    line-height: 22px;\n    padding: 1rem 0;\n}\n\n.dsl-teaser-content button {\n    all: unset;\n    text-align: center;\n    border-radius: 50px;\n    background: #0563c1;\n    color: white;\n    cursor: pointer;\n    font-size: 1rem;\n    min-width: 167px;\n}\n\n.dsl-teaser-content button:hover {\n    background: #064e9c;\n}\n\n.dsl-teaser-content button:focus-visible {\n    outline: 2px solid #0563c1;\n    outline-offset: 2px;\n}\n\n.dsl-teaser-content input[type="radio"] {\n    position: absolute;\n    opacity: 0;\n}\n\n.dsl-teaser-content input[type="radio"] + label {\n    position: relative;\n    cursor: pointer;\n    padding-left: 28px;\n}\n\n.dsl-teaser-content input[type="radio"] + label::before {\n    content: "";\n    position: absolute;\n    left: 0;\n    top: 14px;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 1px solid #6f686a;\n}\n\n.dsl-teaser-content input[type="radio"] + label::after {\n    content: "";\n    position: absolute;\n    left: 5px;\n    top: 19px;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: transparent;\n}\n\n.dsl-teaser-content input[type="radio"]:checked + label::after {\n    background: #0563c1;\n}\n\n.dsl-teaser-content input[type="radio"]:checked + label::before {\n    border-color: #0563c1;\n}\n\n.dsl-teaser-content input[type="radio"]:focus-visible + label::before {\n    outline: 2px solid #0563c1;\n    outline-offset: 2px;\n    transition: all 300ms;\n}\n\n.dsl-teaser-content .sr-only {\n    position: absolute;\n    left: -10000px;\n    top: auto;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n}\n\n/* Desktop: Width > 959px */\n@media (min-width: 961px) {\n    .dsl-teaser-content .teaser-link {\n        pointer-events: none;\n        cursor: default;\n    }\n\n    .dsl-teaser-content form {\n        pointer-events: auto;\n        display: flex;\n    }\n}\n\n/* Tablet & Mobile: Width <= 960px */\n@media (max-width: 960px) {\n    .dsl-teaser-content .teaser-link {\n        cursor: pointer;\n    }\n\n    .dsl-teaser-content form {\n        display: none;\n    }\n}\n\n/* Mobile: Width < 769px */\n@media (max-width: 768px) {\n    .dsl-teaser-content {\n        height: 230px; /* Mobile specification */\n        font-family: Arial, sans-serif;\n    }\n\n    .dsl-teaser-content .headlines {\n        top: 40px;\n        left: 30px;\n        text-align: left;\n        transform: none;\n        width: calc(100% - 2rem);\n    }\n\n    .dsl-teaser-content .subtitle {\n        margin-top: 0.5rem;\n    }\n\n    .dsl-teaser-content .title {\n        font-size: 1.25rem;\n    }\n}\n\n/*\n * Client-only styles (Shadow DOM host).\n * Shared skeleton styles are in teaser_internet_shared.css.\n */\n\n:host {\n    display: block;\n    position: relative;\n}\n'}}export{s as default};
//# sourceMappingURL=teaser_internet_default.client.mjs.map