<section class="relative py-12 bg-gray-100 md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<div class="relative z-10 grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full px-6 md:col-start-1 md:col-end-6 xl:col-start-2 xl:col-end-5 flex flex-col justify-between">
<div>
<h2 class="!mb-8 text-left h3 ">
Freu dich auf Benefits
</h2>
<p class="default text-base mb-8 leading-customText">Von Altersvorsorge bis hin zu flexiblen Arbeitszeiten & besonderen monetären Benefits – bei uns zählst DU & unsere Arbeitnehmerbenefits sind bei uns so vielfältig wie die Produkte, die wir entwickeln. </p>
</div>
<a class="btn cursor-pointer inline-flex items-center w-max bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
Jetzt bewerben
</span>
</a>
</div>
<div class="md:col-start-6 md:col-end-13 xl:col-start-5">
<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: 1.3,
},
1024: {
spaceBetween: 40,
slidesPerView: 1.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 1.8,
},
1440: {
spaceBetween: 40,
slidesPerView: 2.8,
}
}
})">
<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">
Leistung mit Qualität statt Quantität
</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 ">
Leistung mit Qualität statt Quantität
</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">
Betriebliche Kranken-
versicherung
</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 ">
Betriebliche Kranken-
versicherung
</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">
Betriebliche Kranken-
versicherung
</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 ">
Betriebliche Kranken-
versicherung
</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">
Betriebliche Kranken-
versicherung
</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 ">
Betriebliche Kranken-
versicherung
</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">
Betriebliche Kranken-
versicherung
</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 ">
Betriebliche Kranken-
versicherung
</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">
Betriebliche Kranken-
versicherung
</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 ">
Betriebliche Kranken-
versicherung
</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 ">
<div class="swiper-scrollbar-custom w-full h-px bg-gray-300">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 bg-gray-100 md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<div class="relative z-10 grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full px-6 md:col-start-1 md:col-end-6 xl:col-start-2 xl:col-end-5 flex flex-col justify-between">
<div>
{% render "@headline" with {
headline: 'Freu dich auf Benefits',
tag: 'h2',
size: 'h3',
classes: '!mb-8',
} %}
{% render "@text" with {
text: 'Von Altersvorsorge bis hin zu flexiblen Arbeitszeiten & besonderen monetären Benefits – bei uns zählst DU & unsere Arbeitnehmerbenefits sind bei uns so vielfältig wie die Produkte, die wir entwickeln.',
classes: 'mb-8'
} %}
</div>
{% include '@button' with {
label: "Jetzt bewerben",
style: 'primary',
classes: "w-max"
} %}
</div>
<div class="md:col-start-6 md:col-end-13 xl:col-start-5">
{% render '@benefits-slider' with {
slidesPerViewMd: '1.3',
slidesPerViewLg: '1.2',
slidesPerViewXl: '1.8',
slidesPerViewXXl: '2.8',
NoPaddingScrollbar: true,
"cards": [
{
"title": "Leistung mit Qualität statt Quantität",
"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": "Betriebliche Kranken-
versicherung",
"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": "Betriebliche Kranken-
versicherung",
"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": "Betriebliche Kranken-
versicherung",
"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": "Betriebliche Kranken-
versicherung",
"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": "Betriebliche Kranken-
versicherung",
"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"
}
}
]
} %}
</div>
</div>
</div>
</section>
/* No context defined. */
No notes defined.