html {
height: 100%;
}

body {
height: 100%;
position: relative;
}

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}



/* hintergrundbild */

.bg-hello {
position: fixed;
top: 0%;
left: 55%;
min-width: 100%;
min-height: 70%;
width: auto;
height: auto;
width: 200%;
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(-50%) translateY(0%);
z-index: 0;
}

.masthead {
  position: relative;
  top:55%;
 height:45%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-container {
max-height: 45%;
width:340px;
padding-bottom:0em;
display: flex;
flex-direction: column;
}


#begriffe {
position:relative;
display:flex;
justify-content: center !important;
text-align:center;
width:100%;
height:100px;
top:-140px;
}

.line1, .line2, .line3, .line4, .line5  {
position:absolute;
text-align:center;
font-family: 'Open Sans',sans-serif;
font-size:2.8rem;
font-weight:500;
color:rgb(250, 250, 250);
}

svg { margin: auto; }
img.wiederfinden { max-width:90%; width:450px; height:450px; margin:0 auto; }





/* Smarphone in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 991px) and (orientation : landscape) {
.bg-hello {
min-height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
margin-left: 20%; 
width:80%;
}
.masthead {
top:0%; 
height: 100%;
width: 50vw;
min-height: 0;
padding-bottom: 0;
}

.flex-container {
position:relative;
top:3em;
width:75vH;
padding-bottom:0em;
padding-left:4em;
padding-top:6em;
margin: 0 auto;

z-index:200;
}

.masthead::before { 
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
background-color: rgba(104, 171, 190, 1.0);
}
  .masthead:before {
    transform: skewX(-9deg);
    transform-origin: top right;
  }  
   .masthead .masthead-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2rem;
    padding-right: 9rem;
  }
  .masthead .masthead-content h1, .masthead .masthead-content .h1 {
    font-size: 3.5rem;
  }
  .masthead .masthead-content p {
    font-size: 1.3rem;
  } 

img.wiederfinden { max-width:100%; width:300px; height:300px; margin:0 auto; }
.line1, .line2, .line3, .line4, .line5  { font-size:2.0rem; }
#begriffe { top:-84px; }
}




@media (min-width: 992px) {
.bg-hello {
min-height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
margin-left: 20%; 
width:80%;
}
.masthead {
top:0%; 
height: 100%;
width: 45vw;
min-height: 0;
padding-bottom: 0;
}

.flex-container {
position:relative;
width:340px;padding-bottom:8em;
margin: 0 auto;
  align-items: center;
  justify-content: center;
z-index:200;
}

.masthead::before { 
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../../media/freiraumpark_steps.png');
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  -o-background-size: contain;
  background-position: right bottom;
background-color: rgba(104, 171, 190, 1.0);
}
  .masthead:before {
    transform: skewX(-9deg);
    transform-origin: top right;
  }  
   .masthead .masthead-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2rem;
    padding-right: 9rem;
  }
  .masthead .masthead-content h1, .masthead .masthead-content .h1 {
    font-size: 3.5rem;
  }
  .masthead .masthead-content p {
    font-size: 1.3rem;
  } 

img.wiederfinden { max-width:100%; width:340px; height:340px; margin:0 auto; }
.line1, .line2, .line3, .line4, .line5  { font-size:2.8rem; }
#begriffe { top:-76px; }
}



/* ab hier Menu */

@media (min-width: 1200px) {
img.wiederfinden { max-width:100%; width:350px; height:350px; margin:0 auto; }
.bg-hello {margin-left: 20%; width:80%; }
.masthead { width: 45vw; }
.flex-container { width:350px;padding-bottom:6em; }
.line1, .line2, .line3, .line4, .line5  { font-size:3.0rem; }
#begriffe { top:-80px; }

}



@media (min-width: 1600px) {
img.wiederfinden { max-width:100%; width:450px; height:450px; margin:0 auto; }
.bg-hello {margin-left: 20%; width:80%; }
.masthead { width: 40vw; }
.flex-container { width:100%; }
.line1, .line2, .line3, .line4, .line5  { font-size:3.8rem; }
#begriffe { top:-100px; }

}