Header

<header class="header" data-of-header>
  <div class="container">
    <div class="header-brand">
      <a href="#">
        <img src="..." alt="...">
      </a>
    </div>
    <div class="header-content">
      <div class="d-none d-lg-block">
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#person-circle"/>
</svg>

</span>
            <span class="header-link-text">Account</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Login</a></li>
            <li><a class="dropdown-item" href="#">Register</a></li>
          </ul>
        </div>
      </div>
      <div class="d-none d-lg-block">
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#cart-fill"/>
</svg>

</span>
            <span class="header-link-text">Cart</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Overview</a></li>
            <li><a class="dropdown-item" href="#">Checkout</a></li>
          </ul>
        </div>
      </div>
      <div class="d-none d-lg-block">
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon">
              <svg class="of-icon" width="32" height="32" fill="currentColor">
              	<use href="/assets/icons/bootstrap-icons.svg#heart-fill"/>
              </svg>
              

              <span class="header-link-icon-badge">
                <span class="badge bg-danger">12</span>
              </span>
            </span>
            <span class="header-link-text">Favorites</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Next Trip</a></li>
            <li><a class="dropdown-item" href="#">Xmas Dinner</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Edit Favorites</a></li>
          </ul>
        </div>
      </div>
      <div>
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#translate"/>
</svg>

</span>
            <span class="header-link-text">Language</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">German</a></li>
            <li><a class="dropdown-item" href="#">English</a></li>
            <li><a class="dropdown-item" href="#">French</a></li>
          </ul>
        </div>
      </div>
      <div class="d-none d-lg-block">
        <button class="header-link" class="header-link" data-bs-toggle="collapse" data-bs-target="#headerSearch"
           aria-controls="headerSearch"
           aria-expanded="false" aria-label="Toggle header search">
          <span class="header-link-icon d-none-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#search"/>
</svg>

</span>
          <span class="header-link-icon d-block-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#x-lg"/>
</svg>

</span>
          <span class="header-link-text">Search</span>
        </button>
        <div class="collapse header-collapse header-search-wrapper" id="headerSearch">
          <div class="container">
            <div class="header-search">
              <form class="search-form search-form-lg">
                <div class="search-form-inputs">
                  <input type="search" name="keywords" placeholder="Keywords" aria-label="Keywords">
                  <button type="submit">
                    <svg class="of-icon" width="32" height="32" fill="currentColor">
                    	<use href="/assets/icons/bootstrap-icons.svg#search"/>
                    </svg>
                    

                    <span class="visually-hidden">Search</span>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button class="header-link" type="button" data-bs-toggle="collapse"
                data-bs-target="#pageMenu" aria-controls="pageMenu"
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="header-link-icon d-none-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#list"/>
</svg>

</span>
          <span class="header-link-icon d-block-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#x-lg"/>
</svg>

