<header @scroll.window="showBar = (window.pageYOffset > 20) ? true : false" class="fixed top-0 right-0 pt-3 xl:pt-6 px-3 w-full z-50 xl:px-8">
<div class="flex justify-between gap-2.5">
<div class="order-2 border border-[0,5px] border-[#F2F2F2] bg-white flex justify-between pl-4 transition-all xl:items-center xl:order-1 xl:w-auto xl:py-6 xl:pl-9 xl:pr-9" :class="{ 'xl:!py-4 xl:!pr-12' : showBar }">
<div class="flex mr-4 transition-all xl:block xl:mr-20" :class="{ 'xl:h-[26px] xl:!mr-9 overflow-hidden' : showBar }">
<a class="w-full max-w-[100px] flex transition-all xl:shrink-0 xl:max-w-[150px]" href="/" :class="{ 'xl:!max-w-[100px]' : showBar }">
<span class="flex justify-center items-center w-full h-full">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147.43 58.58" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="c">
<rect y="0" width="147.43" height="58.58" style="fill:none;" />
</clipPath>
<clipPath id="j">
<rect y="0" width="147.43" height="58.58" style="fill:none;" />
</clipPath>
</defs>
<g id="b">
<g style="clip-path:url(#c); fill:none;">
<g id="d">
<path id="e" d="m0,38.47L14.45,0h12.04l14.45,38.47h-10.69l-2.3-6.67h-15.34l-2.3,6.66H0Zm15.01-14.17h10.47l-2.74-8.12c-.15-.41-.33-.92-.53-1.54-.2-.62-.41-1.27-.62-1.96-.21-.69-.4-1.39-.59-2.1s-.37-1.33-.56-1.85h-.39c-.15.71-.36,1.51-.65,2.41l-.84,2.69c-.28.9-.53,1.68-.76,2.35l-2.8,8.12Z" style="fill:#323232;" />
<path id="f" d="m45.52,38.47V0h21.17c2.33-.07,4.64.48,6.69,1.6,1.82,1.03,3.29,2.57,4.26,4.42,1.03,2.06,1.54,4.34,1.48,6.64.06,2.35-.47,4.68-1.54,6.78-1,1.87-2.51,3.42-4.37,4.45-2.07,1.11-4.4,1.66-6.75,1.6h-10.92v12.99h-10.02Zm10.02-20.72h8.57c1.33.09,2.63-.39,3.58-1.32.87-1.02,1.31-2.33,1.23-3.67.04-.94-.15-1.88-.53-2.74-.35-.7-.91-1.28-1.6-1.65-.83-.42-1.76-.62-2.69-.59h-8.56v9.97Z" style="fill:#323232;" />
<path id="g" d="m78.05,38.47L92.5,0h12.04l14.45,38.47h-10.69l-2.3-6.66h-15.34l-2.3,6.66h-10.3Zm15-14.17h10.47l-2.74-8.12c-.15-.41-.33-.92-.53-1.54-.2-.62-.41-1.27-.62-1.96-.21-.69-.4-1.39-.59-2.1s-.37-1.33-.56-1.85h-.39c-.15.71-.36,1.51-.64,2.41l-.84,2.69c-.28.9-.53,1.68-.76,2.35l-2.8,8.12Z" style="fill:#323232;" />
</g>
</g>
</g>
<rect id="h" x="127.64" y="18.68" width="19.79" height="19.79" style="fill:#af003c;" />
<g id="i">
<g style="clip-path:url(#j); fill:none;">
<g id="k">
<path id="l" d="m0,55.96l4.11-10.41h1.9l4.13,10.41h-1.57l-1.02-2.58H2.49l-1,2.58H0Zm2.96-3.81h4.11l-1.26-3.26c-.03-.09-.08-.22-.14-.38s-.13-.34-.2-.54-.14-.4-.21-.61-.14-.4-.2-.57h-.09c-.07.2-.15.43-.24.7s-.18.52-.27.77c-.09.25-.17.46-.23.63l-1.27,3.26Z" style="fill:#323232;" />
<path id="m" d="m13.69,56.14c-.67.03-1.33-.18-1.85-.59-.53-.55-.78-1.31-.7-2.06v-5.51h1.33v5.33c0,.28.03.56.12.82.07.2.19.37.35.5.16.12.34.21.54.26.22.05.45.08.67.08.77,0,1.48-.4,1.86-1.07.21-.37.32-.79.31-1.22v-4.69h1.33v7.98h-1.07l-.12-1.2h-.11c-.19.3-.44.57-.72.79-.27.2-.58.36-.9.45-.34.1-.7.15-1.06.14" style="fill:#323232;" />
<path id="n" d="m21.61,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="o" d="m27.53,56.14c-.71.02-1.41-.13-2.04-.45-.56-.31-1-.79-1.26-1.37-.58-1.52-.58-3.19,0-4.71.26-.58.7-1.06,1.26-1.37,1.3-.6,2.79-.6,4.08,0,.56.3,1,.78,1.25,1.37.57,1.52.57,3.19,0,4.71-.25.58-.69,1.07-1.25,1.37-.63.32-1.33.47-2.04.45m0-1.12c.45.02.89-.09,1.29-.3.36-.22.63-.55.78-.95.19-.52.28-1.07.26-1.63v-.33c.02-.56-.07-1.12-.27-1.64-.15-.39-.42-.72-.78-.94-.4-.21-.84-.32-1.29-.3-.45-.02-.9.09-1.3.3-.36.22-.64.55-.78.94-.19.53-.28,1.08-.26,1.64v.33c-.02.56.07,1.11.26,1.63.14.4.42.73.78.95.4.21.85.32,1.3.3" style="fill:#323232;" />
<path id="p" d="m32.9,55.96v-7.98h1.08l.12,1.2h.11c.18-.3.41-.57.68-.79.25-.2.53-.35.83-.45.32-.1.65-.15.99-.14.46-.01.92.09,1.33.31.4.24.7.62.83,1.07h.09c.33-.59.87-1.03,1.52-1.23.32-.1.66-.15,1-.15.44,0,.87.08,1.28.25.37.17.67.46.86.82.23.47.33,1,.31,1.52v5.57h-1.33v-5.36c0-.27-.03-.54-.11-.8-.06-.19-.17-.36-.33-.49-.14-.12-.31-.2-.49-.25-.2-.05-.4-.08-.6-.08-.35,0-.68.09-.98.27-.31.19-.56.47-.72.79-.19.38-.28.8-.27,1.23v4.69h-1.34v-5.36c0-.27-.03-.54-.12-.8-.06-.19-.17-.36-.32-.49-.14-.12-.3-.2-.48-.25-.19-.05-.39-.08-.58-.08-.74,0-1.41.4-1.75,1.06-.19.38-.28.8-.27,1.23v4.69h-1.33Z" style="fill:#323232;" />
<path id="q" d="m47.95,56.14c-.3,0-.59-.04-.88-.11-.29-.07-.57-.19-.82-.35-.26-.17-.47-.4-.61-.68-.16-.34-.24-.71-.23-1.09-.02-.48.12-.96.39-1.35.28-.37.66-.66,1.1-.83.54-.21,1.1-.35,1.68-.41.7-.08,1.4-.12,2.11-.11v-.91c0-.26-.05-.52-.15-.76-.11-.22-.31-.4-.54-.49-.71-.23-1.48-.23-2.18,0-.23.09-.43.24-.56.45-.11.18-.16.39-.16.61v.23h-1.29c0-.05-.02-.1-.01-.15v-.18c-.02-.44.13-.87.4-1.22.3-.35.69-.61,1.13-.74.54-.18,1.1-.26,1.67-.25.57-.02,1.14.08,1.68.29.41.16.77.45,1.02.82.24.38.35.83.34,1.27v4.32c-.04.24.12.47.36.51.04,0,.08,0,.11,0h.59v.88c-.15.06-.31.12-.47.16-.19.05-.39.07-.59.07-.23,0-.45-.05-.65-.16-.17-.11-.31-.26-.39-.44-.09-.2-.16-.41-.18-.63h-.11c-.19.26-.42.48-.69.66-.29.19-.6.34-.93.43-.37.1-.74.16-1.12.15m.33-1.12c.31,0,.62-.05.92-.15.28-.1.54-.24.77-.43.22-.19.4-.42.53-.68.13-.27.2-.56.2-.87v-.67c-.7,0-1.4.04-2.09.14-.48.05-.93.22-1.33.49-.31.23-.48.6-.46.99-.01.24.05.47.18.67.13.18.31.31.52.39.25.09.51.13.77.13" style="fill:#323232;" />
<path id="r" d="m56.08,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="s" d="m58.72,44.99h1.34v1.49h-1.34v-1.49Zm0,2.99h1.34v7.98h-1.34v-7.98Z" style="fill:#323232;" />
<path id="t" d="m65.42,56.14c-.71.02-1.41-.13-2.04-.45-.56-.31-1-.79-1.26-1.37-.58-1.52-.58-3.19,0-4.71.26-.58.7-1.06,1.26-1.37,1.3-.6,2.79-.6,4.08,0,.56.3,1,.78,1.25,1.37.57,1.52.57,3.19,0,4.71-.25.58-.69,1.07-1.25,1.37-.63.32-1.33.47-2.04.45m0-1.12c.45.02.89-.09,1.29-.3.36-.22.63-.55.78-.95.19-.52.28-1.08.27-1.63v-.33c.02-.56-.07-1.12-.27-1.64-.15-.39-.42-.72-.78-.94-.4-.21-.84-.32-1.29-.3-.45-.02-.9.09-1.3.3-.36.22-.64.55-.78.94-.19.53-.28,1.08-.26,1.64v.33c-.02.56.07,1.11.26,1.63.14.4.42.73.78.95.4.21.85.32,1.3.3" style="fill:#323232;" />
<path id="u" d="m70.79,55.96v-7.98h1.08l.12,1.2h.11c.19-.3.44-.57.72-.79.27-.2.58-.35.9-.45.34-.1.7-.15,1.05-.14.46,0,.91.08,1.33.26.38.17.7.47.9.84.24.48.35,1.02.33,1.56v5.51h-1.34v-5.33c0-.28-.03-.56-.13-.82-.07-.19-.19-.37-.35-.5-.16-.13-.34-.21-.53-.26-.23-.05-.46-.08-.69-.08-.37,0-.74.09-1.06.27-.34.18-.61.46-.8.79-.21.38-.31.8-.3,1.23v4.69h-1.33Z" style="fill:#323232;" />
<path id="v" d="m82.76,55.96v-10.41h8.01v1.24h-6.57v3.21h5.9v1.24h-5.9v3.46h6.66v1.24h-8.1Z" style="fill:#323232;" />
<path id="w" d="m91.94,55.96l2.87-4.08-2.73-3.9h1.61l1.94,2.85h.08l1.94-2.85h1.52l-2.73,3.85,2.88,4.13h-1.59l-2.09-3.08h-.08l-2.09,3.08h-1.52Z" style="fill:#323232;" />
<path id="x" d="m100.56,58.58v-10.61h1.06l.14,1.14h.11c.25-.42.61-.77,1.05-.99,1-.47,2.17-.43,3.14.11.5.33.87.81,1.08,1.37.28.78.41,1.6.38,2.42.02.79-.11,1.58-.39,2.31-.21.55-.59,1.03-1.08,1.36-.49.3-1.05.45-1.62.44-.33,0-.65-.04-.97-.12-.29-.08-.57-.21-.82-.39-.25-.19-.47-.41-.64-.68h-.09v3.63h-1.33Zm3.43-3.61c.42.02.85-.09,1.21-.3.33-.22.58-.55.7-.93.17-.52.24-1.07.23-1.62v-.32c.02-.57-.06-1.14-.24-1.68-.13-.37-.37-.69-.71-.9-.35-.19-.75-.29-1.15-.27-.43-.02-.86.1-1.22.33-.34.24-.58.58-.7.98-.16.52-.23,1.05-.22,1.59v.23c-.01.47.04.93.16,1.39.08.33.24.63.45.89.18.21.41.37.67.47.26.09.53.14.8.14" style="fill:#323232;" />
<path id="y" d="m112.35,56.14c-.69.02-1.38-.13-2-.45-.55-.31-.98-.79-1.23-1.37-.56-1.52-.56-3.19,0-4.71.25-.58.68-1.06,1.24-1.37.63-.32,1.34-.47,2.05-.45.65-.02,1.3.13,1.88.43.51.29.91.75,1.14,1.29.28.68.41,1.41.39,2.15v.64h-5.74c0,.54.1,1.07.28,1.57.14.38.4.7.75.9.39.2.82.3,1.26.28.3,0,.61-.04.9-.13.24-.08.46-.2.65-.37.17-.16.31-.36.4-.58.09-.23.14-.48.15-.73h1.3c0,.4-.09.8-.24,1.18-.15.35-.38.67-.67.92-.32.27-.68.47-1.08.59-.47.15-.96.22-1.46.21m-2.23-4.84h4.33c0-.38-.04-.76-.15-1.12-.09-.28-.23-.53-.43-.74-.18-.19-.41-.33-.65-.42-.27-.09-.56-.13-.84-.13-.41-.01-.82.08-1.18.26-.33.18-.59.45-.74.79-.19.43-.3.89-.32,1.37" style="fill:#323232;" />
<path id="z" d="m117.48,55.96v-7.98h1.08l.12,1.32h.11c.08-.25.19-.5.33-.72.31-.51.88-.81,1.47-.78.14,0,.28.01.42.04.1.02.19.04.28.08v1.23h-.5c-.31,0-.61.05-.89.17-.24.11-.45.28-.61.49-.17.23-.29.48-.36.76-.08.31-.12.62-.11.94v4.45h-1.34Z" style="fill:#323232;" />
<path id="aa" d="m124.38,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="ab" d="m129.81,56.14c-.49,0-.97-.05-1.44-.17-.37-.09-.73-.26-1.04-.48-.26-.2-.48-.46-.62-.76-.15-.31-.22-.65-.21-1v-.14s0-.08.02-.11h1.32s-.01.07-.02.11v.09c0,.3.09.6.28.84.2.21.45.36.74.42.34.08.69.13,1.05.12.31,0,.62-.04.92-.13.26-.07.49-.21.67-.39.17-.18.26-.43.25-.68.02-.29-.1-.58-.33-.77-.25-.2-.55-.34-.86-.42-.35-.1-.72-.21-1.11-.32-.32-.09-.65-.19-.97-.3-.31-.1-.6-.24-.87-.41-.25-.16-.47-.37-.62-.63-.17-.3-.25-.64-.23-.98,0-.33.07-.65.22-.94.15-.28.37-.52.63-.7.3-.2.64-.35.99-.43.43-.1.86-.15,1.3-.14.45,0,.89.05,1.33.17.34.09.67.25.95.47.24.18.43.42.56.69.12.26.18.54.18.83v.18s0,.09-.02.13h-1.3v-.17c0-.21-.06-.41-.16-.58-.13-.21-.32-.37-.55-.46-.34-.13-.7-.19-1.07-.18-.25,0-.51.02-.76.07-.19.04-.37.11-.53.21-.13.08-.24.2-.32.33-.07.13-.11.28-.11.43-.01.23.08.46.26.61.21.16.44.28.69.35.29.09.6.19.93.3l1.08.31c.35.1.69.23,1.02.4.3.15.56.38.74.66.2.33.3.71.28,1.1,0,.38-.07.76-.24,1.11-.16.31-.4.58-.69.77-.32.21-.67.36-1.05.45-.43.1-.87.15-1.31.14" style="fill:#323232;" />
</g>
</g>
</g>
</svg>
</span>
</a>
</div>
<div class="relative xl:w-auto xl:flex xl:items-center">
<button @click="showMenu = !showMenu; showContact = false; showOverlay = true;" class="flex justify-center items-center h-full py-4 px-4 text-white bg-primary xl:hidden">
<span class="inline-flex items-center w-10 h-10 ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 6l16 0" />
<path d="M4 12l16 0" />
<path d="M4 18l16 0" />
</svg>
</span>
</button>
<div x-show="showMenu" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="fixed top-0 right-0 w-full h-full max-w-md bg-white z-50 xl:relative xl:!block xl:max-w-none xl:translate-x-0">
<div class="py-6 px-6 h-full max-xl:overflow-auto md:px-9 lg:px-12 xl:p-0 xl:bg-transparent">
<div class="flex items-center justify-between mb-4 xl:hidden">
<div class="w-full mr-4 flex max-w-[100px] xl:mr-20" href="/">
<span class="flex justify-center items-center w-full h-full">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147.43 58.58" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="c">
<rect y="0" width="147.43" height="58.58" style="fill:none;" />
</clipPath>
<clipPath id="j">
<rect y="0" width="147.43" height="58.58" style="fill:none;" />
</clipPath>
</defs>
<g id="b">
<g style="clip-path:url(#c); fill:none;">
<g id="d">
<path id="e" d="m0,38.47L14.45,0h12.04l14.45,38.47h-10.69l-2.3-6.67h-15.34l-2.3,6.66H0Zm15.01-14.17h10.47l-2.74-8.12c-.15-.41-.33-.92-.53-1.54-.2-.62-.41-1.27-.62-1.96-.21-.69-.4-1.39-.59-2.1s-.37-1.33-.56-1.85h-.39c-.15.71-.36,1.51-.65,2.41l-.84,2.69c-.28.9-.53,1.68-.76,2.35l-2.8,8.12Z" style="fill:#323232;" />
<path id="f" d="m45.52,38.47V0h21.17c2.33-.07,4.64.48,6.69,1.6,1.82,1.03,3.29,2.57,4.26,4.42,1.03,2.06,1.54,4.34,1.48,6.64.06,2.35-.47,4.68-1.54,6.78-1,1.87-2.51,3.42-4.37,4.45-2.07,1.11-4.4,1.66-6.75,1.6h-10.92v12.99h-10.02Zm10.02-20.72h8.57c1.33.09,2.63-.39,3.58-1.32.87-1.02,1.31-2.33,1.23-3.67.04-.94-.15-1.88-.53-2.74-.35-.7-.91-1.28-1.6-1.65-.83-.42-1.76-.62-2.69-.59h-8.56v9.97Z" style="fill:#323232;" />
<path id="g" d="m78.05,38.47L92.5,0h12.04l14.45,38.47h-10.69l-2.3-6.66h-15.34l-2.3,6.66h-10.3Zm15-14.17h10.47l-2.74-8.12c-.15-.41-.33-.92-.53-1.54-.2-.62-.41-1.27-.62-1.96-.21-.69-.4-1.39-.59-2.1s-.37-1.33-.56-1.85h-.39c-.15.71-.36,1.51-.64,2.41l-.84,2.69c-.28.9-.53,1.68-.76,2.35l-2.8,8.12Z" style="fill:#323232;" />
</g>
</g>
</g>
<rect id="h" x="127.64" y="18.68" width="19.79" height="19.79" style="fill:#af003c;" />
<g id="i">
<g style="clip-path:url(#j); fill:none;">
<g id="k">
<path id="l" d="m0,55.96l4.11-10.41h1.9l4.13,10.41h-1.57l-1.02-2.58H2.49l-1,2.58H0Zm2.96-3.81h4.11l-1.26-3.26c-.03-.09-.08-.22-.14-.38s-.13-.34-.2-.54-.14-.4-.21-.61-.14-.4-.2-.57h-.09c-.07.2-.15.43-.24.7s-.18.52-.27.77c-.09.25-.17.46-.23.63l-1.27,3.26Z" style="fill:#323232;" />
<path id="m" d="m13.69,56.14c-.67.03-1.33-.18-1.85-.59-.53-.55-.78-1.31-.7-2.06v-5.51h1.33v5.33c0,.28.03.56.12.82.07.2.19.37.35.5.16.12.34.21.54.26.22.05.45.08.67.08.77,0,1.48-.4,1.86-1.07.21-.37.32-.79.31-1.22v-4.69h1.33v7.98h-1.07l-.12-1.2h-.11c-.19.3-.44.57-.72.79-.27.2-.58.36-.9.45-.34.1-.7.15-1.06.14" style="fill:#323232;" />
<path id="n" d="m21.61,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="o" d="m27.53,56.14c-.71.02-1.41-.13-2.04-.45-.56-.31-1-.79-1.26-1.37-.58-1.52-.58-3.19,0-4.71.26-.58.7-1.06,1.26-1.37,1.3-.6,2.79-.6,4.08,0,.56.3,1,.78,1.25,1.37.57,1.52.57,3.19,0,4.71-.25.58-.69,1.07-1.25,1.37-.63.32-1.33.47-2.04.45m0-1.12c.45.02.89-.09,1.29-.3.36-.22.63-.55.78-.95.19-.52.28-1.07.26-1.63v-.33c.02-.56-.07-1.12-.27-1.64-.15-.39-.42-.72-.78-.94-.4-.21-.84-.32-1.29-.3-.45-.02-.9.09-1.3.3-.36.22-.64.55-.78.94-.19.53-.28,1.08-.26,1.64v.33c-.02.56.07,1.11.26,1.63.14.4.42.73.78.95.4.21.85.32,1.3.3" style="fill:#323232;" />
<path id="p" d="m32.9,55.96v-7.98h1.08l.12,1.2h.11c.18-.3.41-.57.68-.79.25-.2.53-.35.83-.45.32-.1.65-.15.99-.14.46-.01.92.09,1.33.31.4.24.7.62.83,1.07h.09c.33-.59.87-1.03,1.52-1.23.32-.1.66-.15,1-.15.44,0,.87.08,1.28.25.37.17.67.46.86.82.23.47.33,1,.31,1.52v5.57h-1.33v-5.36c0-.27-.03-.54-.11-.8-.06-.19-.17-.36-.33-.49-.14-.12-.31-.2-.49-.25-.2-.05-.4-.08-.6-.08-.35,0-.68.09-.98.27-.31.19-.56.47-.72.79-.19.38-.28.8-.27,1.23v4.69h-1.34v-5.36c0-.27-.03-.54-.12-.8-.06-.19-.17-.36-.32-.49-.14-.12-.3-.2-.48-.25-.19-.05-.39-.08-.58-.08-.74,0-1.41.4-1.75,1.06-.19.38-.28.8-.27,1.23v4.69h-1.33Z" style="fill:#323232;" />
<path id="q" d="m47.95,56.14c-.3,0-.59-.04-.88-.11-.29-.07-.57-.19-.82-.35-.26-.17-.47-.4-.61-.68-.16-.34-.24-.71-.23-1.09-.02-.48.12-.96.39-1.35.28-.37.66-.66,1.1-.83.54-.21,1.1-.35,1.68-.41.7-.08,1.4-.12,2.11-.11v-.91c0-.26-.05-.52-.15-.76-.11-.22-.31-.4-.54-.49-.71-.23-1.48-.23-2.18,0-.23.09-.43.24-.56.45-.11.18-.16.39-.16.61v.23h-1.29c0-.05-.02-.1-.01-.15v-.18c-.02-.44.13-.87.4-1.22.3-.35.69-.61,1.13-.74.54-.18,1.1-.26,1.67-.25.57-.02,1.14.08,1.68.29.41.16.77.45,1.02.82.24.38.35.83.34,1.27v4.32c-.04.24.12.47.36.51.04,0,.08,0,.11,0h.59v.88c-.15.06-.31.12-.47.16-.19.05-.39.07-.59.07-.23,0-.45-.05-.65-.16-.17-.11-.31-.26-.39-.44-.09-.2-.16-.41-.18-.63h-.11c-.19.26-.42.48-.69.66-.29.19-.6.34-.93.43-.37.1-.74.16-1.12.15m.33-1.12c.31,0,.62-.05.92-.15.28-.1.54-.24.77-.43.22-.19.4-.42.53-.68.13-.27.2-.56.2-.87v-.67c-.7,0-1.4.04-2.09.14-.48.05-.93.22-1.33.49-.31.23-.48.6-.46.99-.01.24.05.47.18.67.13.18.31.31.52.39.25.09.51.13.77.13" style="fill:#323232;" />
<path id="r" d="m56.08,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="s" d="m58.72,44.99h1.34v1.49h-1.34v-1.49Zm0,2.99h1.34v7.98h-1.34v-7.98Z" style="fill:#323232;" />
<path id="t" d="m65.42,56.14c-.71.02-1.41-.13-2.04-.45-.56-.31-1-.79-1.26-1.37-.58-1.52-.58-3.19,0-4.71.26-.58.7-1.06,1.26-1.37,1.3-.6,2.79-.6,4.08,0,.56.3,1,.78,1.25,1.37.57,1.52.57,3.19,0,4.71-.25.58-.69,1.07-1.25,1.37-.63.32-1.33.47-2.04.45m0-1.12c.45.02.89-.09,1.29-.3.36-.22.63-.55.78-.95.19-.52.28-1.08.27-1.63v-.33c.02-.56-.07-1.12-.27-1.64-.15-.39-.42-.72-.78-.94-.4-.21-.84-.32-1.29-.3-.45-.02-.9.09-1.3.3-.36.22-.64.55-.78.94-.19.53-.28,1.08-.26,1.64v.33c-.02.56.07,1.11.26,1.63.14.4.42.73.78.95.4.21.85.32,1.3.3" style="fill:#323232;" />
<path id="u" d="m70.79,55.96v-7.98h1.08l.12,1.2h.11c.19-.3.44-.57.72-.79.27-.2.58-.35.9-.45.34-.1.7-.15,1.05-.14.46,0,.91.08,1.33.26.38.17.7.47.9.84.24.48.35,1.02.33,1.56v5.51h-1.34v-5.33c0-.28-.03-.56-.13-.82-.07-.19-.19-.37-.35-.5-.16-.13-.34-.21-.53-.26-.23-.05-.46-.08-.69-.08-.37,0-.74.09-1.06.27-.34.18-.61.46-.8.79-.21.38-.31.8-.3,1.23v4.69h-1.33Z" style="fill:#323232;" />
<path id="v" d="m82.76,55.96v-10.41h8.01v1.24h-6.57v3.21h5.9v1.24h-5.9v3.46h6.66v1.24h-8.1Z" style="fill:#323232;" />
<path id="w" d="m91.94,55.96l2.87-4.08-2.73-3.9h1.61l1.94,2.85h.08l1.94-2.85h1.52l-2.73,3.85,2.88,4.13h-1.59l-2.09-3.08h-.08l-2.09,3.08h-1.52Z" style="fill:#323232;" />
<path id="x" d="m100.56,58.58v-10.61h1.06l.14,1.14h.11c.25-.42.61-.77,1.05-.99,1-.47,2.17-.43,3.14.11.5.33.87.81,1.08,1.37.28.78.41,1.6.38,2.42.02.79-.11,1.58-.39,2.31-.21.55-.59,1.03-1.08,1.36-.49.3-1.05.45-1.62.44-.33,0-.65-.04-.97-.12-.29-.08-.57-.21-.82-.39-.25-.19-.47-.41-.64-.68h-.09v3.63h-1.33Zm3.43-3.61c.42.02.85-.09,1.21-.3.33-.22.58-.55.7-.93.17-.52.24-1.07.23-1.62v-.32c.02-.57-.06-1.14-.24-1.68-.13-.37-.37-.69-.71-.9-.35-.19-.75-.29-1.15-.27-.43-.02-.86.1-1.22.33-.34.24-.58.58-.7.98-.16.52-.23,1.05-.22,1.59v.23c-.01.47.04.93.16,1.39.08.33.24.63.45.89.18.21.41.37.67.47.26.09.53.14.8.14" style="fill:#323232;" />
<path id="y" d="m112.35,56.14c-.69.02-1.38-.13-2-.45-.55-.31-.98-.79-1.23-1.37-.56-1.52-.56-3.19,0-4.71.25-.58.68-1.06,1.24-1.37.63-.32,1.34-.47,2.05-.45.65-.02,1.3.13,1.88.43.51.29.91.75,1.14,1.29.28.68.41,1.41.39,2.15v.64h-5.74c0,.54.1,1.07.28,1.57.14.38.4.7.75.9.39.2.82.3,1.26.28.3,0,.61-.04.9-.13.24-.08.46-.2.65-.37.17-.16.31-.36.4-.58.09-.23.14-.48.15-.73h1.3c0,.4-.09.8-.24,1.18-.15.35-.38.67-.67.92-.32.27-.68.47-1.08.59-.47.15-.96.22-1.46.21m-2.23-4.84h4.33c0-.38-.04-.76-.15-1.12-.09-.28-.23-.53-.43-.74-.18-.19-.41-.33-.65-.42-.27-.09-.56-.13-.84-.13-.41-.01-.82.08-1.18.26-.33.18-.59.45-.74.79-.19.43-.3.89-.32,1.37" style="fill:#323232;" />
<path id="z" d="m117.48,55.96v-7.98h1.08l.12,1.32h.11c.08-.25.19-.5.33-.72.31-.51.88-.81,1.47-.78.14,0,.28.01.42.04.1.02.19.04.28.08v1.23h-.5c-.31,0-.61.05-.89.17-.24.11-.45.28-.61.49-.17.23-.29.48-.36.76-.08.31-.12.62-.11.94v4.45h-1.34Z" style="fill:#323232;" />
<path id="aa" d="m124.38,56.14c-.34.02-.68-.06-.97-.24-.23-.15-.4-.37-.5-.62-.1-.26-.15-.54-.15-.83v-5.36h-1.03v-1.12h1.06l.24-2.23h1.06v2.23h1.5v1.12h-1.5v5.16c-.01.2.03.4.14.57.13.14.32.21.52.19h.85v.88c-.12.06-.24.1-.36.12-.14.03-.29.06-.43.08-.14.02-.28.04-.42.04" style="fill:#323232;" />
<path id="ab" d="m129.81,56.14c-.49,0-.97-.05-1.44-.17-.37-.09-.73-.26-1.04-.48-.26-.2-.48-.46-.62-.76-.15-.31-.22-.65-.21-1v-.14s0-.08.02-.11h1.32s-.01.07-.02.11v.09c0,.3.09.6.28.84.2.21.45.36.74.42.34.08.69.13,1.05.12.31,0,.62-.04.92-.13.26-.07.49-.21.67-.39.17-.18.26-.43.25-.68.02-.29-.1-.58-.33-.77-.25-.2-.55-.34-.86-.42-.35-.1-.72-.21-1.11-.32-.32-.09-.65-.19-.97-.3-.31-.1-.6-.24-.87-.41-.25-.16-.47-.37-.62-.63-.17-.3-.25-.64-.23-.98,0-.33.07-.65.22-.94.15-.28.37-.52.63-.7.3-.2.64-.35.99-.43.43-.1.86-.15,1.3-.14.45,0,.89.05,1.33.17.34.09.67.25.95.47.24.18.43.42.56.69.12.26.18.54.18.83v.18s0,.09-.02.13h-1.3v-.17c0-.21-.06-.41-.16-.58-.13-.21-.32-.37-.55-.46-.34-.13-.7-.19-1.07-.18-.25,0-.51.02-.76.07-.19.04-.37.11-.53.21-.13.08-.24.2-.32.33-.07.13-.11.28-.11.43-.01.23.08.46.26.61.21.16.44.28.69.35.29.09.6.19.93.3l1.08.31c.35.1.69.23,1.02.4.3.15.56.38.74.66.2.33.3.71.28,1.1,0,.38-.07.76-.24,1.11-.16.31-.4.58-.69.77-.32.21-.67.36-1.05.45-.43.1-.87.15-1.31.14" style="fill:#323232;" />
</g>
</g>
</g>
</svg>
</span>
</div>
<button @click="showMenu = !showMenu; showContact = false; showOverlay = false;" class="flex justify-center items-center h-full py-4 px-4 text-white bg-primary xl:hidden">
<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.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>
<nav>
<ul class="flex flex-col xl:flex-row">
<li class="relative py-3 shrink-0 xl:py-0 xl:mr-10 last:mr-0">
<div class="flex flex-wrap items-center">
<a href="#" title="Produkte & Services" class="relative ">
<span>
Produkte & Services
</span>
</a>
</div>
</li>
<li class="relative py-3 shrink-0 xl:py-0 xl:mr-10 last:mr-0">
<div class="flex flex-wrap items-center">
<a href="#" title="Unternehmen" class="relative ">
<span>
Unternehmen
</span>
</a>
</div>
</li>
<li class="relative py-3 shrink-0 xl:py-0 xl:mr-10 last:mr-0">
<div class="flex flex-wrap items-center">
<a href="#" title="Kontakt" class="relative ">
<span>
Kontakt
</span>
</a>
</div>
</li>
<li class="relative py-3 shrink-0 xl:py-0 xl:mr-10 last:mr-0">
<div class="flex flex-wrap items-center">
<a href="#" title="Jobs" class="relative ">
<span>
Jobs
</span>
<span class="absolute top-0 -right-3 bg-primary w-1 h-1"></span>
</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="flex items-stretch h-max order-1 gap-4">
<div class="order-2 xl:order-1">
<div>
<a href="#" class="inline-flex bg-gray-600 p-5 lg:p-7 aspect-square">
<span class="block scale-120">
<span class="inline-flex items-center w-6 h-6 stroke-white ">
<svg class="w-10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
.red-svg {
fill: none;
stroke-width: 12px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g>
<path class="red-svg" d="M56.09669,177.27364c-18.35368,0-33.37032-15.01665-33.37032-33.37033" />
<path class="red-svg" d="M177.27364,143.90331c0,18.35368-15.01665,33.37033-33.37033,33.37033" />
<path class="red-svg" d="M143.90331,22.72637c18.35368,0,33.37033,15.01664,33.37033,33.37032" />
<path class="red-svg" d="M22.72637,56.09669c0-18.35368,15.01664-33.37032,33.37032-33.37032" />
<circle class="red-svg" cx="98.2375" cy="94.95036" r="34.59236" />
<line class="red-svg" x1="123.56695" y1="118.49943" x2="147.69177" y2="142.62425" />
</g>
</svg>
</span>
</span>
</a>
</div>
</div>
<div class="order-2 xl:order-1">
<div x-data="{ open: false }" class="inline-flex bg-gray-600 p-8 px-8 sm:px-16 lg:py-10 lg:px-20 relative z-0">
<div :class="open ? 'left-0 lg:right-0 lg:left-auto z-20 opacity-100' : '-left-1/2 lg:left-auto lg:-right-1/2 opacity-0 -z-10' " class="h-20 bg-gray-600 duration-300 transition-all fixed lg:absolute max-lg:mt-3 max-lg:ml-3 top-0 w-max">
<ul class="flex items-center w-full h-full gap-6 px-8 py-4 text-white">
<li>
<a class="text-white" href="#">Englisch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<a class="text-white" href="#">Deustch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<button @click="open = false" type="button" class="flex">
<span class="inline-flex items-center w-6 h-6 stroke-white ">
<?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>
</li>
</ul>
</div>
<button @click="open = true" href="#" class="scale-120 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-4 text-white">
<span class="inline-flex items-center w-6 h-6 stroke-white ">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill: none;
stroke: #1D1E1C;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: #333333;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st8 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st9 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st10 {
fill: none;
stroke: #333333;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st11 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st12 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st13 {
fill: #FFFFFF;
}
.st14 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: none;
stroke: #AF1B43;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: #FFFFFF;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st17 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st18 {
fill: none;
stroke: #FFFFFF;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st19 {
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #333333;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st21 {
fill: none;
stroke: #333333;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st23 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st24 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st25 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st26 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st27 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st28 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
</style>
<g>
<circle class="st4" cx="200" cy="200" r="168.90668" />
<line class="st4" x1="31.09333" y1="200" x2="348.98587" y2="200" />
<line class="st4" x1="200" y1="31.09333" x2="200" y2="368.90668" />
<ellipse class="st4" cx="200" cy="200" rx="86.05878" ry="168.90668" />
<path class="st4" d="M84.50507,100.5538c86.32178,26.70246,165.8439,24.67728,244.36984-5.50942" />
<path class="st4" d="M67.65932,304.95563c91.3526-31.23828,178.50104-31.79688,261.21558,0" />
</g>
</svg>
</span>
<span class="max-sm:hidden">Deutsch</span>
</button>
</div>
</div>
<div class="order-1 xl:order-2">
<div class="relative">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;" class="inline-flex bg-primary p-5 lg:p-7">
<span class="inline-flex items-center w-6 h-6 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.84 27.66">
<path id="b" d="m10.02,10.56c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55.55.24.55.55h0Zm0,0h-.55m6,0c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55c.3,0,.54.25.54.55h0Zm0,0h-.55m6,0c0,.3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55c.3,0,.54.25.54.55h0Zm0,0h-.55M.75,14.94c-.04,2.32,1.64,4.32,3.93,4.69,1.58.23,3.18.41,4.79.54v6.75l6.08-6.08c.3-.3.71-.47,1.13-.48,2.84-.07,5.67-.31,8.47-.72,2.3-.37,3.97-2.37,3.94-4.69V6.19c.04-2.32-1.64-4.32-3.93-4.69-6.79-.99-13.68-.99-20.47,0C2.39,1.86.71,3.86.75,6.19v8.75h0Z" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
<div x-show="showContact" x-transition x-transition.duration.200ms class="fixed top-0 left-0 w-screen h-[75vh] max-w-md z-50 sm:h-auto lg:left-auto lg:right-0">
<div class="relative h-full max-w-md">
<button @click="showContact = !showContact; showMenu = false; showOverlay = false;" class="absolute top-9 left-10 text-white lg:top-12 lg:left-auto lg:right-12 z-10">
<span class="inline-flex items-center w-6 h-6 ">
<?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="relative w-full ">
<div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
<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>
</div>
<div class="relative flex flex-col z-10">
<p class="text-white text-sm mb-2 text-white leading-customText">Mario Schmidt </p>
<h5 class="h5 text-white text-left text-white">
Interesse? Fragen?<br />Wir sind gerne für Sie da.
</h5>
<div class="flex flex-col items-start">
<a href="/" class="btn cursor-pointer inline-flex items-center mb-4 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">
Kontakt aufnehmen
</span>
</a>
<div class="flex flex-row flex-wrap">
<a href="/" class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 mr-6 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
info@apa-gmbh.de
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="18.93" height="18.94" viewBox="0 0 18.93 18.94">
<path id="b" d="m8.22,10.72L.75,6.77C6.18,3.78,12.07,1.75,18.18.75c-1,6.11-3.03,12.01-6.01,17.44l-3.96-7.47h0Zm0,0l4.83-4.83" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
<a href="/" class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
+49 6023 9716 0
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="13.5" height="22.5" viewBox="0 0 13.5 22.5">
<path id="b" d="m5.25.75h-2.25C1.76.75.75,1.76.75,3v16.5c0,1.24,1.01,2.25,2.25,2.25h7.5c1.24,0,2.25-1.01,2.25-2.25V3c0-1.24-1.01-2.25-2.25-2.25h-2.25m-3,0v1.5h3V.75m-3,0h3m-3,18.75h3" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
</div>
<p class="text-white text-sm text-white opacity-50 leading-customText">Sie erreichen uns Mo - Fr von 9 - 17 Uhr. </p>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="fixed bottom-12 md:bottom-4 items-end md:left-1/2 md:-translate-x-1/2 flex justify-center w-full z-50 md:bottom-6">
<a class="btn cursor-pointer inline-flex items-center mr-4 h-16 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>
<span class="inline-flex items-center w-4 h-4 ml-9 rotate-90 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
<div class="flex flex-col-reverse md:flex-row" x-data="{ open: false }">
<button @click="open = !open" class="inline-flex bg-gray-600 p-5">
<span class="inline-flex items-center w-6 h-6 text-white ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 21">
<path id="b" d="m4.97,9.41c-.6-1.09-1.97-1.48-3.06-.87-1.09.6-1.48,1.97-.87,3.06s1.97,1.48,3.06.87c.37-.2.67-.51.87-.87m0-2.19c.38.68.38,1.51,0,2.19m0-2.19l9.57-5.31m-9.57,7.5l9.57,5.31m0,0c-.6,1.09-.21,2.46.88,3.06,1.09.6,2.46.21,3.06-.88.6-1.09.21-2.46-.87-3.06-1.09-.6-2.46-.21-3.06.87,0,0,0,0,0,0Zm0-12.81c.6,1.09,1.97,1.48,3.06.87,1.09-.6,1.48-1.97.87-3.06s-1.97-1.48-3.06-.87c0,0,0,0,0,0-1.09.6-1.48,1.97-.87,3.06,0,0,0,0,0,0Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
<div class="flex flex-col md:flex-row items-center gap-4 relative transition-opacity bg-white px-2 md:px-4" :class="open ? 'h-auto md:opacity-100 z-0 border border-[#F2F2F2]' : 'h-0 md:h-auto overflow-hidden md:opacity-0 -z-50' ">
<span>Teilen</span>
<a target="_blank" href="#">
<span class="inline-flex items-center w-8 h-8 [&_*]:stroke-[none!important]">
<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-1,
.cls-2 {
stroke-width: 0px;
}
.cls-2 {
fill: #b0063e;
fill-rule: evenodd;
}
</style>
</defs>
<rect class="cls-1" x="31.86" y="31.53" width="136.28" height="136.93" />
<path id="whatsapp" class="cls-2" d="M148.28,51.43c-26.51-26.5-69.48-26.5-95.98,0-21.7,21.7-26.13,55.27-10.81,81.86l-9.63,35.16,35.97-9.44c9.95,5.42,21.1,8.26,32.43,8.26h.03c37.49-.02,67.87-30.43,67.85-67.92-.01-17.97-7.15-35.21-19.85-47.93h0ZM100.28,155.83h0c-10.11,0-20.03-2.73-28.72-7.88l-2.06-1.22-21.35,5.6,5.66-20.79-1.34-2.13c-16.55-26.39-8.58-61.19,17.81-77.74,26.39-16.55,61.19-8.58,77.74,17.81,16.55,26.39,8.58,61.19-17.81,77.74-8.98,5.63-19.37,8.62-29.97,8.62h.03ZM131.22,113.6c-1.69-.85-10.03-4.95-11.59-5.51s-2.69-.85-3.81.85-4.38,5.52-5.37,6.64-1.98,1.27-3.67.42c-5-1.99-9.61-4.84-13.64-8.41-3.71-3.43-6.89-7.39-9.43-11.75-.99-1.69-.1-2.62.74-3.46s1.69-1.98,2.55-2.97c.69-.85,1.26-1.8,1.69-2.82.46-.95.41-2.07-.14-2.97-.42-.86-3.81-9.21-5.23-12.6-1.37-3.31-2.78-2.85-3.81-2.91s-2.12-.06-3.25-.06c-1.73.05-3.36.82-4.5,2.12-3.88,3.67-6.05,8.8-5.96,14.14.55,6.4,2.96,12.49,6.93,17.54,7.27,10.9,17.25,19.72,28.95,25.6,3.16,1.36,6.38,2.55,9.67,3.57,3.46,1.06,7.13,1.29,10.7.68,4.77-.97,8.92-3.9,11.44-8.06,1.11-2.53,1.45-5.34.99-8.06-.42-.7-1.55-1.13-3.25-1.98h-.01Z" />
</svg>
</span>
</a>
<a target="_blank" href="#">
<span class="inline-flex items-center w-8 h-8 [&_*]:stroke-[none!important]">
<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-1,
.cls-2 {
stroke-width: 0px;
}
.cls-2 {
fill: #b0063e;
}
</style>
</defs>
<rect class="cls-1" x="43.26" y="43.26" width="113.48" height="113.48" />
<path id="linkedin" class="cls-2" d="M68.66,156.74h-23.53v-75.75h23.53v75.75ZM56.89,70.64c-7.56.03-13.72-6.07-13.75-13.63-.03-7.56,6.07-13.72,13.63-13.75,7.56-.03,13.71,6.06,13.75,13.62,0,7.55-6.08,13.69-13.63,13.76M156.72,156.74h-23.47v-36.9c0-8.79-.17-20.06-12.23-20.06s-14.1,9.57-14.1,19.43v37.51h-23.51v-75.73h22.56v10.32h.33c4.6-7.87,13.15-12.57,22.26-12.24,23.81,0,28.19,15.68,28.19,36.04v41.62h-.02Z" />
</svg>
</span>
</a>
<a target="_blank" href="#">
<span class="inline-flex items-center w-8 h-8 fill-primary ">
<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path id="facebook" d="M168.89,100.42c0-38.04-30.85-68.88-68.89-68.88-38.04,0-68.88,30.85-68.88,68.89,0,33.89,24.65,62.74,58.12,68.03v-48.14h-17.49v-19.91h17.49v-15.2c0-17.26,10.28-26.8,26.02-26.8,5.17.07,10.32.52,15.42,1.35v16.98h-8.69c-5.45-.72-10.46,3.11-11.18,8.56-.1.73-.11,1.47-.05,2.2v12.92h19.1l-3.03,19.9h-16.07v48.14c33.47-5.3,58.12-34.16,58.12-68.05Z" />
</svg>
</span>
</a>
<a target="_blank" href="#">
<span class="inline-flex items-center w-8 h-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #b0063e;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 10px;
}
</style>
</defs>
<path id="Pfad_47933" class="cls-1" d="M105.7,84.09c10.77,5.14,15.33,18.03,10.19,28.8-1.06,2.22-2.49,4.24-4.22,5.97l-21.59,21.6c-8.28,8.59-21.95,8.84-30.54.56-8.59-8.28-8.84-21.95-.56-30.54.18-.19.37-.38.56-.56l8.45-8.45M132.02,98.52l8.45-8.45c8.59-8.28,8.84-21.95.56-30.54-8.28-8.59-21.95-8.84-30.54-.56-.19.18-.38.37-.56.56l-21.61,21.58c-8.44,8.43-8.44,22.11,0,30.55,1.74,1.74,3.76,3.17,5.97,4.22" />
</svg>
</span>
</a>
</div>
</div>
</div>
<section class="relative flex min-h-[60vh] md:min-h-[75vh] px-6 md:px-9 xl:px-12">
<div class="w-full mx-auto grid self-center gap-8 xl:grid-cols-12">
<div class="relative z-10 xl:col-start-2 xl:col-end-12">
<h1 class="text-white hyphens-auto text-left h1 ">
Produkte & Services
</h1>
<div class="text-white text-left h4 ">
für Anlagen- und Produktionsmaschinenbau
</div>
</div>
<div class="absolute top-0 left-0 w-screen h-full">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="Alternativer Text" />
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full pointer-events-none bg-gray-700 md:bg-transparent md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full"></div>
</section>
<section class="relative py-12 px-6 md:py-20 md:px-9 lg:px-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 md:items-center">
<div class="order-2 md:col-start-1 md:col-end-12 md:order-1 xl:col-start-2">
<h2 class="!mb-8 max-w-3xl text-left h3 ">
Fortschritt gestalten,<br />Innovation erleben
</h2>
<div class="max-w-3xl mb-8">
<p class="default text-base leading-customText">Werde Teil unseres Teams und gestalte mit uns die Zukunft der Fertigungstechnologie. Finde heraus, wie du deine Expertise in einer dynamischen Umgebung einbringen kannst, die Innovation und Wachstum fördert. </p>
</div>
<a href="true" class="btn cursor-pointer inline-flex items-center bg-gray-700 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">
Unsere Produkte entdecken
</span>
<span class="inline-flex items-center w-4 h-4 ms-9 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</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>
<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 px-6 bg-gray-700 md:py-20 md:px-9 lg:py-28 lg:px-12">
<div class="mx-auto xl:grid xl:gap-y-8 xl:grid-cols-12 xl:gap-x-8">
<div class="relative xl:col-start-2 xl:col-end-12">
<div class="relative">
<h2 class="text-white font-normal !mb-8 xl:!mb-24 text-left h3 ">
innovatoren<br />gesucht
</h2>
</div>
<div class="relative mb-4 md:mb-8">
<ul class="space-y-6">
<li>
<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
<div class="md:mr-6">
<p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">Mechaniker <span class="text-sm opacity-50">m/w/d</span> </p>
</div>
<div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Voll- oder Teilzeit
</div>
</div>
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Homeoffice
</div>
</div>
</div>
<div class="text-white flex items-center justify-end mr-8">
<span class="inline-flex items-center w-4 h-4 mr-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
<path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base text-sm text-white w-[100px] leading-customText">01.01.2024 </p>
</div>
<div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
<button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<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 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</a>
</li>
<li>
<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
<div class="md:mr-6">
<p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">Elektriker oder Elektroniker im Anlagenbau <span class="text-sm opacity-50">m/w/d</span> </p>
</div>
<div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Voll
</div>
</div>
</div>
<div class="text-white flex items-center justify-end mr-8">
<span class="inline-flex items-center w-4 h-4 mr-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
<path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base text-sm text-white w-[100px] leading-customText">ab sofort </p>
</div>
<div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
<button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<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 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</a>
</li>
<li>
<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
<div class="md:mr-6">
<p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">SPS Programmierer Steuerungstechnik <span class="text-sm opacity-50">m/w/d</span> </p>
</div>
<div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Voll- oder Teilzeit
</div>
</div>
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Homeoffice
</div>
</div>
</div>
<div class="text-white flex items-center justify-end mr-8">
<span class="inline-flex items-center w-4 h-4 mr-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
<path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base text-sm text-white w-[100px] leading-customText">01.01.2024 </p>
</div>
<div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
<button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<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 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</a>
</li>
<li>
<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
<div class="md:mr-6">
<p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">Mechatroniker <span class="text-sm opacity-50">m/w/d</span> </p>
</div>
<div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Voll- oder Teilzeit
</div>
</div>
</div>
<div class="text-white flex items-center justify-end mr-8">
<span class="inline-flex items-center w-4 h-4 mr-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
<path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base text-sm text-white w-[100px] leading-customText">01.01.2024 </p>
</div>
<div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
<button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<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 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</a>
</li>
<li>
<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
<div class="md:mr-6">
<p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">Elektriker oder Elektroniker im Anlagenbau <span class="text-sm opacity-50">m/w/d</span> </p>
</div>
<div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
<div class="shrink-0">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Ausbildung
</div>
</div>
</div>
<div class="text-white flex items-center justify-end mr-8">
<span class="inline-flex items-center w-4 h-4 mr-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
<path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base text-sm text-white w-[100px] leading-customText">01.01.2024 </p>
</div>
<div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
<button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<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 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</a>
</li>
</ul>
</div>
<div class="flex flex-col gap-4">
<p class="default text-base text-white md:text-right leading-customText"><strong>Schade, nicht das passende Angebot dabei?</strong> Wir sind immer offen für motivierte Teammitglieder. </p>
<a href="#" class="btn cursor-pointer inline-flex items-center ml-auto bg-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
Bewirb dich initiativ
</span>
</a>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 md:py-20 md:px-9 lg:py-28 lg:px-12">
<div class="mx-auto md:grid md:grid-cols-12 md:gap-x-8 md:gap-y-8">
<div class="col-span-full xl:col-start-2 xl:col-end-12">
<h2 class=" text-left h3 ">
fragen & antworten
</h2>
</div>
<div class="md:col-start-1 md:col-end-7 xl:col-end-9 xl:col-start-2">
<div>
<div x-data="{ activeAccordion: null }">
<div x-data="{ id: 1 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
<button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-1" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-1">
<span class="mr-5 lg:mr-10">
Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?
</span>
<span class="flex items-center justify-center">
<span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
<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>
</span>
<span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
<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" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
<path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</span>
</span>
</button>
<div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-1" aria-labelledby="accordion-header-1">
<div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
</div>
</div>
</div>
<div x-data="{ id: 2 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
<button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-2" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-2">
<span class="mr-5 lg:mr-10">
Sind Prototypen Standard in der Produktion?
</span>
<span class="flex items-center justify-center">
<span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
<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>
</span>
<span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
<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" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
<path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</span>
</span>
</button>
<div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-2" aria-labelledby="accordion-header-2">
<div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
</div>
</div>
</div>
<div x-data="{ id: 3 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
<button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-3" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-3">
<span class="mr-5 lg:mr-10">
Gibt es zusätzliche Bauteile?
</span>
<span class="flex items-center justify-center">
<span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
<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>
</span>
<span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
<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" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
<path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</span>
</span>
</button>
<div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-3" aria-labelledby="accordion-header-3">
<div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
</div>
</div>
</div>
<div x-data="{ id: 4 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
<button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-4" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-4">
<span class="mr-5 lg:mr-10">
Sind Prototypen Standard in der Produktion?
</span>
<span class="flex items-center justify-center">
<span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
<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>
</span>
<span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
<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" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
<path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</span>
</span>
</button>
<div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-4" aria-labelledby="accordion-header-4">
<div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
</div>
</div>
</div>
<div x-data="{ id: 5 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
<button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-5" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-5">
<span class="mr-5 lg:mr-10">
Gibt es zusätzliche Bauteile?
</span>
<span class="flex items-center justify-center">
<span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
<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>
</span>
<span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
<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" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
<path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</span>
</span>
</button>
<div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-5" aria-labelledby="accordion-header-5">
<div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-start-7 col-end-13 xl:col-start-9 xl:col-end-12">
<div class="relative w-full aspect-[78/100]">
<div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
<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>
</div>
<div class="relative flex flex-col z-10">
<p class="text-white text-sm mb-2 text-white leading-customText">Mario Schmidt </p>
<h5 class="h5 text-white text-left text-white">
Nicht die richtige Frage dabei? Wir beraten Sie individuell.
</h5>
<div class="flex flex-col items-start">
<div class="flex flex-col">
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 mr-6 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
info@apa-gmbh.de
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="18.93" height="18.94" viewBox="0 0 18.93 18.94">
<path id="b" d="m8.22,10.72L.75,6.77C6.18,3.78,12.07,1.75,18.18.75c-1,6.11-3.03,12.01-6.01,17.44l-3.96-7.47h0Zm0,0l4.83-4.83" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
+49 6023 9716 0
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="13.5" height="22.5" viewBox="0 0 13.5 22.5">
<path id="b" d="m5.25.75h-2.25C1.76.75.75,1.76.75,3v16.5c0,1.24,1.01,2.25,2.25,2.25h7.5c1.24,0,2.25-1.01,2.25-2.25V3c0-1.24-1.01-2.25-2.25-2.25h-2.25m-3,0v1.5h3V.75m-3,0h3m-3,18.75h3" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
</div>
<p class="text-white text-sm text-white opacity-50 leading-customText">Sie erreichen uns Mo - Fr von 9 - 17 Uhr. </p>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
</div>
</div>
</div>
</section>
<section class="relative pt-9 pb-11 px-6 bg-gray-600">
<div class="mx-auto">
<div class="flex justify-between mb-9">
<div class="text-white !mb-0 text-left h5 ">
4.304 Kunden & Partner
</div>
<div>
<a href="/" class="btn cursor-pointer inline-flex items-center text-white underline flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
alle Casestudies
</span>
</a>
</div>
</div>
<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
slidesPerView: 'auto',
spaceBetween: 40,
direction: 'horizontal',
centeredSlides: true,
centeredSlidesBounds: true,
loop: true,
speed: 4000,
effect: 'slide',
autoplay: {
enabled: true,
delay: 0,
disableOnInteraction: false,
},
breakpoints: {
768: {
spaceBetween: 60,
},
1200: {
spaceBetween: 80,
}
}
})">
<div class="swiper !overflow-visible" x-ref="container">
<div class="swiper-wrapper flex items-center !ease-linear">
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/BMZ-Gruppe.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/Continental_AG_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
<div class="swiper-slide !w-auto !h-auto overflow-hidden relative">
<div class="relative h-full w-full ">
<img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<section class="relative pt-6 pb-12 px-6 md:pt-12 md:pb-24 md:px-9 lg:px-12">
<div class="mx-auto relative grid grid-cols-1 md:grid-cols-12 md:gap-x-8">
<div class="order-2 md:order-1 md:grid md:col-start-1 md:col-end-7 xl:col-start-2">
<div class="md:self-center xl:col-start-2 xl:col-end-[-1]">
<div class=" text-left h3 ">
ihr Projekt unser antrieb
</div>
<div class="md:pt-6">
<a class="btn cursor-pointer inline-flex items-center 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">
Kontakt
</span>
<span class="inline-flex items-center w-4 h-4 ms-9 lg:ms-16 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
<div class="mt-8 md:mt-16">
<nav>
<ul class="grid grid-cols-2">
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-1" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Produkte" class="relative ">
<span>
Produkte
</span>
</a>
</div>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-2" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Casestudies" class="relative ">
<span>
Casestudies
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-2" class="flex items-center ml-3">
<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>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-2">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-3" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="Über uns" class="relative ">
<span>
Über uns
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-3" class="flex items-center ml-3">
<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>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-3">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
<li x-data="{ activeFooterAccordion: false }" aria-controls="accordion-panel-4" class="font-bold mb-4 text-sm lg:text-base">
<div class="flex flex-wrap items-center">
<a href="#" title="APA TeamViewer" class="relative ">
<span>
APA TeamViewer
</span>
</a>
<button @click="activeFooterAccordion = ! activeFooterAccordion" :aria-expanded="activeFooterAccordion" id="accordion-header-4" class="flex items-center ml-3">
<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>
<ul class="w-full" x-cloak x-show="activeFooterAccordion" x-collapse aria-labelledby="accordion-header-4">
<li class="mt-4">
<a href="#" title="Jobs" class="font-normal ">Jobs</a>
</li>
<li class="mt-4">
<a href="#" title="LinkedIn" class="font-normal ">LinkedIn</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="flex mb-12 order-1 md:order-2 md:mb-0 md:col-start-7 md:col-end-13 md:row-start-1 md:row-end-3">
<div class="relative w-full ">
<div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
<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>
</div>
<div class="relative flex flex-col z-10">
<p class="text-white text-sm mb-2 text-white leading-customText">Mario Schmidt </p>
<h5 class="h5 text-white text-left text-white">
Interesse? Fragen?<br />Wir sind gerne für Sie da.
</h5>
<div class="flex flex-col items-start">
<div class="flex flex-row flex-wrap">
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 mr-6 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
info@apa-gmbh.de
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="18.93" height="18.94" viewBox="0 0 18.93 18.94">
<path id="b" d="m8.22,10.72L.75,6.77C6.18,3.78,12.07,1.75,18.18.75c-1,6.11-3.03,12.01-6.01,17.44l-3.96-7.47h0Zm0,0l4.83-4.83" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
<a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 flex-row-reverse justify-end rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
+49 6023 9716 0
</span>
<span class="inline-flex items-center w-4 h-4 w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="13.5" height="22.5" viewBox="0 0 13.5 22.5">
<path id="b" d="m5.25.75h-2.25C1.76.75.75,1.76.75,3v16.5c0,1.24,1.01,2.25,2.25,2.25h7.5c1.24,0,2.25-1.01,2.25-2.25V3c0-1.24-1.01-2.25-2.25-2.25h-2.25m-3,0v1.5h3V.75m-3,0h3m-3,18.75h3" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-center mb-6">
<span class="inline-flex items-center w-4 h-4 text-white w-8 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 20.25">
<g id="b">
<path id="c" d="m11.25,8.25c0,1.66-1.34,3-3,3s-3-1.34-3-3,1.34-3,3-3,3,1.34,3,3Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
<path id="d" d="m15.75,8.25c0,7.14-7.5,11.25-7.5,11.25,0,0-7.5-4.11-7.5-11.25C.75,4.11,4.11.75,8.25.75s7.5,3.36,7.5,7.5Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</g>
</svg>
</span>
<p class="text-white text-sm font-normal leading-customText">Am Neuen Berg 1 . 63755 Alzenau . Jetzt Route planen </p>
</div>
<p class="text-white text-sm text-white opacity-50 leading-customText">Sie erreichen uns Mo - Fr von 9 - 17 Uhr. </p>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
</div>
</div>
<div class="flex items-center justify-between mt-6 md:mt-auto lg:col-start-1 lg:col-end-7 order-3">
<div>
<nav>
<ul class="flex ">
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="APA © 2023" class="relative text-[#424343]">
<span>
APA © 2023
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="AGB" class="relative text-[#424343]">
<span>
AGB
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="Datenschutz" class="relative text-[#424343]">
<span>
Datenschutz
</span>
</a>
</div>
</li>
<li class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm">
<div class="flex flex-wrap items-center">
<a href="#" title="Impressum" class="relative text-[#424343]">
<span>
Impressum
</span>
</a>
</div>
</li>
</ul>
</nav>
</div>
<div>
<button x-data="{ open: false }" @click="open = !open" class="bg-gray-600 w-max items-center py-2 px-4 text-white flex gap-6 relative text-sm lg:text-base">
<div class="flex items-center gap-2">
<span class="inline-flex items-center w-8 h-8 ">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill: none;
stroke: #1D1E1C;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: #333333;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st8 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st9 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st10 {
fill: none;
stroke: #333333;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st11 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st12 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st13 {
fill: #FFFFFF;
}
.st14 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: none;
stroke: #AF1B43;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: #FFFFFF;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st17 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st18 {
fill: none;
stroke: #FFFFFF;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st19 {
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #333333;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st21 {
fill: none;
stroke: #333333;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st23 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st24 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st25 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st26 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st27 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st28 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
</style>
<g>
<circle class="st4" cx="200" cy="200" r="168.90668" />
<line class="st4" x1="31.09333" y1="200" x2="348.98587" y2="200" />
<line class="st4" x1="200" y1="31.09333" x2="200" y2="368.90668" />
<ellipse class="st4" cx="200" cy="200" rx="86.05878" ry="168.90668" />
<path class="st4" d="M84.50507,100.5538c86.32178,26.70246,165.8439,24.67728,244.36984-5.50942" />
<path class="st4" d="M67.65932,304.95563c91.3526-31.23828,178.50104-31.79688,261.21558,0" />
</g>
</svg>
</span>
<div class="max-sm:hidden">
Deutsch
</div>
</div>
<div class="relative w-4 max-sm:hidden">
<div class="bg-white w-full h-[1.5px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
<div :class="open ? 'w-0 left-full' : 'w-full left-1/2' " class="bg-white h-[1.5px] transition-all absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90"></div>
</div>
<div :class="open ? 'opacity-100' : 'opacity-0'" class="absolute bottom-[100%] left-0 gap-4 max-sm:w-[164px] max-sm:translate-x-[-100px] transition-opacity pt-2 pb-4 px-4 text-black border border-[#F2F2F2] bg-white flex flex-col justify-start">
<a class="w-[8.5rem] items-center flex justify-between" href="/de">
<span>
Deutsch
</span>
<span>
<span class="inline-flex items-center w-8 h-8 stroke-primary fill-primary ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20px" width="20px" version="1.1" id="Layer_1" viewbox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M40.267,14.628L20.974,33.921l-9.293-9.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l10,10 c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l20-20c0.391-0.391,0.391-1.023,0-1.414S40.657,14.237,40.267,14.628z " />
</svg>
</span>
</span>
</a>
<a class="w-[8.5rem] items-center flex justify-between" href="/en">
<span>
English
</span>
</a>
</div>
</button>
</div>
</div>
</div>
</section>
</footer>
{% render '@header' %}
{% render '@header-cta-apply-job' %}
{% render '@hero--subpage' %}
<section class="relative py-12 px-6 md:py-20 md:px-9 lg:px-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 md:items-center">
<div class="order-2 md:col-start-1 md:col-end-12 md:order-1 xl:col-start-2">
{% render "@headline" with {
headline: 'Fortschritt gestalten,<br/>Innovation erleben',
tag: 'h2',
size: 'h3',
classes: '!mb-8 max-w-3xl',
} %}
<div class="max-w-3xl mb-8">
{% render "@text" with {
text: 'Werde Teil unseres Teams und gestalte mit uns die Zukunft der Fertigungstechnologie. Finde heraus, wie du deine Expertise in einer dynamischen Umgebung einbringen kannst, die Innovation und Wachstum fördert.',
} %}
</div>
{% include '@button' with {
label: "Unsere Produkte entdecken",
style: 'gray-700',
link: true,
linkHref: "/#",
icon: {
name: 'arrow',
classes: 'ms-9',
strokeColor: 'text-white'
}
} %}
</div>
</div>
</div>
</section>
{% render '@benefit-section' %}
{% render '@jobs-section--listing' %}
{% render '@faq-section' %}
{% render '@logo-slider-section' %}
{% render '@footer' %}
/* No context defined. */
No notes defined.