:root {
  --highlight-border-color: #8dc157;
  --site-name-slogan-color: #ccc;
}
/* Small devices (landscape phones, up to 412px) */
@media (max-width: 412px) {
  .col-sm-3 {
    flex: 0 0 auto;
    width: 100%;
    order: 2;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 412px) {
 
  /*****************HEADER*******************/ 
  .navbar-brand {
    padding-top:var(--bs-navbar-brand-padding-y);
    padding-bottom:var(--bs-navbar-brand-padding-y);
    margin:auto;
    font-size:var(--bs-navbar-brand-font-size);
    color:var(--bs-navbar-brand-color);
    white-space: nowrap;
    white-space:nowrap
  }
    
 .site-name-slogan {
display: block;
font-family: 'Play', sans-serif;
 margin-left:auto;
  margin-right:0;
margin-bottom: 0;
font-size: 1.5em;
color: var(--site-name-slogan-color);
float: left;
padding: 10px;
margin-top: -10px;
text-align: center
}
/*****************SUCHE BLOCK*******************/
.highlighted {
  flex-direction: row; 
  margin: 0 auto; /* Center horizontally */
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  text-align: center; /* Ensure text inside is centered */
  padding: 10%;
}

 
 
 .hk-dropdown {display: block; margin: 0 auto; width: 100%; text-align: center} 
 
}
/* Medium devices (tablets, 768px and up) */

  @media (min-width: 768px) {
    .custom-class {
      /* Add padding and light gray background for medium devices */
      padding: 20px;
      background-color: #f0f0f0;
    }
      
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .highlighted {
      /* Increase padding for large devices */
      padding: 40px;
    }
  }
  
    @media (min-width: 1200px) {
      .custom-class {
        /* Add more padding and lighter gray background for extra large devices */
        padding: 30px;
        background-color: #e0e0e0;
      }
     
    }
    
    
  /* Removed unused @media (min-width: 1400px) block */