</span>
          <span class="header-link-text">Menu</span>
        </button>
        <div class="collapse header-collapse page-menu-wrapper" id="pageMenu">
          <div class="container">
             <div class="page-menu">
               <div class="page-menu-mobile-content">
                 <div>
                   <form class="search-form search-form-lg">
                     <div class="search-form-inputs">
                       <input type="search" name="keywords" placeholder="Keywords" aria-label="Keywords">
                       <button type="submit">
                         <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#search"/>
             </svg>
             
                         <span class="visually-hidden">Search</span>
                       </button>
                     </div>
                   </form>
                 </div>
             
                 <div class="accordion" id="pageMenuMobile">
                   <div class="accordion-item">
                     <div class="accordion-header">
                       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileAccount" aria-expanded="false" aria-controls="pageMenuMobileAccount">
                         <span class="header-link header-link-row">
                           <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#person-circle"/>
             </svg>
             </span>
                           <span class="header-link-text">Account</span>
                         </span>
                       </button>
                     </div>
                     <div id="pageMenuMobileAccount" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                       <div class="accordion-body">
                         <ul class="nav flex-column">
                           <li class="nav-item">
                             <a class="nav-link" href="#">Login</a>
                           </li>
                           <li class="nav-item">
                             <a class="nav-link" href="#">Register</a>
                           </li>
                         </ul>
                       </div>
                     </div>
                   </div>
                   <div class="accordion-item">
                     <div class="accordion-header">
                       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileCart" aria-expanded="false" aria-controls="pageMenuMobileCart">
                         <span class="header-link header-link-row">
                           <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#cart-fill"/>
             </svg>
             </span>
                           <span class="header-link-text">Cart</span>
                         </span>
                       </button>
                     </div>
                     <div id="pageMenuMobileCart" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                       <div class="accordion-body">
                         <ul class="nav flex-column">
                           <li class="nav-item">
                             <a class="nav-link" href="#">Overview</a>
                           </li>
                           <li class="nav-item">
                             <a class="nav-link" href="#">Checkout</a>
                           </li>
                         </ul>
                       </div>
                     </div>
                   </div>
                   <div class="accordion-item">
                     <div class="accordion-header">
                       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileFavorites" aria-expanded="false" aria-controls="pageMenuMobileFavorites">
                         <span class="header-link header-link-row">
                           <span class="header-link-icon">
                             <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#heart-fill"/>
             </svg>
             
                             <span class="header-link-icon-badge">
                               <span class="badge bg-danger">12</span>
                             </span>
                           </span>
                           <span class="header-link-text">Favorites</span>
                         </span>
                       </button>
                     </div>
                     <div id="pageMenuMobileFavorites" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                       <div class="accordion-body">
                         <ul class="nav flex-column">
                           <li class="nav-item">
                             <a class="nav-link" href="#">Next Trip</a>
                           </li>
                           <li class="nav-item">
                             <a class="nav-link" href="#">Xmas Dinner</a>
                           </li>
                           <li><hr></li>
                           <li class="nav-item">
                             <a class="nav-link" href="#">Edit Favorites</a>
                           </li>
                         </ul>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             
               <div class="page-nav" data-of-page-navigation>
                 <nav role="navigation">
                   <ul class="page-nav-level-1">
                     <li>
                       <a href="#" class="page-nav-link active" aria-current="page">Mehr</a>
                     </li>
                     <li class="page-nav-submenu" aria-haspopup="true">
                       <a class="page-nav-link" href="#">Inspirieren</a>
                       <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Inspirieren">
                         <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                       </button>
                       <ul class="page-nav-level-2">
                         <li class="page-nav-back">
                           <button class="page-nav-back-link" data-of-page-menu-close>
                             <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                           </button>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 2 - 1</a>
                         </li>
                         <li class="page-nav-submenu" aria-haspopup="true">
                           <a class="page-nav-link" href="#">Lorem ipsum 2 - 2</a>
                           <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 2">
                             <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                           </button>
                           <ul class="page-nav-level-3">
                             <li class="page-nav-back">
                               <button class="page-nav-back-link" data-of-page-menu-close>
                                 <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                               </button>
                             </li>
                             <li>
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 1</a>
                             </li>
                             <li class="page-nav-submenu" aria-haspopup="true">
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2</a>
                               <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 2 - 2">
                                 <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                               </button>
                               <ul class="page-nav-level-4">
                                 <li class="page-nav-back">
                                   <button class="page-nav-back-link" data-of-page-menu-close>
                                     <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                                   </button>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 1</a>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 2</a>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 3</a>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 4</a>
                                 </li>
                               </ul>
                             </li>
                             <li>
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 2- 3</a>
                             </li>
                             <li>
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 4</a>
                             </li>
                           </ul>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 2 - 3</a>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 2 - 4</a>
                         </li>
                         <li class="page-nav-submenu" aria-haspopup="true">
                           <a class="page-nav-link" href="#">Lorem ipsum 2 - 5</a>
                           <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5">
                             <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                           </button>
                           <ul class="page-nav-level-3">
                             <li class="page-nav-back">
                               <button class="page-nav-back-link" data-of-page-menu-close>
                                 <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                               </button>
                             </li>
                             <li>
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 1</a>
                             </li>
                             <li class="page-nav-submenu" aria-haspopup="true">
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2</a>
                               <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5 - 2">
                                 <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                               </button>
                               <ul class="page-nav-level-4">
                                 <li class="page-nav-back">
                                   <button class="page-nav-back-link" data-of-page-menu-close>
                                     <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                                   </button>
                                 </li>
                                 <li class="page-nav-submenu" aria-haspopup="true">
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1</a>
                                   <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5 - 2 - 1">
                                     <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                                   </button>
                                   <ul class="page-nav-level-5">
                                     <li class="page-nav-back">
                                       <button class="page-nav-back-link" data-of-page-menu-close>
                                         <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                                       </button>
                                     </li>
                                     <li>
                                       <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 1</a>
                                     </li>
                                     <li>
                                       <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 2</a>
                                     </li>
                                     <li>
                                       <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 3</a>
                                     </li>
                                     <li>
                                       <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 4</a>
                                     </li>
                                   </ul>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 2</a>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2- 3</a>
                                 </li>
                                 <li>
                                   <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 4</a>
                                 </li>
                               </ul>
                             </li>
                             <li>
                               <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 3</a>
                             </li>
                           </ul>
                         </li>
                       </ul>
                     </li>
                     <li class="page-nav-submenu" aria-haspopup="true">
                       <a href="#" class="page-nav-link">Buchen</a>
                       <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Buchen">
                         <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
             </svg>
             
                       </button>
                       <ul class="page-nav-level-2">
                         <li class="page-nav-back">
                           <button class="page-nav-back-link" data-of-page-menu-close>
                             <svg class="of-icon" width="32" height="32" fill="currentColor">
             	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
             </svg>
             Back
                           </button>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 3 - 1</a>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 3 - 2</a>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 3 - 3</a>
                         </li>
                         <li>
                           <a class="page-nav-link" href="#">Lorem ipsum 3 - 4</a>
                         </li>
                       </ul>
                     </li>
                     <li>
                       <a href="#" class="page-nav-link">Erleben</a>
                     </li>
                     <li>
                       <a href="#" class="page-nav-link">Noch Mehr</a>
                     </li>
                     <li>
                       <a href="#" class="page-nav-link">Noch viel mehr mehr...</a>
                     </li>
                   </ul>
                 </nav>
               </div>
               <div class="page-menu-content">
                 <h3>Entdecke mehr!</h3>
             
                 <div class="row row-cols-1 gy-4">
                   <div class="col">
                     <div class="card card-mini">
                       <div class="card-media">
                         <div class="card-media__visual">
                           <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                                role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                                focusable="false"><title>Placeholder</title>
                             <rect width="100%" height="100%" fill="#868e96"></rect>
                             <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                           </svg>
                         </div>
                       </div>
                       <div class="card-body">
                         <h5 class="card-info">Stefan Keller, 01.12.2021</h5>
                         <h3 class="card-title h4"><a href="#" class="stretched-link">Familienparadiese entdecken!</a></h3>
                       </div>
                     </div>
                   </div>
                   <div class="col">
                     <div class="card card-mini">
                       <div class="card-media">
                         <div class="card-media__visual">
                           <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                                role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                                focusable="false"><title>Placeholder</title>
                             <rect width="100%" height="100%" fill="#868e96"></rect>
                             <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                           </svg>
                         </div>
                       </div>
                       <div class="card-body">
                         <h5 class="card-info">St.Gallen, 29.06.23 - 02.07.23</h5>
                         <h3 class="card-title h4"><a href="#" class="stretched-link">OpenAir St.Gallen</a></h3>
                       </div>
                     </div>
                   </div>
                   <div class="col">
                     <div class="card card-mini">
                       <div class="card-media">
                         <div class="card-media__visual">
                           <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                                role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                                focusable="false"><title>Placeholder</title>
                             <rect width="100%" height="100%" fill="#868e96"></rect>
                             <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                           </svg>
                         </div>
                       </div>
                       <div class="card-body">
                         <h5 class="card-info">St.Gallen, 12.10.23 - 22.10.23</h5>
                         <h3 class="card-title h4"><a href="#" class="stretched-link">OLMA</a></h3>
                       </div>
                     </div>
                   </div>
                 </div>
             
                 <hr>
             
                 <p>
                   <a class="link-external" href="#">Hotel buchen</a>
                 </p>
                 <p>
                   <a class="link-external" href="#">Restaurantfinder</a>
                 </p>
                 <p>
                   <a class="link-external" href="#">Tourenguide</a>
                 </p>
               </div>
             </div>

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

