<div class="navigation">
    <button class="close-navigation-btn">
        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.729187 0.727783L34.2709 34.2695" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M34.2709 0.727783L0.729187 34.2695" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
        </svg>

    </button>
    <nav class="main-navigation" role="navigation">
        <div class="container">
            <ul>
                <li class="is-active"><a href="">School</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">Sihlpost</a></li>
            </ul>
        </div>
    </nav>

    <nav class="sub-navigation" role="navigation">
        <div class="container">
            <ul class="navigation-level-1">
                <li>
                    <a href="#" class="has-children">Bildung <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></a>
                    <div class="flyout-menu">
                        <div class="container">
                            <div class="row">

                                <div class="col-lg-4">
                                    <div class="navigation-section">
                                        <div class="label-title"><a href="">Themen</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <ul class="navigation-level-2">
                                            <li><a href="">Handelsschule, HWD, Technische Kaufleute</a></li>
                                            <li><a href="">Rechnungswesen, Treuhand und Steuern</a></li>
                                            <li><a href="">Management und Leadership – mit HFW!</a></li>
                                            <li><a href="">Marketing, Verkauf und Kommunikation</a></li>
                                            <li><a href="">Sprachen</a></li>
                                            <li><a href="">HR/Personal und Sozialversicherungen</a></li>
                                            <li><a href="">Recht und öffentliche Verwaltung – mit HF!</a></li>
                                            <li><a href="">Office Management/Projektmanagement</a></li>
                                            <li><a href="">Detailhandel</a></li>
                                            <li><a href="">Banken und Versicherungen</a></li>
                                            <li><a href="">Einkauf/Aussenhandel</a></li>
                                            <li><a href="">Immobilien</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-lg-4 ">
                                    <div class="navigation-section">
                                        <div class="label-title"><a href="">Formate</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <ul class="navigation-level-2">
                                            <li><a href="">Bildungsgänge und Kurse</a></li>
                                            <li><a href="">Seminare</a></li>
                                            <li><a href="">SmartCamps</a></li>
                                            <li><a href="">Skillbox</a></li>
                                        </ul>
                                    </div>
                                    <div class="navigation-section">
                                        <div class="label-title"><a href="">Höhere Fachschulen HF</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <ul class="navigation-level-2">
                                            <li><a href="">Höhere Fachschulen HF</a></li>
                                            <li><a href="">Höhere Fachschule für Wirtschaft HFW</a></li>
                                            <li><a href="">Höhere Fachschule für Recht HFR</a></li>
                                            <li><a href="">Nachdiplomstudiengänge NDS HF</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-lg-4 ">
                                    <div class="navigation-section">
                                        <div class="label-title"><a href="">Wissen rund um Bildung</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <div class="navigation-level-2">
                                            <div class="navigation-teaser">
                                                <p>Das Schweizer Bildungswesen hält viel für Sie bereit – wenn Sie sich darin ausgekennen. Lernen Sie es kennen!</p>
                                                <a href="" class="btn btn-primary">Mehr erfahren</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="navigation-section">
                                        <div class="label-title"><a href="">Skilltrainer.ch</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <div class="navigation-level-2">
                                            <div class="navigation-teaser">
                                                <p>Ihre einzigartige Plattform für individuelles Skillmanagement.</p>
                                                <a href="" class="btn btn-primary">Mehr erfahren</a><br>
                                                <svg width="183" height="26" viewBox="0 0 183 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M5.01 25.27C7.89 25.27 10.38 23.71 10.38 21.16C10.38 17.95 4.89 14.62 4.89 12.37C4.89 11.38 5.55 10.72 6.84 10.72C8.46 10.72 8.49 12.4 8.49 13.75C9.81 13.75 11.04 13.24 11.04 11.74C11.04 10.3 9.78 9.37 7.23 9.37C4.38 9.37 2.46 10.99 2.46 13.3C2.46 16.45 7.83 19.18 7.83 22.12C7.83 23.47 6.54 23.98 5.43 23.98C3.54 23.98 3.51 22.63 3.51 21.04C3.24 20.95 2.94 20.92 2.7 20.92C1.59 20.92 0.84 21.7 0.84 22.81C0.84 24.46 2.67 25.27 5.01 25.27ZM24.0138 13.12C24.0138 15.82 18.6138 17.71 17.1738 17.8L17.3538 16.57C19.0938 13.42 21.4338 11.74 22.7238 11.74C23.5038 11.74 24.0138 12.19 24.0138 13.12ZM17.6238 14.38C17.7438 13.36 19.2438 2.35 19.2438 1.45C19.2438 0.909999 19.0638 0.519999 18.4038 0.519999C18.1338 0.519999 17.6538 0.639999 17.1738 0.759999L14.1738 1.45C13.7538 1.54 13.6038 1.72 13.6038 2.05C13.6038 2.32 13.7838 2.56 14.1138 2.56H15.3138C16.1238 2.56 16.3638 2.83 16.3638 3.58C16.3638 4.36 13.7538 23.98 13.7538 24.91C13.7538 25.12 13.8438 25.24 14.0538 25.24C14.2938 25.24 15.3138 25.03 16.0638 24.79C16.3938 24.7 16.4838 24.55 16.5138 24.19L17.0538 19.12L18.4338 18.73C20.8038 24.46 22.2438 25.24 23.0838 25.24C24.1338 25.24 27.2538 23.23 27.2538 22.48C27.2538 22.24 27.1338 22.15 26.9238 22.15C26.5038 22.15 24.4038 22.63 24.0738 22.63C23.5038 22.63 22.7838 22 20.6238 17.95C23.8038 17.02 26.6838 14.98 26.6838 12.04C26.6838 10.54 25.5438 9.37 23.8938 9.37C21.6738 9.37 19.2438 10.93 17.6838 14.38H17.6238ZM30.2084 24.58C30.2084 25.06 30.5084 25.21 30.9284 25.21C32.3084 25.21 36.3284 23.62 36.3284 22.99C36.3284 22.66 36.0884 22.6 35.8484 22.6H33.9284C33.2684 22.6 33.1784 22.54 33.1784 22.15C33.1784 21.4 34.6184 10.57 34.6184 10C34.6184 9.52 34.3184 9.37 33.8984 9.37C32.5184 9.37 28.7084 11.26 28.7084 11.89C28.7084 12.22 28.8584 12.28 29.0984 12.28H30.9284C31.4984 12.28 31.6784 12.28 31.6784 12.55C31.6784 13.45 30.2084 23.65 30.2084 24.58ZM31.7984 4.48C31.7984 5.59 32.7284 6.52 33.8384 6.52C34.9484 6.52 35.8784 5.59 35.8784 4.48C35.8784 3.37 34.9484 2.44 33.8384 2.44C32.7284 2.44 31.7984 3.37 31.7984 4.48ZM44.4963 1.45C44.4963 0.909999 44.3163 0.519999 43.6563 0.519999C43.3863 0.519999 42.9063 0.639999 42.4263 0.759999L39.4863 1.45C39.0663 1.54 38.9163 1.72 38.9163 2.05C38.9163 2.32 39.0963 2.56 39.4263 2.56H40.6263C41.4363 2.56 41.6763 2.83 41.6763 3.58C41.6763 4.36 39.0963 23.71 39.0963 24.64C39.0963 25.09 39.3963 25.24 39.8163 25.24C41.1963 25.24 45.2463 23.65 45.2463 23.02C45.2463 22.69 45.0063 22.63 44.7663 22.63H42.7563C42.1863 22.63 42.0063 22.6 42.0063 22.33C42.0063 21.22 44.4963 2.35 44.4963 1.45ZM53.2561 1.45C53.2561 0.909999 53.0761 0.519999 52.4161 0.519999C52.1461 0.519999 51.6661 0.639999 51.1861 0.759999L48.2461 1.45C47.8261 1.54 47.6761 1.72 47.6761 2.05C47.6761 2.32 47.8561 2.56 48.1861 2.56H49.3861C50.1961 2.56 50.4361 2.83 50.4361 3.58C50.4361 4.36 47.8561 23.71 47.8561 24.64C47.8561 25.09 48.1561 25.24 48.5761 25.24C49.9561 25.24 54.0061 23.65 54.0061 23.02C54.0061 22.69 53.7661 22.63 53.5261 22.63H51.5161C50.9461 22.63 50.7661 22.6 50.7661 22.33C50.7661 21.22 53.2561 2.35 53.2561 1.45ZM57.3959 14.32H55.1759V10.93H57.3959V6.31H61.7159V10.93H65.3459V14.32H61.7159V19.87C61.7159 20.55 61.8459 21.08 62.1059 21.46C62.3859 21.82 62.8159 22 63.3959 22C63.8359 22 64.2159 21.93 64.5359 21.79C64.8559 21.63 65.1559 21.45 65.4359 21.25L67.1759 23.89C65.8159 24.97 64.3359 25.51 62.7359 25.51C61.7359 25.51 60.8959 25.36 60.2159 25.06C59.5359 24.78 58.9859 24.39 58.5659 23.89C58.1459 23.37 57.8459 22.75 57.6659 22.03C57.4859 21.31 57.3959 20.51 57.3959 19.63V14.32ZM68.8849 10.93H73.0249L73.1749 12.7C73.5349 12.22 74.0249 11.76 74.6449 11.32C75.2849 10.88 76.1049 10.66 77.1049 10.66C77.4849 10.66 77.8049 10.68 78.0649 10.72C78.3449 10.76 78.6149 10.83 78.8749 10.93L78.1849 14.74C77.7449 14.6 77.2249 14.53 76.6249 14.53C75.6049 14.53 74.7749 14.84 74.1349 15.46C73.5149 16.06 73.2049 16.92 73.2049 18.04V25H68.8849V10.93ZM88.5293 23.68C88.0493 24.24 87.4393 24.67 86.6993 24.97C85.9793 25.27 85.1693 25.42 84.2693 25.42C83.7693 25.42 83.2393 25.35 82.6793 25.21C82.1393 25.07 81.6293 24.84 81.1493 24.52C80.6893 24.18 80.2993 23.73 79.9793 23.17C79.6793 22.61 79.5293 21.91 79.5293 21.07C79.5293 20.25 79.6893 19.52 80.0093 18.88C80.3493 18.24 80.8093 17.71 81.3893 17.29C81.9693 16.85 82.6493 16.52 83.4293 16.3C84.2293 16.08 85.0893 15.97 86.0093 15.97C86.5093 15.97 87.0093 15.98 87.5093 16C88.0293 16.02 88.3693 16.05 88.5293 16.09V15.79C88.5293 15.43 88.4493 15.13 88.2893 14.89C88.1493 14.63 87.9493 14.42 87.6893 14.26C87.4493 14.08 87.1693 13.96 86.8493 13.9C86.5293 13.82 86.1893 13.78 85.8293 13.78C84.8693 13.78 84.0693 13.9 83.4293 14.14C82.8093 14.38 82.2793 14.65 81.8393 14.95L80.0693 12.31C80.3693 12.09 80.7093 11.87 81.0893 11.65C81.4693 11.43 81.9193 11.23 82.4393 11.05C82.9593 10.87 83.5393 10.73 84.1793 10.63C84.8393 10.51 85.5893 10.45 86.4293 10.45C88.5693 10.45 90.1493 11.03 91.1693 12.19C92.1893 13.33 92.6993 14.87 92.6993 16.81V25H88.6493L88.5293 23.68ZM88.5293 18.79C88.4293 18.77 88.2393 18.75 87.9593 18.73C87.6793 18.69 87.3593 18.67 86.9993 18.67C85.7993 18.67 84.9493 18.84 84.4493 19.18C83.9493 19.52 83.6993 20 83.6993 20.62C83.6993 21.78 84.3993 22.36 85.7993 22.36C86.1393 22.36 86.4693 22.31 86.7893 22.21C87.1293 22.09 87.4193 21.93 87.6593 21.73C87.9193 21.53 88.1293 21.28 88.2893 20.98C88.4493 20.68 88.5293 20.33 88.5293 19.93V18.79ZM95.7788 4.99H100.399V8.86H95.7788V4.99ZM95.9288 10.93H100.249V25H95.9288V10.93ZM103.573 10.93H107.713L107.833 12.46C108.293 11.9 108.893 11.45 109.633 11.11C110.393 10.77 111.183 10.6 112.003 10.6C113.623 10.6 114.903 11.08 115.843 12.04C116.803 13 117.283 14.42 117.283 16.3V25H112.963V16.9C112.963 16.12 112.763 15.5 112.363 15.04C111.983 14.58 111.443 14.35 110.743 14.35C110.263 14.35 109.843 14.44 109.483 14.62C109.123 14.78 108.823 15 108.583 15.28C108.343 15.56 108.163 15.89 108.043 16.27C107.923 16.63 107.863 17.02 107.863 17.44V25H103.573V10.93ZM133.679 23.47C133.519 23.57 133.279 23.74 132.959 23.98C132.639 24.2 132.219 24.42 131.699 24.64C131.199 24.86 130.599 25.05 129.899 25.21C129.199 25.39 128.399 25.48 127.499 25.48C126.299 25.48 125.219 25.3 124.259 24.94C123.299 24.56 122.479 24.04 121.799 23.38C121.139 22.72 120.629 21.93 120.269 21.01C119.929 20.07 119.759 19.04 119.759 17.92C119.759 16.94 119.919 16 120.239 15.1C120.579 14.18 121.059 13.38 121.679 12.7C122.299 12.02 123.059 11.48 123.959 11.08C124.859 10.66 125.879 10.45 127.019 10.45C128.159 10.45 129.159 10.65 130.019 11.05C130.879 11.45 131.599 12.01 132.179 12.73C132.779 13.43 133.229 14.28 133.529 15.28C133.829 16.26 133.979 17.34 133.979 18.52V19.24H123.959C123.979 20 124.309 20.67 124.949 21.25C125.609 21.81 126.509 22.09 127.649 22.09C128.769 22.09 129.679 21.93 130.379 21.61C131.079 21.27 131.589 20.98 131.909 20.74L133.679 23.47ZM129.899 16.48C129.899 16.18 129.839 15.88 129.719 15.58C129.599 15.26 129.419 14.97 129.179 14.71C128.939 14.45 128.639 14.24 128.279 14.08C127.919 13.9 127.489 13.81 126.989 13.81C126.489 13.81 126.049 13.9 125.669 14.08C125.289 14.24 124.969 14.45 124.709 14.71C124.469 14.97 124.279 15.26 124.139 15.58C124.019 15.88 123.959 16.18 123.959 16.48H129.899ZM136.444 10.93H140.584L140.734 12.7C141.094 12.22 141.584 11.76 142.204 11.32C142.844 10.88 143.664 10.66 144.664 10.66C145.044 10.66 145.364 10.68 145.624 10.72C145.904 10.76 146.174 10.83 146.434 10.93L145.744 14.74C145.304 14.6 144.784 14.53 144.184 14.53C143.164 14.53 142.334 14.84 141.694 15.46C141.074 16.06 140.764 16.92 140.764 18.04V25H136.444V10.93ZM160.877 23.02C159.377 23.02 157.607 21.97 157.607 18.19C157.607 13.15 160.067 10.72 161.687 10.72C163.397 10.72 163.457 12.46 163.457 13.84C164.957 13.84 166.157 13.36 166.157 11.8C166.157 10.3 164.747 9.37 162.527 9.37C158.807 9.37 154.997 12.43 154.997 19C154.997 22.42 156.797 25.21 159.767 25.21C163.157 25.21 165.857 22.63 165.857 21.37C165.857 21.07 165.647 20.95 165.497 20.95C165.017 20.95 163.397 23.02 160.877 23.02ZM172.123 13.39C172.243 12.37 173.623 2.35 173.623 1.45C173.623 0.909999 173.443 0.519999 172.783 0.519999C172.513 0.519999 172.033 0.639999 171.553 0.759999L168.553 1.45C168.133 1.54 167.983 1.72 167.983 2.05C167.983 2.32 168.163 2.56 168.493 2.56H169.693C170.503 2.56 170.743 2.83 170.743 3.58C170.743 4.36 168.133 23.98 168.133 24.91C168.133 25.12 168.223 25.24 168.433 25.24C168.673 25.24 169.693 25.03 170.443 24.79C170.773 24.7 170.863 24.55 170.893 24.19L171.973 15.28C174.253 13.06 175.633 11.86 176.953 11.86C177.583 11.86 177.913 12.13 177.913 12.85C177.913 13.63 176.203 24.13 176.203 24.7C176.203 25.09 176.503 25.24 176.923 25.24C178.303 25.24 182.323 23.62 182.323 22.93C182.323 22.66 182.173 22.6 181.753 22.6H179.833C179.263 22.6 179.053 22.57 179.053 22.3C179.053 21.73 180.733 12.88 180.733 11.74C180.733 10.18 179.683 9.37 178.333 9.37C176.353 9.37 174.343 11.11 172.213 13.39H172.123Z" fill="white" />
                                                    <path d="M147.411 23.02C147.411 24.19 148.341 25.12 149.511 25.12C150.711 25.12 151.671 24.19 151.671 23.02C151.671 21.82 150.711 20.86 149.511 20.86C148.341 20.86 147.411 21.82 147.411 23.02Z" fill="#F39100" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </li>
                <li><a href=""><span class="smarteconomy">SmartEconomy<i>Ready</i></span></a></li>
                <li><a href="">Lernort</a></li>
                <li>
                    <a href="#" class="has-children">Über Uns <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></a>
                    <div class="flyout-menu">
                        <div class="container">
                            <div class="row">

                                <div class="col-lg-4 ">
                                    <div class="navigation-section">
                                        <div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <div class="navigation-level-2">
                                            <div class="navigation-teaser">
                                                <p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta. </p>
                                                <a href="" class="btn btn-primary">Mehr erfahren</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 ">
                                    <div class="navigation-section">
                                        <div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <div class="navigation-level-2">
                                            <div class="navigation-teaser">
                                                <p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta. </p>
                                                <a href="" class="btn btn-primary">Mehr erfahren</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 ">
                                    <div class="navigation-section">
                                        <div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
                                        <div class="navigation-level-2">
                                            <div class="navigation-teaser">
                                                <p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta. </p>
                                                <a href="" class="btn btn-primary">Mehr erfahren</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </li>
                <li class="consulting-nav-item"><a href=""><span>Beratung</span> <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.8743 9.0625H6.24281C5.70837 9.0625 5.19585 9.27489 4.81806 9.6529C4.44027 10.0309 4.2282 10.5436 4.22852 11.078V24.7708" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M24.7695 24.7721V16.918" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M28.3952 24.7695C28.3952 26.7716 26.7722 28.3945 24.7702 28.3945H4.22852C2.22648 28.3945 0.603516 26.7716 0.603516 24.7695H28.3952Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M19.332 6.64453C19.332 5.64351 20.1435 4.83203 21.1445 4.83203C22.1455 4.83203 22.957 5.64351 22.957 6.64453C22.957 7.64555 22.1455 8.45703 21.1445 8.45703" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.1458 10.2695C21.3127 10.2695 21.4479 10.4048 21.4479 10.5716C21.4479 10.7385 21.3127 10.8737 21.1458 10.8737C20.979 10.8737 20.8438 10.7385 20.8438 10.5716C20.8438 10.4048 20.979 10.2695 21.1458 10.2695" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0649 0.603517C19.1373 0.609968 17.2929 1.38965 15.9452 2.76779C14.5975 4.14593 13.8592 6.00724 13.8958 7.93448C13.8415 9.28369 14.1685 10.6209 14.8395 11.7927L12.6875 16.3119L17.2079 14.1586C19.8503 15.7967 23.2387 15.5889 25.6612 13.6403C28.0836 11.6917 29.0127 8.42653 27.979 5.49449C26.9453 2.56246 24.1738 0.601951 21.0649 0.603517V0.603517Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <nav class="mobile-meta-navigation" role="navigation">
        <ul class="navigation-level-1">
            <li class="">
                <a href="" class="is-highlighted">Infoanlässe & Events</a>
            </li>
            <li class="">
                <a href="#">Für Studierende <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></a>
                <div class="flyout-menu">

                    <div class="navigation-section">
                        <ul class="navigation-level-2">
                            <li><a href="">Stundenplan</a></li>
                            <li><a href="">Moodle-Login</a></li>
                            <li><a href="">Badge-Nutzung</a></li>
                            <li><a href="">E-Mail-Kennwort ändern</a></li>
                            <li><a href="">Hausreglement</a></li>
                        </ul>
                    </div>

                </div>
            </li>
            <li class="">
                <a href="">Login <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></a>
            </li>
            <li class="">
                <a href="">Spracheinstellungen: Deutsch <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round" /></svg></a>
            </li>
        </ul>
    </nav>
    <div class="nav-dimmer"></div>
