/* Beginn style sheet VFG New Design */
/* Kommentar CSS */
body 		{
/*		background-color: blue;  */
		font-size: 12pt;
		max-width:900px; 
		text-align:center;
		margin-left:auto ;
		margin-right:auto;
		line-height: 115%;
		font-family: "Andika";
		background-color: #73bc70; 
/*		background-image: repeating-linear-gradient(150deg,  #E6F8E0 0px, #E6F8E0 8px, 				lightgrey 8px, lightgrey 16px); */
/* background-image: url("bilder/gemuesemuster.jpg"); */
		height: auto;
            	background-attachment: fixed;
           	background-size: cover;
 		}

header, nav, article, footer {           
		text-align: left;     /*    Seiteninhalt wieder links ausrichten */
    		padding: 0;
  		background-color: #E6F8E0;	
/*		background-color: #ffffff;   */
		margin-left: 6%;     
  		margin-right: 6%;   
		max-width: 1000px;
		overflow: hidden;
		}

header		{
		margin-bottom: -4px;
		border-radius: 7px  7px  0  0;
		}

article		{ 
 	 	padding-left: 6%;
		padding-right: 6%;  
/*		border: 1px solid red;		*/
		border-radius: 0  0 0 0; 
		}

footer		{ 
	 	padding-left: 0px;
		padding-right: 0px;
		border-radius: 0  0 7px 7px; 
		font-size : 80%;
		}
* 		{
    		box-sizing: border-box;
		}

/* hr 		{
     		height: 1px;   
    		width: 100%;
    		color: green;
		border: none;
		background-color: green;
		margin-top: 0;
		margin-bottom: 0;
		clear: both;
		} */

hr 		{
     		width: 100%;
    		color: green;
		border: none;
		border-top: 1px solid green;
		margin-top: 0;
		margin-bottom: 0;
		clear: both;
		} 

h1 		{
		font-weight : bold;
		font-size : 170%;
		line-height: 115%;
		color : green;
		letter-spacing: 15px;
		}

h2 		{
		font-weight : bold;
		font-size : 125%;
		line-height: 115%;
		letter-spacing: 8px;		
		color : green;
		}

h3 		{
		font-weight : bold;
		font-size : 110%;
		color : green;
		}

em		{
		font-weight : bold;
		}

img.centertext	{
		width:90%;
		height:90%;
		margin-top: 15px;
		margin-bottom: 15px; 
		display: block;
 		margin-left: auto;
  		margin-right: auto;
		border-radius: 4px;
  		} 

/* Erscheinungsbild Bilder im Text **************************************************/
#bildrechts2, #bildlinks2 {
    		width: 40%;
    		height: auto;
		}
#bildrechts	{
		float: right; 
		margin-top: 15px; 
		margin-left: 15px; 
		margin-bottom: 15px; 
/*		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);    */
		border-radius: 4px;
		}
#bildlinks	{
		float: left; 
		margin-top: 15px; 
		margin-right: 30px; 
		margin-bottom: 15px; 
/*		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);     */
		border-radius: 4px;
		}

/* Erscheinungsbild Bilder im Text Version 2 ******************************/
#bildrechts2	{
		float: right; 
		margin-top: 15px;
		margin-left: 15px; 
		margin-bottom: 15px;
/*		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   */
		border-radius: 4px;
		}

#bildlinks2	{
		float: left; 
		margin-top: 15px;
		margin-right: 15px; 
		margin-bottom: 15px; 
/*		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   */
		border-radius: 4px;
		}

/* Anpassungen auf Bildschirmgrössen ************************************************* */
/* Schriftgrössen */
@media only screen and (max-width: 767px) {
  	h1 	{
		letter-spacing: 0;}
  	h2 	{
		font-size : 100%;
		letter-spacing: 0; 
		}
	article	{ 
	 	padding-left: 30px;
		padding-right: 30px;
		font-size: 90%;
		}
		}

/* Anordnung Bilder */

