/* SEARCH */

/* Such-Icon Container */
   .search-icon {
      position: relative;
      z-index: 2; 
      display: flex; 
   }

/* Suchformular */
   .search-form-container {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      background-color: #017e6f;
      padding: 0.5rem;
      border: 0px;
      z-index: 1; 
      width: 25rem;
   }

   @media (max-width: 1000px) {
      .search-form-container {
         width: 100vw;
      }
   }

/* Anzeige des Suchformulars bei Hover oder Fokus */
   .search-icon:hover .search-form-container,
   .search-form-container:hover,
   .search-icon:focus-within .search-form-container,
   .search-form-container:focus-within {
      display: block;
   }

/* Hover- und Fokuszustände für das Such-Icon */
   .search-icon:hover,
   .search-icon:focus-within {
      background-color: #017e6f;
   }

   .search-icon svg path {
      fill: #333;
   }

   .site-header .sticker.sticky .site-navigation .search-icon svg path {
      fill: #fff;
   }


   @media (max-width: 1000px) {
      .search-icon svg path,
      .site-header .sticker.sticky .site-navigation .search-icon svg path {
         fill: #fff;
      }
   }

   .search-icon:hover svg path,
   .search-icon:focus-within svg path {
      fill: #fff;
   }

   .search-form-container > form > div,
   .search-form-container > form > div > input {
      width: 100%;
   }

.search-icon:hover .search-form-container,
.search-form-container:hover,
.search-icon:focus-within .search-form-container,
.search-form-container:focus-within {
    display: block;
}

/* Hover- und Fokuszustände für das Such-Icon */
.search-icon:hover,
.search-icon:focus-within {
   background-color: #017e6f;
}

.search-icon:hover svg path,
.search-icon.active svg path {
   fill: #fff;
}

@media (max-width: 1000px) {
   .search-icon:hover,
   .search-icon:focus-within {
      background-color: transparent;
   }

   .search-icon:hover svg path,
   .search-icon.active svg path {
      fill: #fff;
   }
}

/* Formular-Styling */
.search-form-container form {
   display: flex;
   align-items: center;
}

.search-form-container input[type="search"] {
   flex: 1;
   padding: 0.5rem;
   border: 0px;
   margin-right: 0.5rem;
}

.search-form-container input[type="submit"] {
   display: none;
}