:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --bg-thered: rgb(171,45,41);
  --bg-theyellow: bisque;
}


body {
  color: black;
  background-color: rgba(0, 0, 0, 0.59);
  /* background-color: rgba(0, 0, 0, 0.12); */
  margin: 0;
  padding: 0;
  background-color: #cccccc;
  background-image: radial-gradient(var(--bg-thered), black);
}

main {
  margin-left: 5rem;
  padding: 1rem;
  overflow: auto;
}

.readable {
  line-height: 1.5;
}
.navbar {
  top: 0rem;
  width: 100vw;
  height: 4rem;
}


.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* flex-direction: column; */
  align-items: left;
  height: 100%;

}
/* .nav-item:last-child {
  margin-top: auto;
} */

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  color: var(--text-primary);
  text-decoration: none;
  filter: grayscale(100%) opacity(0.7);
  transition: var(--transition-speed);
}
.nav-link:hover {
  filter: grayscale(100%) opacity(1);
  transition: var(--transition-speed);
}

.link-text {
  display: block;
  margin-left: 0.5rem;
}

.nav-link svg {
  width: 2rem;
  min-width: 2rem;
  margin-right: 0;
  margin-left: 2rem;
}
.svgstroke {
  stroke: #FFF;
}
.svgstroke:hover {
  stroke: black;
}

.nav-link:hover .svgstroke {
  stroke: black;
  color: #ffff;
  filter: grayscale(100%);
}
.nav-link:hover .link-text {
  stroke: black;
  color: black;
  filter: grayscale(100%);
}
.footnav-link:hover {
  color: black;
  fill: black;
  filter: grayscale(100%);
}
.footnav-link:hover .svgstroke {
  fill: black;
  color: #ffff;
}
.footnav-link:hover .link-text {
  fill: black;
  color: black;
  filter: grayscale(100%);
}
#twitterlogo:hover {
  fill: black;

}
#twitterlogo .svgstroke {
  fill: white;
  stroke: #ffff;
}

#twitterlogo:hover .svgstroke {
  fill: black;
}

.imgframe {
  padding: 1rem;
  background-color: rgb(129, 115, 115);
  border-radius: 8px;
  /* box-shadow: 1px 2px 30px var(--bg-thered);
  background-color: rgba(187, 164, 164, 1); */
  box-shadow: 5px 2px 30px var(--bg-thered);
  background-color: rgba(62, 8, 8, 1);
  width: min-content;
  margin-right: 20px;
  margin-left: auto;
}

.listenframe {
  padding: 1rem;
  background-color: rgb(129, 115, 115);
  border-radius: 8px;
  /* box-shadow: 1px 2px 30px var(--bg-thered);
  background-color: rgba(187, 164, 164, 1); */
  box-shadow: 5px 2px 30px var(--bg-thered);
  background-color: rgba(62, 8, 8, 1);
  width: auto;
}

.iframe {
  width: inherit;
}

.Titelname {
  font-weight: bold;
  font-size: 1.5em;
  color: var(--bg-thered);
  padding-inline-start: 1rem;
}

.Bandmitglied, .Infos {
  margin: 2rem;
  padding: 1rem;
  background-color: rgb(129, 115, 115);
  border-radius: 8px;
  /* box-shadow: 1px 2px 30px var(--bg-thered);
  background-color: rgba(187, 164, 164, 1); */
  box-shadow: 5px 2px 30px var(--bg-thered);
  background-color: rgba(62, 8, 8, 1);
  color: bisque;
}

.Bandmitglied h2, .Infos h2 {
  font-weight: bold;
}
.Bandmitglied li {
  list-style: none;
}

.Linkliste {
  margin: 2rem;
}

.navbar:hover {
  /* width: 16rem; */
}
.navbar:hover .link-text {
  /* display:block; */
}

.presse_audio {
  width: 200px;
}
.presse_audio_div figure {
  margin: 5px;
}
.presse_audio_div .grid-item {
  display: inline-grid;
}

.BeschreibungLogo, .Beschreibung {
  margin: 10px;
}
.BeschreibungLogo {
    min-width: 340px;
    text-align: left

}
.Beschreibung {
  display: none;
}


