var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
const ASSET_BASE_URL = "https://krankenkassen.check24.de/assets/images/teaser";
const productImage = `${ASSET_BASE_URL}/GKV_Krankenkassenwechsel_Produkt.png`;
const INSURANCE_TYPES = [
  { value: "by_law_or_joint_insured", label: "Gesetzlich krankenversichert" },
  { value: "private", label: "Privat versichert" },
  { value: "abroad", label: "Im Ausland versichert" },
  { value: "none", label: "Nicht versichert" }
];
const INSURERS = [{ "id": 448, "name": "AOK Baden-Württemberg", "insurer_key": "aok_bw" }, { "id": 449, "name": "AOK Bayern", "insurer_key": "aok_bayern" }, { "id": 450, "name": "AOK Bremen/Bremerhaven", "insurer_key": "aok_hb" }, { "id": 451, "name": "AOK Hessen", "insurer_key": "aok_he" }, { "id": 447, "name": "AOK Niedersachsen", "insurer_key": "aok_nieders" }, { "id": 452, "name": "AOK Nordost", "insurer_key": "aok_nordost" }, { "id": 453, "name": "AOK NORDWEST", "insurer_key": "aok_nw" }, { "id": 454, "name": "AOK PLUS", "insurer_key": "aok_plus" }, { "id": 455, "name": "AOK Rheinland-Pfalz/Saarland", "insurer_key": "aok_rps" }, { "id": 456, "name": "AOK Rheinland/Hamburg", "insurer_key": "aok_rh" }, { "id": 457, "name": "AOK Sachsen-Anhalt", "insurer_key": "aok_san" }, { "id": 459, "name": "Audi BKK", "insurer_key": "audi_bkk" }, { "id": 460, "name": "BAHN-BKK", "insurer_key": "bahn_bkk" }, { "id": 461, "name": "BARMER", "insurer_key": "barmer" }, { "id": 462, "name": "BERGISCHE KRANKENKASSE", "insurer_key": "bergische_kk" }, { "id": 463, "name": "Bertelsmann BKK", "insurer_key": "bertelsmann_bkk" }, { "id": 466, "name": "BIG direkt gesund", "insurer_key": "big_direkt" }, { "id": 469, "name": "BKK Akzo Nobel Bayern", "insurer_key": "bkk_akzo" }, { "id": 540, "name": "BKK B. Braun Aesculap", "insurer_key": "bkk_braun" }, { "id": 471, "name": "BKK der MTU Friedrichshafen GmbH", "insurer_key": "bkk_mtu" }, { "id": 542, "name": "BKK Deutsche Bank AG", "insurer_key": "db" }, { "id": 472, "name": "BKK Diakonie", "insurer_key": "bkk_diakonie" }, { "id": 473, "name": "BKK DürkoppAdler", "insurer_key": "bkk_da" }, { "id": 474, "name": "BKK EUREGIO", "insurer_key": "bkk_euregio" }, { "id": 543, "name": "BKK EVM", "insurer_key": "bkk_evm" }, { "id": 544, "name": "BKK EWE", "insurer_key": "bkk_ewe" }, { "id": 475, "name": "BKK exklusiv", "insurer_key": "bkk_exclusiv" }, { "id": 476, "name": "BKK Faber-Castell & Partner", "insurer_key": "bkk_faber" }, { "id": 477, "name": "BKK firmus", "insurer_key": "bkk_firmus" }, { "id": 478, "name": "BKK Freudenberg", "insurer_key": "bkk_freudenberg" }, { "id": 479, "name": "BKK GILDEMEISTER SEIDENSTICKER", "insurer_key": "bkk_gs" }, { "id": 546, "name": "BKK Groz-Beckert", "insurer_key": "bkk_gb" }, { "id": 481, "name": "BKK Herkules", "insurer_key": "bkk_herkules" }, { "id": 547, "name": "BKK KARL MAYER", "insurer_key": "bkk_mayer" }, { "id": 483, "name": "BKK Linde", "insurer_key": "bkk_linde" }, { "id": 549, "name": "BKK MAHLE", "insurer_key": "bkk_mahle" }, { "id": 484, "name": "BKK Melitta HMR", "insurer_key": "bkk_melitta" }, { "id": 550, "name": "BKK Miele", "insurer_key": "bkk_miele" }, { "id": 486, "name": "BKK PFAFF", "insurer_key": "bkk_pfaff" }, { "id": 487, "name": "BKK Pfalz", "insurer_key": "bkk_pfalz" }, { "id": 538, "name": "BKK Pricewaterhouse­Coopers", "insurer_key": "bkkpricewaterhousecoopers" }, { "id": 488, "name": "BKK ProVita", "insurer_key": "bkk_provita" }, { "id": 489, "name": "BKK Public", "insurer_key": "bkk_public" }, { "id": 551, "name": "BKK Rieker.Ricosta.Weisser", "insurer_key": "bkkrieker-ricosta-weiser" }, { "id": 553, "name": "BKK Salzgitter", "insurer_key": "bkk_salzgitter" }, { "id": 491, "name": "BKK SBH", "insurer_key": "bkkschwarzwaldbaarheuberg" }, { "id": 490, "name": "BKK Scheufelen", "insurer_key": "bkk_scheufelen" }, { "id": 492, "name": "BKK Technoform", "insurer_key": "bkk_technoform" }, { "id": 496, "name": "BKK VDN", "insurer_key": "bkk_vdn" }, { "id": 497, "name": "BKK VerbundPlus", "insurer_key": "bkk_verbundplus" }, { "id": 555, "name": "BKK Voralb HELLER*INDEX*LEUZE", "insurer_key": "bkk_voralb" }, { "id": 499, "name": "BKK Werra-Meissner", "insurer_key": "bkk_wm" }, { "id": 500, "name": "BKK Wirtschaft & Finanzen", "insurer_key": "bkk_wf" }, { "id": 556, "name": "BKK Würth", "insurer_key": "bkk_wuerth" }, { "id": 502, "name": "BKK24", "insurer_key": "bkk24" }, { "id": 557, "name": "BMW BKK", "insurer_key": "bmw_bkk" }, { "id": 503, "name": "Bosch BKK", "insurer_key": "bosch_bkk" }, { "id": 505, "name": "Continentale BKK", "insurer_key": "continentale_bkk" }, { "id": 506, "name": "DAK-Gesundheit", "insurer_key": "dak_gh" }, { "id": 571, "name": "DAK-Gesundheit (Wahltarif GT 120)", "insurer_key": "dak_gh_wt_1" }, { "id": 578, "name": "DAK-Gesundheit (Wahltarif GT 150)", "insurer_key": "dak_gh_wt_2" }, { "id": 507, "name": "Debeka BKK", "insurer_key": "debeka_bkk" }, { "id": 510, "name": "energie-BKK", "insurer_key": "energie_bkk" }, { "id": 559, "name": "Ernst & Young BKK", "insurer_key": "ernstyoungbkk" }, { "id": 511, "name": "Heimat Krankenkasse", "insurer_key": "heimat_kk" }, { "id": 512, "name": "HEK - Hanseatische Krankenkasse", "insurer_key": "hek" }, { "id": 513, "name": "hkk Krankenkasse", "insurer_key": "hkk" }, { "id": 517, "name": "IKK - Die Innovationskasse", "insurer_key": "ikk_nord" }, { "id": 576, "name": "IKK - Die Innovationskasse (Wahltarif Arzt)", "insurer_key": "ikk_wt_doctor_1" }, { "id": 514, "name": "IKK Brandenburg und Berlin", "insurer_key": "ikkbb" }, { "id": 515, "name": "IKK classic", "insurer_key": "ikk" }, { "id": 516, "name": "IKK gesund plus", "insurer_key": "ikk_gesund_plus" }, { "id": 518, "name": "IKK Südwest", "insurer_key": "ikk-suedwest" }, { "id": 519, "name": "KKH Kaufmännische Krankenkasse", "insurer_key": "kkh" }, { "id": 520, "name": "KNAPPSCHAFT", "insurer_key": "kbs" }, { "id": 548, "name": "Koenig & Bauer BKK (BKK KBA)", "insurer_key": "bkk_kba" }, { "id": 560, "name": "Krones BKK", "insurer_key": "krones_bkk" }, { "id": 536, "name": "Mercedes-Benz BKK", "insurer_key": "daimler_bkk" }, { "id": 561, "name": "Merck BKK", "insurer_key": "bkk_merck" }, { "id": 522, "name": "mhplus Krankenkasse", "insurer_key": "mhplus" }, { "id": 495, "name": "mkk – meine krankenkasse", "insurer_key": "bkk_vbu" }, { "id": 464, "name": "Mobil Krankenkasse", "insurer_key": "mobil_bkk" }, { "id": 577, "name": "Mobil Krankenkasse (Wahltarif Zahnersatz)", "insurer_key": "mobil_wt_dentures_1" }, { "id": 523, "name": "novitas bkk", "insurer_key": "novitas_bkk" }, { "id": 524, "name": "Pronova BKK", "insurer_key": "pronova_bkk" }, { "id": 525, "name": "R+V Betriebskrankenkasse", "insurer_key": "rundv_bkk" }, { "id": 526, "name": "Salus BKK", "insurer_key": "salus_bkk" }, { "id": 528, "name": "SECURVITA Krankenkasse", "insurer_key": "securvita" }, { "id": 527, "name": "Siemens-Betriebskrankenkasse (SBK)", "insurer_key": "sbk" }, { "id": 530, "name": "SKD BKK", "insurer_key": "skd_bkk" }, { "id": 564, "name": "Südzucker-BKK", "insurer_key": "suedzucker_bkk" }, { "id": 537, "name": "SVLFG (Sozialversicherung für Landwirtschaft, Forsten und Gartenbau)", "insurer_key": "svlfg" }, { "id": 532, "name": "TK - Techniker Krankenkasse", "insurer_key": "tk" }, { "id": 494, "name": "TUI BKK", "insurer_key": "tui_bkk" }, { "id": 534, "name": "VIACTIV Krankenkasse", "insurer_key": "viactiv" }, { "id": 566, "name": "vivida bkk", "insurer_key": "vivida" }, { "id": 465, "name": "WMF BKK", "insurer_key": "wmf_bkk" }, { "id": 501, "name": "ZF BKK", "insurer_key": "bkk_zf_partner" }];
class GkvKrankenkassenwechselTeaserClient extends HTMLElement {
  constructor() {
    super();
    __publicField(this, "linkUrl", "https://www.check24.de/gesetzliche-krankenversicherung/?web_home_teaser");
    __publicField(this, "deviceOutput", "desktop");
    __publicField(this, "language", "de-DE");
    __publicField(this, "user");
    __publicField(this, "platform", "web");
    __publicField(this, "shadow", null);
    __publicField(this, "currentInsuranceType", "by_law_or_joint_insured");
    __publicField(this, "currentInsurer", null);
    __publicField(this, "currentInsurerKey", null);
    __publicField(this, "searchTerm", "");
    __publicField(this, "isTypeDropdownOpen", false);
    __publicField(this, "isInsurerDropdownOpen", false);
    __publicField(this, "highlightedIndex", -1);
    __publicField(this, "listenersAttached", false);
    __publicField(this, "onShadowClick", (e) => {
      var _a;
      if (!this.shadow) return;
      const target = e.target;
      if (!target) return;
      const typeOption = target.closest(".type-option");
      if (typeOption) {
        e.preventDefault();
        this.currentInsuranceType = typeOption.dataset.value || "";
        if (this.isStatutory()) {
          this.currentInsurer = null;
          this.currentInsurerKey = null;
        }
        this.isTypeDropdownOpen = false;
        this.searchTerm = "";
        this.highlightedIndex = -1;
        this.updateUi();
        return;
      }
      const insurerOption = target.closest(".insurer-option");
      if (insurerOption) {
        e.preventDefault();
        const insurer = {
          id: parseInt(insurerOption.dataset.id || "0", 10),
          name: insurerOption.dataset.name || "",
          insurer_key: insurerOption.dataset.key || ""
        };
        this.selectInsurer(insurer);
        return;
      }
      if (target.closest(".cta-button")) {
        e.preventDefault();
        window.location.href = this.buildSubmitUrl();
        return;
      }
      if (target.closest(".type-dropdown")) {
        e.preventDefault();
        this.isTypeDropdownOpen = !this.isTypeDropdownOpen;
        this.isInsurerDropdownOpen = false;
        this.updateDropdowns();
        return;
      }
      if (target.closest(".insurer-field")) {
        const insurerInput = (_a = this.shadow) == null ? void 0 : _a.querySelector(".insurer-input");
        if (insurerInput && target !== insurerInput) {
          e.preventDefault();
          insurerInput.focus();
        }
        return;
      }
      if (target.closest(".teaser-container") && window.innerWidth <= 960 && !target.closest(".form-container")) {
        window.location.href = this.linkUrl;
        return;
      }
      if (target.closest(".teaser-container") && !target.closest(".form-container")) {
        if (this.isTypeDropdownOpen || this.isInsurerDropdownOpen) {
          this.isTypeDropdownOpen = false;
          this.isInsurerDropdownOpen = false;
          this.updateDropdowns();
        }
      }
    });
    __publicField(this, "onShadowInput", (e) => {
      const input = e.target;
      if (!input || !input.classList.contains("insurer-input")) return;
      this.searchTerm = input.value;
      this.isTypeDropdownOpen = false;
      this.isInsurerDropdownOpen = true;
      this.highlightedIndex = -1;
      this.updateDropdowns();
    });
    __publicField(this, "onShadowFocusIn", (e) => {
      const target = e.target;
      if (!target) return;
      if (target.classList.contains("insurer-input")) {
        this.isTypeDropdownOpen = false;
        this.isInsurerDropdownOpen = true;
        this.updateDropdowns();
      }
    });
    __publicField(this, "onShadowKeyDown", (e) => {
      const keyEvent = e;
      const input = e.target;
      if (!input || !input.classList.contains("insurer-input")) return;
      if (!this.isInsurerDropdownOpen) return;
      const filteredInsurers = this.filterInsurers(this.searchTerm);
      if (keyEvent.key === "ArrowDown") {
        keyEvent.preventDefault();
        if (this.highlightedIndex < filteredInsurers.length - 1) {
          this.highlightedIndex++;
          this.updateInsurerDropdown();
        }
      } else if (keyEvent.key === "ArrowUp") {
        keyEvent.preventDefault();
        if (this.highlightedIndex > 0) {
          this.highlightedIndex--;
          this.updateInsurerDropdown();
        }
      } else if (keyEvent.key === "Enter") {
        keyEvent.preventDefault();
        if (this.highlightedIndex >= 0 && filteredInsurers[this.highlightedIndex]) {
          this.selectInsurer(filteredInsurers[this.highlightedIndex]);
        }
      } else if (keyEvent.key === "Escape") {
        this.isInsurerDropdownOpen = false;
        this.updateInsurerDropdown();
      }
    });
    __publicField(this, "onDocumentClick", (e) => {
      if (!this.isTypeDropdownOpen && !this.isInsurerDropdownOpen) return;
      const path = e.composedPath();
      const clickedInsideThisComponent = path.includes(this);
      if (clickedInsideThisComponent) return;
      this.isTypeDropdownOpen = false;
      this.isInsurerDropdownOpen = false;
      this.updateDropdowns();
    });
  }
  isStatutory() {
    return this.currentInsuranceType === "by_law_or_joint_insured";
  }
  static get observedAttributes() {
    return ["link-url", "device-output", "language", "user", "platform"];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;
    if (name === "link-url") {
      this.linkUrl = newValue || this.linkUrl;
    }
    const validated = C24Home.validateAttributes(this.attributes);
    this.deviceOutput = validated.deviceOutput;
    this.language = validated.language;
    this.user = validated.user;
    this.platform = validated.platform;
    if (this.shadow) {
      this.render();
      this.updateUi();
    }
  }
  connectedCallback() {
    if (!this.shadow) {
      this.shadow = this.attachShadow({ mode: "open" });
    }
    const linkUrlAttr = this.getAttribute("link-url");
    if (linkUrlAttr) this.linkUrl = linkUrlAttr;
    const validated = C24Home.validateAttributes(this.attributes);
    this.deviceOutput = validated.deviceOutput;
    this.language = validated.language;
    this.user = validated.user;
    this.platform = validated.platform;
    this.render();
    this.attachListenersOnce();
    this.updateUi();
  }
  disconnectedCallback() {
    document.removeEventListener("click", this.onDocumentClick);
  }
  attachListenersOnce() {
    if (!this.shadow || this.listenersAttached) return;
    this.listenersAttached = true;
    this.shadow.addEventListener("click", this.onShadowClick);
    this.shadow.addEventListener("input", this.onShadowInput);
    this.shadow.addEventListener("focusin", this.onShadowFocusIn);
    this.shadow.addEventListener("keydown", this.onShadowKeyDown);
    document.addEventListener("click", this.onDocumentClick);
  }
  filterInsurers(searchTerm) {
    const search = searchTerm.trim().toLowerCase();
    const insurers = INSURERS;
    if (!search) {
      return insurers;
    }
    return insurers.filter(
      (insurer) => insurer.name.toLowerCase().includes(search)
    );
  }
  highlightMatch(text, searchTerm) {
    if (!searchTerm.trim()) return text;
    const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
    return text.replace(regex, "<strong>$1</strong>");
  }
  buildSubmitUrl() {
    const url = new URL("https://krankenkassen.check24.de/app/benutzereingaben");
    const params = url.searchParams;
    params.append("c24api_current_insurance_type", this.currentInsuranceType);
    if (this.isStatutory() && this.currentInsurer) {
      params.append("c24api_current_insurer", this.currentInsurer.toString());
      if (this.currentInsurerKey) {
        params.append("c24api_insurer_key", this.currentInsurerKey);
      }
    }
    return url.toString();
  }
  updateUi() {
    this.updateTypeLabel();
    this.updateInsurerField();
    this.updateDropdowns();
  }
  selectInsurer(insurer) {
    var _a;
    this.currentInsurer = insurer.id;
    this.currentInsurerKey = insurer.insurer_key;
    this.searchTerm = insurer.name;
    this.isInsurerDropdownOpen = false;
    this.highlightedIndex = -1;
    const insurerInput = (_a = this.shadow) == null ? void 0 : _a.querySelector(".insurer-input");
    if (insurerInput) {
      insurerInput.value = insurer.name;
    }
    this.updateInsurerDropdown();
  }
  updateTypeLabel() {
    var _a;
    const typeLabel = (_a = this.shadow) == null ? void 0 : _a.querySelector(".type-label");
    if (typeLabel) {
      const selected = INSURANCE_TYPES.find((t) => t.value === this.currentInsuranceType);
      typeLabel.textContent = selected ? selected.label : "Bitte wählen";
    }
  }
  updateInsurerField() {
    var _a, _b;
    const insurerField = (_a = this.shadow) == null ? void 0 : _a.querySelector(".insurer-field");
    const insurerInput = (_b = this.shadow) == null ? void 0 : _b.querySelector(".insurer-input");
    if (insurerField) {
      if (this.isStatutory()) {
        insurerField.style.display = "flex";
      } else {
        insurerField.style.display = "none";
      }
    }
    if (insurerInput) {
      insurerInput.value = this.searchTerm;
    }
  }
  updateDropdowns() {
    var _a, _b, _c, _d;
    const typeOptions = (_a = this.shadow) == null ? void 0 : _a.querySelector(".type-options");
    const typeDropdown = (_b = this.shadow) == null ? void 0 : _b.querySelector(".type-dropdown");
    const typeValue = (_c = this.shadow) == null ? void 0 : _c.querySelector(".type-dropdown .field-value");
    if (typeOptions && typeDropdown) {
      if (typeValue) {
        typeValue.setAttribute("aria-expanded", this.isTypeDropdownOpen ? "true" : "false");
      }
      if (this.isTypeDropdownOpen) {
        const fieldRect = typeDropdown.getBoundingClientRect();
        typeOptions.style.display = "block";
        typeOptions.style.width = fieldRect.width + "px";
      } else {
        typeOptions.style.display = "none";
      }
    }
    const typeChevron = (_d = this.shadow) == null ? void 0 : _d.querySelector(".type-chevron");
    if (typeChevron) {
      typeChevron.style.transform = this.isTypeDropdownOpen ? "rotate(180deg)" : "rotate(0deg)";
    }
    this.updateInsurerDropdown();
  }
  updateInsurerDropdown() {
    var _a, _b, _c;
    const insurerDropdown = (_a = this.shadow) == null ? void 0 : _a.querySelector(".insurer-dropdown");
    const insurerField = (_b = this.shadow) == null ? void 0 : _b.querySelector(".insurer-field");
    const insurerInput = (_c = this.shadow) == null ? void 0 : _c.querySelector(".insurer-input");
    if (!insurerDropdown || !insurerField) return;
    const filteredInsurers = this.filterInsurers(this.searchTerm);
    if (insurerInput) {
      insurerInput.setAttribute("aria-expanded", this.isInsurerDropdownOpen && filteredInsurers.length > 0 ? "true" : "false");
    }
    if (this.isInsurerDropdownOpen && filteredInsurers.length > 0) {
      const fieldRect = insurerField.getBoundingClientRect();
      insurerDropdown.style.display = "block";
      insurerDropdown.style.width = fieldRect.width + "px";
      insurerDropdown.innerHTML = filteredInsurers.map((insurer, index) => `
                <div class="insurer-option ${index === this.highlightedIndex ? "highlighted" : ""}" 
                     role="option"
                     data-id="${insurer.id}" 
                     data-name="${insurer.name}" 
                     data-key="${insurer.insurer_key}">
                    ${this.highlightMatch(insurer.name, this.searchTerm)}
                </div>
            `).join("");
    } else {
      insurerDropdown.style.display = "none";
    }
  }
  render() {
    if (!this.shadow) return;
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          height: 360px;
          position: relative;
          background-color: transparent;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        .teaser-container {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: transparent;
          z-index: 0;
        }
        .teaser-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100%;
          position: absolute;
          width: 100%;
          min-width: 100%;
        }
        .text-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          padding-top: 40px;
        }
        .headline-text {
          font-size: 2.25rem;
          line-height: 2.5rem;
          font-weight: normal;
          color: #FFFFFF;
          margin: 0;
          font-family: Verdana, sans-serif;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          white-space: nowrap;
          text-align: center;
        }
        .subline-text {
          font-size: 1.25rem;
          font-weight: 300;
          color: #FFFFFF;
          margin: 16px 0 0 0;
          font-family: Verdana, sans-serif;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          white-space: nowrap;
          text-align: center;
        }
        .image-wrapper {
          position: absolute;
          left: auto;
          right: max(30px, calc(51% - 640px));
          top: 0;
          bottom: -20%;
          display: flex;
          align-items: center;
          z-index: 0;
        }
        .product-image {
          height: 125%;
          width: auto;
          display: block;
          margin: -100px;
        }
        
        .form-container {
          background: #FFFFFF;
          border-radius: 40px;
          padding: 8px 8px 8px 32px;
          display: flex;
          align-items: center;
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
          border: 3px solid #FFBB1C;
          box-sizing: border-box;
          max-width: 928px;
          min-width: min(960px, calc(100% - 32px));
          width: calc(100% - 32px);
          position: absolute;
          bottom: 60px;
          left: 16px;
          right: 16px;
          margin: 0 auto;
        }
        
        .form-field {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 0 16px 0 24px;
          flex: 1 0 0;
          min-width: 0;
          position: relative;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
        }
        
        .form-field:first-of-type {
          padding-left: 0;
        }
        
        .form-field:not(:first-of-type) {
          border-left: 1px solid #949494;
        }
        
        .field-label {
          font-size: 14px;
          color: #666;
          font-family: Verdana, sans-serif;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .field-value {
          font-size: 16px;
          color: #181818;
          font-family: Verdana, sans-serif;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
        }
        
        .chevron {
          width: 16px;
          height: 16px;
          color: #999;
          transition: transform 0.2s;
          flex-shrink: 0;
        }
        
        .type-options, .insurer-dropdown {
          position: absolute;
          left: 0;
          top: calc(100% + 24px);
          background: white;
          border: 1px solid #ddd;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          z-index: 9999;
          max-height: 240px;
          overflow-y: auto;
          display: none;
        }
        
        .type-option, .insurer-option {
          padding: 12px 16px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          font-family: Verdana, sans-serif;
          transition: background 0.15s ease;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
        }
        
        .type-option:hover, .insurer-option:hover, .insurer-option.highlighted {
          background: #f5f5f5;
        }
        
        .insurer-option strong {
          font-weight: bold;
          color: #000;
        }
        
        .insurer-input {
          width: 100%;
          border: none;
          outline: none;
          font-size: 16px;
          color: #181818;
          font-family: Verdana, sans-serif;
          background: transparent;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .insurer-input::placeholder {
          color: #666;
        }
        
        .cta-button {
          background: #0563C1;
          color: #FFFFFF;
          border: none;
          border-radius: 90px;
          padding: 16px 16px;
          min-width: 140px;
          font-size: 16px;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.2s ease;
          font-family: Verdana, sans-serif;
          flex-shrink: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
        }
        .cta-button:hover {
          background: #044a9e;
        }
        
        @media (max-width: 960px) {
          .teaser-container {
            cursor: pointer;
          }
          .form-container {
            display: none;
          }
        }
        
        /* Tablet Layout */
        @media (min-width: 769px) and (max-width: 960px) {
          :host {
            padding: 30px 20px 0 20px;
          }
          
          .teaser-content {
            align-items: center;
          }
          
          .text-wrapper {
            align-items: center;
            padding-top: 0;
          }
          
          .headline-text {
            font-size: 24px;
            text-align: center;
            white-space: normal;
            line-height: 1.3;
          }
          
          .subline-text {
            font-size: 16px;
            text-align: center;
            white-space: normal;
            margin: 8px 0 0 0;
          }
          
          .image-wrapper {
            position: static;
            width: 100%;
            left: auto;
            right: auto;
            top: auto;
            bottom: auto;
            justify-content: center;
            margin-top: 40px;
          }
          
          .product-image {
            height: 400px;
            max-height: 400px;
            width: auto;
          }
        }
        
        /* Phone Layout */
        @media (max-width: 768px) {
          :host {
            height: 230px;
            padding: 30px 20px 0 20px;
          }
          
          .teaser-content {
            align-items: center;
            height: 100%;
          }
          
          .text-wrapper {
            align-items: center;
            max-width: 100%;
            padding-top: 0;
            flex-shrink: 0;
          }
          
          .headline-text {
            font-size: 20px;
            text-align: center;
            white-space: normal;
            line-height: 1.3;
            font-family: Arial, sans-serif;
          }
          
          .subline-text {
            font-size: 14px;
            text-align: center;
            white-space: normal;
            margin: 8px 0 0 0;
            font-family: Arial, sans-serif;
          }
          
          .image-wrapper {
            position: static;
            width: 100%;
            left: auto;
            right: auto;
            top: auto;
            bottom: auto;
            justify-content: center;
            margin-top: -20px;
            flex: 1;
            min-height: 0;
          }
          
          .product-image {
            max-height: 115%;
            height: auto;
            width: auto;
            object-fit: contain;
          }
        }
      </style>
      <div class="teaser-container">
        <div class="teaser-content">
          <div class="text-wrapper">
            <h2 class="headline-text">Krankenkasse wechseln lohnt sich!</h2>
            <p class="subline-text">Prüfen Sie Ihre Gehaltsabrechnung</p>
          </div>
          <div class="image-wrapper">
            <img 
              src="${productImage}" 
              alt="Krankenversicherung prüfen" 
              class="product-image"
            >
          </div>
          <div class="form-container" role="search" aria-label="Krankenversicherung Suchformular">
            <div class="form-field type-dropdown" aria-label="Versicherungsart auswählen">
              <div class="field-label">Aktuelle Versicherungsart</div>
              <div class="field-value" role="combobox" aria-haspopup="listbox" aria-expanded="false">
                <span class="type-label">Gesetzlich krankenversichert</span>
                <svg class="chevron type-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </div>
              <div class="type-options" role="listbox" aria-label="Versicherungsarten">
                <div class="type-option" data-value="by_law_or_joint_insured" role="option">Gesetzlich krankenversichert</div>
                <div class="type-option" data-value="private" role="option">Privat versichert</div>
                <div class="type-option" data-value="abroad" role="option">Im Ausland versichert</div>
                <div class="type-option" data-value="none" role="option">Nicht versichert</div>
              </div>
            </div>
            
            <div class="form-field insurer-field" aria-label="Krankenkasse suchen">
              <div class="field-label">Aktuelle Krankenkasse</div>
              <input type="text" 
                     class="insurer-input" 
                     placeholder="bitte Krankenkasse eingeben"
                     autocomplete="off"
                     role="combobox"
                     aria-haspopup="listbox"
                     aria-expanded="false"
                     aria-label="Krankenkasse eingeben"
                     aria-autocomplete="list">
              <div class="insurer-dropdown" role="listbox" aria-label="Krankenkassen"></div>
            </div>
            
            <button class="cta-button" aria-label="Krankenversicherung vergleichen">jetzt vergleichen</button>
          </div>
        </div>
      </div>
    `;
  }
}
export {
  GkvKrankenkassenwechselTeaserClient as default
};
//# sourceMappingURL=teaser-gkv-krankenkassenwechsel.client.mjs.map