</div>
<div class="navigation">
	<button class="close-navigation-btn">
		<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M0.729187 0.727783L34.2709 34.2695" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M34.2709 0.727783L0.729187 34.2695" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>

	</button>
	<nav class="main-navigation" role="navigation">
		<div class="container">
			<ul>
				<li class="is-active"><a href="">School</a></li>
				<li><a href="">Business</a></li>
				<li><a href="">Sihlpost</a></li>
			</ul>
		</div>
	</nav>

	<nav class="sub-navigation" role="navigation">
		<div class="container">
			<ul class="navigation-level-1">
				<li >
					<a href="#" class="has-children">Bildung <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
					<div class="flyout-menu">
						<div class="container">
							<div class="row">

								<div class="col-lg-4">
									<div class="navigation-section">
										<div class="label-title"><a href="">Themen</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<ul class="navigation-level-2">
											<li><a href="">Handelsschule, HWD, Technische Kaufleute</a></li>
											<li><a href="">Rechnungswesen, Treuhand und Steuern</a></li>
											<li><a href="">Management und Leadership – mit HFW!</a></li>
											<li><a href="">Marketing, Verkauf und Kommunikation</a></li>
											<li><a href="">Sprachen</a></li>
											<li><a href="">HR/Personal und Sozialversicherungen</a></li>
											<li><a href="">Recht und öffentliche Verwaltung – mit HF!</a></li>
											<li><a href="">Office Management/Projektmanagement</a></li>
											<li><a href="">Detailhandel</a></li>
											<li><a href="">Banken und Versicherungen</a></li>
											<li><a href="">Einkauf/Aussenhandel</a></li>
											<li><a href="">Immobilien</a></li>
										</ul>
									</div>
								</div>

								<div class="col-lg-4 ">
									<div class="navigation-section">
										<div class="label-title"><a href="">Formate</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<ul class="navigation-level-2">
											<li><a href="">Bildungsgänge und Kurse</a></li>
											<li><a href="">Seminare</a></li>
											<li><a href="">SmartCamps</a></li>
											<li><a href="">Skillbox</a></li>
										</ul>
									</div>
									<div class="navigation-section">
										<div class="label-title"><a href="">Höhere Fachschulen HF</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<ul class="navigation-level-2">
											<li><a href="">Höhere Fachschulen HF</a></li>
											<li><a href="">Höhere Fachschule für Wirtschaft HFW</a></li>
											<li><a href="">Höhere Fachschule für Recht HFR</a></li>
											<li><a href="">Nachdiplomstudiengänge NDS HF</a></li>
										</ul>
									</div>
								</div>

								<div class="col-lg-4 ">
									<div class="navigation-section">
										<div class="label-title"><a href="">Wissen rund um Bildung</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<div class="navigation-level-2">
											<div class="navigation-teaser">
												<p>Das Schweizer Bildungswesen hält viel für Sie bereit – wenn Sie sich darin ausgekennen. Lernen Sie es kennen!</p>
												<a href="" class="btn btn-primary">Mehr erfahren</a>
											</div>
										</div>
									</div>

									<div class="navigation-section">
										<div class="label-title"><a href="">Skilltrainer.ch</a> <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<div class="navigation-level-2">
											<div class="navigation-teaser">
												<p>Ihre einzigartige Plattform für individuelles Skillmanagement.</p>
												<a href="" class="btn btn-primary">Mehr erfahren</a><br>
												<svg width="183" height="26" viewBox="0 0 183 26" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M5.01 25.27C7.89 25.27 10.38 23.71 10.38 21.16C10.38 17.95 4.89 14.62 4.89 12.37C4.89 11.38 5.55 10.72 6.84 10.72C8.46 10.72 8.49 12.4 8.49 13.75C9.81 13.75 11.04 13.24 11.04 11.74C11.04 10.3 9.78 9.37 7.23 9.37C4.38 9.37 2.46 10.99 2.46 13.3C2.46 16.45 7.83 19.18 7.83 22.12C7.83 23.47 6.54 23.98 5.43 23.98C3.54 23.98 3.51 22.63 3.51 21.04C3.24 20.95 2.94 20.92 2.7 20.92C1.59 20.92 0.84 21.7 0.84 22.81C0.84 24.46 2.67 25.27 5.01 25.27ZM24.0138 13.12C24.0138 15.82 18.6138 17.71 17.1738 17.8L17.3538 16.57C19.0938 13.42 21.4338 11.74 22.7238 11.74C23.5038 11.74 24.0138 12.19 24.0138 13.12ZM17.6238 14.38C17.7438 13.36 19.2438 2.35 19.2438 1.45C19.2438 0.909999 19.0638 0.519999 18.4038 0.519999C18.1338 0.519999 17.6538 0.639999 17.1738 0.759999L14.1738 1.45C13.7538 1.54 13.6038 1.72 13.6038 2.05C13.6038 2.32 13.7838 2.56 14.1138 2.56H15.3138C16.1238 2.56 16.3638 2.83 16.3638 3.58C16.3638 4.36 13.7538 23.98 13.7538 24.91C13.7538 25.12 13.8438 25.24 14.0538 25.24C14.2938 25.24 15.3138 25.03 16.0638 24.79C16.3938 24.7 16.4838 24.55 16.5138 24.19L17.0538 19.12L18.4338 18.73C20.8038 24.46 22.2438 25.24 23.0838 25.24C24.1338 25.24 27.2538 23.23 27.2538 22.48C27.2538 22.24 27.1338 22.15 26.9238 22.15C26.5038 22.15 24.4038 22.63 24.0738 22.63C23.5038 22.63 22.7838 22 20.6238 17.95C23.8038 17.02 26.6838 14.98 26.6838 12.04C26.6838 10.54 25.5438 9.37 23.8938 9.37C21.6738 9.37 19.2438 10.93 17.6838 14.38H17.6238ZM30.2084 24.58C30.2084 25.06 30.5084 25.21 30.9284 25.21C32.3084 25.21 36.3284 23.62 36.3284 22.99C36.3284 22.66 36.0884 22.6 35.8484 22.6H33.9284C33.2684 22.6 33.1784 22.54 33.1784 22.15C33.1784 21.4 34.6184 10.57 34.6184 10C34.6184 9.52 34.3184 9.37 33.8984 9.37C32.5184 9.37 28.7084 11.26 28.7084 11.89C28.7084 12.22 28.8584 12.28 29.0984 12.28H30.9284C31.4984 12.28 31.6784 12.28 31.6784 12.55C31.6784 13.45 30.2084 23.65 30.2084 24.58ZM31.7984 4.48C31.7984 5.59 32.7284 6.52 33.8384 6.52C34.9484 6.52 35.8784 5.59 35.8784 4.48C35.8784 3.37 34.9484 2.44 33.8384 2.44C32.7284 2.44 31.7984 3.37 31.7984 4.48ZM44.4963 1.45C44.4963 0.909999 44.3163 0.519999 43.6563 0.519999C43.3863 0.519999 42.9063 0.639999 42.4263 0.759999L39.4863 1.45C39.0663 1.54 38.9163 1.72 38.9163 2.05C38.9163 2.32 39.0963 2.56 39.4263 2.56H40.6263C41.4363 2.56 41.6763 2.83 41.6763 3.58C41.6763 4.36 39.0963 23.71 39.0963 24.64C39.0963 25.09 39.3963 25.24 39.8163 25.24C41.1963 25.24 45.2463 23.65 45.2463 23.02C45.2463 22.69 45.0063 22.63 44.7663 22.63H42.7563C42.1863 22.63 42.0063 22.6 42.0063 22.33C42.0063 21.22 44.4963 2.35 44.4963 1.45ZM53.2561 1.45C53.2561 0.909999 53.0761 0.519999 52.4161 0.519999C52.1461 0.519999 51.6661 0.639999 51.1861 0.759999L48.2461 1.45C47.8261 1.54 47.6761 1.72 47.6761 2.05C47.6761 2.32 47.8561 2.56 48.1861 2.56H49.3861C50.1961 2.56 50.4361 2.83 50.4361 3.58C50.4361 4.36 47.8561 23.71 47.8561 24.64C47.8561 25.09 48.1561 25.24 48.5761 25.24C49.9561 25.24 54.0061 23.65 54.0061 23.02C54.0061 22.69 53.7661 22.63 53.5261 22.63H51.5161C50.9461 22.63 50.7661 22.6 50.7661 22.33C50.7661 21.22 53.2561 2.35 53.2561 1.45ZM57.3959 14.32H55.1759V10.93H57.3959V6.31H61.7159V10.93H65.3459V14.32H61.7159V19.87C61.7159 20.55 61.8459 21.08 62.1059 21.46C62.3859 21.82 62.8159 22 63.3959 22C63.8359 22 64.2159 21.93 64.5359 21.79C64.8559 21.63 65.1559 21.45 65.4359 21.25L67.1759 23.89C65.8159 24.97 64.3359 25.51 62.7359 25.51C61.7359 25.51 60.8959 25.36 60.2159 25.06C59.5359 24.78 58.9859 24.39 58.5659 23.89C58.1459 23.37 57.8459 22.75 57.6659 22.03C57.4859 21.31 57.3959 20.51 57.3959 19.63V14.32ZM68.8849 10.93H73.0249L73.1749 12.7C73.5349 12.22 74.0249 11.76 74.6449 11.32C75.2849 10.88 76.1049 10.66 77.1049 10.66C77.4849 10.66 77.8049 10.68 78.0649 10.72C78.3449 10.76 78.6149 10.83 78.8749 10.93L78.1849 14.74C77.7449 14.6 77.2249 14.53 76.6249 14.53C75.6049 14.53 74.7749 14.84 74.1349 15.46C73.5149 16.06 73.2049 16.92 73.2049 18.04V25H68.8849V10.93ZM88.5293 23.68C88.0493 24.24 87.4393 24.67 86.6993 24.97C85.9793 25.27 85.1693 25.42 84.2693 25.42C83.7693 25.42 83.2393 25.35 82.6793 25.21C82.1393 25.07 81.6293 24.84 81.1493 24.52C80.6893 24.18 80.2993 23.73 79.9793 23.17C79.6793 22.61 79.5293 21.91 79.5293 21.07C79.5293 20.25 79.6893 19.52 80.0093 18.88C80.3493 18.24 80.8093 17.71 81.3893 17.29C81.9693 16.85 82.6493 16.52 83.4293 16.3C84.2293 16.08 85.0893 15.97 86.0093 15.97C86.5093 15.97 87.0093 15.98 87.5093 16C88.0293 16.02 88.3693 16.05 88.5293 16.09V15.79C88.5293 15.43 88.4493 15.13 88.2893 14.89C88.1493 14.63 87.9493 14.42 87.6893 14.26C87.4493 14.08 87.1693 13.96 86.8493 13.9C86.5293 13.82 86.1893 13.78 85.8293 13.78C84.8693 13.78 84.0693 13.9 83.4293 14.14C82.8093 14.38 82.2793 14.65 81.8393 14.95L80.0693 12.31C80.3693 12.09 80.7093 11.87 81.0893 11.65C81.4693 11.43 81.9193 11.23 82.4393 11.05C82.9593 10.87 83.5393 10.73 84.1793 10.63C84.8393 10.51 85.5893 10.45 86.4293 10.45C88.5693 10.45 90.1493 11.03 91.1693 12.19C92.1893 13.33 92.6993 14.87 92.6993 16.81V25H88.6493L88.5293 23.68ZM88.5293 18.79C88.4293 18.77 88.2393 18.75 87.9593 18.73C87.6793 18.69 87.3593 18.67 86.9993 18.67C85.7993 18.67 84.9493 18.84 84.4493 19.18C83.9493 19.52 83.6993 20 83.6993 20.62C83.6993 21.78 84.3993 22.36 85.7993 22.36C86.1393 22.36 86.4693 22.31 86.7893 22.21C87.1293 22.09 87.4193 21.93 87.6593 21.73C87.9193 21.53 88.1293 21.28 88.2893 20.98C88.4493 20.68 88.5293 20.33 88.5293 19.93V18.79ZM95.7788 4.99H100.399V8.86H95.7788V4.99ZM95.9288 10.93H100.249V25H95.9288V10.93ZM103.573 10.93H107.713L107.833 12.46C108.293 11.9 108.893 11.45 109.633 11.11C110.393 10.77 111.183 10.6 112.003 10.6C113.623 10.6 114.903 11.08 115.843 12.04C116.803 13 117.283 14.42 117.283 16.3V25H112.963V16.9C112.963 16.12 112.763 15.5 112.363 15.04C111.983 14.58 111.443 14.35 110.743 14.35C110.263 14.35 109.843 14.44 109.483 14.62C109.123 14.78 108.823 15 108.583 15.28C108.343 15.56 108.163 15.89 108.043 16.27C107.923 16.63 107.863 17.02 107.863 17.44V25H103.573V10.93ZM133.679 23.47C133.519 23.57 133.279 23.74 132.959 23.98C132.639 24.2 132.219 24.42 131.699 24.64C131.199 24.86 130.599 25.05 129.899 25.21C129.199 25.39 128.399 25.48 127.499 25.48C126.299 25.48 125.219 25.3 124.259 24.94C123.299 24.56 122.479 24.04 121.799 23.38C121.139 22.72 120.629 21.93 120.269 21.01C119.929 20.07 119.759 19.04 119.759 17.92C119.759 16.94 119.919 16 120.239 15.1C120.579 14.18 121.059 13.38 121.679 12.7C122.299 12.02 123.059 11.48 123.959 11.08C124.859 10.66 125.879 10.45 127.019 10.45C128.159 10.45 129.159 10.65 130.019 11.05C130.879 11.45 131.599 12.01 132.179 12.73C132.779 13.43 133.229 14.28 133.529 15.28C133.829 16.26 133.979 17.34 133.979 18.52V19.24H123.959C123.979 20 124.309 20.67 124.949 21.25C125.609 21.81 126.509 22.09 127.649 22.09C128.769 22.09 129.679 21.93 130.379 21.61C131.079 21.27 131.589 20.98 131.909 20.74L133.679 23.47ZM129.899 16.48C129.899 16.18 129.839 15.88 129.719 15.58C129.599 15.26 129.419 14.97 129.179 14.71C128.939 14.45 128.639 14.24 128.279 14.08C127.919 13.9 127.489 13.81 126.989 13.81C126.489 13.81 126.049 13.9 125.669 14.08C125.289 14.24 124.969 14.45 124.709 14.71C124.469 14.97 124.279 15.26 124.139 15.58C124.019 15.88 123.959 16.18 123.959 16.48H129.899ZM136.444 10.93H140.584L140.734 12.7C141.094 12.22 141.584 11.76 142.204 11.32C142.844 10.88 143.664 10.66 144.664 10.66C145.044 10.66 145.364 10.68 145.624 10.72C145.904 10.76 146.174 10.83 146.434 10.93L145.744 14.74C145.304 14.6 144.784 14.53 144.184 14.53C143.164 14.53 142.334 14.84 141.694 15.46C141.074 16.06 140.764 16.92 140.764 18.04V25H136.444V10.93ZM160.877 23.02C159.377 23.02 157.607 21.97 157.607 18.19C157.607 13.15 160.067 10.72 161.687 10.72C163.397 10.72 163.457 12.46 163.457 13.84C164.957 13.84 166.157 13.36 166.157 11.8C166.157 10.3 164.747 9.37 162.527 9.37C158.807 9.37 154.997 12.43 154.997 19C154.997 22.42 156.797 25.21 159.767 25.21C163.157 25.21 165.857 22.63 165.857 21.37C165.857 21.07 165.647 20.95 165.497 20.95C165.017 20.95 163.397 23.02 160.877 23.02ZM172.123 13.39C172.243 12.37 173.623 2.35 173.623 1.45C173.623 0.909999 173.443 0.519999 172.783 0.519999C172.513 0.519999 172.033 0.639999 171.553 0.759999L168.553 1.45C168.133 1.54 167.983 1.72 167.983 2.05C167.983 2.32 168.163 2.56 168.493 2.56H169.693C170.503 2.56 170.743 2.83 170.743 3.58C170.743 4.36 168.133 23.98 168.133 24.91C168.133 25.12 168.223 25.24 168.433 25.24C168.673 25.24 169.693 25.03 170.443 24.79C170.773 24.7 170.863 24.55 170.893 24.19L171.973 15.28C174.253 13.06 175.633 11.86 176.953 11.86C177.583 11.86 177.913 12.13 177.913 12.85C177.913 13.63 176.203 24.13 176.203 24.7C176.203 25.09 176.503 25.24 176.923 25.24C178.303 25.24 182.323 23.62 182.323 22.93C182.323 22.66 182.173 22.6 181.753 22.6H179.833C179.263 22.6 179.053 22.57 179.053 22.3C179.053 21.73 180.733 12.88 180.733 11.74C180.733 10.18 179.683 9.37 178.333 9.37C176.353 9.37 174.343 11.11 172.213 13.39H172.123Z" fill="white"/>
													<path d="M147.411 23.02C147.411 24.19 148.341 25.12 149.511 25.12C150.711 25.12 151.671 24.19 151.671 23.02C151.671 21.82 150.711 20.86 149.511 20.86C148.341 20.86 147.411 21.82 147.411 23.02Z" fill="#F39100"/>
												</svg>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>

				</li>
				<li><a href=""><span class="smarteconomy">SmartEconomy<i>Ready</i></span></a></li>
				<li><a href="">Lernort</a></li>
				<li>
					<a href="#" class="has-children">Über Uns <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
					<div class="flyout-menu">
						<div class="container">
							<div class="row">

								<div class="col-lg-4 ">
									<div class="navigation-section">
										<div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<div class="navigation-level-2">
											<div class="navigation-teaser">
												<p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta.  </p>
												<a href="" class="btn btn-primary">Mehr erfahren</a>
											</div>
										</div>
									</div>
								</div>

								<div class="col-lg-4 ">
									<div class="navigation-section">
										<div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<div class="navigation-level-2">
											<div class="navigation-teaser">
												<p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta.  </p>
												<a href="" class="btn btn-primary">Mehr erfahren</a>
											</div>
										</div>
									</div>
								</div>

								<div class="col-lg-4 ">
									<div class="navigation-section">
										<div class="label-title">Title <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
										<div class="navigation-level-2">
											<div class="navigation-teaser">
												<p>Plurima et maxima constituit Iam vero omnium vitiorum suorum plurima et maxima constituit monumenta.  </p>
												<a href="" class="btn btn-primary">Mehr erfahren</a>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</li>
				<li class="consulting-nav-item"><a href=""><span>Beratung</span> <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M10.8743 9.0625H6.24281C5.70837 9.0625 5.19585 9.27489 4.81806 9.6529C4.44027 10.0309 4.2282 10.5436 4.22852 11.078V24.7708" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M24.7695 24.7721V16.918" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3952 24.7695C28.3952 26.7716 26.7722 28.3945 24.7702 28.3945H4.22852C2.22648 28.3945 0.603516 26.7716 0.603516 24.7695H28.3952Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M19.332 6.64453C19.332 5.64351 20.1435 4.83203 21.1445 4.83203C22.1455 4.83203 22.957 5.64351 22.957 6.64453C22.957 7.64555 22.1455 8.45703 21.1445 8.45703" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M21.1458 10.2695C21.3127 10.2695 21.4479 10.4048 21.4479 10.5716C21.4479 10.7385 21.3127 10.8737 21.1458 10.8737C20.979 10.8737 20.8438 10.7385 20.8438 10.5716C20.8438 10.4048 20.979 10.2695 21.1458 10.2695" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0649 0.603517C19.1373 0.609968 17.2929 1.38965 15.9452 2.76779C14.5975 4.14593 13.8592 6.00724 13.8958 7.93448C13.8415 9.28369 14.1685 10.6209 14.8395 11.7927L12.6875 16.3119L17.2079 14.1586C19.8503 15.7967 23.2387 15.5889 25.6612 13.6403C28.0836 11.6917 29.0127 8.42653 27.979 5.49449C26.9453 2.56246 24.1738 0.601951 21.0649 0.603517V0.603517Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
					</a>
				</li>
			</ul>
		</div>
	</nav>


	<nav class="mobile-meta-navigation" role="navigation">
		<ul class="navigation-level-1">
			<li class="">
				<a href="" class="is-highlighted">Infoanlässe & Events</a>
			</li>
			<li class="">
				<a href="#">Für Studierende <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
				<div class="flyout-menu">

					<div class="navigation-section">
						<ul class="navigation-level-2">
							<li><a href="">Stundenplan</a></li>
							<li><a href="">Moodle-Login</a></li>
							<li><a href="">Badge-Nutzung</a></li>
							<li><a href="">E-Mail-Kennwort ändern</a></li>
							<li><a href="">Hausreglement</a></li>
						</ul>
					</div>

				</div>
			</li>
			<li class="">
				<a href="">Login <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
			</li>
			<li class="">
				<a href="">Spracheinstellungen: Deutsch <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62683 25.3196L18.1998 13.7864C18.3071 13.688 18.3685 13.5466 18.3685 13.3982C18.3685 13.2497 18.3071 13.1083 18.1998 13.0099L5.62683 1.4757" stroke="#F39100" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
			</li>
		</ul>
	</nav>
	<div class="nav-dimmer"></div>
