@charset "utf-8";
/* CSS Document */

.wrapper 		{	width: 1920px;
					margin: 0 auto;}

html *			{	max-width: 100%;}

body   			{ 	font-family: 'Open Sans Condensed', sans-serif;  
					font-size: 1em; 
					padding:0.5em 0.6em 2em 0.5em; 
					max-width:1280px; 
					margin:auto; }

header			{ 	font-size:1.2em; 
					font-size:2.2vmin; 
					letter-spacing:0.1em; 
					word-spacing:0.2em; 
					margin:0; 
					padding:0;
					text-align: center;}

#titel			{ 	width:99%; 
					height:auto; 
					border:1px dotted black; 
					padding:5px; 
					border-radius:10px; 
					margin:0; }

nav				{ 	padding:2em 0; 
					text-align:center; 
					font-family: 'Open Sans Condensed', sans-serif;
					font-size:1.95vmin; 
					text-transform:uppercase;}

nav ul			{ 	padding:0; 
					margin:0; 
					list-style: none; }

nav li 			{ 	list-style: none; 
					display: inline; 
					letter-spacing:0.1em; 
					word-spacing:0.3em;}

nav a 			{	color: #5c3927;
					text-decoration: none;
					font-weight: normal;
					padding: 0.1em 0.8em;
					border-right: 1px none #5c3927;
					transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
					border-radius: 2px;
					overflow: hidden;}

nav a:hover, nav a:focus 
				{	color: #5c3927;
					text-decoration: none;
					box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4);
					border-radius: 2px;}


