<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 py-12 px-6 md:py-60 md:pl-9 md:pr-0 lg:pl-12 min-h-[60vh]">
<div x-data="{ open: false }" class="mx-auto">
<div class="relative z-10 grid grid-cols-12 gap-y-8 space-y-6">
<div @click=" open = !open " class="w-full col-start-2 col-end-9 flex flex-col">
<h4 class="text-bold">Wonach suchen Sie?</h4>
<div class="[&_input]:bg-gray-100 bg-gray-100 py-2 pr-12 flex items-center relative">
<input type="text" placeholder="Bitte Suchbegriff eingeben" id="search" class="w-full py-3 px-6 text-black placeholder:text-black" />
<span class="absolute top-1/2 -translate-y-1/2 right-4">
<span class="block items-center w-8 h-8 stroke-primary ">
<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>
</div>
</div>
<div x-show="!open" class="col-start-2 col-end-9 space-y-4">
<p class="default text-base leading-customText">Häufig gesucht: </p>
<ul class="flex items-center gap-3">
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Produkte & Services
</div>
</button>
</li>
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Jobs & Karriere
</div>
</button>
</li>
<li>
<button>
<div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 text-xl">
Batterie-Prüfanlagen
</div>
</button>
</li>
</ul>
</div>
<div x-show="open" class="col-start-2 col-end-11 space-y-12">
<p class="default text-xl my-4 leading-customText">Ihre Suche nach "<span style="font-weight: bold">Batterie-Prüfanlagen</span>" lieferte 5 Treffer. </p>
<ul class="space-y-6">
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</li>
<li>
<div class="bg-gray-100 p-4 relative">
<h5 class="m-o mb-0 font-bold text-left h5 ">
Batterie-Prüfanlagen
</h5>
<p class="default text-sm mb-4 mt-2 leading-customText">/produkte-services/batterie-pruefanlagen </p>
<p class="default text-base w-[75%] py-4 leading-customText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<button class="inline-flex bg-primary p-4 [&_path]:stroke-white absolute bottom-0 right-0">
<span class="inline-flex items-center w-4 h-4 ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
<path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</div>
</li>
</ul>
</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 '@search-section' %}
{% render '@logo-slider-section' %}
{% render '@footer' %}
/* No context defined. */
No notes defined.