
/* eigene, zus&auml;tzliche oder abge&auml;nderte Formatierungen */

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

/* Silbentrennung */
hyphens: auto;
}

.ortsschild {
display: none;
width: 227px;
height: 250px;
border: 0px solid #4F4F4F;
position: fixed;
bottom: 0;
right: 0;
background-image: url("grafiken/seite-bg.png");
}


@media (min-width:1500px){
.ortsschild {
display: block;
}

/* Start ICON-BARs */

.icon-bar4, .icon-bar4-w, .icon-bar6, .icon-bar6-w {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
  text-align: center;
}

.icon-bar4-w a {
  float: left;
  text-align: center;
  width: 49%;
  padding: 10px 0;
  margin: 0px 3px 3px 0px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 1px solid #5F5F5F;
  border-radius: 7px;
}

.icon-bar6-w a {
  float: left;
  text-align: center;
  width: 49%;
  padding: 10px 0;
  margin: 0px 3px 3px 0px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 1px solid #5F5F5F;
  border-radius: 7px;
}

.icon-bar4 a:hover, .icon-bar4-w a:hover, .icon-bar6 a:hover, .icon-bar6-w a:hover {
  background-color: #000; /* hover color */
  color: #FFFFFF;
}


@media (min-width:801px){
.icon-bar4 a {width: 25%;}
.icon-bar4 button {width: 24.5%;}
.icon-bar4-w a {width: 24.5%;}
.icon-bar6 a {width: 33%;}
.icon-bar6-w a {width: 33%;}
}

h2.drotfett {color: #A00618;font-weight:bold;}
h2.balken-r {background-color:#A00618;color:#FFFFFF;width:100%;padding:4px 0px 4px 8px;margin-top:10px;}
h2.balken-g {background-color:#EFEFEF;color:#000000;width:100%;padding:4px 0px 4px 8px;margin-top:0;}
h2.balken {background-color:#F5FAFA;width:100%;padding:4px 0px 4px 8px;margin-top:0;}
h1.balken {background-color:#F5FAFA;width:100%;padding:4px 0px 4px 8px;margin-top:0;}


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


/*  ::::::: Tab-Formatierung ::::::::::::::::::*/

.tab2 {
  overflow: hidden;
  border: 1px solid #FFFFFF;
  background-color: #EFEFEF;
  color: #6F6F6F;
}

/* Style the buttons that are used to open the tab content */
.tab2 button {
  background-color: inherit;
  color: #5F5F5F;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
  color: #000000;
}

/* Create an active/current tablink class */
.tab2 button.active {
  background-color: #ccc;
  color: #000000;
}

/* Style the tab content */
.tabcontent {
  margin-top:10px;
  background-color: #FAFAFA;
  display: none;
  padding: 6px 12px;
  border-bottom: 0px solid #ccc;
  border-top: none;
}


/* ::::: Grafik grau zu Farbe bei hoover ::::: */

.w3-hover-opacity {
  border: none;
  color: white;
  opacity: 0.3;
  transition: 0.3s;
}

.w3-hover-opacity:hover {opacity: 1}

.w3-hover-greyscale {
  border: none;
  color: white;
  filter:grayscale(100%);
  transition: 0.5s;
}

.w3-hover-greyscale:hover {filter:grayscale(0%);}

.w3-40 {width:50px;}



/* Buttons Slideshow */
.mySlides {display:none};

.w3-button.slide {white-space:normal}
.w3-button.slide {border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}

.w3-button.slide  {
  background-color: #AFAFAF; /* Green */
  border: none;
  color: white;
  width: 140px;
  padding: 10px 32px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  border-radius: 8px;
  -webkit-touch-callout:none;
  -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;  user-select:none}

   /* Nav-Nummern class "demo" */
  .w3-button.demo{
  background-color: #1CBBA4; /* Green */
  border: none;
  color: white;
  width: 34px;
  padding: 7px 7px;
  margin:10px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  border-radius: 8px;
  -webkit-touch-callout:none;
  -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;  user-select:none}

.w3-button:hover.slide  {
  background-color: #4F4F4F; /* Green */
  color: white;
}
.w3-button:disabled.slide {cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-red.slide,.w3-hover-red:hover.slide {color:#fff!important;background-color:#f44336!important}
.w3-light-grey.slide,.w3-hover-light-grey:hover.slide,.w3-light-gray.slide,.w3-hover-light-gray:hover.slide {color:#000!important;background-color:#f1f1f1!important}




/* Links */
a.ohne:link, a.ohne:visited {text-decoration:none;color:#000000;background-color:#EFEFEF;}
a.ohne:hover {text-decoration:none;background-color:#0090E0;color:white;}

a.ohne-b:link, a.ohne-b:visited {text-decoration:none;color:#1069c6;}
a.ohne-b:hover {text-decoration:none;background-color:#0090E0;color:white;}


/* Links im Footer */
a.ohne-strich:link, a.ohne-strich:visited {text-decoration:none;}
a.ohne-strich:hover {background-color:#4F4F4F;color:white;}

/* Icons */
.w3-icon120-c {margin:5px 0px 5px 0px;border:1px solid #000000;}
.w3-icon120-l {float:left;margin:5px 10px 5px 10px;border:1px solid #000000;}
.w3-icon120 {float:left;margin:5px 20px 5px 0px;border:1px solid #000000}
.w3-icon120 {float:left;margin:5px 20px 5px 0px;border:1px solid #000000}

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

.w3-icon100 {float:left;margin:5px 18px 5px 0px;border:1px solid #000000;width:100px;height:100px;opacity:0.9999}
.w3-icon100:hover {filter:grayscale(100%)}


.w3-voll{padding:0.01em 0.01em;margin-left:0px;margin-right:0px}
.w3-weiss16{font-size:16px;color:#FFFFFF;}
.w3-schwarz16{font-size:16px;color:#000000;padding-top:12px!important;padding-right:8px!important;padding-bottom:20px!important;padding-left:8px!important;border:0px solid #9F9F9F;}

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

.w3-abstand-2 {margin-top:1px!important;}


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

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

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


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


/* Menueleisten */

.w3-bar5{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}

.w3-bar5 .w3-bar-item {
padding: 7px 16px;
float: left;
width: 50%;
background-color: #EFEFEF;
border: 1px solid #FFFFFF;
border-radius: 7px;
display:block;
outline:0
}

@media (min-width:801px){
.w3-bar5 .w3-bar-item{width:20%;}
}

.w3-bar5 .w3-button{white-space:normal}



/* Start ICON-BARs */

.icon-bar2, .icon-bar4, .icon-bar5, .icon-bar6, .icon-bar6-rot, .icon-bar6-1, .icon-bar6-2 {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
  text-align: center;
}

.icon-bar2 a {
  float: left;
  text-align: center;
  width: 50%; /* 2 */
  padding: 10px 0;
  transition: all 0.3s ease;
  color: white;
  text-decoration: none;
}

.icon-bar4 a {
  float: left;
  text-align: center;
  width: 25%;
  padding: 10px 0px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #F0F0F0;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}


.icon-bar4-r a {
  float: left;
  text-align: center;
  width: 25%;
  padding: 10px 0;
  transition: all 0.3s ease;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #b8071b;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}

.icon-bar4-r a:hover {
  background-color: #4F4F4F;

}

.icon-bar5 a {
  float: left;
  text-align: center;
  width: 50%;
  padding: 10px 0px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #F0F0F0;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}

.icon-bar6 a {
  float: left;
  text-align: center;
  width: 50%;
  padding: 10px 0px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #F0F0F0;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}

.icon-bar6-rot a {
  float: left;
  text-align: center;
  width: 50%;
  padding: 10px 0px;
  transition: all 0.3s ease;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #b8071b;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}

.icon-bar6-1 a {
  float: left;
  text-align: center;
  width: 16.66%; /* 6 */
  padding: 10px 0;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #F0F0F0;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}


.icon-bar6-2 a {
  float: left;
  text-align: center;
  width: 16.66%; /* 6  */
  padding: 10px 0;
  transition: all 0.3s ease;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #F0F0F0;
  border: 1px solid #FFFFFF;
  border-radius: 7px;
}

.icon-bar2 a:hover, .icon-bar6-1 a:hover, .icon-bar6-2 a:hover {
  background-color: #000; /* hover color */
}

.active {
  background-color: #B8071B;
}


@media (min-width:801px){
.icon-bar2 .w3-bar-item{width: 50%;}
.icon-bar5 .w3-bar-item{width: 20%;}
.icon-bar6 .w3-bar-item{width: 16.66%;}
.icon-bar6-rot .w3-bar-item{width: 16.66%;}
.icon-bar6-1 .w3-bar-item{width: 16.66%;}
.icon-bar6-2 .w3-bar-item{width: 16.66%;}

}