<header class="header header-center" data-of-header>
  <div class="container">
    <div class="header-content d-none d-lg-flex">
      <div>
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#person-circle"/>
</svg>

</span>
            <span class="header-link-text">Account</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Login</a></li>
            <li><a class="dropdown-item" href="#">Register</a></li>
          </ul>
        </div>
      </div>
      <div>
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#cart-fill"/>
</svg>

</span>
            <span class="header-link-text">Cart</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Overview</a></li>
            <li><a class="dropdown-item" href="#">Checkout</a></li>
          </ul>
        </div>
      </div>
      <div>
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon">
              <svg class="of-icon" width="32" height="32" fill="currentColor">
              	<use href="/assets/icons/bootstrap-icons.svg#heart-fill"/>
              </svg>
              

              <span class="header-link-icon-badge">
                <span class="badge bg-danger">2</span>
              </span>
            </span>
            <span class="header-link-text">Favorites</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Next Trip</a></li>
            <li><a class="dropdown-item" href="#">Xmas Dinner</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Edit Favorites</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="header-brand">
      <a href="#">
        <img src="..." alt="...">
      </a>
    </div>
    <div class="header-content">
      <div>
        <div class="dropdown">
          <button class="header-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#translate"/>
</svg>

</span>
            <span class="header-link-text">Spreche</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Deutsch</a></li>
            <li><a class="dropdown-item" href="#">Englisch</a></li>
            <li><a class="dropdown-item" href="#">Französisch</a></li>
          </ul>
        </div>
      </div>
      <div class="d-none d-lg-block">
        <button class="header-link" data-bs-toggle="collapse" data-bs-target="#headerSearch2"
           aria-controls="headerSearch2"
           aria-expanded="false" aria-label="Toggle header search">
          <span class="header-link-icon d-none-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#search"/>
