html {
	background-image: linear-gradient(to top, #FFFFFF, #FFF5EE, #C1C9D6);
	background-size: cover;
	box-sizing: border-box;
   font-family: "verdana", "arial", sans-serif;
   
 
}
body{
	display: flex;
	align-items: center;
	justify-content: center;
}
img{
	width: 100%;
	height: auto;
	margin:0;
}
.page-wrapper{
margin: 0 auto;
border: solid 1px #FFFFFF;
height: auto;
width: 100%;  /***volle Display-Breite ***/
}
main{
	margin:auto;
	display:cover;
	border:none;
}
.article{
	margin:-1em 0 0 0;
	background:none;
}
footer{
	border: none;
	margin: 0;
	padding-bottom: 2em;
	height:2.2em;
	font-size:1rem;
	color:#FFFFFF;
	float:left;
	width:100%;
	background-color:#696969;}
/***Elementauszeichnungen Ende***/

/***Textauszeichnungen allgemein***/

h1 {
	color: #FFFFFF;
	font-weight:bold;
	background-color:none;
	text-align: center;
	padding:0.3em;
	}
h2 {
	font-weight:bold;
	color: #483D8B;
	text-align: left;
	padding:0 0 0 0.9em;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
	}
h3 {
	font-weight:bold;
	color: #483D8B;
	text-align: left;
	padding:0 0 0 1em ;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
	}
h4 {
	font-weight:bold;
	color: #483D8B;
	text-align: left;
	padding:0 0 0 1em;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;

	}

.text1 {
	font:normal 0.9rem/1 "Verdana", sans-serif;
	line-height:1.5em;
	padding:0 1.1em 0;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.text2 {
	font:normal 0.7rem/1 "Verdana", sans-serif;
	line-height:1.3em;
	padding:0 1.1em 0;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}

.text3 {

	padding-left:2.3em;
	padding-top:0.5em;
	padding-bottom:0;
	text-align:left;

}
.text4 {
	padding-right:2.3em;
	padding-top:0.5em;
	padding-bottom:0;
	text-align:right;

}

 a{
 	color: #9ACD32;
 	text-decoration:underline;
 }
 figcaption{
	text-align: center;
	color:#696969;}
@media screen and (min-width: 20em){
	figcaption{
	font-size:0.8rem;
	text-align: center;
	color:#696969;}
	}
	@media screen and (min-width: 40em){
		figcaption{
	font-size:1rem;
	text-align: center;
	color:#696969;}
			}
			
	@media screen and (min-width: 20em){
	data-fancybox  data-caption{
			font-size:0.5rem;}
			}
				
/*Textauszeichnungen Ende*/

/*Navigation Breakpoints*/

@media screen and (min-width:19.9375em){
		nav ul{
		display: flex;
		flex-wrap: wrap;
		flex-direction:row;
		}
			}
	@media screen and (min-width:40em){
		nav ul{
		flex-direction:row;
		}
}

@media screen and (min-width: 20em){
	nav li{
		font: normal 0.9rem/1.15 "Verdana", sans-serif;
		padding:0.8em 0.1em 1em 0.1em;}
		h1{font-size:1.2rem;}
		h2{font-size:1rem;}
		h3{font-size:0.9rem;}
		h4{font-size:0.8rem;}
		.text3{font:normal 0.7rem/1.1 "Verdana", sans-serif;}
					.text4{font:normal 0.7rem/1.1 "Verdana", sans-serif;}
		}
	
	@media screen and (min-width: 40em){
		nav li{
			font: normal 0.75rem/1.5 "Verdana", sans-serif;
				padding:0.8em 0.8em 1em 0.8em;}
				
			}
	@media screen and (min-width: 46em){
		nav li{
			font: normal 0.9rem/1.3 "Verdana", sans-serif;
				padding:0.8em 0.8em 1em 0.8em;}
					}

	@media screen and (min-width: 64em){
		nav li{
				font: normal 1rem/1.4 "Verdana", sans-serif;
					padding:1em 1em 1em 1em;}
					h1{font-size:1.6rem;}
					h2{font-size:1.1rem;}
					h3{font-size:1rem;}
					h4{font-size:0.9rem;}
					.text3{font:normal 0.9rem/1.3 "Verdana", sans-serif;}
					.text4{font:normal 0.9rem/1.3 "Verdana", sans-serif;}
			}

	@media screen and (min-width: 85em){
		nav li{
			font: normal 1.2rem/1.6 "Verdana", sans-serif;
				padding:1em 1em 1em 1em;}
					h1{font-size:2rem;}
					h2{font-size:1.4em;}
					h3{font-size:1.2rem;}
					h4{font-size:1rem;}
										.text1{font:normal 1rem/1.4 "Verdana", sans-serif;}
}

	@media screen and (min-width: 100em){
		nav li{
			font: normal 1.3rem/1.5 "Verdana", sans-serif;
				padding:1em 1em 1em 1em;}
						h1{font-size:2rem;}
						h2{font-size:1.5rem;}
						h3{font-size:1.3rem;}
					h4{font-size:1.1rem;}
											.text1{font:normal 1rem/1.5 "Verdana", sans-serif;}
}

/*Navigation Breakpoints Ende*/


/*Navigation allgemein*/
		


nav ul{

flex-direction:row;
	height: auto;
	list-style-type: none;
	padding: 0em;
	margin-top:0;
	}
nav li {
	flex:1;
	font: "verdana", sans-serif;
	padding:0.5em 0.5em 0.6em 0.5em;
	flex-basis: 2.5rem;
	text-align: center;
	color:#FFFFFF;
	background-color:#696969;
	border:solid 1px #FFFFFF;
}
nav li a{
	text-decoration: none;
	color: #FFFFFF;
	display:inline-block;
	text-align:center;
}
 nav li:focus, nav li a:focus{
	color: #696969;
	background-color:#FFFFFF;
}
 nav li:hover, nav li a:hover{
	color: #FFFFFF;
	background-color: #9ACD32;
}

 nav li:active, nav li a:active{
		color:#696969;
		background-color:#FFFFFF;
}
nav li:visited, nav li a:active{
		color:#696969;
		background-color:#FFFFFF;
}

/*Navigation allgemein Ende*/


/*Gestaltung: main-content 1.Seite*/
a[href^="#top"]::before {
	content: '\25b2';
	display:inline-block;
	float:right;
	font-size:1.5em;
	color:#696969;
}
	@media screen and (min-width:20em) and  (max-width:39.9375em){
	.flex-container{
	flex-direction:row;
	 }
	 }
	 @media screen and (min-width:40em){
	.flex-container {
		display:flex;
		flex-wrap:wrap;
		flex-direction: row;
}
	}

.flex-item{
	flex:1;
	flex-basis: 15rem;
	margin: 0.5em;
	flex-grow:1;
	border: 1px solid #FFFFFF;
	}
	
/*Ende: main-content 1.Seite*/

/*Gestaltung: 1. Seite Diashow*/
.gallery-wrapper{
	position: relative;
	height:0;
   padding-bottom:76%;
}
#gallery{
    width: 100%;
    height:auto;
  	margin:-1em 0 0 0 ;
	background: none;
}
#gallery figure{
	position: absolute;
	display: inline-block;
	height: 100%;
    width: 100%;
    margin:0 -0.2em;
    border: 1px solid #FFFFFF;
    top:0,
    left:0;
    z-index:1;
    opacity: 0;
}
#gallery figure last-of-type{
	position: relative;
}
#gallery figure figcaption{
	position: absolute;
	right: 1em;
	font-size: 1rem;
	bottom: 0.5em;
	z-index:2;
	color: #FFFFFF;
}
#gallery figure:nth-of-type(1) {
    animation: fade 25s ease-in-out infinite;
}

#gallery figure:nth-of-type(2) {
    animation: fade 25s 5s ease-in-out infinite;
}

