: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;
    
}

a.btnlink {
  font-family: "Oswald", sans-serif;
  text-decoration: none;
  /* background-color: var(--highlight); */
  background-color: white;
  color: var(--highlight-contrast);
  border-radius: 6px;
  -webkit-border-radius: 6px;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  overflow: visible;
  position: relative;
  font-size: clamp(13px, 2.4vh ,16px);
  padding: clamp(2px, 1.0vh, 10px) clamp(5px, 2.2vh, 20px);
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: lighter;

}
a.btnlink:hover {
  color: var(--highlight-inverse-contrast);
  background-color: var(--highlight-inverse);
}

 /*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 */

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

.blog-description {
    margin: 0;
    font-size: 2.5rem;
    color: white;
    line-height: 1.5em;
    font-weight: 400;
    font-family: "Roboto Slab", serif;
    letter-spacing: 0;
    text-shadow: var(--cover-title-text-shadow);
  }

#orchester.main-menu {
  max-width: 90%;
  /*margin: auto;*/
  /* background: rgba(90,40,9,9.2); */
  /*margin-top: 1rem;*/
  /* margin-top: clamp(0.2rem, 3vw, 1rem); */
}


#orchester.vertical {
  /*display: inline-block;*/
  /*align-self: flex-end;*/
  /* background: rgba(40,90,9,9.2); */
  /* margin-top: clamp(1vw, 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: 1svh;
  padding-bottom: 0.5rem;
  /* max-height: 200px; */
  margin: auto;
  /* clamp(min, preferred, max) */
  max-width: clamp(80vw, 50%, 500px);
  /* max-width: 500px; */
  /* 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%; */

  }
}

#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);*/
}

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


/* 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;
}

/* 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;

}