body {
/*
background-image: url("grafiken/bg-test-01.png"); background-repeat: no-repeat; background-position: right top; margin-right: 0px; background-attachment: fixed;
*/

/* Silbentrennung */
hyphens: auto;
}


#mySidebar {
display:none;
z-index:4;
width:25%;
min-width:330px;
position:absolute;
top:0px;
right:0px
}

.header {
  background-color: #FFFFFF;
  padding: 0px;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

#navbar {
  overflow: hidden;
  border-top: 1px solid #7cc8db;
  border-bottom: 1px solid #7cc8db;
  background-color: #f1fafc;
  width: 100%;
  max-width: 1200px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  z-index:3;
}

#navbar a {
  float: left;
  display: block;
  color: #679fa9;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 100%;
}

#navbar a:hover {
  background-color: #1F1F1F;
  color: #FFFFFF;
}

#navbar a.active {
  background-color: #7cc8db;
  color: white;
}

.Kopfbereich {
  padding-top: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  background-color: #FFFF00;
  width: 100%;
  border: 0px solid #FF007F;
}

.sticky + .Kopfbereich {
  margin-top: 60px;
}

#navbar a.hamburger {
float: right;
margin: 0 16px 0 0;
font-size: 29px;
line-height: 100%;
padding: 8px 14px;
z-index: 2;
color: #4f7a82;
}

#navbar a.hamburger:hover {
color: #FFFFFF;
}


#graph-x {
position: relative;
width: 100%;
float: left;
display: block;
padding: 0px;
border: 0px solid #000000;
}

/* float:left;padding: 0px;margin:0px 25px 0 0px;border-radius:10px; */
.w3-icon80 {float:left;margin:10px 25px 0px 0px;width:80px;height:80px;border-radius:10px;}
.w3-icon80-a {float:left;margin:0px 25px 0px 0px;width:80px;height:80px;border-radius:10px;}
.w3-icon80-b {float:left;margin:0px 25px 10px 0px;width:80px;height:80px;border-radius:10px;}
.w3-icon100 {float:left;margin:0px 25px 5px 10px;width:100px;height:100px;}
.w3-icon100-a {float:left;margin:0px 10px 15px 10px;width:50px;height:50px;}

@media (min-width:801px){
.w3-icon100-a {float:left;margin:0px 25px 5px 10px;width:100px;height:100px;}
}

.w3-icon120 {float:left;margin:0px 25px 5px 10px;width:120px;height:120px;}


.wahl {
background-color: #effd9b;
}

.R-Icon {
float: left;
padding: 0px 0px 0px 0px;
margin: 18px 25px 0px 0px;
border-radius: 10px;
width: 80px;
height: 80px;
}

.R-Icon-02 {
float: left;
padding: 0px 0px 0px 0px;
margin: 5px 25px 0px 0px;
border-radius: 10px;
width: 80px;
height: 80px;
}


@media (max-width:768px){

.R-Icon {
float: left;
padding: 0px 0px 0px 0px;
margin: 18px 15px 0px 0px;
border-radius: 10px;
width: 60px;
height: 60px;
}

.R-Icon-02 {
float: left;
padding: 0px 0px 0px 0px;
margin: 5px 15px 0px 0px;
border-radius: 10px;
width: 60px;
height: 60px;
}


}