</div>
{
  "items": [
    {
      "item": null,
      "name": "Home",
      "link": "#lorem",
      "icon_id": "fa-arrow-right",
      "icon_type": "far",
      "icon_options": ""
    },
    {
      "item": null,
      "name": "School",
      "link": "#lorem",
      "icon_id": "fa-arrow-right",
      "icon_type": "far",
      "icon_options": ""
    },
    {
      "item": null,
      "name": "Über Uns",
      "link": "#lorem",
      "icon_id": "fa-arrow-right",
      "icon_type": "far",
      "icon_options": ""
    }
  ]
}
  • Content:
    // open mobile navigation
    $('.js-menu').click(function() {
        $('.navigation').addClass('is-open');
        $('html').addClass('block-scroll');
    });
    
    
    // close mobile navigation
    $('.close-navigation-btn').click(function() {
        $('.navigation').removeClass('is-open');
        $('html').removeClass('block-scroll');
    });
    
    // subnavigation mobile handling
    $('.sub-navigation .label-title').click(function() {
        $(this).toggleClass('is-open');
        $(this).next().slideToggle();
    });
    
    // open subnavigation / flyout menu on mobile and desktop
    $('.sub-navigation .navigation-level-1 > li > a').click(function() {
    	if(!$(this).hasClass('is-open')){
    		$('.sub-navigation .navigation-level-1 > li > a').removeClass('is-open');
            $('.sub-navigation .navigation-level-1 > li > .flyout-menu').hide();
            $('.navigation .nav-dimmer').hide();
    	}
        $(this).next().slideToggle();
        $(this).toggleClass('is-open');
        $('.navigation .nav-dimmer').toggle();
    });
    
    // open subnavigation / flyout menu on mobile and desktop
    $('.mobile-meta-navigation .navigation-level-1 > li > a').click(function() {
        $(this).next().slideToggle();
        $(this).toggleClass('is-open');
    });
    
    
    // close navi when click on dimmer
    $('.navigation .nav-dimmer').click(function() {
        $('.flyout-menu').slideUp();
        $('.navigation-level-1 li a').removeClass('is-open');
        $('.navigation .nav-dimmer').hide();
    });
    
  • URL: /components/raw/main-navigation/main-navigation.js
  • Filesystem Path: components/05-navigations/main-navigation/main-navigation.js
  • Size: 1.4 KB
  • Content:
    .navigation {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	overflow: auto;
    	background: #fff;
    	z-index: 10000;
    	opacity: 0;
    	transition: all 0.4s ease-in-out;
    	z-index: 10000;
    	pointer-events: none;
    
    	&.is-open {
    		pointer-events: all;
    		opacity: 1;
    	}
    
    	.close-navigation-btn {
    		font-size: 6rem;
    		margin: 0 auto;
    		background: none;
    		border: none;
    		color: $secondary;
    		margin-bottom: 2rem;
    		display: block;
    		margin-top: 1rem;
    
    		@include media-breakpoint-up(sm) {
    			margin: 2rem 3rem 2rem auto;
    			margin-top: 3rem;
    		}
    
    		@include media-breakpoint-up(lg) {
    			display: none;
    		}
    	}
    
    	@include media-breakpoint-up(lg) {
    		position: static;
    		z-index: 1;
    		opacity: 1;
    		overflow: visible;
    		margin-bottom: 4px;
    		pointer-events: all;
    	}
    }
    
    .main-navigation {
    	background: $color-medium-grey;
    	margin-bottom: 4px;
    	position: relative;
    	z-index: 100;
    
    	&::after {
    		content: "";
    		position: absolute;
    		top: 100%;
    		left: 0;
    		right: 0;
    		background: #fff;
    		height: 4px;
    		z-index: 1;
    	}
    	.container {
    		@include media-breakpoint-down(md) {
    			padding-right: 0 !important;
    			padding-left: 0 !important;
    		}
    	}
    
    	ul {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		display: flex;
    		flex-wrap: nowrap;
    
    		li {
    			width: 100%;
    			flex-grow: 1;
    			border-left: 1px solid #fff;
    			&:first-child {
    				border-left: none;
    			}
    			@include media-breakpoint-up(lg) {
    				&:first-child {
    					border-left: 1px solid #fff;
    				}
    			}
    
    			&:last-of-type {
    				border-right: 1px solid #fff;
    			}
    
    			a {
    				text-transform: uppercase;
    				color: $color-grey;
    				display: block;
    				text-align: center;
    				font-family: "Effra";
    				padding-bottom: 0.5rem;
    				font-size: 1.4rem;
    				position: relative;
    
    				font-weight: 700;
    
    				@include media-breakpoint-up(lg) {
    					font-weight: 500;
    				}
    			}
    			&:hover {
    				a {
    					color: #fff;
    					background: $primary;
    				}
    			}
    			&.is-active {
    				a {
    					color: #fff;
    					background: $primary;
    
    					&::after {
    						content: "";
    						width: 0;
    						height: 0;
    						position: absolute;
    						bottom: -4px;
    						left: 50%;
    						margin-left: -5px;
    						border-left: 10px solid transparent;
    						border-right: 10px solid transparent;
    						border-bottom: 10px solid #fff;
    						z-index: 5;
    						@include media-breakpoint-up(lg) {
    							border-bottom: 10px solid $secondary;
    						}
    					}
    				}
    			}
    		}
    	}
    }
    
    .sub-navigation {
    	background: #fff;
    	position: relative;
    	z-index: 101;
    	@include media-breakpoint-up(lg) {
    		background: $secondary;
    	}
    	position: relative;
    
    	&::after {
    		content: "";
    		position: absolute;
    		top: 100%;
    		left: 0;
    		right: 0;
    		height: 4px;
    		background: #fff;
    	}
    	.container {
    		@include media-breakpoint-down(md) {
    			padding-right: 0 !important;
    			padding-left: 0 !important;
    		}
    	}
    
    	.navigation-level-1 {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		display: flex;
    		flex-wrap: wrap;
    
    		@include media-breakpoint-up(lg) {
    			flex-wrap: nowrap;
    		}
    
    		li {
    			padding: 0;
    			width: 100%;
    			margin-bottom: 4px;
    
    			@include media-breakpoint-up(lg) {
    				padding: 1rem 0;
    				flex-grow: 1;
    				border-bottom: none;
    				margin-bottom: 0;
    			}
    			a {
    				background: $secondary;
    				color: #fff;
    				position: relative;
    				padding: 1.5rem 0 2rem;
    				font-family: "Effra";
    				font-family: "Effra";
    				font-feature-settings: "lnum";
    				font-size: 1.6rem;
    				font-weight: 700;
    				line-height: 1;
    				display: flex;
    				align-items: center;
    				//align-items: unset;
    				height: auto;
    				padding-left: 3rem;
    				padding-right: 3rem;
    				@include media-breakpoint-up(lg) {
    					padding: 0;
    					padding-right: 1.5rem;
    					padding-left: 0;
    					height: 2.4rem;
    					&::before {
    						content: "";
    						display: block;
    						width: 1.5rem;
    						height: 2.4rem;
    						border-left: 1px solid #fff;
    					}
    				}
    				svg {
    					font-size: 4rem;
    					position: absolute;
    					right: 2rem;
    					top: 50%;
    					color: $primary;
    					transform: translateY(-50%) rotate(90deg);
    					transition: transform 0.2s ease-in-out;
    					color: $primary;
    
    					@include media-breakpoint-up(lg) {
    						right: 1rem;
    						font-size: 3rem;
    						transform: translateY(-50%) rotate(90deg);
    						width: 1.8rem;
    					}
    				}
    
    				.smarteconomy {
    					color: $primary;
    
    					font-weight: 400;
    					height: 100%;
    					display: flex;
    					align-items: center;
    					//padding-top: 0.4rem;
    					font-family: "Feijoa";
    					font-variant-numeric: lining-nums;
    					//font-family: "Times New Roman", Times, serif;
    					i {
    						color: #fff;
    					}
    				}
    
    				&.is-open {
    					color: $primary;
    					svg {
    						transform: translateY(-50%) rotate(-90deg);
    					}
    					@include media-breakpoint-up(lg) {
    						&.has-children {
    							&::after {
    								background: $secondary;
    								content: "";
    								width: 100%;
    								height: 15px;
    								display: block;
    								position: absolute;
    								top: 100%;
    								z-index: 5;
    							}
    						}
    					}
    				}
    			}
    
    			&.consulting-nav-item {
    				a {
    					color: #fff;
    					background: $color-green;
    					font-family: "Effra";
    					font-weight: 400;
    					align-items: center;
    					padding-top: 1rem;
    					padding-bottom: 1.4rem;
    
    					&:hover,
    					span:hover {
    						color: #fff;
    					}
    
    					svg {
    						position: static;
    						margin-top: 0;
    						margin-left: 1rem;
    						margin-left: auto;
    						transform: none;
    					}
    				}
    				@include media-breakpoint-up(lg) {
    					width: auto;
    					flex-grow: 0;
    					flex-shrink: 0;
    					padding: 0;
    
    					a {
    						width: 14rem;
    						height: 100%;
    						justify-content: center;
    						text-align: center;
    						align-items: center;
    						padding: 0;
    						font-size: 1.2rem;
    						display: flex;
    
    						//text-transform: uppercase;
    
    						svg {
    							margin-left: 1rem;
    						}
    
    						&::before {
    							display: none;
    						}
    					}
    				}
    			}
    		}
    	}
    
    	.flyout-menu {
    		padding: 0;
    
    		background: #fff;
    		//display: none;
    		margin-top: 4px;
    		//border-top: 4px solid #fff;
    		display: none;
    		overflow: hidden;
    
    		@include media-breakpoint-up(lg) {
    			margin-top: 4px;
    			background: $color-light-grey;
    			border-top: none;
    			padding: 6rem 0;
    			position: absolute;
    			top: 100%;
    			left: 0;
    			right: 0;
    			background: $secondary;
    			z-index: 100;
    		}
    
    		&.is-open {
    			display: block;
    		}
    
    		.label-title {
    			color: $primary;
    			padding: 1.2rem 3rem 1.8rem;
    			color: $secondary;
    			background: $color-light-grey;
    			position: relative;
    			font-family: "Effra";
    			margin-bottom: 4px;
    
    			svg {
    				color: $primary;
    				font-size: 4rem;
    				position: absolute;
    				right: 2rem;
    				top: 50%;
    
    				transform: translateY(-50%) rotate(90deg);
    				transition: transform 0.2s ease-in-out;
    			}
    
    			&.is-open {
    				background: $secondary;
    				color: #fff;
    
    				svg {
    					transform: translateY(-50%) rotate(-90deg);
    				}
    
    				a {
    					color: #fff !important;
    				}
    			}
    
    			a {
    				background: transparent;
    				padding: 0 !important;
    				pointer-events: none;
    			}
    
    			@include media-breakpoint-up(lg) {
    				color: $primary !important;
    				border-bottom: none;
    				padding: 0;
    				margin-bottom: 2rem;
    				pointer-events: none;
    				background: transparent;
    
    				svg {
    					display: none;
    				}
    
    				a {
    					pointer-events: all;
    				}
    
    				a {
    					font-family: "Effra" !important;
    					color: $primary !important;
    					background: transparent !important;
    
    					font-size: 1.5rem !important;
    					font-weight: bold !important;
    					line-height: 1.8rem !important;
    				}
    			}
    		}
    
    		.navigation-level-2 {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    			margin-top: 4px;
    			display: none;
    			margin-bottom: 1rem;
    
    			@include media-breakpoint-up(lg) {
    				display: block !important;
    				margin-top: 0;
    				margin-bottom: 0;
    			}
    
    			li {
    				width: 100%;
    				padding: 0;
    				position: relative;
    				margin-bottom: 4px;
    				@include media-breakpoint-up(lg) {
    					margin-bottom: 1rem;
    				}
    
    				a {
    					background: $color-light-grey;
    
    					@include media-breakpoint-up(lg) {
    						background: transparent;
    					}
    				}
    			}
    		}
    		.navigation-section {
    			color: $secondary;
    			@include media-breakpoint-up(lg) {
    				border-left: 1px solid #fff;
    				padding: 0 1.5rem;
    				color: #fff;
    
    				+ .navigation-section {
    					margin-top: 6rem;
    				}
    			}
    
    			a {
    				color: #fff;
    				padding: 0;
    				font-family: "Effra";
    				padding: 1.5rem 3rem 1.9rem;
    				font-weight: 400;
    				font-size: 1.6rem;
    				display: flex;
    				height: auto;
    				color: $secondary;
    
    				@include media-breakpoint-up(lg) {
    					padding: 0;
    					padding-bottom: 0.8rem;
    					color: #fff;
    					font-family: "Feijoa";
    				}
    				&::before {
    					display: none;
    				}
    
    				&:hover {
    					color: $primary;
    				}
    			}
    
    			.navigation-teaser {
    				padding: 1.5rem 3rem;
    				color: $secondary;
    				@include media-breakpoint-up(lg) {
    					padding: 0;
    					padding-bottom: 0.4rem;
    					color: #fff;
    				}
    
    				.btn {
    					height: auto;
    					border: none;
    					padding: 1rem 2rem;
    					display: inline-flex;
    					width: auto;
    					color: #fff;
    					background-color: #f39100;
    					border-color: #f39100;
    					&::before {
    						display: none;
    					}
    				}
    				p {
    					margin-bottom: 1.5rem;
    				}
    				svg {
    					margin-top: 1.5rem;
    				}
    			}
    		}
    	}
    }
    
    .mobile-meta-navigation {
    	background: #fff;
    	position: relative;
    	margin-top: 3rem;
    
    	@include media-breakpoint-up(lg) {
    		display: none;
    	}
    
    	.navigation-level-1 {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		display: flex;
    		flex-wrap: wrap;
    
    		li {
    			padding: 0;
    			width: 100%;
    			border-bottom: 1px solid $color-medium-grey;
    
    			&:first-child {
    				border-top: 1px solid $color-medium-grey;
    			}
    
    			a {
    				color: $secondary;
    				position: relative;
    				padding: 1.8rem 0;
    				//			font-family: "Effra";
    				font-size: 1.6rem;
    
    				line-height: 1;
    				display: flex;
    				height: auto;
    				padding-left: 3rem;
    				padding-right: 3rem;
    				color: $color-grey;
    
    				@include media-breakpoint-up(md) {
    				}
    
    				svg {
    					font-size: 4rem;
    					position: absolute;
    					right: 2rem;
    					top: 50%;
    					color: $primary;
    					transform: translateY(-50%) rotate(90deg);
    					transition: transform 0.2s ease-in-out;
    
    					@include media-breakpoint-up(lg) {
    						right: 1rem;
    						font-size: 3rem;
    						transform: rotate(0);
    					}
    				}
    
    				&.is-open {
    					svg {
    						transform: translateY(-50%) rotate(-90deg);
    					}
    				}
    
    				&.is-highlighted {
    					color: $primary;
    					font-style: italic;
    				}
    			}
    		}
    	}
    
    	.flyout-menu {
    		padding: 0;
    		background: $color-light-grey;
    
    		display: none;
    		overflow: hidden;
    
    		&.is-open {
    			display: block;
    		}
    
    		.label-title {
    			color: $primary;
    			padding: 1.5rem 3rem;
    			color: $secondary;
    			margin-bottom: 0;
    			border-bottom: 4px solid #fff;
    			border-bottom: none !important;
    			position: relative;
    			font-family: "Effra";
    
    			svg {
    				color: $primary;
    				font-size: 4rem;
    				position: absolute;
    				right: 2rem;
    				top: 50%;
    				margin-top: -2rem;
    				transition: transform 0.2s ease-in-out;
    			}
    
    			&.is-open {
    				background: $secondary;
    				color: #fff;
    
    				svg {
    					transform: rotate(90deg);
    				}
    			}
    		}
    		.navigation-level-2 {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    
    			li {
    				width: 100%;
    				padding: 0;
    				position: relative;
    				//border-bottom: 4px solid #fff;
    			}
    		}
    	}
    }
    
    .nav-dimmer {
    	background: rgba(#fff, 0.6);
    	position: fixed;
    	top: 18rem;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	height: 120vh;
    	z-index: 10;
    	display: none;
    }
    
  • URL: /components/raw/main-navigation/main-navigation.scss
  • Filesystem Path: components/05-navigations/main-navigation/main-navigation.scss
  • Size: 11.4 KB
  • Handle: @main-navigation
  • Preview:
  • Filesystem Path: components/05-navigations/main-navigation/main-navigation.twig

There are no notes for this item.