*{

  margin: 0;
  padding:0;

}
 html{ 

height: 100%;

 }

body{
height: 100%;
background-position: center;
}
nav { 
  height: 70 px ;
  width: 100%;
  background-color: black;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);

}
nav ul {
  float: right;
}
nav a { 
  display: inline-block;
  margin-top: 20px;
  margin-right: 30px;
  font-size: 19px;
  color: white;

}




#banner2{
    background-image: url("images/Ronachkopf.jpg") !important;
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 600px; /* You must set a specified height */
    background-position: center; /* - Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
     position: relative;
}

.bannertext{
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 16px;
        position: absolute;  
        text-align: center;          /* Achtung "absolute" braucht immer ein relativ im Eltern-Element */
        top: 70%;
        bottom: 0px;
}

.card{
 margin-left: 12cm ;
 margin-right: 12cm ;
  margin-top: 2cm;
}
.card-title{
  text-align: center;
  color: black;
}

    /** Größere Monitore **/
@media only screen and (min-width: 570px) {
    #banner2 { display:none;
        }
}

/** Kleinere Monitore **/
@media only screen and (max-width: 600px) {
   #banner1, #einleitung { display:none;
        }
        
/* Textausrichtung in der unteren Hälfte */

#banner2 .container span{
    background-color: rgba(0,0,0, 0.2);
    text-shadow: 1px 1px #000;
    padding: 5px;
    margin: -15px;
    color: #fff;
    position:absolute;
    bottom:0;
    } 
}

.icon, icon a, icon a:hover, icon a:visited, icon a:focus{
    color:rgb(248, 248, 248);
}



  a{
    text-decoration: none; 
  }
  .btn-link {
    font-weight: 400;
    color: white;
    text-decoration: none;
  
}
.footer-icon{
  color: #cccccc;
}