
/*
In der externen Datei "w3-standard.css" stehen alle Möglichen Anweisungen, die nicht ausschließlich für diese Vorlage notwendig sind.

CSS-Angaben für eigene, zusätzliche oder abgeänderte Formatierungen hab ich in dieser zweiten Datei "w3-verein-02.css" abgelegt. Da diese 2. CSS-Datei nach der "w3-standard.css"</p> geladen wird, kann ich damit auch Anweisungen aus der ersten aufheben / überordnen und ergänzen. So habe ich hier z.B. die CSS-Angaben für die Terminliste notiert.

*/

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


h2 .drotfett {color: #A00618;font-weight:bold;}



/*  ::::::: 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.6;
  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 */
/* CSS für 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}


/* :::::::::::::::::::::::::::::: */
/* Terminliste mit Kalendergrafik font-size:18px;*/

.AnzeigeZeile {
position: relative;top:0px;left:10px;width:100%;min-height:130px;border-top:1px solid #BFBFBF;margin:0px;padding:0px;overflow:hidden;}
.AnzeigeInfo {position:absolute;top:24px;left:140px;}
.AnzeigeText {position:absolute;top:24px;left:280px;padding:0px 5px 0px 0px;}
.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;}

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

@media (max-width:768px){

.AnzeigeInfo {position:absolute;top:24px;left:110px;}
.AnzeigeText {position:absolute;top:24px;left:200px;padding:0px 5px 0px 0px;}


}




/* Ende Terminliste mit Kalendergrafik */


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

/* Icon 120 */
.w3-icon120 {float:left;margin:5px 20px 5px 0px;border:1px solid #000000}


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




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