/* CSS Document */

@media screen and (min-width: 1024px) {
      header .contact-info { border-bottom: 1px solid #f4f4f3;}
      header .contact-info a { color: #333333; }
          header .contact-info a:hover {color: #333333; } 
}

.gallery.certificates h3 {
  font-weight: 600;
  font-size: 20px;
  color: #00628f;
  margin-top: 30px;
  margin-bottom: 20px; }


/* Grundlegendes Styling für das Menü */
header{clear: both;}
header .logo{width: 29%; float: left; position: relative;}
header .logo img{width: 80%; height: auto;}
header .contact-info{width: 69%; float: left; position: relative;}

.navigation {background: #f4f4f3; color: #00628f; padding: 5px; display: inline-block; width: 69%; float: left; position: relative; z-index: 1000;}
.navigation ul {list-style: none; padding: 0; margin: 0;}
.navigation li {position: relative; margin: 0; float: left; display: inline-block;}
.navigation li a, .navigation li button {padding: 15px 15px; color: #00628f; display: inline-block; text-decoration: none; background: none; border: none;font-weight: 700;}
.navigation li button::after {content: '\25BC'; margin-left: 8px; font-size: 0.8em;} /* Pfeil */
/* Dropdown Menü */
.navigation li div {display: none; position: absolute; background: #fff; padding: 10px; top: 100%;  left: 0; min-width: 150px;}
.navigation li:hover > div {display: block;}
.mobile_menu_button {display: none;}

.no-scroll {overflow: hidden;} 
.navigation li a:focus, .navigation li button:focus {outline: 3px solid #FFE700;}
.navigation li a.active, .navigation li a:hover, .navigation li button:hover {background: #FFE700;  color: #333;}
 .navigation div.submenu li{clear: both; width: 100% !important;}

@media screen and (min-width: 1024px) {
      header nav .mobile-only {
        display: none; }

}


 @media (max-width: 1024px) {
	.mobile_menu_button {display: flex;  background: #00628f;  color: #fff;  border: none;  padding: 10px; cursor: pointer; align-items: center; position: absolute; top: 20px; right: 20px;}
	.menu-icon {display: flex; flex-direction: column; gap: 5px; margin-right: 10px;}
	.menu-icon div {width: 25px;  height: 3px; background:#fff;}
	.navigation {display: none;  flex-direction: column;background: #fff; padding: 10px; margin-top: 70px; z-index: 1000; position: absolute; right: 20px;}
	.navigation.menu-open {display: flex;}
	.navigation ul {display: flex; flex-direction: column; width: 100%;}
	.navigation li { width: 100%;}
	.navigation li div {position: static; display: none; background:rgba(247,247,247,1.00);padding: 5px;width: 100%;}
	.navigation li button {width: 100%; text-align: left;}
	
	
}

header .menu-bar {
    display: block;
    max-width: 300px;
    width: 100%;
    /*background: #f4f4f3;*/
    position: absolute;
    top: 10px;
    right: 0;
    padding: 10px;
    z-index: 20; }
    @media screen and (min-width: 1024px) {
      header .menu-bar {
        background: transparent;
        max-width: unset;
        width: auto;
        position: relative;
        top: auto;
        float: right;
        display: block;
        padding: 15px 0;
        z-index: 20; } }