</svg>

</span>
          <span class="header-link-icon d-block-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#x-lg"/>
</svg>

</span>
          <span class="header-link-text">Search</span>
        </button>
        <div class="collapse header-collapse header-search-wrapper" id="headerSearch2">
          <div class="container">
            <div class="header-search">
              <form class="search-form search-form-lg">
                <div class="search-form-inputs">
                  <input type="search" name="keywords" placeholder="Keywords" aria-label="Keywords">
                  <button type="submit">
                    <svg class="of-icon" width="32" height="32" fill="currentColor">
                    	<use href="/assets/icons/bootstrap-icons.svg#search"/>
                    </svg>
                    

                    <span class="visually-hidden">Search</span>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button class="header-link" type="button" data-bs-toggle="collapse"
                data-bs-target="#pageMenu2" aria-controls="pageMenu2"
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="header-link-icon d-none-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#list"/>
</svg>

</span>
          <span class="header-link-icon d-block-collapsed"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#x-lg"/>
</svg>

</span>
          <span class="header-link-text">Menu</span>
        </button>
        <div class="collapse header-collapse page-menu-wrapper" id="pageMenu2">
          <div class="container">
            <div class="page-menu">
              <div class="page-menu-mobile-content">
                <div>
                  <form class="search-form search-form-lg">
                    <div class="search-form-inputs">
                      <input type="search" name="keywords" placeholder="Keywords" aria-label="Keywords">
                      <button type="submit">
                        <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#search"/>
            </svg>
            
                        <span class="visually-hidden">Search</span>
                      </button>
                    </div>
                  </form>
                </div>
            
                <div class="accordion" id="pageMenuMobile">
                  <div class="accordion-item">
                    <div class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileAccount" aria-expanded="false" aria-controls="pageMenuMobileAccount">
                        <span class="header-link header-link-row">
                          <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#person-circle"/>
            </svg>
            </span>
                          <span class="header-link-text">Account</span>
                        </span>
                      </button>
                    </div>
                    <div id="pageMenuMobileAccount" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                      <div class="accordion-body">
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Login</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Register</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <div class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileCart" aria-expanded="false" aria-controls="pageMenuMobileCart">
                        <span class="header-link header-link-row">
                          <span class="header-link-icon"><svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#cart-fill"/>
            </svg>
            </span>
                          <span class="header-link-text">Cart</span>
                        </span>
                      </button>
                    </div>
                    <div id="pageMenuMobileCart" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                      <div class="accordion-body">
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Overview</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Checkout</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <div class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pageMenuMobileFavorites" aria-expanded="false" aria-controls="pageMenuMobileFavorites">
                        <span class="header-link header-link-row">
                          <span class="header-link-icon">
                            <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#heart-fill"/>
            </svg>
            
                            <span class="header-link-icon-badge">
                              <span class="badge bg-danger">12</span>
                            </span>
                          </span>
                          <span class="header-link-text">Favorites</span>
                        </span>
                      </button>
                    </div>
                    <div id="pageMenuMobileFavorites" class="accordion-collapse collapse" data-bs-parent="#pageMenuMobile">
                      <div class="accordion-body">
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Next Trip</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Xmas Dinner</a>
                          </li>
                          <li><hr></li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Edit Favorites</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            
              <div class="page-nav" data-of-page-navigation>
                <nav role="navigation">
                  <ul class="page-nav-level-1">
                    <li>
                      <a href="#" class="page-nav-link active" aria-current="page">Mehr</a>
                    </li>
                    <li class="page-nav-submenu" aria-haspopup="true">
                      <a class="page-nav-link" href="#">Inspirieren</a>
                      <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Inspirieren">
                        <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                      </button>
                      <ul class="page-nav-level-2">
                        <li class="page-nav-back">
                          <button class="page-nav-back-link" data-of-page-menu-close>
                            <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                          </button>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 2 - 1</a>
                        </li>
                        <li class="page-nav-submenu" aria-haspopup="true">
                          <a class="page-nav-link" href="#">Lorem ipsum 2 - 2</a>
                          <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 2">
                            <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                          </button>
                          <ul class="page-nav-level-3">
                            <li class="page-nav-back">
                              <button class="page-nav-back-link" data-of-page-menu-close>
                                <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                              </button>
                            </li>
                            <li>
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 1</a>
                            </li>
                            <li class="page-nav-submenu" aria-haspopup="true">
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2</a>
                              <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 2 - 2">
                                <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                              </button>
                              <ul class="page-nav-level-4">
                                <li class="page-nav-back">
                                  <button class="page-nav-back-link" data-of-page-menu-close>
                                    <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                                  </button>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 1</a>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 2</a>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 3</a>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 2 - 4</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 2- 3</a>
                            </li>
                            <li>
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 2 - 4</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 2 - 3</a>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 2 - 4</a>
                        </li>
                        <li class="page-nav-submenu" aria-haspopup="true">
                          <a class="page-nav-link" href="#">Lorem ipsum 2 - 5</a>
                          <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5">
                            <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                          </button>
                          <ul class="page-nav-level-3">
                            <li class="page-nav-back">
                              <button class="page-nav-back-link" data-of-page-menu-close>
                                <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                              </button>
                            </li>
                            <li>
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 1</a>
                            </li>
                            <li class="page-nav-submenu" aria-haspopup="true">
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2</a>
                              <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5 - 2">
                                <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                              </button>
                              <ul class="page-nav-level-4">
                                <li class="page-nav-back">
                                  <button class="page-nav-back-link" data-of-page-menu-close>
                                    <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                                  </button>
                                </li>
                                <li class="page-nav-submenu" aria-haspopup="true">
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1</a>
                                  <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Lorem ipsum 2 - 5 - 2 - 1">
                                    <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                                  </button>
                                  <ul class="page-nav-level-5">
                                    <li class="page-nav-back">
                                      <button class="page-nav-back-link" data-of-page-menu-close>
                                        <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                                      </button>
                                    </li>
                                    <li>
                                      <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 1</a>
                                    </li>
                                    <li>
                                      <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 2</a>
                                    </li>
                                    <li>
                                      <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 3</a>
                                    </li>
                                    <li>
                                      <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 1 - 4</a>
                                    </li>
                                  </ul>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 2</a>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2- 3</a>
                                </li>
                                <li>
                                  <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 2 - 4</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a class="page-nav-link" href="#">Lorem ipsum 2 - 5 - 3</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li class="page-nav-submenu" aria-haspopup="true">
                      <a href="#" class="page-nav-link">Buchen</a>
                      <button class="page-nav-link-toggle" data-of-page-menu-toggle aria-expanded="false" aria-label="Expand submenu Buchen">
                        <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
            </svg>
            
                      </button>
                      <ul class="page-nav-level-2">
                        <li class="page-nav-back">
                          <button class="page-nav-back-link" data-of-page-menu-close>
                            <svg class="of-icon" width="32" height="32" fill="currentColor">
            	<use href="/assets/icons/bootstrap-icons.svg#arrow-left"/>
            </svg>
            Back
                          </button>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 3 - 1</a>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 3 - 2</a>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 3 - 3</a>
                        </li>
                        <li>
                          <a class="page-nav-link" href="#">Lorem ipsum 3 - 4</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" class="page-nav-link">Erleben</a>
                    </li>
                    <li>
                      <a href="#" class="page-nav-link">Noch Mehr</a>
                    </li>
                    <li>
                      <a href="#" class="page-nav-link">Noch viel mehr mehr...</a>
                    </li>
                  </ul>
                </nav>
              </div>
              <div class="page-menu-content">
                <h3>Entdecke mehr!</h3>
            
                <div class="row row-cols-1 gy-4">
                  <div class="col">
                    <div class="card card-mini">
                      <div class="card-media">
                        <div class="card-media__visual">
                          <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                               role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                               focusable="false"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#868e96"></rect>
                            <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                          </svg>
                        </div>
                      </div>
                      <div class="card-body">
                        <h5 class="card-info">Stefan Keller, 01.12.2021</h5>
                        <h3 class="card-title h4"><a href="#" class="stretched-link">Familienparadiese entdecken!</a></h3>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card card-mini">
                      <div class="card-media">
                        <div class="card-media__visual">
                          <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                               role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                               focusable="false"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#868e96"></rect>
                            <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                          </svg>
                        </div>
                      </div>
                      <div class="card-body">
                        <h5 class="card-info">St.Gallen, 29.06.23 - 02.07.23</h5>
                        <h3 class="card-title h4"><a href="#" class="stretched-link">OpenAir St.Gallen</a></h3>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card card-mini">
                      <div class="card-media">
                        <div class="card-media__visual">
                          <svg class="bd-placeholder-img img-fluid" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                               role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice"
                               focusable="false"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#868e96"></rect>
                            <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                          </svg>
                        </div>
                      </div>
                      <div class="card-body">
                        <h5 class="card-info">St.Gallen, 12.10.23 - 22.10.23</h5>
                        <h3 class="card-title h4"><a href="#" class="stretched-link">OLMA</a></h3>
                      </div>
                    </div>
                  </div>
                </div>
            
                <hr>
            
                <p>
                  <a class="link-external" href="#">Hotel buchen</a>
                </p>
                <p>
                  <a class="link-external" href="#">Restaurantfinder</a>
                </p>
                <p>
                  <a class="link-external" href="#">Tourenguide</a>
                </p>
              </div>
            </div>

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