#gallery figure:nth-of-type(3) {
    animation: fade 25s 10s ease-in-out infinite;
}

#gallery figure:nth-of-type(4) {
    animation: fade 25s 15s ease-in-out infinite;
}

#gallery figure:nth-of-type(5) {
    animation: fade 25s 20s ease-in-out infinite;
}

@keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}
/*1. Seite Diashow Ende*/


/*Seite 2, Grafik-Design*/


/*Seite 3, Aquarelle mit jQuery*/

.fancybox{
	margin: 0;
}

ul.fancybox-gallery {
	padding: 1em;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

ul.fancybox-gallery li {
	flex: 1 30%;
	padding: 1rem;
	line-height: 0;
}

ul.fancybox-gallery li a {
	display: block;
	border: 5px solid #FFFFFF;
	
}

ul.fancybox-gallery li a:hover,
ul.fancybox-gallery li a:focus {
	background-color: transparent;
	border-color: #9ACD32;
}

/*Ende Seite 4, Illustration und Zeichnung mit jQuery*/


/*Seite 5, Druckgrafik mit lightbox*/

/*Diese Anweisung gilt für alle Listenelemente ungeordneter Listen der Klasse lightbox: Alles, was innerhalb von Listenpunkten der Klasse lightbox steht, wird mit diesem Befehl auf 0 gesetzt;*/
.lightbox{
	margin: 0;
}
ul.lightbox-gallery {
	flex: 1;
	padding: 0em;
	margin:  0;
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;}

ul.lightbox-gallery li{
	flex: 1 60% 40%;
	padding: 1rem;
	line-height::  0;}
			
.lightbox li{
	overflow: hidden; /*scrollbalken ausschalten*/
	position: absolute; /*Absolute Positionierung*/
	width: 0;	/*Breite auf 0 */
	height: 0;	/*Höhe auf 0 */
	left: 0;	/*Position von Links 0 */
	top: 0;	/*Position von Oben 0 */
	opacity: 0;	/*Transparenz ausgeschaltet */
}

/*Durch die Pseudoklasse "target" (: target) am Listenpunkt li wird definiert, was passiert, wenn
man auf den Bereich klickt der von dem Listenpunkt umschlossen wird. Klickt man noch mal darauf, kommt diese Einstellung micht mehr zur Anwendung.*/
ul.lightbox li:target{
	width: 100%;
	height: 100%;
	opacity: 1;	/*Transparenz 100%*/
	background: rgba(0, 0, 0, 0.8);	/*Hintergrundfarbe und Transparenz 80%*/
	-moz-transition: opacity 1.5s;	/*Zeitdauer für firefox*/
	-o-transition: opacity 1.5s;	/*Zeitdauer für Opera*/
	-webkit-transition: opacity 1.5s;	/*Zeitdauer für Smartphone, tablet, google*/
}

ul.lightbox li:target a{
	position: absolute;
	display: block;
	width: 100%:
	height:100%;
	left: 10%;
	right:10%;
	-moz-box-shadow: 0 1px 5px #000000;	/*Schattenbox Mozilla*/
	-o-box-shadow: 0 1px 5px #000000;	/*Schattenbox für Opera*/
	-webkit-box-shadow: 0 1px 5px #000000;	/*Schattenbox für Smartphone, tablet, google*/
}
ul.lightbox-gallery li a:hover,
ul.lightbox-gallery li a:focus {
	background-color: transparent;
	border-color: #f8b255;
}

/*Seite 6, news*/

.flex-container2{
	overflow:auto;
	height:auto;
	padding:0;
	border: none;
}
.flex-item, .flex-item2{
	overflow:auto;
	padding: 0.5em 0.5em 1em 0.5em;
	border: none;
}
.flex-item1 img{
	width:48.5%;
	float:left;
	border: none;
}

.flex-item2 img{
	width:100%;
	float:left;
	border: none;
}

.box-inner{
	border: none;
		float:left;
		
}
@media screen and (min-width:50em){
	.flex-item1, .flex-item2 {
		float:left;
		margin-top:1em;
		margin-bottom:1em;
	}
.flex-item1 img{
		width:33%;
		float:left;
		margin:0;
	}
	.flex-item2 img{
		width:66%;
		float:left;
		margin:0;
	}
	.box-inner{
		width:32%;
		margin-left: 0.4em;
	}
}
/*Ende Seite 6, news*/


/*Seite 7, Kontakt*/
.section{
	overflow:auto;
	display:cover;
	margin:-1em 0 0 0;
	padding:1em;
	border:none;
}
.teaser-box{
	width:100%;
	height:auto;
	border:none;
}

@media screen and (min-width:20em){
	.teaser-box{
		overflow:auto;
		height:auto;
		border:none;
		display:column;
	}
.info{
		width:100%;
		float:left;
		border:none;
	}
	.teaser-box form{
		width:100%;
		float:left;
		
	}
	.teaser-box img{
		width:100%;
		border:none;
	}
}

@media screen and (min-width:48em){
	.teaser-box {
		float:left;
		
	}
	.info{
		width:30%;
		float:left;
		margin:0;
	}
	.teaser-box form{
		width:30%;
		float:left;
		margin:0;
	}
	.teaser-box img{
		width:67%;
		float:right;
		margin:0 0 0 0.5em;
	}
}
.abstand{
	padding-top:0.4em;
}

fieldset{
	background-color: none;
			border:none;
			padding-top: 1em;
			padding-left:1em;
			padding-right:1.5em;
			margin-top:-1em;}

#form1#nachricht {
}
#form1 {}
#form1 {}
#form1{
	border:none;
	margin:0;
	font:normal 0.8rem "Verdana", sans-serif;
	background-color: none;
}
	.formset label,
	.formset input,
	.formset textarea{
	width:100%;
	font:normal 0.9rem "Verdana", sans-serif;

}
	#form1 input, #form1 textarea{
	font:normal 0.9rem "Verdana", sans-serif;
}
	#form1 input:focus, #form1 textarea:focus {
	background-color: #DCDCDC;
}

.rechts1 {
	float:right;
	color:#FFFFFF;
	background-color: #696969;
	height: 2em;
	width: 5em;
	font:normal 1rem/1 "Verdana", sans-serif;
	margin-bottom:1em;
}
.rechts1:active{
	float:right;
	color:#FFFFFF;
	background-color: #9ACD32;
	}
		
		

.flex-item3, .flex-item4{
	margin: 0;
	border: none;
	}
.flex-item3{
	flex:2;
	border: none;
	}
.flex-item4{
flex:1;
}
		
		
/*Ende Seite 7, Kontakt*/

/*Ende Seite 8, Impressum*/

@media screen and (min-width: 20em){
		.text2{ font-size:0.75rem;}
	
	.teaser{
	margin:0.7em 1em 0.7em 1em;}
	
}
	@media screen and (min-width: 40em){
		.text2{font-size:0.8rem;}
			
	.teaser{
	margin:1em 3em 1em 3em;}
	 
}
	@media screen and (min-width: 85em){
		.text2{ font-size:1rem;}
			 
	 	.teaser{
	margin:3em 6em 3em 6em;}
	}