:root{
/*  --nav-hintergrund-color: rgb(94, 180, 241);
  --nav-shadow-color: rgb(12, 7, 64);
  --nav-oveerflow-color: rgb(170, 165, 221); */
  --text-algemein-color: rgb(14, 1, 1);
  --ueberschrift-hintergrund-color: rgb(30, 16, 173);
  --footer-hintergrund-color: rgb(30, 16, 173);
  --etwas-color: rgb(169, 8, 54);
  --article-hintergrund-color: rgb(93, 84, 197);
  --repertoireliste-links-rechts-color: rgb(143, 170, 210);
  --divcointaner-innen-color: rgb(142, 177, 230);
  --title-divcontainer-text-color: rgb(158, 177, 207);
  --bannerpack-hintergrund-color: rgb(70, 183, 224);

  a {
    color: rgb(54, 154, 221);
  }
  
}

body{
  /*height: 100%;*/
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  /*padding: 0px;*/
  background-image: linear-gradient(rgba(238, 214, 173, 0.514), rgb(105, 188, 224)), url(images/hintergrundbild.jpg);

  /*background-image: url(images/hintergrundbild.jpg);*/
  /*backdrop-filter: blur(5px);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Open Sans', sans-serif;
  padding: 8em 1em 1em 1em;
  
}

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  }

hr {
    color: #ffffff;
}

.header-container{
  /* ein CSS Kommentar */
  background-color: var(--ueberschrift-hintergrund-color);
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}

.willkommen{
  /*background-color: var(--divcointaner-innen-color);*/
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}

.willkommen-text{
  color: var(--text-algemein-color);
  padding: 20px;
  width: 500px;
  max-width: 90%;
  /*height: 200px;*/
  background-color: var(--divcointaner-innen-color);
  background-size: contain;
  margin: 20px;
  float: left;
}

.willkommen-fotostephan{
  width: 240px;
  height: 360px;
  background-size: cover;
  margin: 20px;
  float: right;
  background: url(images/stephan.jpg);
  background-size: contain;
}

.boxlogo{
  width: 230px;
  height: 100px;
  background-color: rgb(255, 255, 255);
  background-size: contain;
  margin: 20px;
  float: left;
}

.boxrechts{
  width: 500px;
  color: var(--text-algemein-color);
  height: 80px;
  background-color: var(--divcointaner-innen-color);
  padding: 10px;
  
  margin: 20px;
  border: 10px;    
  float: right;

}

.clear{
  margin: 10px;
  clear: both;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text-algemein-color);
  text-align: left;
}


.accordion {
  max-width: 800px;
  text-align: left;
}

article {
  border: 0px solid #e2a636;
  padding: 5px;
  margin: 1em auto;
  border-radius: 10px;
  background-color: var(--article-hintergrund-color);
}

input[type="radio"] {
  appearance: none;
  position: fixed;
  top: -100vh; left: -100vh;

  & ~ div {
    max-height: 0;
    overflow: auto;
    transition: max-height 0.5s;
  }

  &:checked ~ div {
    max-height: 200px;
  }
}

.titel{  
  background-color: var(--title-divcontainer-text-color);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;  
  text-align: center;
  margin-bottom: 0px;
}

.ueberschrift-container{
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.ueberschrift {
  background-color: var(--ueberschrift-hintergrund-color);
  padding: 10px;
  margin: 0px;
  border: 0px;
  border-radius: 5px;
  text-align: center;
}
.ueberschrift2 {
  background-color: var(--ueberschrift-hintergrund-color);
  padding: 10px;
  margin: 0px;
  border: 0px;
  border-radius: 10px;
  
}

.repertoireliste-links{
  p {margin: 0px 0px 0px 0px;}
  width: 250px;
  max-width: 90%;
  background-color: var(--repertoireliste-links-rechts-color);
  background-size: contain;
  margin-top: 20px;
  padding: 5px;
  border-radius: 10px;
  float: left;
}
.repertoireliste-rechts{
  p {margin: 0px 0px 0px 0px;}
  width: 350px;
  max-width: 90%;
  background-color: var(--repertoireliste-links-rechts-color);
  background-size: contain;
  margin: 10px;
  padding: 5px;
  border-radius: 10px;
  /*border: medium solid rgb(210, 35, 35);*/
  float: right;
}

.totop {
  width:40px;
  height:35px;
  background: url(images/Pfeil.jpg) no-repeat;
  position:fixed;
  bottom:20px;
  right:15px;
  display:block;
  background-size: contain;
  border-radius: 10px;
  z-index: 30;
}
/* Pfeil "Back to Top" */

.totop:hover {  
  text-decoration:none;
}

.presse{
  background-color: rgb(235, 204, 120);
  text-align: left;
}

.bannerpack{
  background-color: var(--bannerpack-hintergrund-color);
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0vw 1vw 0vw 1vw;
  border: 0px;
  
  float: none;
  position: fixed;
  bottom: 0px;
  z-index: 51; /* Index für Eben nach Vorne*/
}

.hintergrunddiv1{
  width: 800px;
  max-width: 100%;
  margin: 0 auto;

  background-color: var(--ueberschrift-hintergrund-color);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.footercontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 20px 0px 20px 0px;
  background-color: var(--footer-hintergrund-color);    
    
    a:link {
    color: rgb(175, 17, 41);
    text-decoration: none;
    }

    list-style: none;
    
    a:hover {
    color: rgb(251, 253, 252);
    text-decoration: underline;    
    }
    a { outline:none; }
}

.abstand01{
  padding: 0px 10px 0px 10px;
  /*padding-left: 10px;
  padding-right: 10px;*/
}