:root {
    /* see variables.scss for more variables*/

    --highlight: #deda86; /* muss in theme/hugo-scroll/assets/css/variables.css geändert werden */

    --section-light-text-color: #3a4145!important;
    --section-light-bg-color: #f2efe8!important;
    --section-dark-bg-color: var(--section-light-text-color)!important;
    
}


 /*Keep large images within the bounds of the post-width*/
.post-content img {
  display: block;
  /*width: 60%;*/
  /*margin: 0 auto;*/
  /*align: left;*/
  /*margin: 0 0;*/
}

/* cover */

/* original */

/* #blog-logo { */
/*   display: block; */
/*   max-height: 100px; */
/*   width: auto; */
/*   margin: 0 auto; */
/*   line-height: 0; */
/* } */

.main-menu {
  max-width: 60%;
  margin: auto;
}

/*nur für Programme*/
#programme.main-menu {
  max-width: 90%;
  /*margin: auto;*/
  /* background: rgba(1,0,0,0.2); */
  /*margin-top: 1rem;*/
  margin-top: clamp(0.2rem, 3vw, 1rem);
}


#programme.vertical {
  /*display: inline-block;*/
  /*align-self: flex-end;*/
  margin-top: clamp(0.2rem, 1vw, 2rem);
  /*background: rgba(1,0,0,0.2);*/
}

a.btn {
  box-shadow: var(--cover-title-text-shadow);
   /*font-size: 25px; */
  /*background: rgba(1,0,0,0.2);*/

  font-size: clamp(13px, 2.4vh ,16px);
  /* padding: 10px 20px 10px 20px; */
  /*padding: clamp(8px, 1.2vh, 10px) clamp(16px, 2.6vh, 20px);*/
  padding: clamp(2px, 1.0vh, 10px) clamp(5px, 2.2vh, 20px);
}


#blog-logo {
  display: block;
  padding-top: 41vh;
  padding-top: 41svh;
  padding-bottom: 0.5rem;
  /* max-height: 200px; */
  margin: auto;
  /* line-height: 0; */
  /* text-shadow: var(--cover-title-text-shadow); */
  /* background: black; */
}

@media only screen and (min-width: 1800px) {
  #blog-logo {
  padding-top: 42vh;
  padding-top: 42svh;
  }
}

/* menü schmaler bei nicht ganz großen bildschirmen */
@media only screen and (max-width: 1500px) {
  .main-menu {
    max-width: clamp(200px, 40vh, 60%);
     /*background: rgba(90,10,9,0.3); */
  }
  #programme.main-menu {
    /*background: rgba(90,10,9,0.3); */
    max-width: 100%;
    /*max-width: clamp(200px, 40vh, 60%);*/
  }
}

/* kleinere knöpfe bei kleinen bildschirmen */
/* logo etwas weiter runter */
@media only screen and (max-width: 700px) {
  #blog-logo {
   padding-top: 43vh;
   padding-top: 43svh;
  }
  a.btn {
    font-size: 14px;
    padding: 8px 16px 8px 16px;
  }
}

/* @media only screen and (min-aspect-ratio 9 / 169) { */
/* breiter als hoch */
@media only screen and (aspect-ratio > 480/319) {
  #blog-logo {
    max-height: 200px;
    max-width: clamp(200px, 33vw, 1000px);
    /* background: rgba(90,10,90,0.3); */
  }
}

/* höher als breit */
@media only screen and (aspect-ratio < 480/319) {
  #blog-logo {
    /* max-width: 90vw; */
    max-height: clamp(100px, 20svh, 200px);
    /* background: rgba(10,50,50,0.3); */
  }
}

@media only screen and (width > 500px) {
  #blog-logo {
    /* background: rgba(10,10,90,0.3); */
    max-width: 100%;
  }
}

@media only screen and (width <= 500px) {
  #blog-logo {
    /* background: rgba(10,70,90,0.3); */
    max-width: 90%;
  }
}

  /*warum stand das hier? jetzt eins weiter unten*/
/*#site-head.withCenteredImage{*/
  /* can't be used together with video */
  /* background-attachment: fixed; */
  
  /*background: var(--section-light-bg-color) no-repeat center center;*/
/*}*/

#site-head, #site-head.withCenteredImage {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  margin-bottom: 0rem;
  text-align: center;
  color: var(--cover-text-color);
  /*background-size: cover;*/
  background-size: cover;
  /*background: var(--section-light-bg-color) no-repeat center center;*/
  /*background: rgba(1,0,0,0.2);*/
}

/* alles in responsiveness */
/* .social { */
/* } */

/* .social-align-helper { */
/* } */

a.social-menu {
  font-size: 18px;
}

/* #Biographien.post-holder{ */
/*   background: var(--section-light-bg-color) repeat-y center top; */
/*   /1* width: auto; *1/ */
/*   /1* background-size: contain; *1/ */
/* } */

/* Formatierung vom Backgroundimage für termine.md */
#Termine.post-holder{
  width: 100%;
  background: var(--section-light-bg-color) repeat-y center top;
  /* background-attachment: fixed; */
  /* background-size: cover; */

}

/* #grad1 { */
/*   height: 200px; */
/*   background-image: repeating-linear-gradient(135deg,grey,black 25%,grey 50%, green 75%, blue 100%); */
/* } */

#Termine h2, h3  {
  padding-left: 20px;
}

/* Formatierung vom Backgroundimage für band.md */
#Band.post-holder{
  background: var(--section-light-bg-color) repeat-y center top;
  /* width: auto; */
  /* background-size: contain; */
}

/* Formatierung vom Backgroundimage für videos.md */
#videos.post-holder{
  background: var(--section-light-bg-color) no-repeat center bottom;
  /* width: auto; */
  background-size: contain;
}

p.video-bottom {
  margin-bottom: 90vw;
}

/* columns: */

.row {
  display: flex;
  /* color: var(--section-dark-text-color); */
  /* background-color: lightblue; */
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* für Press */
#Press.post-holder {
  background: var(--section-light-bg-color) no-repeat center top;
  background-attachment: scroll;
  background-size: cover;
}

/* kleinere Schrift: */
body {
  /* hide scrollbar */
 /* overflow: hidden; */
  /* height: 100%; */
  /* max-height: 100%; */
  /* font-family: "Roboto Slab", serif; */
  font-size: 1.8rem;
  /* line-height: 1.6em; */
  /* color: var(--section-light-text-color); */
}

 /* Hide scrollbar for Chrome, Safari and Opera */

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

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

summary:hover {
  color: var(--highlight);
}

details[open] {
  max-height: 10000px;
  /* background-color: rgba(0,0,0,0.2); */
  padding-bottom: 1em;
}

details summary {
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

/* mehr platz nach blockquote */
blockquote::after {

  content: '';
  display: block;
  /* background: red; */
  width: 0.6rem;
  height: 0.6rem;

}

/* Single Pages > custom_head.html */

/* .page-tech { */
/*   color: var(--section-dark-text-color); */
/*   background-color: var(--section-dark-bg-color); */
/* } */

/* .page-bios { */
/*   color: var(--section-dark-text-color); */
/*   background-color: #1c1815; */
/* } */

/* .page-cd { */
/*   color: var(--section-light-text-color); */
/*   background-color: var(--section-light-bg-color); */
/* } */