<!-- WJ -->
.w3-tag{background-color:#DF00FF;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}

#Keywords {padding:20px 16px 20px 16px;margin-top:16px;border:1px solid #CFCFCF;}

#Keywords .w3-tag{background-color:#F6F6F6;color:#4F4F4F;display:inline-block;padding:4px 8px 4px 8px;text-align:center;margin-bottom:4px;font-size:16px;}


.wj-fuss a{display:inline-block;padding:6px 4px 6px 10px;margin:4px 0px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:#FFFFFF;text-align:left;cursor:pointer;white-space:nowrap;width:100%;border:1px solid #DFDFDF;font-size:100%;}
.wj-fuss a:hover{border:1px solid #000000;color:#FFFFFF;background-color:#5F5F5F;}


.wj-intern {
width: 100%;
margin: 0px 0px 0px 0px;
}

.wj-intern a:link, .wj-intern a:visited {
display: block;
float: left;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
cursor: pointer;
width: calc(100% - 10px);
height: auto;
padding: 3px 3px 3px 10px;
margin:  0px 10px 12px 0px;
border:1px solid #DFDFDF;
}

.wj-intern a:hover {
color: #FFFFFF;
background-color: #7F7F7F;
border:1px solid #000000;
}

@media (min-width:601px){
.wj-intern a:link, .wj-intern a:visited {
width: calc(50% - 10px);
}
}

@media (min-width:993px){
.wj-intern a:link, .wj-intern a:visited {
width: calc(33.33333% - 10px);
}
}

/* h2 Balken */
h2.balken {background-color:#e7fafa;width:100%;padding:4px 0px 4px 8px;margin-top:32px;}
h3.balken {background-color:#e7fafa;width:100%;padding:4px 0px 4px 8px;margin-top:32px;}
h3.balken-g {background-color:#f4fbd9;width:100%;padding:4px 0px 4px 8px;margin-top:32px;}
h4.balken-b {background-color:#e7fafa;color:#000000;width:100%;padding:4px 0px 4px 8px;margin-top:16px;}
h2.blau, h2.blau:hover{color:#000!important;background-color:#ccecf1!important;padding:3px 0px 3px 15px;margin-top:30px;font-size:140%}
h2.gelb, h2.gelb:hover{color:#000!important;background-color:#FCFA9E!important;padding:3px 0px 3px 15px;margin-top:20px;}

/* nach oben Pfeil */

.up:link, .up:visited {
float: right;
color: #5F5F5F;
text-decoration: none;
background-color: transparent;
cursor: pointer;
width: 80px;
height: auto;
padding: 3px 0px 6px 0px;
margin:  0;
text-align: center;
}

.up:hover {
color: #FFFFFF;
background-color: #5ccbbd;
}


h2 .up:link, h2 .up:visited {
cursor: pointer;
width: 80px;
height: auto;
padding: 8px 0px 8px 0px;
margin:  0;
text-align: center;
}

h4 .up:link, h4 .up:visited {
float: right;
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
cursor: pointer;
width: 80px;
height: auto;
padding: 2px 0px 3px 0px;
margin:  0;
text-align: center;
border-right: 4px solid transparent;
}

h4 .up:hover {
color: #000000;
background-color: #FFFFFF;
border-right: 4px solid #a00618;
}

.balken-b .up:link, .balken-b .up:visited {
float: right;
color: #000000;
text-decoration: none;
background-color: transparent;
cursor: pointer;
width: 80px;
height: auto;
padding: 2px 0px 3px 0px;
margin:  0;
text-align: center;
border-right: 4px solid transparent;
}

.balken-b .up:hover {
color: #000000;
background-color: #FFFFFF;
border-right: 4px solid #bdf8f1;
}

.pic100 {
 width: 100%;
 height: auto;
 border: 0;
}

.pic50 {
 width: 50%;
 height: auto;
 border: 0;
}

/* img Gallerie */

div.gallery {
  margin: 0px 0px 16px 0px;
  padding: 10px 13px 10px 13px;
  border: 1px solid #ccc;
  border-radius: 10px;
  /*float: left; */
  width: 100%;
  text-align: center;
}

/*
div.gallery:hover {
  border: 1px solid #00AFFF;
  filter: grayscale(100%);
}

div.inaktiv:hover {
  border: 1px solid #ccc;
  filter: grayscale(0%);
}
*/

.gallery img {
  width: 100%;
  height: auto;
  text-align: center;
}

.gallery .imgTitel  {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin-bottom: 8px;
  text-align: center;
  color: #000000;
}

.gallery .w3-button {color:#000!important;background-color:#FAFAFA!important;text-align: center;}

.gallery .w3-button:hover{color:#FFFFFF!important;background-color:#b8071b!important}

.gallery .desc {
  margin-top: 8px;
  padding:7px 7px 7px 7px;
  text-align: center;
  font-size: 100%;
  background-color:#fafafa!important;
}

.gallery .Bild-Text {
display: block;
text-align: center;
width: 100%;
padding: 6px 6px;
color: #000000;
background-color: #FFFFFF;
margin: 0px 0px 16px 0;
}


@media (min-width:700px){
.gallery .Bild-Text{font-size: 90%;font-weight:500;}
}


@media (min-width:993px){
.gallery .Bild-Text{font-size: 90%;font-weight:500;}
}


/*

@media (min-width:700px){
div.gallery {width:50%}
}


@media (min-width:993px){
div.gallery {width:33.33333%}
}

*/

/* Bild-Div floating Fotoseiten */






/* Ende Bild-Div floating .gallery{width:50%} .gallery{width:33.33333%}  */



/* Ende gallery */


.bild-titel {
width: 100%;
padding: 4px 0px 4px 0px;
margin: 6px 0px 5px 0px;
text-align: center;
color: #000000;
background-color: #e7fafa;
font-size: 100%;
font-weight: 400;
}

.bild-text {
display: block;
text-align: center;
width: 100%;
padding: 6px 0px;
color: #000000;
background-color: #FFFFFF;
margin: 3px 0px 16px 0;
}

@media (min-width:700px){
.Bild-Text{font-size: 90%;font-weight:500;}
}

@media (min-width:993px){
.Bild-Text{font-size: 90%;font-weight:500;}
}


.Bild-Link:hover{color:#FFFFFF!important;background-color:#2F2F2F!important}


.kurzinfo {
border-top: 1px solid #7cc8db;
border-bottom: 1px solid #7cc8db;
margin: 10px 16px 25px 16px;
padding: 15px 0px 15px 15px;
background-color: #F5F5F5;
}


/* Menüleiste 5 Buttons icon-bar5 */

.icon-bar5, .icon-bar5-w, icon-bar6-w, icon-bar6-b {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
  text-align: center;
  margin: 0px 0px 10px 0px;
}

.icon-bar5-w a, .icon-bar6-w a {
  float: left;
  text-align: center;
  padding: 6px 0px;
  margin: 0px 5px 5px 0px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #000000;
  background-color: #FFFFFF;
  border: 1px solid #9F9F9F;
  border-radius: 4px;
}

.icon-bar6-b a {
  float: left;
  text-align: center;
  padding: 6px 0px;
  margin: 0px 5px 5px 0px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #000000;
  background-color: #e7fafa;
  border: none;

}

.icon-bar5-w a, .icon-bar6-w a, icon-bar6-b a {
  width: calc(50% - 5px);
}


.icon-bar5-w a:hover, .icon-bar5 a:hover, .icon-bar6-w a:hover, icon-bar6-b a:hover {
  background-color: #3F3F3F;
  color:#FFFFFF;
}

@media (min-width:801px){
.icon-bar2 a {width: calc(50% - 5px);}
.icon-bar2 .w3-bar-item {width: calc(50% - 5px);}
.icon-bar4 a {width: calc(25% - 5px);}
.icon-bar4-r a {width: calc(25% - 5px);}
.icon-bar4-w a {width: calc(25% - 5px);}
.icon-bar5 a {width: calc(20% - 5px);}
.icon-bar5-w a {width: calc(20% - 5px);}
.icon-bar6 a {width: calc(33.3333% - 5px);}
.icon-bar6-w a {width: calc(33.3333% - 5px);}
.icon-bar6-b a {width: calc(33.3333% - 5px);}

}

@media (min-width:993px){
.icon-bar6 a {width: calc(16.666% - 5px);}
.icon-bar6-w a {width: calc(16.666% - 5px);}
.icon-bar6-b a {width: calc(16.666% - 5px);}
}


/* Ende Menüleiste */


.w3-voll {padding:0.01em 0.01em;margin-left:0px;margin-right:0px}
.w3-weiss16 {font-size:16px;color:#FFFFFF;}
.w3-schwarz17 {font-size:17px;color:#000000;margin:12px 0px 20px 0px;border:1px solid #9F9F9F;}
.wj-border {border:1px solid #9F9F9F;margin:12px 0px 12px 0px;height:100%}


/* Links */
a.ohne-strich, a.ohne-strich:hover {text-decoration:none; color:#000000;background-color:transparent;float:left;}
a.blau, a.blau:hover {text-decoration:none; color:#0050A0;}
a.orange, a.orange:hover {text-decoration:none; color:#C04000;}

a.ohne:link, a.ohne:visited {text-decoration:none;color:#0070C0;}
a.ohne:hover {text-decoration:none;}


.w3-padding-medium{padding-top:12px!important;padding-left:2px!important;padding-right:0px!important;font-size:16px;padding-bottom:20px!important;border:1px solid #00E090;}
.w3-kasten{padding:0px 0.01em;}

/* TitelBar Text rechts */
#w3-oben{
  position: relative;
  width: 100%;
  height: auto;
  border: 0px solid #73AD21;width:100%;overflow:hidden;
  background-color:#DF00FF;
  }

#w3-innen{
  position: absolute;
  top: 0px;
  left: 0px:
  width: 100%;
  height: 100%;
  border: 0px solid #73AD21;width:100%;overflow:hidden
  }

#w3-obentext{
  position: absolute;
  bottom: 10px;
  right: 50px;
  font-size: 60px;
  color: #FFFFFF;
  }



.w3-card-5{box-shadow:1px 0px 1px 0px rgba(0,0,0,0.16),0px 0px 0px 1px rgba(0,0,0,0.12);margin:3px;}
.w3-card-6,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}



<!-- Tabellen -->

.grid-container {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max-content;
  grid-template-columns: auto auto auto;
  grid-template-areas: 'left middle right';
}

.grid-item {
  display: grid;
}

.cleft,
.cmiddle,
.cright {
  padding: 0px;
  width: 100%;
  height: 100%;
}

/* Style the left column */
.cleft {
  grid-area: left;
}

/* Style the middle column */
.cmiddle {
  grid-area: middle;
}

/* Style the right column */
.cright {
  grid-area: right;
}

<!-- / Tabellen -->


/* Terminliste mit Kalendergrafik */

.AnzeigeZeile {
position: relative;
top: 0px;
left: 10px;
width: 100%;
min-height: 130px;
border-top: 1px solid #BFBFBF;
margin: 0px;
padding: 0px;
}

.AnzeigeInfo {
position: absolute;
top: 8px;
left: 125px;

font-size: 18px;
}

.AnzeigeText {
position: absolute;
top: 11px;
left: 280px;
font-size: 18px;
padding: 0px 5px 0px 0px;
}


@media (max-width:768px){.AnzeigeText,.AnzeigeInfo{font-size: 12px;}}

.AnzeigeText b {font-weight: bold;}

.AnzeigeText a:link, .AnzeigeText a:visited  {
font-size: 12px;
text-decoration: none;
color: #0090E0;
}

.AnzeigeText a:hover{color:#FF00FF;}

.KalBox {
position: absolute;
top: 12px;
left: 0px;
width: 100px;
height: 108px;
background-image: url("grafiken/kalenderblatt-100-01.png");
border: 0px solid #6F6F6F;
}

.KalBox .Jahr {
position: absolute;
top: 26px;
left: 0px;
width: 100%;
height: 24px;
line-height: 24px;
color: #000000;
font-family: Arial,sans-serif;
font-size: 14px;
text-align: center;
}

.KalBox .Tag {
position: absolute;
top: 47px;
left: 0px;
width: 100%;
color: #2F2F2F;
font-family: Arial,sans-serif;
font-size: 35px;
line-height: 35px;
font-weight: bold;
text-align: center;
}

.KalBox .Monat {
position: absolute;
top: 80px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
color: #000000;
font-family: Arial,sans-serif;
font-size: 16px;
text-align: center;
}

/* ende Terminliste */