{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}
<f:render section="h02_quick_link_section" arguments="{data: data}"/>


<f:section name="h02_quick_link_section">
    <div class="h02_quick_link_section {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}"  id="c{data.uid}">
        <div class="h02_quick_link_section_wrapper">
            <div class="h02_quick_link_section_inner_wrapper">
                <f:if condition="{data.header}">
                    <div class="h02_quick_link_section_header">
                            <p>{data.header -> f:format.raw()}</p>
                    </div>
                </f:if>
                <f:if condition="{data.tx_mask_h02_quick_link_section_element}">
                    <div class="h02_quick_link_section_elements_wrapper">
                        <f:for each="{data.tx_mask_h02_quick_link_section_element}" as="data_item">
                            <f:if condition="{f:link.typolink(parameter: '{data_item.tx_mask_h02_quick_link_sectio_content}')}">
                                <f:then>
                                    <f:link.typolink class="h02_quick_link_section_element" parameter="{data_item.tx_mask_h02_quick_link_sectio_content}">
                                        <f:if condition="{data.tx_mask_h02_quick_link_section_use_icons}">
                                            <f:render section="h02_quick_link_section_svg" arguments="{data_item: data_item}"/>
                                        </f:if>
                                        <f:if condition="{data_item.tx_mask_h02_quick_link_section_text}">
                                            <div class="h02_quick_link_section_text">
                                                <p>
                                                    {data_item.tx_mask_h02_quick_link_section_text}
                                                </p>
                                            </div>
                                        </f:if>
                                        <div role="button" aria-label="Sprung zu Link" class="h02_quick_link_section_btn">
                                            <div class="btn btn-primary">
                                                {ms:button(type: 'rounded',direction:"down",border:1)}
                                            </div>
                                        </div>
                                    </f:link.typolink>
                                </f:then>
                                <f:else>
                                    <div class="h02_quick_link_section_element">
                                        <f:if condition="{data.tx_mask_h02_quick_link_section_use_icons}">
                                            <f:render section="h02_quick_link_section_svg" arguments="{data_item: data_item}"/>
                                        </f:if>
                                        <f:if condition="{data_item.tx_mask_h02_quick_link_section_text}">
                                            <div class="h02_quick_link_section_text">
                                                <p>
                                                    {data_item.tx_mask_h02_quick_link_section_text}
                                                </p>
                                            </div>
                                        </f:if>
                                        <div role="button" aria-label="Kein Link gesetzt" class="h02_quick_link_section_btn">
                                            <div class="btn btn-primary">
                                                {ms:button(type: 'rounded',direction:"down",border:1)}
                                            </div>
                                        </div>
                                    </div>
                                </f:else>
                            </f:if>
                        </f:for>
                    </div>
                </f:if>

            </div>
        </div>
    </div>
</f:section>



