<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>
<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">
{% include '@button' with {
label: 'Jetzt bewerben',
style: 'primary',
classes: 'mr-4 h-16',
icon: {
name: 'arrow',
classes: 'ml-9 rotate-90',
strokeColor: 'text-white'
}
} %}
<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">
{% render "@icon" with {
name: 'share',
size: 'md',
strokeColor: 'text-white'
} %}
</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="#">
{% render "@icon" with {
name: 'whatsapp',
size: 'lg',
notStroke: true
} %}
</a>
<a target="_blank" href="#">
{% render "@icon" with {
name: 'linkedin',
size: 'lg',
notStroke: true
} %}
</a>
<a target="_blank" href="#">
{% render "@icon" with {
name: 'facebook',
size: 'lg',
fillColor: "fill-primary"
} %}
</a>
<a target="_blank" href="#">
{% render "@icon" with {
name: 'link',
size: 'lg'
} %}
</a>
</div>
</div>
</div>
/* No context defined. */
No notes defined.