@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
}

    *{
        box-sizing: border-box;
		font-family: Poppins;
    }
    
span{
 padding-right: 15px;   
}

html{
	height: 100%;
  /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
}
body {
	padding: 0;
	margin: 0;
	min-height: 100%;
}

.grid-container{
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-areas: 
	
	"widget-area main-area blue-area"
	
	"footer-area footer-area footer-area";
	
	grid-template-rows: auto auto  ;
	row-gap: 0;
	min-height: 100vh;

}

.above-nav{
	grid-area: above-nav;
	background-color: #0071ab;
	width: 100%;
	height: 180px;
	position: fixed;
	z-index: 20;
	display: none;
	background-image:url(../images/hg_blau_above-nav.jpg);
	background-size: cover;
	background-repeat: no-repeat;
   
}

.nav-area{
	grid-area: nav-area;
	
	z-index: 25;
	
}

.main-area{
	grid-area: main-area;
	
	min-height: 100vh;
	position: relative;
	background-color: rgb(213, 215, 215);
    background-image:url(../images/hg_startseite_haus.jpg);
	background-size: cover;
    background-attachment: fixed;
	border-left: solid 1px white;
	border-right: solid 1px white;
}


.photo{
	display: grid;
	max-width: 100%;

}

.photo img{
	grid-column: 1;
	grid-row: 1;
	max-width: 100%;
	display: block;
}

.overlay-text{
	align-self: end;
	grid-column: 1;
	grid-row: 1;
	background-color: rgba(226, 224, 224, 0.486);
	padding: 5px;
	
	text-align: center;
}

.overlay-text h5{
	margin: 5px;
	font-weight: 300;
	font-size: 1.2rem;
}

.main-area-inner{
min-height: 50vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 90px;
}



.blue-area{
	grid-area: blue-area;
	
	position: relative;
	background-color:#0071ab;
	background-image:url(../images/hg_blau.jpg);
	background-size: cover;
    background-attachment: fixed;

}

.widget-area{
	grid-area: widget-area;
	display: grid;
	
	position: relative;
	background-color: #0071ab;
	background-image:url(../images/hg_blau.jpg);
	background-size: cover;
    background-attachment: fixed;
	justify-items: center;
}

.widget-area #img-1{
	position: fixed;
	width: 200px;
	margin-top: 29px;
}

.widget-area #img-2{
	width: 220px;
	position: fixed;
	margin-top: 300px;
}

.widget-area #img-3{
	width: 220px;
	position: fixed;
	margin-top: 700px;
}

.widget-area a{
	width: 210px;
	position: fixed;
	margin-top: 80px;
}


  .mitte-montage-img img{
    width: 430px
   
  }
  
  .mitte-montage-text{
   padding: 50px 5px 20px 5px;
  }
  
  .mitte-montage-text h2, h3 {
    color: #02659a;
    margin-bottom: 0;
    margin-top: 0;
  }

  .mitte-montage-text p {
    color: #02659a;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 15px;
  }
  
  .mitte-montage-text h4, h5 {
    color: #022a3d;
    margin-bottom: 0;
    margin-top: 0;
  }

.footer-area{
	grid-area: footer-area;
	
	background-color: #0071ab;
	
}

nav {
	position: fixed;
	z-index: 10;
	left: 0;
	right: 0;
	top: 120px;
	height: 60px;
	
}

nav .links {
	float: right;
	padding: 0;
	margin: 0;
	background-color: white;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
nav .links li {
	list-style: none;
}
nav .links a {
	display: block;
	padding: 5px 0.5em 5px 0.8em;
	font-size: 17px;
	font-weight: 400;
	color: #525252;
	text-decoration: none;
}


#nav-toggle {
	position: absolute;
	top: -100px;
	display: none;
}
nav .icon-burger {
	display: none;
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
}
nav .icon-burger .line {
	width: 30px;
	height: 5px;
	background-color: #616060;
	margin: 5px;
	border-radius: 3px;
	transition: all .3s ease-in-out;
}



.footer{
  display: flex;
  background-color: rgb(255, 255, 255);
  top: 0;
  bottom: 0;
  position: sticky;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  
}

.footer p{
  padding: 10px;
  margin: 0;
  
}

.footer a{
  text-decoration: none;
  color: #6c6c6d;
  font-size: 18px;
  padding: 10px;
}

.nav-area .links .dropdown-parent {
    position: relative;
}

.nav-area .links .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #232222bc; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0px;
	width: max-content;
}
.dropdown li a{
	color: #fff;
}

.nav-area .links .dropdown li {
    padding: 5px;
	
}

.nav-area .links .dropdown-parent:hover .dropdown {
    display: block;
}

@media screen and (max-width: 1280px){
	.widget-area #img-1{
		position: fixed;
		width: 140px;
		
	}
	
	.widget-area #img-2{
		
		position: fixed;
		margin-top: 140px;
		
		width: 170px;
	}

	
	.widget-area #img-3{
		position: fixed;
		margin-top: 500px;
		margin-bottom: 10px;	
		width: 140px;
		
	}
	
}