nav a:not(:hover):not(:focus) 
				{	border-radius: 2px;
    				border-color: #5c3927;}


.navborder		{	border: 1px none #5c3927;
					border-radius: 8px;
					background-color: #CDCDCD;}	

a 				{	text-decoration: none;
					color: white;}

li:last-child a	{ 	border-right:none; }


section			{ 	font-size:1.1em; 
					color: #454545; 
					padding:30px; 
					margin:0; }

section ul  	{  	font-style:italic; 
					margin-left:10px; 
					border-left:1px dotted black; 
					margin-top:10px; 
					margin-bottom:10px; }

section li 		{	counter-increment: item;
					margin-bottom: 5px;
					list-style: none;
					color: #7B7B7B;}

section li:before {	margin-right: 10px;
					content: counter(item);
					border-radius: 5px;
					background: #00D394;
					color: #7B7B7B;
					width: 1.2em;
					text-align: center;
					display: inline-block;}

footer			{ 	margin:0; 
					padding:0; }

footer p		{	margin:0; 
					padding:0px; 
					padding-left:8px; 
					color: #615d70; }

footer ul		{ 	padding:0; 
					margin-top:2px; 
					list-style: none; }

footer li 		{ 	padding:0; 
					display: inline; 
					list-style: none; 
					color:#175f7a;  
					letter-spacing:2px; 
					word-spacing:8px; 
					font-size:1em;}

footer a		{ 	font-weight:normal; 
					padding:3px 10px; }

article, footer {	max-width:1920px;
					margin: 0 auto;}



h1, h2, h3, h5, h6, h7, h8, h9, span
				{ 	font-family: 'Open Sans Condensed', sans-serif; 
					font-weight:normal; 
					font-variant:small-caps; 
					letter-spacing:4px; 
					word-spacing:6px;
					text-align: center;
					color: #0E0E0E}

h1     			{ 	font-size: 180%; 
					font-size:5vmin; 
					text-align:center; 
					margin:0.4em;
					 }

h2     			{ 	font-size: 150%; 
					font-size:5.5vmin; 
					margin-bottom:20px;
					font-weight: bolder;}

h3     			{ 	font-size: 200%; 
					margin-top:30px; } 

h7 				{	font-size: 100%; 
					font-size:3.0vmin;
					font-variant:small-caps; 
					letter-spacing:2px; 
					word-spacing:6px;}	

/*-----------------------------------------------------*/

.impressum 		{	text-decoration: none;
					color: #0E0E0E;
					border: 2px solid #0E0E0E;
					border-radius: 10px;
					display: inline-block;
					vertical-align: middle;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);
					box-shadow: 0 0 1px rgba(0, 0, 0, 0);
					position: relative;
					-webkit-transition-property: color;
					transition-property: color;
					-webkit-transition-duration: 0.5s;
					transition-duration: 0.5s;
					transition: box-shadow 0.3s, border 0.3s ;}

.impressum:before {	content: "";
					position: absolute;
					z-index: -1;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
					-webkit-transform-origin: 0 50%;
					transform-origin: 0 50%;
					-webkit-transition-property: transform;
					transition-property: transform;
					-webkit-transition-duration: 0.5s;
					transition-duration: 0.5s;
					-webkit-transition-timing-function: ease-out;
					transition-timing-function: ease-out;
					border-radius: 10px;}

.impressum:hover, .impressum:focus, .impressum:active 
				{	color: #0E0E0E;
					box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
					border: 2px solid #DABE9C;
					border-radius: 10px;}

.impressum:hover:before, .impressum:focus:before, .impressum:active:before 
				{	-webkit-transform: scaleX(1);
					transform: scaleX(1);
					-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
					transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

.zurstartseite 	{	text-decoration: none;
					color: #5c3927;
					display: inline-block;
					vertical-align: middle;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);
					box-shadow: 0 0 1px rgba(0, 0, 0, 0);
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: transform;
					transition-property: transform;}

.zurstartseite:hover, .zurstartseite:focus, .zurstartseite:active 
				{	-webkit-transform: translateX(8px);
					transform: translateX(8px);}

.nachoben 		{	text-decoration: none;
					color: #5c3927;
					display: inline-block;
				  	vertical-align: middle;
				  	-webkit-transform: perspective(1px) translateZ(0);
				  	transform: perspective(1px) translateZ(0);
					position: relative;
					padding-top: 20px;}

.nachoben:before {	pointer-events: none;
				 	position: absolute;
				 	z-index: -1;
				 	content: '';
				  	border-style: solid;
				  	-webkit-transition-duration: 0.3s;
				  	transition-duration: 0.3s;
				  	-webkit-transition-property: transform;
				  	transition-property: transform;
				  	left: calc(50% - 10px);
				  	top: 0;
				  	border-width: 0 10px 10px 10px;
				  	border-color: transparent transparent #e1e1e1 transparent;}

.nachoben:hover:before, .nachoben:focus:before, .nachoben:active:before 
				{	-webkit-transform: translateY(-10px);
					transform: translateY(-10px);}

.lesetext1		{	font-size: 20px;
					margin-top: 50px;}

.lesetext3		{ 	font-size: 20px;
					margin: 10px 50px;}

.flexbox1		{	float: center;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding:20px 0px ;}

.flexbox1_1		{	
					padding:1px 16px;}

.flexelemente1	{	background-color: #EBDBC8;
					text-align: center;
					border: 0px solid black;
					border-radius: 10px;
					margin: 0px 10px;
					width: 800px;
					padding: 0px 0 0px 0;
					float: right;
					transition: transform 0.8s;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);
					box-shadow: 0 0 1px rgba(0, 0, 0, 0);
					overflow: hidden;
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: color, background-color;
					transition-property: color, background-color;
					box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}

.flexelemente1:hover, .flexelemente1:focus, .flexelemente1:active 
				{	background-color: #DABE9C;	
					color: black;}

.flexbox2		{	width: 900px;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content:space-around;
					padding-bottom: 20px;
					margin-bottom: 0px;}

.flexelemente2	{	width: 40%;}

.flexelemente3	{	width: 40%;}

.flexbox4		{	float: center;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding:20px 0px ;}

.flexbox4_1		{	
					padding:25px 16px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;}

.flexbox4_2		{	
					padding:5px 16px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;}

.flexbox4_3		{	
					padding:5px 16px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-radius: 10px;}

.flexbox4_3 h4 	{	font-size: 120%;
					text-align: center;
					font-weight: 100;}

.flexbox4_4		{	padding:5px 100px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-radius: 10px;}

.flexbox4_4 h4 	{	font-size: 120%;
					text-align: left;
					font-weight: 100;}

.flexelemente4	{	background-color: #EBDBC8;
					text-align: center;
					border: 0px solid black;
					border-radius: 4px;
					margin: 0px 10px;
					width: 80%;
					padding: 0px 0 0px 0;
					float: right;
					box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}

.flexelemente5	{	background-color: #EBDBC8;
					border-top: 2px solid #5c3927;
					border-bottom: 2px solid #5c3927;
					float: center;
					margin: 20px 50px 20px 50px;
					padding: 10px}

.flexelemente6	{	width: 600px;
					margin: 0px 20px 5px 20px;
					border-bottom: 5px solid #7B7B7B;}

.flexelemente6_2{	width: 100px;
					margin: 0px 20px 50px 20px;
					border-bottom: 5px solid #7B7B7B;}

.flexbox7, .flexbox7_2		
				{	margin-bottom: 25px;
					padding:25px 16px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;}

.flexbox7_2		{	border-top-left-radius: 15px;
					border-top-right-radius: 15px;
					margin-bottom: 0px;}

.flexbox7_3		{	margin-bottom: 50px;
					padding:5px 86px 1px ;
					background: #F5F5F5;
					text-align: center;
					border-bottom-left-radius: 15px;
					border-bottom-right-radius: 15px;}

.flexelemente7	{	color: #ffffff;
					text-align: center;
					width: 300px;
					padding-bottom: 30px;}

.flexelemente7 h2 {	color: #00D394;
					font-size: 2em;}

.flexelemente7 h3 {	font-size: 1.4em;
					margin: -30px 0px 5px 0px;
					padding: -40px;
					font-weight: bolder;}

.flexelemente7 p {	color: #454545;
					margin-top: 10px;
					font-size: 1em;}

.flexelemente8	{	text-align: left;
					margin: 0px;
					width: 400px;
					padding: 0px 0 0px 0;
					float: right;}

.flexelemente8 h2 {	color: #00D394;
					font-size: 2em;}

.flexbox9		{	padding:25px 16px 1px ;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					border-radius: 15px;}

.flexelemente9	{	color: #ffffff;
					text-align: center;
					margin: 10px;
					width: 300px;
					padding-bottom: 30px;}

.flexelemente9 h2 {	color: #00D394;
					font-size: 2em;}

.bildroestung	{	width: 96%;
					float: center;
					border-radius: 4px;}

.cover 			{	width:90%;
					-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
					-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
					box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
					height:auto; 
					border-radius:5px; 
					margin:0;
					display: inline-block;
					vertical-align: middle;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);;
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: transform;
					transition-property: transform;}

.cover:hover, .cover:focus, .cover:active 
				{	-webkit-transform: scale(1.1);
  					transform: scale(1.1);
					-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
					-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
					box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);}

.cover2			{	width:50%;
					height:auto; 
					border-radius:5px; 
					margin:0;
					display: inline-block;
					vertical-align: middle;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);;
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: transform;
					transition-property: transform;}

.cover2:hover, .cover2:focus, .cover2:active 
				{	-webkit-transform: scale(1.1);
  					transform: scale(1.1);}

.icon			{	width:5%;
					height:auto;
					padding:0px 10px 0px 0px;
					border-radius:5px;
					margin:0;
					display: inline-block;
					vertical-align: middle;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);;
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: transform;
					transition-property: transform;}

.icon:hover, .icon:focus, .icon:active 
				{	-webkit-transform: scale(1.1);
  					transform: scale(1.1);}

.zitatflex		{	width: 100%;
					margin-top: 5%;
					text-align: center;
					background: #F5F5F5;
					border-radius: 15px;
					float: left;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding-bottom: 20px;}

.zitataelemente1{	text-align: center;
					margin: 0px;
					width: 800px;
					padding: 0px 0 0px 0;
					float: right;}

.zitat			{	border:1px dotted #888;
					padding: 30px;
					border-radius: 15px;}

.zitatflex2		{	
					text-align: center;
					background: #F5F5F5;
					border-radius: 15px;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding-bottom: 20px;}

.zitataelemente2{	text-align: center;
					margin: 0px;
					width: 800px;
					padding: 30px;
					float: right;}

.zitat2			{	border:1px dotted #888;
					padding: 30px;
					border-radius: 15px;
					text-align: center;}

.zitat3			{	border:1px dotted #888;
					padding: 30px;
					border-radius: 15px;}

/*-----------------------------------------------------*/

form 			{	border: 0px solid black;
					border-radius: 4px;
					width: 90%;
					background-color: whitesmoke;
					margin: 0 auto;
					padding: 0px 20px 0px 20px ;}

form label 		{	display: block;
					font-size: 20px;
					color: darkslategrey;
					padding-left: 0px;}

input, textarea, select {	
					width: 100%;
					font-size: 20px; 
					padding: 4px;
					font-family: inherit;
					font-weight: lighter;
					border:2px solid #5c3927;
					border-radius: 0px;
					outline: none;}    

input:focus,
textarea:focus 	{ 	background-color: #E0E0E0;}

input[type=submit] {background-color: #BAFFC4;
					cursor: pointer;
					width: 14em;
					padding: .3em 0;
					border-radius: 4px;}

input[type=reset] {	background-color: #FFB7B8;
					cursor: pointer;
					width: 14em;
					padding: .3em 0;
					border-radius: 4px;}

.absenden, .abbrechen {	
					display: inline-block;
				  	vertical-align: middle;
				  	-webkit-transform: perspective(1px) translateZ(0);
				  	transform: perspective(1px) translateZ(0);
				  	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
				  	overflow: hidden;
				  	-webkit-transition-duration: 0.3s;
				  	transition-duration: 0.3s;
				  	-webkit-transition-property: color, background-color;
				  	transition-property: color, background-color;}

.absenden:hover, .absenden:focus, .absenden:active {
  					background-color: #76B736;
  					color: white;}

.abbrechen:hover, .abbrechen:focus, .abbrechen:active {
  					background-color: #E15D55;
  					color: white;}

.input-container {	position:relative;
					margin-bottom:60px;}

.input-container label {
					position:absolute;
					top:-10px;
					left:0px;
					font-size:16px;
					color:#5c3927;
					pointer-event:none;
					transition: all 0.5s ease-in-out;}

.input-container input { 
					border:0;
					border-bottom:2px solid #5c3927;
					background:transparent;
					width:100%;
					padding:8px 0 5px 0;
					color:#5c3927;}

.input-container input:focus { 
					border:none;	
					outline:none;
					border-bottom:2px solid #e74c3c;}

.input-container input:focus ~ label,
.input-container input:focus ~ label,
.input-container input:valid ~ label{
					top:-12px;
					font-size:12px;}

.buttonbox		{ 	background-color: #66A182;
					width: 80%;
					margin: 0 auto;
					border-radius: 4px;
					margin-top: 10px;}

.button 		{	line-height: 50px;
					height: 50px;
					text-align: center;
					cursor: pointer;}

.buttonmation 	{	color: #FFF;
					transition: all 0.5s;
					position: relative;}

.buttonmation::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					background-color: rgba(255,255,255,0.1);
					transition: all 0.3s;
					border-radius: 4px;}

.buttonmation:hover::before {
  					opacity: 0 ;
  					transform: scale(0.5,0.5);}

.buttonmation::after {	
					content: '';
  					position: absolute;
  					top: 0;
  					left: 0;
  					width: 100%;
  					height: 100%;
  					z-index: 1;
  					opacity: 0;
 					transition: all 0.3s;
 					border: 2px solid rgba(255,255,255,0.5);
  					transform: scale(1.2,1.2);
					border-radius: 4px;}

.buttonmation:hover::after {
  					opacity: 1;
  					transform: scale(1,1);}

.borderradius1	{	border-radius: 30px 30px 0px 0px;}

/*borderradius2 existiert nicht mehr*/

.borderradius3	{	border-bottom: 2px dotted #888;
					padding: 15px 0px 5px 0px;
					border-radius: 1px; }

.borderradius4	{	border-radius: 0px 0px 30px 30px;}

.scrollbutton 	{	position: fixed;
					bottom: 20px;
					right: 20px;
					display: none;
					z-index: 1000;
					transition: transform 0.8s;
					-webkit-transform: perspective(1px) translateZ(0);
					transform: perspective(1px) translateZ(0);
					box-shadow: 0 0 1px rgba(0, 0, 0, 0);
					overflow: hidden;
					-webkit-transition-duration: 0.3s;
					transition-duration: 0.3s;
					-webkit-transition-property: color, background-color;
					transition-property: color, background-color;}

.scrollbutton img {	width: 50px;
					height: 50px;
					cursor: pointer;}

.scrollbutton 	{	display: inline-block;
					background-color: #EBDBC8;
					color: #fff;
					text-decoration: none;
					padding: 5px 5px 0px 5px;
					border-radius: 5px;}

.scrollbutton:hover {
  					background-color: #DABE9C;}

/*-----------------------------------------------------*/

@media only screen and (max-width: 1280px) {
	header img 		{	height:170px; width:auto;}
	nav   			{	flex-basis: auto;}
	nav li 			{ 	word-spacing:0em;}
	.wrapper		{	width: 95%; margin: 0 auto;}
	.flexelemente7 h2 {	font-size: 1.5em;}
	.cover2			{	width:55%;}
	.flexelemente7 h3 {	font-size: 1em;}
}
	
@media only screen and (max-width: 900px) {
	header img 		{	height:150px; width:auto; }
	nav				{	text-align:center; 
						font-size:2.65vmin; }
	nav li 			{	display: block;  margin-bottom:1em; }
	nav a			{	color: #5c3927; text-decoration: none; font-weight:normal; padding:2px 20px; font-size:1.6em; border:0; width:300px; }
	.flexbox1		{	flex-direction:column;}
	.flexelemente1	{	margin-bottom: 20px;}
	.flexbox2		{	justify-content: column;}
	.flexelemente2	{	width:37%; height:auto; }
	.flexelemente3	{	width:37%; height:auto; }
	.flexelemente6	{	width: 600px; margin: 0px 20px 30px 20px; border-bottom: 3px solid #7B7B7B;}
	.flexelemente9	{	width: 300px; margin: 0px;}
	.flexbox4_4		{	padding:5px 30px 1px ;}
	.flexbox7		{	flex-direction: column; justify-content: flex-end;}
	.wrapper		{	width: 90%; margin: 0 auto;}
	.scrollbutton	{	bottom: 20px; right: 21px;}
	.lesetext1		{	font-size: 16px;}
	.scrollbutton	{	bottom: 15px; right: 15px; padding: 10px 10px 5px 10px;}
	.cover2			{	width:80%;}
	
	input[type=submit]{	width: 30%;}
	input[type=reset]{	width: 30%;}
	
	h1, h2, h3		{ 	letter-spacing:2px; word-spacing:4px; }
	h1     			{ 	font-size: 160%; font-size:5vmin; }
	.flexelemente7 h2 { font-size: 1.6em;}
	h3, h7, h9 		{ 	font-size: 110%; margin-top:30px; } 
	.flexbox4_3 h3 	{	font-size: 160%;}
	.flexbox4_3 h4 	{	font-size: 100%;}
	.flexbox7_3		{	margin-bottom: 50px;
						padding:5px 26px 1px ;}
}