li {
  text-align: left;
}
 /*
before nice nav
 */


 html, body {
   height:100%;
   margin:0;
   padding:0;
   overflow:hidden;
   font-family: Verdana, Helvetica, Arial, sans-serif;

   color: #fff;
 }
 header, nav, section, footer {display: block;}
 header {
   top:0px;
   position:fixed !important;
   position:absolute;
   height:5rem;
   width:100%;

   background-color: rgb(171,45,41);
   color: white;
 }

 nav {
   left:0px;
   height:50%;
   width:100%;
   position:absolute;
   background-color: rgb(171,45,41);
 }


 #Content {
   top: 15rem;
   /* position: relative; */
   /* width: 95vw; */
   height: calc(100% - 9rem);
   /* height: 75vh; */
   overflow: auto;
   padding: 30px 0px;
   margin-top: 4rem;
   padding-left: 2rem;
   padding-right: 2rem;

   max-width: 2000px;
   margin-left: auto;
   margin-right: auto;



 }
 footer {
   bottom:0px;
   position:absolute;
   height:3rem;
   width:100%;

   background-color: rgb(171,45,41);
   color: white;
  /* border-top: solid 10px rgba(62, 8, 8, 1); */
 }

 a {
   color:#fff;
   text-decoration: none;
 }

.buttonlike {
  display: inline-block;
  padding: 15px 15px;
  border: 1px solid none;
  background-color: var(--bg-thered);
  box-shadow: 5px 2px 30px var(--bg-thered);
  background-color: rgba(62, 8, 8, 1);
  border-radius: 10px;
  margin-top: 1rem;
  color: bisque;
  /* color: rgb(225,189,189); */
}

/* thanks to https://moderncss.dev/pure-css-custom-checkbox-style */
.form-control {
  font-size: 0.9rem;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

input[type=submit].Musik {
  background-color: rgba(62, 8, 8, 1);
  border: none;
  color: bisque;
  font-size: inherit;
}

input[type="checkbox"] {
  margin: 0;
  background-color: rgba(62, 8, 8, 1);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: blue;
  width: 1.2em;
  height: 1.2em;
  border: 0.15em solid rgb(171,45,41);
  border-radius: 0.15em;
  transform: translateY(-0.075em);

    display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em rgb(171,45,41);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}
/* .buttonlike::before {
  content:'';
background: url('pics/Ohr.svg');
height: 16px;
width: 33px;
position: absolute;
} */

.buttonlike:hover {
  filter: grayscale(30%) opacity(0.85);
  color: darkgrey;
}


 #navi {
 }
 /*
     Und nun bekommen auch noch die Listenpunkte ihr styling.
     Mit 'display' werden sie horizontal angeordnet und ihre Listenpunkte werden entfernt.
 */
 #navi li {
     display: inline;
     list-style-type: none;
     padding: 0px 1em 0px 0px;
 }

 #navi a, #navi a:active, #navi a:visited, #navi a:hover {
     /* zwar aus Usability nicht korrekt, aber in der Navigation vertretbar */
      text-decoration: none;
      color: #fff;
      font-family: Galvji;
 }

 #footnavi a, #footnavi a:active, #footnavi a:visited, #footnavi a:hover {
     /* zwar aus Usability nicht korrekt, aber in der Navigation vertretbar */
      text-decoration: none;
      /* color: #fff; */
      font-family: Galvji;
 }


 #navidiv {
 }

 #footnavi li {
     display: inline;
     list-style-type: none;
     padding: 0px 1em 0px 0px;
 }


 #contenthalfhalf {
   display: flex;
    /* flex-direction: column; */

 }

 #contenttext {
   width: 50vw;
   color: #fff;
 }
 #contenttextnext {
   width: 50vw;
   color: #fff;
 }

 #contenttextfull {
   width: inherit;
   color: #fff;
   display: flex;
/*   height: calc(90vh - 6rem); fehlte unten etwas mit dieser Einstellung*/

   /* padding-left: 2rem;
   padding-right: 2rem; */

 }

 #contenttextfulllogo {
    width: inherit;
    color: #fff;
    display: flex;
    height: -webkit-fill-available;
 /*   height: calc(90vh - 6rem); fehlte unten etwas mit dieser Einstellung*/
 
    /* padding-left: 2rem;
    padding-right: 2rem; */
 
  }
 
 #twitterlogo {
   content: url(pics/twitter.svg);
 }

 #fblogo {
   content: url(pics/fb.svg);
 }

 #youtubelogo {
   content: url(pics/YouTube.svg);
 }
 
 #instagramlogo {
    content: url(pics/instagram.svg);
 }
 

 #maillogo::before {
   content: url(pics/email2.svg);
 }

  #presselogo {
    content: url(pics/Presseinfo.svg);
  }

 .Musikimg {
   height: 100px;
 }

 .musiktitel {
   width: auto;
 }
 .musik_whitebg {
   display: flex;
   background-color: #fff;
   background-image: url("pics/Musik/CoverCDbg.png");
   min-height: 100px;
   min-width: 100px;
   margin-right: 10px;
   justify-content: center;
   align-items: center;
   border-width: 5px;
   border-style: double;
   border-color: rgb(171,45,41);
   border-radius: 10px;
 }
 .musik_whitebg_next {
     width: inherit;
 }
 /* a[href^="mailto:"]:before { content: "\1F4E7"; font-size: 34pt;} */
 /* \2709 */