@media screen and (max-width: 1024px) {

	.grid-container{
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas: 
	"above-nav"
	
	"main-area"
	"widget-area"
	"footer-area";

	grid-template-rows: 120px  auto auto auto   ;
	
	}
.nav-area{
	display: block;
}
	.main-area{
		top: 0;
		min-height: 60vh;
	}

	.overlay-text h5{
		margin: 4px;
		font-weight: 200;
		font-size: 1.1rem;
	}

	.widget-area{
	top: 0;
	display: flex;
	justify-content: space-evenly;
	position: static;
	}

	.widget-area #img-1{
		display: none;
		width: 120px;
		
	}
	
	.widget-area #img-2{
		
		position: static;
		margin-top: 100px;
		margin-bottom: 10px;
	}

	
	.widget-area #img-3{
		position: static;
		margin-top: 100px;
		margin-bottom: 10px;	
		
	}

	

.mitte-montage-img img{
width: 400px;
}

.widget-area a{
	width: 210px;
	position: static;
	margin-top: 0px;
}


.footer-area{
	background-color: rgb(255, 255, 255);
}	

	.blue-area{
		display: none;
	}

	.above-nav{
		display: block;
	}

	.above-nav img{
	margin: 17px 0 25px 40px;
	}
	
	span{
	display: none;
}
	nav .links {
		float: none;
		position: fixed;
		z-index: 9;
		left: 0;
		right: 0;
		top: 180px;
		bottom: 100%;
		width: auto;
		height: auto;
		flex-direction: column;
		justify-content: space-evenly;
		background-color: rgba(0,0,0,.8);
		overflow: hidden;
		box-sizing: border-box;
		transition: all .5s ease-in-out;
	}
	nav .links a {
		font-size: 20px;
		color: white;
	}
	nav :checked ~ .links {
		bottom: 0;
	}
	nav .icon-burger {
		display: block;
	}
	nav :checked ~ .icon-burger .line:nth-child(1) {
		transform: translateY(10px) rotate(225deg);
	}
	nav :checked ~ .icon-burger .line:nth-child(3) {
		transform: translateY(-10px) rotate(-225deg);
	}
	nav :checked ~ .icon-burger .line:nth-child(2) {
		opacity: 0;
	}

	.nav-area .links .dropdown {
		display: inline-block;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-30%);
		background-color: rgba(74, 71, 71, 0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 10px;
		color: #fff;
		max-height: 230px;
		overflow-y: auto;
		width: max-content;
		text-align: center;
	}

	nav.links a{
	padding: 0px ;	
	}
	

	.nav-area .links .dropdown li {
		padding: 5px;
		font-size: 10px;
	}

	

	.footer a{
  text-decoration: none;
  color: #6c6c6d;
  font-size: 1rem;
  padding: 10px;
}


}

@media screen and (max-width: 780px){

	.main-area{
		top: 60px;
		min-height: 50vh;
	}
.main-area-inner{
	min-height: 50vh;
	padding-top: 50px;
}
.overlay-text h5{
	margin: 5px;
	font-weight: 400;
	font-size: 1rem;
}

	.widget-area{
	top: 0;
	display: flex;
	justify-content: center;
	}

	.widget-area #img-2{
		width: 120px;
		position: static;
	}

	.widget-area #img-3{
		position: static;
		margin-top: 100px;
		margin-bottom: 10px;	
		width: 120px;
	}

	.widget-area-inner{
	min-height: 50vh;
}
	.mitte-montage-img{

        padding: 30px 10px 20px 20px;
        display: flex;
        align-items: flex-start;
      }
      .mitte-montage-img img{
        width: 370px
       
      }
      
      .mitte-montage-text{
       padding: 25px 5px 20px 5px;
      }
      
      .mitte-montage-text h2, h3 {
        color: #02659a;
        margin-bottom: 0;
        margin-top: 0;
      }
    
      .mitte-montage-text p {
        color: #02659a;
        margin-bottom: 0;
        margin-top: 0;
      }
      
      .mitte-montage-text h4 {
        color: #022a3d;
        margin-bottom: 0;
        margin-top: 0;
      }

	 nav .links a {
    display: block;
    padding: 0px;
   
}
}

@media screen and (max-width: 560px){

	.main-area-inner{
		flex-direction: column;
		align-items: center;
		top: -60px;
		position: relative;
	}

	.overlay-text h5{
		margin: 5px;
		font-weight: 400;
		font-size: 0.7rem;
	}
  
	.mitte-montage-img img{
        width: 300px
       
      }

	  .footer{
		display: flex;
		background-color: rgb(255, 255, 255);
		top: 0;
		bottom: 0;
		position: sticky;
		text-align: center;
		justify-content: center;
		flex-wrap: wrap; 

		
	  }
}

@media screen and (max-width: 360px){
	
	.overlay-text h5{
		margin: 3px;
		font-weight: 600;
		font-size: 0.6rem;
	}
.mitte-montage-img{
        padding: 30px 10px 0px 10px;
        display: flex;
        align-items: center;
      }
      .mitte-montage-img img{
        width: 220px
       
      }
      
      .mitte-montage-text{
       padding: 25px 5px 20px 5px;
      }
      
      .mitte-montage-text h2, h3 {
        color: #02659a;
        margin-bottom: 0;
        margin-top: 0;
		font-size: 1.2rem;
      }
    
      .mitte-montage-text p {
        color: #02659a;
        margin-bottom: 0;
        margin-top: 0;
      }
      
      .mitte-montage-text h4 {
        color: #022a3d;
        margin-bottom: 0;
        margin-top: 0;

		  font-size: 0.9rem;
      }

      .footer a{
        font-size: 13px;
      }
}