<f:section name="h02_quick_link_section_svg">
    <div class="h02_quick_link_section_svg_wrapper">
        <div class="h02_quick_link_section_svg">
            <f:switch expression="{data_item.tx_mask_h02_quick_link_section_icon}">
                <f:case value="watch">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.99963 15.7502C12.7274 15.7502 15.7493 12.7283 15.7493 9.00061C15.7493 5.27289 12.7274 2.25098 8.99963 2.25098C5.27191 2.25098 2.25 5.27289 2.25 9.00061C2.25 12.7283 5.27191 15.7502 8.99963 15.7502Z" stroke="white" stroke-width="1.12494" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M9 5.06348V9.16956L11.7374 10.5382" stroke="white" stroke-width="1.12494" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </f:case>
                <f:case value="info">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.00024 15.751C12.7278 15.751 15.7495 12.7292 15.7495 9.00171C15.7495 5.27419 12.7278 2.25244 9.00024 2.25244C5.27273 2.25244 2.25098 5.27419 2.25098 9.00171C2.25098 12.7292 5.27273 15.751 9.00024 15.751Z" stroke="white" stroke-width="1.12488" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8.43848 7.87653H7.87604V9.0014H8.43848V7.87653ZM9.00092 8.43896H9.56335C9.56335 8.12834 9.31154 7.87653 9.00092 7.87653V8.43896ZM9.00092 12.376H8.43848C8.43848 12.6867 8.69029 12.9385 9.00092 12.9385V12.376ZM9.56335 12.9385H10.1258V11.8136H9.56335V12.9385ZM8.43848 9.0014H9.00092V7.87653H8.43848V9.0014ZM8.43848 8.43896V12.376H9.56335V8.43896H8.43848ZM9.00092 12.9385H9.56335V11.8136H9.00092V12.9385Z" fill="white"/>
                        <path d="M8.86026 6.75128C9.3262 6.75128 9.70392 6.37356 9.70392 5.90762C9.70392 5.44168 9.3262 5.06396 8.86026 5.06396C8.39432 5.06396 8.0166 5.44168 8.0166 5.90762C8.0166 6.37356 8.39432 6.75128 8.86026 6.75128Z" fill="white"/>
                    </svg>
                </f:case>
                <f:case value="ticket">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 3.37549C7.06066 3.37549 7.3125 3.62733 7.3125 3.93799V14.063C7.3125 14.3736 7.06066 14.6255 6.75 14.6255C6.43934 14.6255 6.1875 14.3736 6.1875 14.063V3.93799C6.1875 3.62733 6.43934 3.37549 6.75 3.37549Z" fill="white"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.4545 3.70499C1.66548 3.49402 1.95163 3.37549 2.25 3.37549H15.75C16.0484 3.37549 16.3345 3.49401 16.5455 3.70499C16.7565 3.91597 16.875 4.20212 16.875 4.50049V6.24482C16.875 6.24485 16.875 6.24478 16.875 6.24482C16.875 6.50414 16.7854 6.75561 16.6213 6.95642C16.4572 7.15725 16.2286 7.29515 15.9745 7.34674L15.8626 6.79549L15.9752 7.3466C15.594 7.42448 15.2514 7.63162 15.0054 7.93299C14.7594 8.23436 14.625 8.61145 14.625 9.00049C14.625 9.38953 14.7594 9.76663 15.0054 10.068C15.2513 10.3693 15.5938 10.5764 15.9748 10.6543C16.2288 10.706 16.4572 10.8438 16.6213 11.0446C16.7854 11.2454 16.875 11.4967 16.875 11.7561C16.875 11.7561 16.875 11.756 16.875 11.7561V13.5005C16.875 13.7989 16.7565 14.085 16.5455 14.296C16.3345 14.507 16.0484 14.6255 15.75 14.6255H2.25C1.95163 14.6255 1.66548 14.507 1.4545 14.296C1.24353 14.085 1.125 13.7989 1.125 13.5005L1.125 11.7562C1.125 11.7561 1.125 11.7562 1.125 11.7562C1.12498 11.4968 1.21461 11.2454 1.37871 11.0446C1.54284 10.8437 1.77136 10.7058 2.02554 10.6542L2.13744 11.2055L2.02485 10.6544C2.40601 10.5765 2.74858 10.3694 2.9946 10.068C3.24062 9.76662 3.375 9.38953 3.375 9.00049C3.375 8.61145 3.24062 8.23435 2.9946 7.93298C2.74865 7.63171 2.40622 7.4246 2.02519 7.34667C1.77115 7.29502 1.54276 7.15715 1.37871 6.95642C1.21461 6.75561 1.12498 6.50425 1.125 6.24492C1.125 6.24489 1.125 6.24496 1.125 6.24492V4.50049C1.125 4.20212 1.24353 3.91597 1.4545 3.70499ZM15.75 4.50049L2.25 4.50049V6.24436C2.88519 6.37413 3.4561 6.71933 3.86608 7.22155C4.27607 7.72376 4.5 8.35218 4.5 9.00049C4.5 9.6488 4.27607 10.2772 3.86608 10.7794C3.4561 11.2816 2.88523 11.6268 2.25004 11.7566L2.25 13.5005H15.75V11.7566C15.1148 11.6268 14.5439 11.2816 14.1339 10.7794C13.7239 10.2772 13.5 9.6488 13.5 9.00049C13.5 8.35218 13.7239 7.72377 14.1339 7.22155C14.5439 6.71933 15.1148 6.37415 15.75 6.24437L15.75 4.50049Z" fill="white"/>
                    </svg>
                </f:case>
                <f:case value="location">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.42027 3.73375C6.36967 2.78435 7.65734 2.25098 9 2.25098C10.3427 2.25098 11.6303 2.78435 12.5797 3.73375C13.5291 4.68315 14.0625 5.97082 14.0625 7.31348C14.0625 9.6422 12.7621 11.7627 11.388 13.3428C10.7079 14.125 10.0263 14.7556 9.5146 15.1905C9.31225 15.3626 9.13711 15.5034 9 15.6104C8.86288 15.5034 8.68775 15.3626 8.4854 15.1905C7.97372 14.7556 7.29212 14.125 6.61197 13.3428C5.23791 11.7627 3.9375 9.6422 3.9375 7.31348C3.9375 5.97082 4.47087 4.68315 5.42027 3.73375ZM8.67709 16.7741C8.67727 16.7742 8.67743 16.7743 9 16.3135L8.67743 16.7743C8.87111 16.9099 9.12889 16.9099 9.32257 16.7743L9 16.3135C9.32257 16.7743 9.32273 16.7742 9.32291 16.7741L9.32337 16.7737L9.32469 16.7728L9.32885 16.7699L9.34315 16.7597C9.35531 16.751 9.37265 16.7385 9.39483 16.7223C9.43918 16.69 9.50292 16.6427 9.58327 16.5813C9.74392 16.4585 9.97131 16.2788 10.2432 16.0477C10.7862 15.5862 11.5109 14.916 12.237 14.081C13.6754 12.4268 15.1875 10.0473 15.1875 7.31348C15.1875 5.67245 14.5356 4.09863 13.3752 2.93825C12.2148 1.77787 10.641 1.12598 9 1.12598C7.35897 1.12598 5.78516 1.77787 4.62478 2.93825C3.4644 4.09863 2.8125 5.67245 2.8125 7.31348C2.8125 10.0473 4.32459 12.4268 5.76303 14.081C6.48913 14.916 7.21378 15.5862 7.75679 16.0477C8.02869 16.2788 8.25608 16.4585 8.41673 16.5813C8.49708 16.6427 8.56082 16.69 8.60517 16.7223C8.62735 16.7385 8.64469 16.751 8.65685 16.7597L8.67115 16.7699L8.67531 16.7728L8.67663 16.7737L8.67709 16.7741ZM7.3125 7.31348C7.3125 6.3815 8.06802 5.62598 9 5.62598C9.93198 5.62598 10.6875 6.3815 10.6875 7.31348C10.6875 8.24546 9.93198 9.00098 9 9.00098C8.06802 9.00098 7.3125 8.24546 7.3125 7.31348ZM9 4.50098C7.4467 4.50098 6.1875 5.76018 6.1875 7.31348C6.1875 8.86678 7.4467 10.126 9 10.126C10.5533 10.126 11.8125 8.86678 11.8125 7.31348C11.8125 5.76018 10.5533 4.50098 9 4.50098Z" fill="white"/>
                    </svg>
                </f:case>
                <f:case value="barrier">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_3230_97164)">
                            <path d="M12.5156 15.3306V13.9243C12.5156 13.1784 12.2193 12.463 11.6919 11.9356C11.1644 11.4081 10.449 11.1118 9.70312 11.1118H4.07812C3.3322 11.1118 2.61683 11.4081 2.08939 11.9356C1.56194 12.463 1.26563 13.1784 1.26562 13.9243V15.3306" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
                            <path d="M6.89062 8.29932C8.44393 8.29932 9.70312 7.04012 9.70312 5.48682C9.70312 3.93352 8.44393 2.67432 6.89062 2.67432C5.33732 2.67432 4.07812 3.93352 4.07812 5.48682C4.07812 7.04012 5.33732 8.29932 6.89062 8.29932Z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16.7344 15.3305V13.9242C16.7339 13.3011 16.5265 12.6957 16.1447 12.2032C15.7629 11.7107 15.2284 11.3589 14.625 11.2031" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
                            <path d="M11.8125 2.76562C12.4175 2.92052 12.9537 3.27237 13.3366 3.76569C13.7195 4.25901 13.9274 4.86574 13.9274 5.49023C13.9274 6.11473 13.7195 6.72146 13.3366 7.21478C12.9537 7.7081 12.4175 8.05994 11.8125 8.21484" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
                        </g>
                        <defs>
                            <clipPath id="clip0_3230_97164">
                                <rect width="16.875" height="16.875" fill="white" transform="translate(0.5625 0.564941)"/>
                            </clipPath>
                        </defs>
                    </svg>

                </f:case>
                <f:case value="contact">
                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.3758 11.0997V13.0794C14.3765 13.2632 14.3389 13.4452 14.2652 13.6136C14.1916 13.782 14.0836 13.9331 13.9482 14.0574C13.8127 14.1816 13.6529 14.2762 13.4788 14.3351C13.3046 14.394 13.1202 14.4159 12.9371 14.3993C10.9064 14.1787 8.95575 13.4847 7.24191 12.3733C5.6474 11.3601 4.29554 10.0082 3.28232 8.41374C2.16702 6.69211 1.47295 4.73198 1.25633 2.69213C1.23984 2.50964 1.26153 2.32571 1.32002 2.15206C1.3785 1.97841 1.47251 1.81884 1.59604 1.68351C1.71958 1.54818 1.86994 1.44005 2.03755 1.36601C2.20517 1.29198 2.38636 1.25365 2.5696 1.25348H4.54939C4.86966 1.25033 5.18015 1.36374 5.42298 1.57258C5.66582 1.78142 5.82443 2.07143 5.86925 2.38856C5.95281 3.02214 6.10778 3.64423 6.3312 4.24297C6.41999 4.47918 6.43921 4.73588 6.38658 4.98267C6.33394 5.22947 6.21167 5.456 6.03423 5.63542L5.19612 6.47354C6.13557 8.1257 7.50354 9.49368 9.15571 10.4331L9.99382 9.59501C10.1732 9.41758 10.3998 9.2953 10.6466 9.24267C10.8934 9.19004 11.1501 9.20925 11.3863 9.29804C11.985 9.52146 12.6071 9.67643 13.2407 9.75999C13.5613 9.80522 13.854 9.96669 14.0633 10.2137C14.2726 10.4607 14.3838 10.776 14.3758 11.0997Z" stroke="white" stroke-width="1.12488" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </f:case>
            </f:switch>
        </div>
    </div>
</f:section>