Card Modal

<div x-data="{ showModal: false }" @click="showModal = showModal === 1 ? false : 1;" class="relative cursor-pointer mb-8 pt-6 px-6 pb-14 w-full h-full max-w-[420px] flex flex-col justify-end md:pt-8 md:px-8 xl:pt-10 xl:px-10 aspect-square transition-all hover:brightness-95 active:scale-[0.99] bg-gray-600">

    <div class="relative z-10">
        <div class="text-white font-bold text-xl mb-5 xl:mb-10">
            Betriebliche Krankenversicherung
        </div>
    </div>

    <div class="absolute bottom-0 left-0 pl-6 w-full flex items-center justify-between z-10">
        <button class="inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5" id="modal-button-1">

            <span class="inline-flex items-center w-4 h-4     ">
                <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                    <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                </svg>
            </span>

        </button>
    </div>

    <template x-teleport="body">

        <div x-show="showModal" x-cloak x-transition:enter="transition-all" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" id="1" role="dialog" aria-modal="true" class="fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-[90vw] max-w-7xl z-50">
            <div class="relative pt-20 pb-10 px-5 bg-white z-30 md:p-8 lg:pr-20 lg:pr-36">
                <button @click="showMenu = false; showContact = false; showModal = false" class="absolute top-5 right-5 z-10 md:top-8 md:right-8">

                    <span class="inline-flex items-center w-6 h-6  text-[#343434]   ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5">
                            <path id="b" d="m.75,21.75L21.75.75M.75.75l21,21" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </button>

                <div class="md:flex md:items-center md:gap-12 xl:gap-20">
                    <div class="mb-6 md:w-1/3 md:mb-0 md:self-stretch lg:w-1/2">

                        <div class="relative h-full w-full ">
                            <img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />

                        </div>

                    </div>

                    <div class="md:w-2/3 lg:w-1/2">

                        <h4 class=" text-left h4 ">
                            Betriebliche Krankenversicherung

                        </h4>

                        <p class="default text-base mb-6 leading-customText">Die betriebliche Krankenversicherung (bKV) ist eine Zusatzleistung, die Arbeitgeber ihren Mitarbeitern anbieten können. Sie ergänzt die gesetzliche Krankenversicherung und bietet individuelle Gesundheits-leistungen, die über den Standard hinausgehen. Die bKV stärkt die Mitarbeiterbindung, fördert die Gesundheitsvorsorge und trägt dazu bei, die Attraktivität eines Unternehmens als Arbeitgeber zu steigern. Durch diese Maßnahme investiert der Betrieb in das Wohlbefinden seiner Mitarbeiter, steigert die Arbeitszufriedenheit und trägt zur langfristigen Mitarbeitermotivation bei. </p>

                        <a href="/" class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-2 px-4 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                            <span class="shrink-0">
                                Jetzt bewerben
                            </span>

                        </a>
                    </div>
                </div>
            </div>

            <div @click="showModal = false;" class="fixed w-screen h-screen top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-black z-20 opacity-0 invisible transition-all duration-500" :class="{'!opacity-60 !visible': showModal}"></div>
        </div>
    </template>

</div>