* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  *::-webkit-scrollbar {
    display: none;
}

.schwarz{
  background-color: black;
}

.transparent{
  filter: brightness(50%)
}

.top{
  margin-top: -40px;
}

.footercontainer{
  background-color: white;
  padding: 5px;
}

#banner2{
    background-image: url("images/avenue2.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;
}

  


.icon {
    color: rgb(0, 0, 0);
}

.icon:hover, .icon:visited {
    color: rgb(122, 122, 122);
    transition: 0.5s;
}

.grid-container {
    display: grid;
    gap: 5px;
    background-color: black;
    padding: 5px;
  }
  
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px;
    font-size: 30px;
    display: flex;
    justify-content: center;
  }
  

  .item1 {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  
  .item2 {
    grid-column: 3;
    grid-row: 1 / span 2;
    background-image: url(images/beats.jpg);
    background-size: cover;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
   }
  
  .item3{
    grid-column: 1;
    grid-row: 2 / span 2; 
  }

  .item5 {
    grid-column: 2 / span 2;
    grid-row: 3;
  }

  .btn-link{
    font-weight: 500;
    color:rgb(122, 122, 122);
    text-decoration: none;
  }

  .btn-link:hover{
    font-weight: 600;
    color:black;
    text-decoration: none;
    transform: scale(1.05);
    transition: 0.5s;
  }
  
  .custom{
    background-position: 40%;
    transition: 0.5s ease-in-out;
    border-radius: 20px;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    filter:brightness(90%);
    background-image: url(images/beatsdark.jpg);
    display: flex;
    background-size: cover;
  }

  .custom:hover{
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
    filter: brightness(80%);
    background-image: url(images/beats.jpg);
    display: flex;
    background-size: cover;
  }

  .col wh text-black{
    font-weight: 600;
  }

  .card-text{
    text-align: center;
  }
  /** Größere Monitore **/
@media only screen and (min-width: 599px) {
    #banner2 { display:none;
        }
  .headline {
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 5rem;
    color:rgb(179, 179, 179);
    text-align: center;
    line-height: 100%;
    transition: 0.5s ease-in-out;
    margin-top: 30px;
  }

  .subheading{
    font-family:'Courier New', Courier, monospace;
    text-align: center;
    color:rgb(214, 214, 214);
    font-weight: lighter;
    line-height: 110%;
    letter-spacing: 10px;
    font-size: 2rem;
    transition: 0.5s ease-in-out;
    margin-bottom: 30px;
  }

  .headline:hover{
    transform: scale(1.01);
    color: #fff;
    text-shadow: 0 0 1px #aaaaaa,
                0 0 1px #aaaaaa,
                0 0 1px #aaaaaa,
                0 0 1px #aaaaaa;
  }

  .subheading:hover{
    transform: scale(1.01); 
	}

.episodentitel {
  padding: 20px;
  font-family:'Courier New', Courier, monospace;
  color:rgb(214, 214, 214);
  font-weight:bold;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 2rem;
}
}



/** Kleinere Monitore **/
@media only screen and (max-width: 48rem) {
   #banner1, #einleitung { display:none;
        }

	  .headline {
    font-size:3rem;
    color: white;
	margin-top: 30px;
}
	.subheading{
	font-family:'Courier New', Courier, monospace;
    text-align: center;
    color:rgb(214, 214, 214);
    font-weight: lighter;
    line-height: 110%;
    letter-spacing: 10px;
    margin-bottom: 30px;
    font-size: 1.2rem;
    line-height: 110%;
    letter-spacing: 1px;
	color: white;
	}
	
	.card-body{
	align-items: center;
	}
	.audiogroesse{
	width: 95%;
}
	.episodentitel {
  padding: 20px;
  font-family:'Courier New', Courier, monospace;
  color:rgb(214, 214, 214);
  font-weight:bold;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 1.5rem;
}
	
}
        

.bi-chevron-compact-down {
  align-items: center;
  width: 150px;
  height: 150px;
  display: block;
  margin: auto;
  margin-bottom: 2%;
  transition: 0.5s;
}

.bi-chevron-compact-down:hover{
  transform: scale(1.05);
}

.episodennummer {
  font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 100%;
    color:rgb(255, 255, 255);
    text-align: center;
}

.qrcode {
  align-items:center;
  height: 300;
  width: 300px;
  display: block;
  margin: auto;
}

.divider{
  columns: white;
  border-top: 3px solid;
}

p i .bi .bi-chevron-down, .pfeil {
	color: white;
	text-align: center;
}

audio{
	text-align: center;
}