/* CSS Dokument */
@charset "UTF-8";
:root
      {
      
        --background-color: #314453;
        --darker-background-color: #243848; 
        --accent-color: #1965ac;
        --text-color:   #FFFFFF;
        --navbar-height: 80px;
      }

	* 
      {
        margin: 0;
        padding: 0;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: var(--text-color); 
        
      }


	nav
      { 
        position: fixed; /* Fixes the nvbar */
        width: 80%; /* Hier 180825Ensures the navbar takes the full width */
        top: 0; /* Aligns the navbar to the top */ 
        height: var(--navbar-height);
		    background: var(--background-color);
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
        font-size: 22px;
        z-index: 1000; /* Ensures the navbar stays on top of other content */
        border-radius: 5px;
    
	  }

	
  .logo img
     {
      margin-left: 30px;
      height: 60px;
      width: auto;
      display: block;
     }    
  
.responsive-logo {
    display: block;       /* Damit margin: auto greift */
    width: 80%;           /* 80% der verfügbaren Breite */
    max-width: 60%;       /* Begrenzung auf max. 80% */
    height: auto;         /* Proportionale Skalierung */
    margin: 0 auto;       /* Zentriert das Bild */
}
	nav ul
      {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        list-style: none;
        
	  }
	nav li  
      {
        height: 100%;
        width: 150px;
        text-align: center;
		    position: relative;
	  }

	nav li:hover
      {
        background: var(--accent-color);
      }

	nav ul a 
      { 
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
      }

/* Dropdown Menu starts here */

	.dropdown  
      {
        height: min-content;
        width: 150px;
        background: var(--background-color);
        display: none;
        flex-direction: column;
        position: absolute;
        left: 0; 
        top: var(--navbar-height);
        
       
      }
	.dropdown li 
      {
        height: 70px;
        width: 100%;
        
        
      }

    .dropdown li a 
      {
        justify-content: flex-start;
        padding-left: 30px;
        width: calc(100% - 30px); 
        font-size: 16px; /* font size for Submenu */
         
    
      }
	
	nav li:hover .dropdown 
      {
        display: flex;
      }

    nav input[type="checkbox"]
      {
        display: none;
      }
	
    .expandable_li
      {
        display: flex;
        justify-content: center;
        align-items: center;

      }

	.toggle_button 
      {
        width: 30px;
        height: 23px;
        position: absolute;
        top: 25px;
        right: 25px;
        display: none;
        flex-direction: column;
        justify-content: space-between;
      }

/* Dropdown Menu ends here */ 

/* Three-bars starts here */ 
    .bar 
        {
         height: 4px;
         width: 100%;
         background: #cfcf11;
         border-radius: 100px;
        }
/* Three-bars ends here */ 
 
/* Social-Media icon */
.style-social {
   float: right;
   margin-left: 0px;
   margin-right: 15px;
   margin-top: -5px;
   margin-bottom: 10px;
   display: block;
   width: 32px;
}
/* End Social-Media icon */


/* Footer */
 
 .footer {
  width: 100%;
  background-color: #243848;
  padding: 20px 0;
  border-radius: 5px;
  
}

.footer-content {
  width: 90%;
  margin: 0 auto;          /* zentriert */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;         /* für kleine Bildschirme */
}

.footer-content span {
  font-size: 14px;
  color: white;
}
/* End Footer */

/* foto gallery */

  div.gallery 
    {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-left: 20px;
    }

  div.gallery-item 
    {
      margin: 5px;
      border: none;
      width: 180px;
      background: transparent;
    }

  div.gallery-item:hover 
    {
      border: 1px solid #777;
    }

  div.gallery-item img 
    {
      display: block;
      width: 100%;
      height: auto;
    }

  div.gallery-item div.desc 
    {
      padding: 15px;
      text-align: center;
    }
  /* end foto gallery */


/* Hier 180825 */
.wrapper
  {
    width: 80%;
    margin: 0 auto;
  } 
/* End 180825 */

/* Here starts View on Tablet and Mobile Devices */

	@media(max-width: 850px)
    {
      .toggle_button        
        {
           display: flex;
        }
            
      .wrapper 
        {
          width: 90%;
        }

      nav 
        {
          width: 90%;
        }
        
      nav ul 
        {
          height: min-content;
          width: 100%;
          background: var(--background-color);
          position: absolute;
          top: var(--navbar-height);
          display: none;
			  }

		  nav li
			  {
			    height: min-content;
          width: 100%;
			  }

		  nav ul a
			  {
			    padding: 30px 0;
			  }

	    .expandable_li 
        { 
          display: block;
			  }

		  .expandable_li label
        { 
          padding: 30px 0;
          cursor: pointer;
          display: block;
			  }

		  .expandable_li:hover .dropdown	
			  {
			    display: none;
			  }
	
		  .expandable_li input[type="checkbox"]:checked ~ .dropdown
        {
          display: block;
        }

      .dropdown 
        {
          position: static;
          width: 100%;
        }

		  .dropdown li 
        {
          padding: 0;
          display: block;
          position: static;
          background: var(--darker-background-color);
             
			  }

		  .dropdown li a 
        {
          width: 100%;
          padding: 0;
          justify-content: center;
        }

      #toggle_button:checked ~ ul 
        {
          display: block;
        }

      .footer 
        {
          width: 100%;
        }
      .footer-content 
        {
          flex-direction: column;
          gap: 10px;
          text-align: center;
        }
 
  }