<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 pt-44 pb-10 px-6 md:px-9 xl:pr-0 xl:pl-12 xl:pt-44 xl:pb-32">
<div class="mx-auto xl:grid xl:grid-cols-12 xl:gap-10">
<div class="mb-5 w-full xl:col-start-1 xl:col-start-2 xl:col-end-13">
<a href="#" class="inline-flex underline">
<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" width="28.46" height="12.73" viewBox="0 0 28.46 12.73">
<path id="b" d="m6.37,11.98L.75,6.37m0,0L6.37.75M.75,6.37h26.96" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<span class="ml-4">
Karriere & aktuelle Jobs bei APA
</span>
</a>
</div>
<div class="w-full relative mb-8 z-10 xl:col-start-1 xl:col-end-7 xl:col-start-2">
<h1 class="normal-case text-left h2 ">
SPS Programmierer<br />Steuerungstechnik
<sub class="bottom-0 text-zinc-400 text-lg font-normal normal-case lg:text-2xl">
m/w/d
</sub>
</h1>
<p class="default text-base font-bold xl:text-2xl leading-customText">Du entwirfst, entwickelst und optimierst die Steuerungssysteme für unsere industriellen Anlagen.<br />
Deine Aufgaben umfassen die Programmierung von speicher-programmierbaren Steuerungen (SPS), die Implementierung von Automatisierungslösungen und die Gewährleistung reibungsloser Abläufe in der Produktion. </p>
</div>
<div class="relative p-5 bg-gray-100 md:p-10 xl:self-start xl:col-start-9 xl:col-end-13">
<div>
<div class="md:flex md:items-center md:space-x-14">
<div class="flex items-center mb-6 md:mb-6">
<span class="inline-flex items-center w-6 h-6 text-primary mr-4 shrink-0 ">
<?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 leading-customText">01.01.2024 </p>
</div>
<div class="flex items-center mb-6 md:mb-6">
<span class="inline-flex items-center w-6 h-6 text-primary mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.3 22.3">
<path id="b" d="m11.15,4.22v6.93h5.2m5.2,0c0,5.74-4.66,10.4-10.4,10.4S.75,16.89.75,11.15C.75,5.41,5.41.75,11.15.75s10.4,4.66,10.4,10.4h0Z" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<p class="default text-base leading-customText">Voll- oder Teilzeit </p>
</div>
</div>
<div>
<div class="flex items-center mb-6 md:mb-6">
<span class="inline-flex items-center w-6 h-6 text-primary mr-4 shrink-0 ">
<?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="default text-base leading-customText">63755 Alzenau, Homeoffice </p>
</div>
</div>
<div class="flex h-16">
<a class="btn cursor-pointer inline-flex items-center mr-4 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 ">
<?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" 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 items-center gap-4 relative transition-opacity bg-white px-2" :class="open ? 'h-auto z-10 border border-[#F2F2F2]' : 'h-0 overflow-hidden' ">
<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>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-gray-700 md:py-20 md:pl-9 md:pr-0 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 md:items-center">
<div class="order-2 md:col-start-1 md:col-end-12 md:order-1 xl:col-start-2">
<h2 class="text-white !mb-8 xl:!mb-16 text-left h3 ">
entspricht das deinem Profil?
</h2>
<div>
<ul class="list-style list-style-square md:columns-2">
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Fundierte Kenntnisse in Step7, TIA, WinCC Flexible, WinCC</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Kenntnisse der elektrischen Antriebstechnik</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Abgeschlossene Ausbildung: Techniker bzw. Studium mit mehrjähriger Berufserfahrung</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Qualitätsbewusste, selbstständige und flexible Arbeitsweise</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-gray-600 md:py-20 md:pl-9 md:pr-0 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 md:items-center">
<div class="order-2 md:col-start-1 md:col-end-12 md:order-1 xl:col-start-2">
<h2 class="text-white !mb-8 xl:!mb-16 text-left h3 ">
Dann wird’s zeit für neue <br /> herausforderungen!
</h2>
<div>
<ul class="list-style list-style-square md:columns-2">
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Programmierung von Steuerungen und Visualisierungssystemen</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Zukunftsweisende Entwicklung von Automatisierungskonzepten</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Inbetriebnahme und Service von Automatisierungslösungen</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Unterstützung des Vertriebsprozesses und Ausarbeitung von Angeboten</span>
</li>
<li class="font-bold pl-6 mb-5 text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl">
<span class="block">Klärung von Schnittstellen mit Steuerungs- und Leitsystemen</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<div class="relative">
<h2 class="text-stroke text-inverted !mb-4 lg:!mb-0 text-center h1 ">
Ausgezeichnet
</h2>
<h2 class="text-white text-center h1 ">
Zertifiziert
</h2>
<p class="default text-base font-bold text-white text-center mb-10 xl:text-2xl leading-customText">Wir sind nach DIN ISO 9001:2015 zertifiziert.<br />Zertifikat Nr.: FS 529376/1222D </p>
<div class="flex flex-col items-center text-white">
<a class="text-white" href="#">
<span class="inline-flex items-center w-10 h-10 mb-4 ">
<?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 29 46">
<defs>
<clipPath id="b">
<rect width="29" height="46" style="fill:none;" />
</clipPath>
</defs>
<g style="clip-path:url(#b); fill:none;">
<g id="c">
<circle id="d" cx="14" cy="15" r="13" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
<path id="e" d="m7.19,26.78l-2.29,17.21,9.44-5.67,9.44,5.67-2.29-17.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</g>
</g>
</svg>
</span>
</a>
<p class="default text-base font-bold text-sm text-white text-center leading-customText">Zertifikat DIN ISO 9001:2015 </p>
<a class="btn cursor-pointer inline-flex items-center opacity-50 text-white text-xs !pb-0 flex-row-reverse justify-end py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">
<span class="shrink-0">
PDF . 128MB
</span>
</a>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="relative mx-auto z-20">
<div class="relative">
<h2 class="text-stroke text-inverted !mb-4 lg:!mb-0 text-center h1 ">
be a part
</h2>
<h2 class="text-white text-center h1 ">
of us
</h2>
<div class="flex flex-col items-center text-white">
<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">
Jetzt bewerben
</span>
<span class="inline-flex items-center w-4 h-4 ms-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>
</a>
</div>
</div>
</div>
<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 mix-blend-multiply" src="/image/placeholder.jpg" alt="Alternativer Text" />
</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 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 py-12 bg-gray-700 md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="mx-auto">
<div class="relative z-10 items-end 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-5 xl:col-start-2">
<h2 class="text-white mb-8 text-left h3 ">
jobs
</h2>
<p class="default text-base font-bold text-white mb-8 leading-customText">Leidenschaft für Technik? </p>
<p class="default text-base text-white mb-8 leading-customText">Auf der Suche nach spannenden Projekten & beruflicher Entwicklung? Jetzt bewerben! </p>
<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">
alle Jobangebote
</span>
</a>
</div>
<div class="md:col-start-5 md:col-end-13 md:ml-12">
<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: 2.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 2.6,
},
1440: {
spaceBetween: 40,
slidesPerView: 3.6,
}
}
})">
<div class="swiper" x-ref="container">
<div class="swiper-wrapper flex !ease-linear">
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
<div class="swiper-slide !h-auto overflow-hidden relative">
<a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600 transition-all hover:brightness-90 active:scale-95">
<div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white ">
Voll- oder Teilzeit
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Mechaniker
<span class="text-sm mx-1 my-2 opacity-50">
m/w/d
</span>
</div>
<div>
</div>
</div>
<div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">
<div class="p-4 bg-primary grid place-content-center ml-auto">
<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 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>
</div>
</div>
</a>
</div>
</div>
<div class="pt-8 ">
<div class="swiper-scrollbar-custom w-full h-px bg-white">
</div>
</div>
</div>
</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--jobdetailpage' %}
<section class="relative py-12 px-6 bg-gray-700 md:py-20 md:pl-9 md:pr-0 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 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: 'entspricht das deinem Profil?',
tag: 'h2',
size: 'h3',
classes: 'text-white !mb-8 xl:!mb-16',
} %}
<div>
{% render "@list" with {
listClasses: 'md:columns-2',
listItemClasses: 'text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl',
"items": [
{
"text": "Fundierte Kenntnisse in Step7, TIA, WinCC Flexible, WinCC"
},
{
"text": "Kenntnisse der elektrischen Antriebstechnik"
},
{
"text": "Abgeschlossene Ausbildung: Techniker bzw. Studium mit mehrjähriger Berufserfahrung"
},
{
"text": "Qualitätsbewusste, selbstständige und flexible Arbeitsweise"
}
]
} %}
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 bg-gray-600 md:py-20 md:pl-9 md:pr-0 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 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: 'Dann wird’s zeit für neue <br/> herausforderungen!',
tag: 'h2',
size: 'h3',
classes: 'text-white !mb-8 xl:!mb-16',
} %}
<div>
{% render "@list" with {
listClasses: 'md:columns-2',
listItemClasses: 'text-white [&>*:first-child]:xl:before:!top-[8px] xl:text-xl',
"items": [
{
"text": "Programmierung von Steuerungen und Visualisierungssystemen"
},
{
"text": "Zukunftsweisende Entwicklung von Automatisierungskonzepten"
},
{
"text": "Inbetriebnahme und Service von Automatisierungslösungen"
},
{
"text": "Unterstützung des Vertriebsprozesses und Ausarbeitung von Angeboten"
},
{
"text": "Klärung von Schnittstellen mit Steuerungs- und Leitsystemen"
}
]
} %}
</div>
</div>
</div>
</div>
</section>
{% render '@highlight-section' %}
<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
<div class="relative mx-auto z-20">
<div class="relative">
{% render "@headline" with {
headline: 'be a part',
tag: 'h2',
size: 'h1',
alignment: "center",
classes: "text-stroke text-inverted !mb-4 lg:!mb-0"
} %}
{% render "@headline" with {
headline: 'of us',
tag: 'h2',
size: 'h1',
alignment: "center",
classes: "text-white"
} %}
<div class="flex flex-col items-center text-white">
{% render '@button' with {
label: "Jetzt bewerben",
icon: {
name: 'arrow',
classes: 'ms-4',
strokeColor: 'text-white'
}
} %}
</div>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full">
{% render '@image' with {
classes: 'w-full h-full object-cover mix-blend-multiply'
} %}
</div>
</section>
{% render '@benefit-section' %}
{% render '@faq-section' %}
{% render '@jobs-section' %}
{% render '@logo-slider-section' %}
{% render '@footer' %}
/* No context defined. */
No notes defined.