#banner2 {
  background-image: url("images/plakat_foto.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: rgb(199, 83, 58);
  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;
  }
  #trailer-mobile {
    display: none;
  }
}
/** Kleinere Monitore **/
@media only screen and (max-width: 600px) {
  #banner1 {
    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;
  }
  video {
    width: 640px !important;
    height: 480px !important;
  }
}
.bg-dark {
  background-color: rgb(199, 83, 58) !important;
  color: #fff !important;
}
.video {
  width: 100% !important;
}
#titelfotos {
  height: 300px;
  position: center;
}
.episodentitel {
  color: rgb(215, 147, 135);
}
.navbar-brand:focus, .navbar-brand:hover, .navbar-brand {
  color: #fff;
}
.bi-instagram, .bi-instagram:hover {
  color: #fff;
}
.accordion-button:not(.collapsed) {
  color: rgb(215, 147, 135) !important;
  background-color: rgba(215, 147, 135, 0.2) !important;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button, h2 {
  background-color: #fff;
  color: rgb(199, 83, 58) !important;
}
h2 {
  margin-top: 20px;
}
.accordion-button:visited, .accordion-button:focus, .accordion-button:active, .accordion-button:hover {
  z-index: 3;
  border-color: rgb(199, 83, 58) !important;
  /* outline: 0; */
  box-shadow: 1px 1px rgb(199, 83, 58) !important;
}
/**.container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "Episode-2 Episode-1 Episode-1 Episode-1"
      "Episode-2 About About Episode-3"
      "Episode-2 About About Episode-3"
      "Episode-5 Episode-5 Episode-4 Episode-4";
  }
  
  .About { grid-area: About;
            background-image: url(images/portfolio-1.jpg);
            height: 400px;}
  
  .Episode-2 { grid-area: Episode-2; 
                background-image: url(images/portfolio-1.jpg);
                height: 250px;
                background-size: cover;}
  
  .Episode-1 { grid-area: Episode-1; 
    background-image: url(images/portfolio-1.jpg);
    height: 250px;
    background-size: cover;}
  
  .Episode-3 { grid-area: Episode-3;
    background-image: url(images/portfolio-2.jpg);
    height: 250px;
    background-size: cover;}
  
  .Episode-4 { grid-area: Episode-4;
    background-image: url(images/portfolio-3.jpg);
    height: 250px;
    background-size: cover;}
  
  .Episode-5 { grid-area: Episode-5;
    background-image: url(images/portfolio-4.jpg);
    height: 250px;
    background-size: cover;}

***/