<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
slidesPerView: 1.2,
spaceBetween: 40,
direction: 'horizontal',
loop: false,
effect: 'slide',
scrollbar: {
el: '.swiper-scrollbar-custom',
dragClass: 'swiper-scrollbar-drag-custom',
draggable: true,
},
breakpoints: {
768: {
spaceBetween: 40,
slidesPerView: 2.2,
},
1024: {
spaceBetween: 40,
slidesPerView: 2.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 2.2,
},
1440: {
spaceBetween: 40,
slidesPerView: 2.2,
}
}
})">
<div class="swiper" x-ref="container">
<div class="swiper-wrapper flex items-center !ease-linear">
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationMon ? false : montageautomationMon;" 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">
Montage- & Prüfautomaten für Stecker
</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-montageautomationMon">
<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="montageautomationMon" 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 ">
Montage- & Prüfautomaten für Stecker
</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>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationDien ? false : montageautomationDien;" 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] ">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>
</div>
</div>
<div class="relative z-10">
<div class="text-white font-bold text-xl mb-5 xl:mb-10">
Montage- & Prüfautomaten für Stecker 2
</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-montageautomationDien">
<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="montageautomationDien" 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 ">
Montage- & Prüfautomaten für Stecker 2
</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>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationDien ? false : montageautomationDien;" 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] ">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>
</div>
</div>
<div class="relative z-10">
<div class="text-white font-bold text-xl mb-5 xl:mb-10">
Montage- & Prüfautomaten für Stecker 2
</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-montageautomationDien">
<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="montageautomationDien" 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 ">
Montage- & Prüfautomaten für Stecker 2
</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>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationDien ? false : montageautomationDien;" 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] ">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>
</div>
</div>
<div class="relative z-10">
<div class="text-white font-bold text-xl mb-5 xl:mb-10">
Montage- & Prüfautomaten für Stecker 2
</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-montageautomationDien">
<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="montageautomationDien" 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 ">
Montage- & Prüfautomaten für Stecker 2
</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>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationDien ? false : montageautomationDien;" 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] ">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>
</div>
</div>
<div class="relative z-10">
<div class="text-white font-bold text-xl mb-5 xl:mb-10">
Montage- & Prüfautomaten für Stecker 2
</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-montageautomationDien">
<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="montageautomationDien" 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 ">
Montage- & Prüfautomaten für Stecker 2
</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>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<div x-data="{ showModal: false }" @click="showModal = showModal === montageautomationDien ? false : montageautomationDien;" 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] ">
<div class="absolute top-0 left-0 w-full h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>
</div>
</div>
<div class="relative z-10">
<div class="text-white font-bold text-xl mb-5 xl:mb-10">
Montage- & Prüfautomaten für Stecker 2
</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-montageautomationDien">
<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="montageautomationDien" 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 ">
Montage- & Prüfautomaten für Stecker 2
</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>
</div>
</div>
<div class="pt-8 pb-5 lg:pt-10 ">
<div class="swiper-scrollbar-custom w-full h-px bg-gray-300">
</div>
</div>
</div>
</div>
{% set cards = cards %}
{% set NoPaddingScrollbar = NoPaddingScrollbar %}
{% set slidesPerViewSm = slidesPerViewSm|default('1.2') %}
{% set slidesPerViewMd = slidesPerViewMd|default('2.2') %}
{% set slidesPerViewLg = slidesPerViewLg|default('2.2') %}
{% set slidesPerViewXl = slidesPerViewXl|default('2.2') %}
{% set slidesPerViewXXl = slidesPerViewXXl|default('2.2') %}
{% set spaceBetweenSm = spaceBetweenSm|default('40') %}
{% set spaceBetweenMd = spaceBetweenMd|default('40') %}
{% set spaceBetweenLg = spaceBetweenLg|default('40') %}
{% set spaceBetweenXl = spaceBetweenXl|default('40') %}
{% set spaceBetweenXXl = spaceBetweenXXl|default('40') %}
{% if cards %}
<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
slidesPerView: {{ slidesPerViewSm }},
spaceBetween: {{ spaceBetweenSm }},
direction: 'horizontal',
loop: false,
effect: 'slide',
scrollbar: {
el: '.swiper-scrollbar-custom',
dragClass: 'swiper-scrollbar-drag-custom',
draggable: true,
},
breakpoints: {
768: {
spaceBetween: {{ spaceBetweenMd }},
slidesPerView: {{ slidesPerViewMd }},
},
1024: {
spaceBetween: {{ spaceBetweenLg }},
slidesPerView: {{ slidesPerViewLg }},
},
1200: {
spaceBetween: {{ spaceBetweenXl }},
slidesPerView: {{ slidesPerViewXl }},
},
1440: {
spaceBetween: {{ spaceBetweenXXl }},
slidesPerView: {{ slidesPerViewXXl }},
}
}
})">
<div class="swiper" x-ref="container">
<div class="swiper-wrapper flex items-center !ease-linear">
{% for item in cards %}
<div class="swiper-slide !h-auto overflow-hidden relative">
{% render "@card-modal" with {
title: item.title,
style: item.style,
modalID: item.modalID,
modal: {
modalID: item.modalID,
title: item.title,
text: item.text,
link: item.link,
linkLabel: item.linkLabel
}
} %}
</div>
{% endfor %}
</div>
{% render '@swiper-scrollbar' with {
bgColor: 'bg-gray-300',
NoPaddingScrollbar: NoPaddingScrollbar
} %}
</div>
</div>
{% endif %}
{
"cards": [
{
"title": "Montage- & Prüfautomaten für Stecker",
"modalID": "montageautomationMon",
"modal": {
"modalID": "montageautomationMon",
"title": "Betriebliche Krankenversicherung",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
},
{
"title": "Montage- & Prüfautomaten für Stecker 2",
"style": "media-bg",
"modalID": "montageautomationDien",
"modal": {
"modalID": "montageautomationDien",
"title": "Betriebliche Krankenversicherung2",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
},
{
"title": "Montage- & Prüfautomaten für Stecker 2",
"style": "media-bg",
"modalID": "montageautomationDien",
"modal": {
"modalID": "montageautomationDien",
"title": "Betriebliche Krankenversicherung2",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
},
{
"title": "Montage- & Prüfautomaten für Stecker 2",
"style": "media-bg",
"modalID": "montageautomationDien",
"modal": {
"modalID": "montageautomationDien",
"title": "Betriebliche Krankenversicherung2",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
},
{
"title": "Montage- & Prüfautomaten für Stecker 2",
"style": "media-bg",
"modalID": "montageautomationDien",
"modal": {
"modalID": "montageautomationDien",
"title": "Betriebliche Krankenversicherung2",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
},
{
"title": "Montage- & Prüfautomaten für Stecker 2",
"style": "media-bg",
"modalID": "montageautomationDien",
"modal": {
"modalID": "montageautomationDien",
"title": "Betriebliche Krankenversicherung2",
"text": "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.",
"link": "/",
"linkLabel": "Jetzt bewerben"
}
}
]
}
No notes defined.