h1 {
  text-transform: uppercase;
  border: thin solid;
  padding: 0.25em;
  background-color: floralwhite;
  color: var(--bg-thered);
}
h2 {
   font-weight: normal;
   font-size: 1em;
 }
.contenth2 {
  text-transform: uppercase;
  border: thin solid;
  padding: 0.25em;
  background-color: var(--bg-theyellow);
  color: var(--bg-thered);
}

.locationlink, .link {
  color: var(--bg-theyellow);
  letter-spacing: 0.3rem;
}
.locationlink:hover, .link:hover  {
  color: #ffff;
  stroke: black;
  filter: grayscale(100%);
}

.ticketlink, .locationlink {
  color: var(--bg-theyellow);
  letter-spacing: 0.1rem;
}
.ticketlink::before {
  color: var(--bg-theyellow);
  display: inline-flex;
            content: '';

            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-image: url('pics/konzert.svg');
            background-size: 40px 40px;
            height: 40px;
            width: 40px;
            stroke: var(--bg-theyellow);
}
.locationlink::before {
  color: var(--bg-theyellow);
  display: inline-flex;
            content: '';

            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-image: url('pics/location.svg');
            background-size: 40px 40px;
            height: 40px;
            width: 40px;
            stroke: var(--bg-theyellow);
}

.srlbfestivallink::before {
  color: var(--bg-theyellow);
  display: inline-flex;
            content: '';

            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-image: url('pics/srlb-festival.svg');
            background-size: 40px 40px;
            height: 40px;
            width: 40px;
            stroke: var(--bg-theyellow);
}

.organisationlink::before {
  color: var(--bg-theyellow);
  display: inline-flex;
            content: '';

            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-size: 40px 40px;
            height: 40px;
            width: 1px;
            stroke: var(--bg-theyellow);
}

.ticketlink:hover, .locationlink:hover {
  color: white;
  stroke: black;
  filter: grayscale(100%);
}


 h1.Musik  {
   color: rgb(171,45,41);
 }
 .floatmain {
   display: flex;
 }

 .floatleft {
   float: left;
   width: 40%;
   min-width: 400px;
   float: left;
   margin: 5px;
 }
 .floatnext {
   width: 40%;
   min-width: 400px;
 }

 .inlineclass {
   display: inline;
 }

 .allesmittig {
   display: flex;
   float: left;
   background-color: #fff;
   height: 100px;
   width: 1200px;
   margin-right: 10px;
   justify-content: center;
   align-items: center;
   border-width: 5px;
   border-style: double;
   border-color: rgb(171,45,41);
   border-radius: 10px;

 }

 #logo {
     width: 100%;
     min-height: 500px;
     /* min-width: 500px;
     min-height: 500px; */
     margin: 5px;
     background-position: center;
     background-image: url(pics/RumbaSanta_Logo.png);
     /* background-image: url(pics/RS_schriftzugRand.gif); */
     background-size: 1200px;
     background-repeat: no-repeat;
     text-align: center;

 }

 #logohalf {
     width: 50%;
     /* min-width: 500px;
     min-height: 500px; */
     margin: 5px;
     background-position: center;
/*     background-image: url(pics/RS_schriftzugRand.gif);*/
     background-size: 1200px;
     background-repeat: no-repeat;
     text-align: center;

 }

 .bandimg {
   background-color: rgb(171,45,41);
   height: 300px;
 }
.bandmimg {
  width: 300px;
}

.gallery-grid {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}
.noflextext {
  margin: 1rem;
  width: inherit;
}

.flextext {
  display: flex;
  margin: 1rem;
  width: inherit;

}
.bottom {
  align-self: flex-end;
}

