<style-type="text/css">

* {
  margin: 0px;
  padding: 0px;
}
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-top: -30px;
  text-align: center;
  font-family: "Calibri", "Arial","sans serif";
  font-size: 20px;
  color: rgb(90,90,90);
  background-color: rgb(240,240,240);
}
.container{
  width: 100%;
  height: 100%;
  text-align: left;
  display: inline-block;
}
/*Kopf mit Logo, GymLdbg und Zweig*/
.header {
  width: 100%;
  font-family: "Calibri", "Arial","sans serif";
  color: rgb(90,90,90);
  background-color: rgb(240,240,240);
  position: fixed;
  z-index:30;
  border-bottom: rgb(172,0,0) 3px solid;
}
#logo {
  width: calc(36px + 1.7vw);
  float: left;
  line-height: 0.9;
  margin: calc(14px + 0.5vw) calc(10px + 0.6vw) 0px 20px;
  display: table-cell;
  vertical-align: middle;
}
#gymldbg{
  margin: 12px 25px 0px 20px;
  line-heigth: 1.0;
  font-size: calc(12px + 1.6vw);
}
#zweig{
  margin: 0px;
  font-size:calc(10px + 0.6vw);
  line-height:1.0;
}
/*Menüzeile mit Dropdown*/
#navbar{
  font-size:calc(8px + 0.6vw);
  line-height: 1.0;
  background-color: rgb(172,0,0);
  overflow: hidden;
  margin-top: 11px;
}
.menue {
	display: none;
}
.dropdown {
  margin: 0px 0px 0px 5px;
  float: left;
  overflow: hidden;
}
.dropdown .btn {
  background-color: inherit;
  color: rgb(255,255,255);
  padding: 0.0vw 0.8vw 0.0vw 0.3vw;
  margin: 0.2vw 0.4vw 0.2vw 0.0vw;
  font-size: calc(11px + 0.2vw);
  border: none;
  border-left: rgb(255,255,255) 2px solid;
}
.dropdown .btn a {
  text-decoration: none;
  color: white;
}
.dropdown-content {
  display: none;
  position: absolute;
  margin: auto;
  padding-right: 10px;
  background-color: rgb(240,240,240);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  line-height: 1.5;
}
.dropdown-content a {
  color: rgb(50,50,50);
  font-size: calc(13px + 0.2vw);
  text-decoration: none;
  padding-left: 10px;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a:hover {
  background-color: rgb(200,200,200);
}
.dropdown:hover .btn {
  background-color: rgb(112,0,0);
}
/*slideshow oben*/
.middle {
  margin-top: 4em;
  position: absolute;
  width: 100%;
  height: auto;
}
.slideimg{
  position: absolute;
  width: 100%;
  heigth: auto;
}
#stage img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
#stage img:nth-of-type(2) {
  z-index: 10;
}
#stage img:nth-of-type(n+3) {
  display: none;
}
@keyframes fader {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
/*Inhalt*/
.inhalt {
  width: 100%;
  height: auto;
  min-height: 650px;
  align-items: center;
  background-color: rgb(240,240,240);
  font-size: calc(14px + 0.4vw);
  color: rgb(90,90,90);
  margin-top: 37vw;
  border-top: rgb(172,0,0) 3px solid;
  box-sizing: border-box;
  position: relative;
  z-index: 25;
}
.inhalt a:hover{
  background-color: rgb(200,200,200);
}
.content {
  width: 90%;
  max-width: 1000px;
  text-align: left;
  margin: 0 auto;
  background-color: rgb(240,240,240);
  line-height: 1.5;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/*Slideshows im Inhalt*/
.content #stagecont{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stagecont img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stagecont img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stagecont img:nth-of-type(n+3) {
  display: none;
}
.content .panel .slideimgcont{
  position: absolute;
  height: 34vw;
  max-height: 495px;
  width: 70vw;
  max-width: 880px;
  border: rgb(73,73,73) 2px solid;
}
.content #stageconu{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stageconu img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stageconu img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stageconu img:nth-of-type(n+3) {
  display: none;
}
.content #stageconv{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stageconv img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stageconv img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stageconv img:nth-of-type(n+3) {
  display: none;
}
.content #stageconw{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stageconw img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stageconw img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stageconw img:nth-of-type(n+3) {
  display: none;
}
.content #stageconx{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stageconx img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stageconx img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stageconx img:nth-of-type(n+3) {
  display: none;
}
.content #stagecony{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stagecony img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stagecony img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stagecony img:nth-of-type(n+3) {
  display: none;
}
.content #stageconz{
  height: 35vw;
  max-height: 495px;
  width: 72vw;
  margin-left: auto;
  margin-right: auto;
}
.content .panel #stageconz img:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
.content .panel #stageconz img:nth-of-type(2) {
  z-index: 10;
}
.content .panel #stageconz img:nth-of-type(n+3) {
  display: none;
}
/*Tabellen*/
.content .panel tr {
  background-color: rgb(242,242,242);
}
.content .panel tr:nth-child(2n) {
  background-color: rgb(248,248,248);
}
.content td {
  padding: 0.5vw;
}

/*Bilder*/
.content .imgcent {
  text-align: center;
}
.content .imgcent img {
  width: 80%;
  border: 2px solid rgb(73,73,73);
}
.content .imgleft{
  width: 40%;
  text-align: left;
  float: left;
  margin-right: 20px;
}
.content .imgleft img{
  width: 100%;
  border: 2px solid rgb(73,73,73);
}
.content .imgright{
  width: 40%;
  text-align: right;
  float: right;
  margin-left: 20px;
}
.content .imgright img{
  width: 100%;
  border: 2px solid rgb(73,73,73);
}
.accordion {
  background-color: rgb(230,230,230);
  color: rgb(68,68,68);
  cursor: pointer;
  padding: calc(10px + 0.3vw);
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: calc(14px + 0.3vw);
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: rgb(210,210,210); 
}
.panel {
  padding: 0px 0px 0px 40px;
  display: none;
  background-color: rgb(253,253,253);
  overflow: hidden;
}
.text {
  padding-right: 40px;
}
.content .panel .text .aktuelles{
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-column-gap: 5%;
  grid-row-gap: 20px;
}
.content .panel .text .aktuelles img{
  width: 100%;
}
.content .panel .text .aktuelles .termin {
  width: 100%;
  padding: 10px;
  padding-top: 15px;
  font-size: 15px;
  line-height: 1.2;
}