<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>
<section class="relative flex h-[60vh] md:h-screen px-6 md:px-9 lg:px-12">
<div class="w-full mx-auto grid gap-8 self-center xl:grid-cols-12">
<div class="relative z-10 xl:col-start-2 xl:col-end-12">
<h1 class="text-white text-left h1 ">
pioneers in Automated Precision, Engineered Excellence
</h1>
<div class="text-white text-left h4 ">
Production, assembly & testing systems
</div>
</div>
<div class="absolute top-0 left-0 w-screen h-full md:h-screen">
<div class="relative h-full w-full ">
<img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="Alternativer Text" />
</div>
</div>
</div>
<div class="absolute top-0-0 left-0 w-full bg-gray-700 md:bg-transparent pointer-events-none md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full md:h-screen"></div>
</section>
<section class="relative -mt-24 pb-12 md:px-6 md:pb-20 md:pl-9 md:pr-0 lg:pb-28 lg:pl-12">
<div class="mx-auto">
<div class="relative grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full md:col-start-1 md:col-end-13 xl:col-start-1">
<div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
slidesPerView: 1.2,
spaceBetween: 40,
direction: 'horizontal',
loop: false,
effect: 'slide',
scrollbar: {
el: '.swiper-scrollbar-custom',
dragClass: 'swiper-scrollbar-drag-custom',
draggable: true,
},
breakpoints: {
768: {
spaceBetween: 40,
slidesPerView: 2.3,
},
1024: {
spaceBetween: 40,
slidesPerView: 3.3,
},
1200: {
spaceBetween: 40,
slidesPerView: 3.3,
},
1440: {
spaceBetween: 40,
slidesPerView: 4.2,
}
}
})">
<div class="swiper" x-ref="container">
<div class="swiper-wrapper flex !ease-linear">
<div class="swiper-slide !h-auto overflow-hidden relative hidden lg:block">
</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 aspect-square 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>
<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 md:bg-gradient-to-b md:from-transparent md:to-gray-700 md:opacity-90 md:bg-transparent h-full"></div>
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Batterie Prüfanlagen
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Produkte & Services
</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>
<div class="absolute bottom-0 left-0 w-full pointer-events-none bg-gradient-to-b from-transparent to-gray-700 opacity-50 f-full md:h-3/4"></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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Maßgeschneiderte Maschinenbau-Lösungen
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Produkte & Services
</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 aspect-square 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>
<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 md:bg-gradient-to-b md:from-transparent md:to-gray-700 md:opacity-90 md:bg-transparent h-full"></div>
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Be a part of us! Karriere & aktuelle Jobs bei uns
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Jobs & Ausbildung
</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>
<div class="absolute bottom-0 left-0 w-full pointer-events-none bg-gradient-to-b from-transparent to-gray-700 opacity-50 f-full md:h-3/4"></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>
<div class="relative z-10 ">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Die verschiedenen Montageprozesse unterliegen einer 100% Kontrolle und nur iO geprüfte Bauteile werden markiert.
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
Montageautomation
</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="text-white text-xs mr-4">
Max Mustermann, Bezeichnung
</div>
<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>
</div>
</div>
</div>
</div>
</section>
<section class="relative bg-primary py-12 px-6 md:py-20 md:px-9 lg:py lg:py-28 lg:px-12 xl:py-32">
<div class="mx-auto xl:grid xl:gap-y-8 xl:grid-cols-12 xl:gap-x-8">
<div class="relative xl:col-start-2 xl:col-end-12">
<h2 class="text-white !mb-12 xl:!mb-24 text-left h3 ">
Ihre Effizienz <br /> im Fokus
</h2>
<div class="grid gap-y-12 md:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-16">
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
<div class="relative">
<div class="flex items-center mb-4">
<span class="inline-flex items-center w-8 h-8 text-white mr-4 shrink-0 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="42.53" height="45.94" viewBox="0 0 42.53 45.94">
<path id="b" d="m41.77,12.72l-5.12-2.99m5.13,2.99v5.13m0-5.13l-5.13,2.99M.75,12.72l5.13-2.99M.75,12.72l5.13,2.99M.75,12.72v5.13m20.51,6.84l5.13-2.99m-5.13,2.99l-5.13-2.99m5.13,2.99v5.13m0,15.38l5.13-2.99m-5.13,2.99v-5.13m0,5.13l-5.13-2.99m0-38.46l5.13-2.99,5.13,2.99m15.38,24.36v5.13l-5.12,2.99m-30.77,0l-5.13-2.99v-5.13" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
<h5 class="!mb-0 text-left h5 text-white">
CAD Konstruktion
</h5>
</div>
<p class="text-white text-sm leading-customText">Wir konstruieren nach Wunsch mit 3D CAD und Sie erhalten nach Absprache und Freigabe der Konstruktion die Übersichts- und Einzelteilzeichnungen, die Stücklisten, Ersatz- und Verschleißteillistensowie die für die Maschinenrichtlinie notwendigen Beschreibungen incl. Risikoanalysen etc. </p>
</div>
</div>
</div>
</div>
</section>
<section class="relative py-12 px-6 md:py-20 md:pl-9 md:pr-0 lg:pt-28 lg:pb-12 lg:pl-12 xl:min-h-screen xl:h-px xl:pt-32 xl:pb-16">
<div class="mx-auto flex items-end h-full">
<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 md:col-start-1 md:col-end-6 xl:col-start-2">
<h2 class="text-white mb-8 text-left h3 ">
Ihre Effizienz <br /> im Fokus
</h2>
<p class="default text-base text-lg font-bold text-white mb-8 leading-customText">Unsere maßgeschneiderten Maschinenbau-Lösungen sind darauf ausgerichtet, Ihr Unternehmen auf die nächste Stufe zu heben. </p>
<p class="default text-base text-white mb-8 leading-customText">Mit modernster Technologie, langjähriger Erfahrung und einem engagierten Team entwickeln und implementieren wir effiziente und zuverlässige Produktionsanlagen, um Ihren Anforderungen gerecht zu werden. Vertrauen Sie auf unsere Qualität und Expertise für Ihren geschäftlichen Erfolg. </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">
Unsere Produkte entdecken
</span>
<span class="inline-flex items-center w-4 h-4 ms-9 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</a>
</div>
<div class="md:col-start-6 md:col-end-13 h-max 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: 1.2,
},
1200: {
spaceBetween: 40,
slidesPerView: 1.8,
},
1440: {
spaceBetween: 40,
slidesPerView: 2.2,
}
}
})">
<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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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-700 aspect-square flex flex-col justify-between 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>
<div class="relative h-[55%]">
<div class="relative h-[80%] w-full ">
<img class="mx-auto h-full" src="/image/product.png" alt="" />
</div>
</div>
<div class="relative z-10 mt-auto">
<div class="text-white font-bold text-xl mb-2 xl:mb-4">
Montage- & Prüfautomaten für Stecker
</div>
<div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Montageautomation
</div>
<div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
Prüfzellen
</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 class="absolute top-0 left-0 w-full h-full pointer-events-none">
<div class="relative h-full w-full ">
<img class="object-cover w-full h-full" src="/image/placeholder.jpg" alt="" />
<div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 md:bg-gradient-to-b md:from-transparent md:to-gray-700 md:opacity-90 md:bg-transparent h-full"></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 '@hero' %}
<section class="relative -mt-24 pb-12 md:px-6 md:pb-20 md:pl-9 md:pr-0 lg:pb-28 lg:pl-12">
<div class="mx-auto">
<div class="relative grid grid-cols-1 gap-y-8 md:grid-cols-12 md:gap-x-8">
<div class="w-full md:col-start-1 md:col-end-13 xl:col-start-1">
{% render '@card-slider' with {
slidesPerViewMd: '2.3',
slidesPerViewLg: '3.3',
slidesPerViewXl: '3.3',
slidesPerViewXXl: '4.2',
hideScrollbar: true,
emptyCart: true,
cards: [
{
title: 'Batterie Prüfanlagen',
style: 'media-full',
tags: [
{
title: 'Produkte & Services'
}
],
tagPosition: 'bottom',
alignContent: 'bottom',
link: '/',
overlay: 'overlay-gradient'
},
{
title: 'Maßgeschneiderte Maschinenbau-Lösungen',
style: 'media-freehand',
alignContent: 'top',
link: '/'
},
{
title: 'Be a part of us! Karriere & aktuelle Jobs bei uns',
style: 'media-full',
tags: [
{
title: 'Jobs & Ausbildung'
}
],
tagPosition: 'bottom',
alignContent: 'bottom',
link: '/',
overlay: 'overlay-gradient'
},
{
title: 'Die verschiedenen Montageprozesse unterliegen einer 100% Kontrolle und nur iO geprüfte Bauteile werden markiert.',
style: 'default',
tags: [
{
title: 'Montageautomation'
}
],
tagPosition: 'bottom',
alignContent: 'top',
link: '/',
caption: 'Max Mustermann, Bezeichnung'
}
]
} %}
</div>
</div>
</div>
</section>
{% render '@icon-text-section' %}
{% render '@text-slider-section' %}
{% render '@jobs-section' %}
{% render '@logo-slider-section' %}
{% render '@footer' %}
/* No context defined. */
No notes defined.