.bottomsspan::before {
 content: "\a0";
}
.bottomsspan {
  margin: 0;
}
.bottomsspan1 {
  margin: 0;
}
.onelocation {
  border: solid;
  border-width: 0.1rem;
  color: var(--bg-theyellow);
  margin-bottom: 1rem;
  background-color: var(--bg-thered);
  padding-left: 1rem;
}
.logoimg {
  width: inherit;
}

.min3zeilen {
  min-height: 3rem;
}

.largemargin {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  /* display: table-row-group; */
}

label.Musik {
  font-size: 0.7em;
}
 @media only screen and (min-width: 560px) {


}

 /* small screens */
 @media only screen and (max-width: 720px) {
   h1 {
     font-size: 1.2rem;
   }
   .nav-link {
     height: 2.5rem;
   }
   .infotextDebug {
     width: 65vw;
   }

   #Content {
     top: 1rem;
     margin-top: 0rem;
     /* width: 70vw; */
     padding-right: 1.5rem;
     height: 85vh;
     padding-left: 3.5rem;

   }
   #contenthalfhalf {
     display: flex;
      flex-direction: column;
      width: inherit;

   }
   #contenttextfull {
     display: flex;
     flex-direction: column;
     width: inherit;
     /* height: calc(95vh - 6rem); - nach unten fehlte ein Stück*/ 
   }

   #contenttext, #contenttextnext {
     width: inherit;
   }

   #logo {
     width: 70vw;
     margin: auto auto;
     min-height: 50px;

     background-position: center;
     background-image: url(pics/RumbaSanta_Logo.png);

/*     background-image: url(pics/RS_schriftzugRand.gif); */
     background-size: 500px 500px;
     background-repeat: no-repeat;
     height: 250px;
   }

   .largemargin {
     margin-left: auto;
     margin-right: auto;
     width: 70vw;
     /* display: table-row-group; */
   }

   .logoimg {
     width: 40vw;
     margin: 5px;
   }

   #logohalf {
     width: 70vw;
     margin: 5px;

     background-position: center;
/*     background-image: url(pics/RS_schriftzugRand.gif);*/
     background-size: 500px 500px;
     background-repeat: no-repeat;
     margin: auto;
   }

   #logoALT  {
       width: 40%;
       min-width: 500px;
       min-height: 500px;
       margin: 5px;
       background-position: center;
       background-image: url(pics/RS_schriftzugRand.gif);
       background-size: 1200px;
       background-repeat: no-repeat;
   }


   #contenthalfhalf {
     /* width:70vw; */
   }

   .link-text {
     display: none;
     margin-left: 1rem;
   }

   .navbar {
     width: 3rem;
     height: auto;
     text-align: left;
     position: fixed;
     /* background-color: var(--bg-primary); */
   background-color: none;
   }



   .navbar-nav {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: left;
     height: 100%;

   }

     .navbar:hover {
       width: 16rem;
     }

     .navbar:hover .link-text {
       display: inline;
     }

     .navbar:hover .logo svg
     {
       margin-left: 11rem;
     }

     .navbar:hover .logo-text
     {
       left: 0px;
     }

     .nav-link svg {
       width: 2rem;
       min-width: 2rem;
       margin-right: 0;
       margin-left: 0.5rem;
     }

     .bandmimg {
       width: 65vw;
     }
     .coverimg {
       width: 60vw;
     }

     .Bandmitglied, .Infos {
       margin: 0rem;
       padding: 1rem;

       /* background-color: rgb(129, 115, 115); */
       border-radius: 8px;

     }

     .gallery-grid {

       display: -ms-grid;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(65vw, 1fr));
       grid-gap: 0.5rem;
       justify-items: center;
       margin: 0;
       padding: 0;
     }

     ul {
       padding-inline-start: 10px;
     }

     .listenframe {
       width: 70vw;
     }
     .iframe {
       width: 70vw;
     }
     .flextext {
       flex-direction: column;

     }
     .bottom {
       align-self: auto;
     }

     .bottomsspan::before {
      content: "";
     }
     .bottomsspan {
       margin: 0;
     }
     .bottomsspan1 {
       margin: 0;
     }

     .imgframe {
       margin: 0 auto;
     }


     .BeschreibungLogo {
       display: none;
     }

     .Beschreibung {
       display: block;
     }

    /* Konzerttermin Startpage*/

    .flextext h2 a {
        hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        overflow-wrap: break-word; /* Ensure hyphens are applied only on overflow */
        word-break: break-word; /* Fallback for older browsers */
    }    
    
 }