/* eigene, zusätzliche oder abgeänderte Formatierungen */

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

/* Silbentrennung */
body {
hyphens: auto;
}

/* close button im Menue */
.sticky {
  position: fixed;
  bottom: 12px;
  left: 340px;
  font-size: 50px;
  border: 1px solid #003080;
}

.sticky + .w3-sidebar {
  padding-top: 60px;
}

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

/* Terminliste mit Kalendergrafik */

#AnzeigeZeile {
position: relative;top:0px;left:0px;width:100%;min-height:130px;border-top:1px solid #BFBFBF;margin:0px;padding:0px;overflow:hidden;}
.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;}
.AnzeigeInfo {visibility: hidden;position:absolute;top:20px;left:140px;}
.AnzeigeText {position:absolute;top:20px;left:120px;padding:0px 5px 0px 0px;}
.AnzeigeText b {font-weight:bold;}
.AnzeigeText a:link, .AnzeigeText a:visited  {text-decoration:none;color:#0090E0;}
.AnzeigeText a:hover{color:#FF00FF;}


@media (min-width:600px){
  .AnzeigeInfo {visibility: visible;}
  .AnzeigeText {position:absolute;top:20px;left:280px;padding:0px 5px 0px 0px;}
}
/* Ende Terminliste mit Kalendergrafik */


h1.balken {background-color:#F5FAFA;width:100%;padding:4px 0px 4px 8px;margin-top:0;}
h2.drotfett {color: #A00618;}
h2.balken-r {background-color:#A00618;color:#FFFFFF;width:100%;padding:3px 0px 3px 12px;margin-top:0px;}
h2.balken-g {background-color:#EFEFEF;color:#000000;width:100%;padding:3px 0px 3px 12px;margin-top:0;}
h2.balken {background-color:#F5FAFA;width:100%;padding:3px 0px 3px 12px;margin-top:0;}
h3.balken {background-color:#F5FAFA;width:100%;padding:3px 0px 3px 12px;margin-top:0;}
h3.balken-w {background-color:#FFFFFF;width:100%;padding:3px 0px 3px 12px;margin-top:0;}
h3.balken-f {background-color:#F5FAFA;width:100%;padding:3px 0px 3px 12px;margin-top:0;font-weight:500;}
h4.balken-r {background-color:#A00618;color:#FFFFFF;width:100%;padding:3px 0px 3px 8px;margin-top:0px;}
h4.balken-b {background-color:#ddf8f5;color:#000000;width:100%;padding:3px 0px 3px 8px;margin-top:0px;}

.w3-90 {font-size:90%;}
.w3-80 {font-size:80%;}
.w3-w3w {font-size:70%;color:white;background-color:red;padding:1px;}


.pic100 {width:100%;height:auto;}
.pic50 {width:50%;height:auto;float:left;}

.w3-links {width:100%;height:auto;float:left;}
.w3-rechts {width:100%;height:auto;float:left;}

@media (min-width:801px){
.w3-links {width:45%;height:auto;float:left;}
.w3-rechts {width:55%;height:auto;float:left;}
}

@media (min-width:993px){
.w3-links {width:35%;height:auto;float:left;}
.w3-rechts {width:65%;height:auto;float:left;}
}

.w3-rechts img {border:1px solid #CFCFCF;padding:4px;}


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


/* ::::: Titelgraf Farbe zu Grau bei hoover ::::: */

.Titelgraf:hover {
filter: grayscale(100%);
}


/* ::::: 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, .w3-button.demo2 {
  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}

/* img Gallerie */

div.gallery {
  margin: 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 #777;
  /*filter: grayscale(100%);*/
}

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

div.imgTitel  {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin-bottom: 8px;
  text-align: center;
  color: #3F3F3F;
  background-color: #FFFFFF;
  font-size: 100%;
}

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

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

div.desc {
  margin-top: 8px;
  padding: 5px 0px 5px 0px;
  text-align: center;
  font-size: 100%;
}

.desc-black {
  margin: 8px 0px 2px 0px;
  padding: 5px 0px 5px 0px;
  text-align: center;
  font-size: 120%;
  border: 0px solid #2F2F2F;
  width: 100%;
}

.desc-black a {
  text-decoration: none;
}


.desc-black2 {
  margin: 8px 0px 2px 0px;
  padding: 5px 0px 5px 0px;
  text-align: center;
  font-size: 120%;
  border: 1px solid #2F2F2F;
  width: 100%;
}

.gallery .pic4 img {
  width: 50%;
  height: auto;
  border: 1px solid #FFFFFF;
  float:left;
}


/* Anfahrtsbeschreibung */

.zelle-01 {padding:0px; width:180px;float:left; display:block;}
.zelle-02 {padding:0px; width:80px; float:left;}
.zelle-01 img {margin-bottom:5px;}
.zelle-02 img {margin-bottom:5px;}
.zelle-03 {overflow:hidden;}


.anfahrt-01 {padding:0px;float:left; display:none;}
.anfahrt-02 {padding:0px;float:left; display:none;}

@media (min-width:380px){
.anfahrt-01 {width:150px; display:block;}
.anfahrt-01 img {margin-bottom:5px;width:130px;height:auto;}
}

@media (min-width:601px){
.anfahrt-01 {width:180px; display:block;}
.anfahrt-01 img {margin-bottom:5px;width:160px;height:auto;}

}


@media (min-width:801px){
.anfahrt-01 {width:200px; display:block;}
.anfahrt-01 img {margin-bottom:5px; width:180px; height:auto;}
.anfahrt-02 {display:block; width:80px; height:auto;}
.anfahrt-02 img {margin-bottom:5px; padding:0px; float:left; width:60px; height:auto;}
}


/* Links ohne */
a.ohne:link, a.ohne:visited {text-decoration:none;color:#000000;}
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;}

a.ohne-w:link, a.ohne-w:visited {text-decoration:none;color:#FFFFFF;}
a.ohne-w:hover {color:#00AFFF;}

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


/* 4 Bilder */
.pic4 {width: 100%;height: auto;padding: 4px 0;}
.pic4 img {width: 50%;height: auto;border: 1px solid #FFFFFF;float:left;}
.pic4 a:hover img {filter: grayscale(100%); /* border: 1px solid #000000;filter: saturate(8);*/}

/* Icons */
.w3-icon120 {float:left;margin:5px 15px 5px 0px;border:1px solid #000000;width:80px;height:80px;}
.w3-icon120-o {float:left;margin:5px 20px 5px 0px;border:none;width:120px;height:120px;}
.w3-icon120-c {margin:5px 0px 5px 0px;border:1px solid #000000;}
.w3-icon110 {float:left;margin:0px 20px 5px 0px;width:90px;height:90px;}
.w3-icon100 {float:left;margin:5px 10px 5px 0px;border:1px solid #000000;width:100px;height:100px;opacity:0.9999}
.w3-icon100:hover {filter:grayscale(100%)}


@media (min-width:768px){
.w3-icon120 {float:left;margin:5px 15px 25px 0px;border:1px solid #000000;width:90px;height:90px;}
.w3-icon110 {float:left;margin:0px 20px 5px 0px;width:100px;height:100px;}
.w3-icon-rad {float:left;margin:0px 20px 5px 0px;width:90px;height:90px;}
}

@media (min-width:992px){
.w3-icon120 {float:left;margin:5px 20px 25px 0px;border:1px solid #000000;width:100px;height:100px;}
.w3-icon110 {float:left;margin:0px 20px 5px 0px;width:110px;height:110px;}
.w3-icon-rad {float:left;margin:0px 20px 5px 0px;width:100px;height:100px;}
}


/* avatare */
.w3-icon90 {float:left;margin:0px 20px 5px 0px;width:70px;height:auto;}
.w3-icon-rad {float:left;margin:5px 20px 5px 0px;width:90px; height:90px}


@media (min-width:768px){
.w3-icon90 {margin:0px 25px 5px 0px;width:90px;height:auto;}
}


.w3-rad-knoten {float:left;margin:0px 20px 10px 10px;background-color:#FF0000; color:#FFFFFF;width:50px;height:50px;font-family:Arial;font-size:30px;border-radius:50%;text-align:center!important;line-height:170%;}

@media (min-width:768px){
.w3-rad-knoten {margin:0px 30px 10px 10px;background-color:#FF0000; color:#FFFFFF;width:80px;height:80px;font-family:Arial;font-size:50px;border-radius:50%;text-align:center!important;line-height:160%;}
}



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


.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)}
.w3-card-7{box-shadow:0px 0px 1px 0px rgba(0,0,0,0.16),0px 0px 0px 1px rgba(0,0,0,0.0);margin:3px;}
.w3-card-8{border:1px solid #8F8F8F;margin:4px 0px 0px 0px;background-color:#FAFAFA}

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



/* Start ICON-BARs */

.icon-bar2, .icon-bar4, .icon-bar4-r, .icon-bar4-w, .icon-bar5, .icon-bar5-w, .icon-bar6, .icon-bar6-w, .icon-bar6-rot, .icon-bar7, .icon-bar10, .icon10 {
  width: 100%;
  background-color: #FFFFFF;
  overflow: auto;
  text-align: center;
}

.icon-bar2 a, .icon-bar4 a, .icon-bar4-r a, .icon-bar5 a, .icon-bar6 a, .icon-bar6-rot a, .icon-bar7 a, .icon-bar10 a, .icon10 a {
  float: left;
  text-align: center;
  margin: 0px 5px 5px 0px;
  padding: 4px 0px;
  border: none;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icon-bar4-w a, .icon-bar5-w a, .icon-bar6-w a {
  float: left;
  text-align: center;
  margin: 0px 5px 5px 0px;
  padding: 4px 0px;
  border: 1px solid #c5caca;
  border-radius: 3px;
}

.icon-bar2 a {
  width: calc(100% - 5px);
  color: #353a3a;
  background-color: #f0f2f5;
}

.icon-bar4 a, .icon-bar5 a, .icon-bar6 a, .icon-bar7 a {
  width: calc(50% - 5px);
  color: #000000;
  background-color: #f0f2f5;
}

.icon-bar4-r a {
  width: calc(50% - 5px);
  color: #FFFFFF;
  background-color: #b8071b;
}

.icon-bar4-w a {
  width: calc(50% - 5px);
  color: #1F1F1F;
  text-decoration: none;
  background-color: #FFFFFF;
}

.icon-bar5-w a, .icon-bar6-w a {
  width: calc(50% - 5px);
  color: #000000;
  text-decoration: none;
  background-color: #FFFFFF;
}

.icon-bar6-rot a {
  width: calc(50% - 5px);
  color: #FFFFFF;
  background-color: #b8071b;
}

.icon-bar6 .butt-grau {
  color: #000000;
  background-color: #DFDFDF;
  border: 1px solid #FFFFFF;
}

.icon-bar10 a {
  width: calc(20% - 5px);
  color: #000000;
  background-color: #FFFFFF;
  border: 1px solid #AFAFAF;
}

.icon-bar2 a:hover, .icon-bar6 a:hover, .icon-bar6-2 a:hover, .icon-bar7 a:hover, .icon-bar10 a:hover {
  background-color: #1F1F1F;
  color: #FFFFFF;
  border: 0px solid #1F1F1F;
  }

.icon-bar4-w a:hover, .icon-bar5-w a:hover, .icon-bar6-w a:hover {
  background-color: #4F4F4F;
  border: 1px solid #4F4F4F;
  color: #FFFFFF;
}

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

.active {
  background-color: #B8071B;
}

@media (min-width:580px){
.icon-bar6 a {width: calc(50% - 5px);}
.icon-bar6-w a {width: calc(50% - 5px);}
.icon-bar6-1 a {width: calc(50% - 5px);}
.icon-bar6-2 a {width: calc(50% - 5px);}
}


@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-rot a {width: calc(33.3333% - 5px);}
.icon-bar7 a {width: calc(14.285% - 5px);}
.icon-bar10 a  {width: calc(20% - 5px);}
}

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

/* rubriken startseite ab 19-07-2023 */

.rubriken {
  float: left;
  width: calc(50% - 4px);
  padding: 3px 3px;
  margin: 0px 2px 3px 2px;
  transition: all 0.3s ease;
  color: #000000;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 0px solid #BF00FF;
  display: block;
}

.rubriken img {
  padding: 0px 0px;
  margin: 0px;
  width: 100%;
  max-width: 350px;
  height: auto;
  color: #000000;
  margin: 0px 0px 0px 0px;
  border: 1px solid #4F4F4F;
}

@media (min-width:650px){
.rubriken {width: calc(33.333% - 4px);}
.rubrik-aus {display: block;}
}

@media (min-width:751px){
.rubriken {width: calc(25% - 4px);}
.rubrik-aus {display: block;}
}

@media (min-width:901px){
.rubriken {width: calc(20% - 4px);}
.rubrik-aus {display: none;}
}


/* nach oben Pfeil Balken */

.up-leer:link, .up-leer:visited {
float: right;
color: #5F5F5F;
text-decoration: none;
cursor: pointer;
width: 60px;
height: auto;
padding: 4px 0px 4px 0px;
margin:  0;
text-align: center;
}

.up-leer:hover {
color: #FFFFFF;
background-color: #2F2F2F;
}

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


@media (max-width:768px){
.up:link, .up:visited {padding: 2px 0px 2px 0px; }
}

.up:hover {
color: #FFFFFF;
background-color: #2F2F2F;
}

h3 .up:link, h3 .up:visited {
padding: 4px 0px 4px 0px;
}

h4 .up:link, h4 .up:visited {
padding: 2px 0px 3px 0px;
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 {
width: 60px;
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;
}


/* Bild-Div Fotoseiten */

.BildDiv {
width: 100%;
float: left;
display: block;
padding: 0 8px;
margin: 0px 0px 10px 0px;
border: 0px solid #000000;
}

.BildDiv img {
width: 100%;
height: auto;
margin: 0px 0px 4px 0px;
border: 0px;
}

.Bild-Text {
display: block;
text-align: center;
width: 100%;
padding: 4px 0px;
margin: 0 0 12px 0;
color: #000000;
font-size: 90%;
font-weight: 500;
}

@media (min-width:580px){
.Bild-Text{font-size: 90%;}
.BildDiv{width:50%}
}


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


/* Ende Bild-Div */

.FotoSlide {display: block;}
.FotoAnzeige{display: none;}

@media (min-width:580px){
.FotoSlide {display: none;}
.FotoAnzeige{display: block;}
}

/* Foto-Galerie Slide */

.w3-foto-container {
margin: 0 16px 8px 16px;
padding: 8px 0 0px 0;
text-align: center!important;
background-color:#FFFFFF;
}

h3x.balken-transp {background-color:#f3f7f7;width:100%;padding:3px 0px 3px 12px;margin:0 0 8px 0;}

h3.balken-transp {background-color:#b8071b;color:#FFFFFF;width:100%;padding:5px 0px 5px 12px;margin:0 0 8px 0;}

@media (min-width:580px){
.w3-foto-container {padding: 16px 0 32px 0;background-image: url("grafiken/bg-grau-blau.jpg");}
}

.w3-foto-box {
max-width: 500px;
position: relative;
border: 0px solid #AFAFAF;
}

.w3-foto-box img {
width: 100%;
height: auto;
}

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

/* Ende Foto-Galerie Slide */