#banner2 {
  background-image: url("images/Banner1_mobil.jpg") !important;
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* 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;
}
/* Style the links inside the navigation bar */
.navbar-nav a {
  float: left;
  display: block;
  color: rgb(163, 124, 193);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: transform .2s; /* Animation */
  font-family: cursive;
}
.navbar-nav a:hover {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
/* Hide the link that should open and close the topnav on small screens */
.navbar-nav .icon {
  display: none;
}
#Trailer {
  margin: auto;
  width: 100%;
}
.audio {
  margin: auto;
}
#row {
  text-align: center;
  background-color: rgb(163, 124, 193);
  font-family: cursive;
  padding-top: 10px;
  padding-bottom: 60px;
  margin-bottom: 20px;
}
#row2 {
  text-align: center;
  background-color: rgb(163, 124, 193);
  font-family: cursive;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
#navb {
  background-color: rgb(0, 0, 0);
  overflow: hidden;
}
#headline {
  color: rgb(163, 124, 193);
  text-align: center;
  background-color: rgb(0, 0, 0);
  font-family: cursive;
}
#background {
  background-color: rgb(0, 0, 0);
}
#listen {
  text-align: center;
  font-family: cursive;
  color: rgb(163, 124, 193);
  font-size: 50px
}
#rec {
  text-align: center;
  font-family: cursive;
  color: rgb(163, 124, 193);
}
h2 {
  font-size: 40px;
  word-break: break-all;
  color: rgb(163, 124, 193);
  text-align: center;
  font-family: cursive;
}
#credit {
  color: rgb(163, 124, 193);
  font-family: cursive;
}
#copy {
  color: rgb(163, 124, 193);
}
.icon, icon a, icon a:hover, icon a:visited, icon a:focus {
  color: rgb(163, 124, 193);
}
.bannertext {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px;
  position: absolute; /* Achtung "absolute" braucht immer ein relativ im Eltern-Element, position, text-align, top, botton gehören zusammen*/
  text-align: center;
  top: 70%;
  bottom: 0px;
  font-family: cursive;
}
/** Größere Monitore **/
@media only screen and (min-width: 48rem) {
  #banner2 {
    display: none;
  }
	
	#Trailer {
  padding:0 100px 0 100px;
  width: 100%;
}
}
/** 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;
  font-family: cursive;
}
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 400px) {
  .grid-container {
    grid-template-columns: auto;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: auto auto;
  }
  .item5 {
    grid-column: 1 / span 2;
  }
}