@media only screen and (max-width: 767px) {
 	#bildrechts2,
	#bildlinks2	{
		margin-top: 15px;
 		margin-left: auto;    
  		margin-right: auto;  
 		margin-bottom: 15px;
		border-radius: 4px;
	 	display: block;  
		float: none;
		width: 95%;
 		height: auto;
 /* 		border: 3px solid;  nur zu Testzwecken */
		}  
		}


/* Erscheinungsbild Info-Tabellen **************************************************/

#tableinfo 	{
		border-width: 1px;		
		border-color: blue;
		border-collapse: collapse;
		empty-cells: hide;
		margin: 10px 0px 10px 0px;
		display: block;
    		overflow-x: auto;
   		white-space: nowrap;
		}

#tableinfo th 	{
		border-width: 1px;
		padding: 3px;
		border-style: solid;
		border-color: blue;
		}

#tableinfo td 	{
		border-width: 1px;
		padding: 3px;
		border-style: solid;
		border-color: blue;
		} 


/* Erscheinungsbild Tabelle Formular **************************************************/
/* Stile für Desktop-Bildschirme */
#tableforms 	{
    		width: 100%;
    		border-collapse: collapse;
  		}

#tableforms td 	{
		text-align: right;
    		padding: 8px;
  		}
/* Stile für kleinere Bildschirme */
@media screen and (max-width: 767px) {
#tableforms	{
      		display: block;
    		}
#tableforms td 	{
		text-align: left;
      		display: block;
      		width: 100%;
    		}
  		}


/* Erscheinungsbild kleine Bilder  *************************/
.imgq 		{
    		/* margin: 10px; */
		margin-right: 15px; 
		margin-bottom: 15px; 
		margin-top: 5px;
/*    		border: 1px solid blue; */
/*		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);  */
    		float: left;
		width: 200px; 
		border-radius: 4px; 
		line-height: 80%;
		background-color: white;
		}

.imgq:hover 	{
    		border: 1px solid red;
		}

.imgq img 	{
    		width: 100%;
    		height: auto;
		/* border: 1px solid blue; */
		}
.imgh 	{
    		/* margin: 10px; */
		margin-right: 15px; 
		margin-bottom: 15px; 
		margin-top: 5px;
/*		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);  */
  /*  		border: 1px solid blue; */
    		float: left;
		width: 150px; 
		line-height: 80%;
		background-color: white;
		}

.imgh:hover 	{
    		border: 1px solid red;
		}

.imgh img 	{
    		width: 100%;
    		height: auto;
		/* border: 1px solid blue; */
		}
/* Beschriftung kleine Fotos */
.desc 		{
    		padding: 3px;
    		text-align: center;
    		font-size: 0.7em;
		}
/* 
.show 		{
		display:block;
		}

clear 		{
    		clear: both;
		}
						*/

/* Erscheinungsbild Navigation **************************************************/
.topnav 	{
  		overflow: hidden;
  		background-color: green;
		}

.topnav a 	{
  		float: left;
  		display: block;
 		color: #f2f2f2;
  		text-align: center;
  		padding: 4px 6px;
  		text-decoration: none;
  		font-size: 14px;
		}

.topnav a:hover {
 		background-color: lightgreen;
  		color: black;
		}

.topnav a.active {
  		background-color: #04AA6D;
  		color: white;
		}

.topnav .icon 	{
  		display: none;
		}

@media only screen and (max-width: 767px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    		float: right;
   		display: block;
  		}
		}

@media only screen and (max-width: 767px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    		position: absolute;
    		right: 0;
    		top: 0;
  		}
  .topnav.responsive a {
    		float: none;
    		display: block;
    		text-align: left;
  		}
		}

.fade {
  -webkit-mask:
    linear-gradient(to right,
      transparent,
      black 20px,
      black calc(100% - 20px),
      transparent),

    linear-gradient(to bottom,
      transparent,
      black 20px,
      black calc(100% - 20px),
      transparent);

  -webkit-mask-composite: source-in;

  mask:
    linear-gradient(to right,
      transparent,
      black 20px,
      black calc(100% - 20px),
      transparent),

    linear-gradient(to bottom,
      transparent,
      black 20px,
      black calc(100% - 20px),
      transparent);

  mask-composite: intersect;
}


/* Ende style sheet VFG */