.bg-dark{
    background-color: rgba(106, 147, 151, 0.472) !important;
}

.navbar-brand{
    text-shadow: 1px 1px #000;
}

#banner2{
    background-image: url("images/surf.jpg") !important;
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 700px; /* 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;
}
  /** 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: 3px;
    margin: -15px;
    color: #fff;
    position:absolute;
    bottom:0;
    } 
}

a .bi, .bi a:visited, .bi a:hover {
    color:white;
}

/*Beginn für Gridlayout*/

.grid-container {
    display: grid;
    gap: 2px;
    background-color: #060606;
    padding: 5px;
}
  
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px;
    font-size: 30px;
  }
  
  .item1 {
    grid-column: 1; 
    grid-row: 1;
  }
  
  .item2 {
    grid-column: 2;
    grid-row: 1;
  }
  
  .item3 {
    grid-column: 1;
    grid-row: 2;
  
  }

/*Ende Gridlayout*/


.video{
    width: 100%!important;
}

.btn-link{
    text-decoration: none;
    font-weight: 500;
    color:rgba(0, 0, 0, 0.5)
}