* {
   color: white;
   font-size: 16px;
   font-family: Ubuntu;
   text-decoration: none;
}

body {
   background: url("../bilder/navibildhired.png") top center;
   background-size: 100%;
   background-color: black;
}

.navioben {
   width: 100%;
   /*margin-top: 0px;*/
   text-align: center;
}

/*.navioben a:hover {
   color: red;
}*/

ul {
  list-style-type: none;
  width: 300px;
  margin: auto;
  padding: 0;
  overflow: hidden;
}

@media screen and (min-width: 1000px) {
ul {
  list-style-type: none;
  width: 900px;
  margin: auto;
  padding: 0;
  overflow: hidden;
}
}

li {
  float: left;
}

li a {
  display: block;
  border-radius: 10px;
  color: white;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  background-color: darkblue;
  margin: 1px;
}

li a:hover {
  background-color: black;
  color: red;
}


main {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   grid-gap: 1rem;
}

@media screen and (min-width: 1800px) {
main {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   grid-row-gap: 1rem; /*Höhe*/
   grid-column-gap: 1rem; /*Breite*/
}
}

.nachoben {
   width: 100%;
   text-align: center;
}

.nachoben a:hover {
   color: red;
}

.cardlogo img {
   width: 100%;
   /*border-style: solid;
   border-width: 1px;
   border-color: white;	*/	  
}

.card img {
  width: 100%;
  /*border-style: solid;
   border-width: 1px;
   border-color: white;*/ 
}

.cardtexttermine {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardbodytermine {
   width: 100%;
   height: 230px;
   overflow-y: scroll;
   scrollbar-color: yellow black;
   overflow-x: hidden;
}

.cardtextsongs {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardbodysongs {
   width: 100%;
   height: 230px;
   overflow-y: scroll;
   scrollbar-color: yellow black;
   overflow-x: hidden;
   /*border-style: solid;
   border-width: 1px;
   border-color: green;*/
}



.cardbandbodybilderitem {
  display: inline-block;
    box-sizing: border-box;
  width: 250px;
  /*margin-left: 30px;
  margin-right: 30px;*/
  vertical-align: top;
  /*background-color: yellow;
  border-radius: 10px;*/
}

.cardbandbilder {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardbandbodybilder {
  width: 100%;
  height: 230px;
  overflow-x: scroll;
  scrollbar-color: yellow black;
  overflow-y: scroll;
  white-space: nowrap;
}

.cardbandbodybilderitem {
  display: inline-block;
  box-sizing: border-box;
  width: 250px;
  /*margin-left: 30px;
  margin-right: 30px;*/
  vertical-align: top;
  /*background-color: yellow;
  border-radius: 10px;*/
}

.cardbandbodybilderitem  img {
  width: 140px;
  display: block;
}

.cardbandbodybildertext {
   text-align: center;
  width: 230px;
  padding-left: 5px;
  padding-right: 5px;
 word-wrap: break-word;
  /*border-style: solid;
    border-width: 1px;
   border-color: black;
   border-radius: 25px;*/
  color:white;
}

.cardimpressbilder {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardimpressbodybilder {
  width: 100%;
  height: 230px;
  overflow-x: scroll;
  scrollbar-color: yellow black;
  overflow-y: scroll;
  white-space: nowrap;
}

.cardimpressbodybilderitemquer {
  display: inline-block;
  box-sizing: border-box;
  /*width: 300px;*/
  width: 48%;
  /*margin-left: 30px;
  margin-right: 30px;*/
  vertical-align: top;
  /*background-color: yellow;
  border-radius: 10px;*/
}

.cardimpressbodybilderitemquer img {
  /*width: 190px;*/
  width: 98%;
  display: block;
}

.cardimpressbodybilderitemhoch {
  display: inline-block;
  box-sizing: border-box;
  width: 200px;
  width: 32%;
  /*margin-left: 30px;
  margin-right: 30px;*/
  vertical-align: top;
  /*background-color: yellow;
  border-radius: 10px;*/
}

.cardimpressbodybilderitemhoch img {
  /*width: 190px;*/
  width: 97%;
  display: block;
}

/*.cardimpressbodybildertext {
  text-align: center;
  width: 140px;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  /*border-style: solid;
    border-width: 1px;
   border-color: black;
   border-radius: 25px;
  color:white;
}*/

.cardvideodemos {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardvideobodydemos {
   width: 100%;
   height: 230px;
   overflow-y: scroll;
   scrollbar-color: yellow black;
   overflow-x: hidden;
}

.cardheader {
   width: 100%;
}

.cardtextimpressum {
   width: 100%;
   height: 360px;
   border-style: solid;
   border-width: 1px;
   border-color: white;
   border-radius: 25px;
}

.cardbodyimpressum {
   width: 99%;
   height: 230px;
   padding-left: 5px;
   
   overflow-y: scroll;
   scrollbar-color: yellow black;
   overflow-x: hidden;
}

.cardfooter {
   width: 100%;
   height: 40px;
}

.cardfooter a:hover {
   color: red;
}

h1 {
    font-size: 30px;
}

.footer {
   width: 100%;
   height: 190px;
   border-style: solid;
   border-width: 1px;
   border-color: white;	
   border-radius: 25px;	 
}

.footer a:hover {
   color: red;
}

.counter {
   width: 100%;
   height: 30px;
   opacity: 0;
   transition: opacity 0.3s ease;
   /*border-style: solid;
   border-width: 1px;
   border-color: white;	
   border-radius: 25px;	 */
}

.counter:hover {
   opacity: 1;
}