/*nur wenn eine feste Breite angegeben ist, kann Inhalt mit margin:auto zentriert werden */
/*sonst mit Tabellen zentrieren: div-außen: display:table&margin:auto / div-innen: display:table-cell oder clear:both*/

@import url('https://fonts.googleapis.com/css?family=Vollkorn');

@font-face {
    font-family: 'ubuntu_load';
    src: url('fonts/ubuntu/ubuntu-light-webfont.woff2') format('woff2'),
         url('fonts/ubuntu/ubuntu-light-webfont.woff') format('woff');
    font-weight: 100;
}
@font-face {
    font-family: 'open_sans_load';
    src: url('fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
}

body  {	
		font-family: 'open_sans_load', 'open sans', 'helvetica', sans-serif;
		/*font-weight: 100;
		width: 1100px; /* 900 768 ... */
		margin: 0px auto 30px; 
		background-color: white; 
		color: #2B2B2B; /*#4D4C4C;*/
		}
.menu li,.menu_aufdraht li {
	font-family: 'ubuntu_load';
	font-weight: 100;
}

.news_date, h1, h2, h3, h4, h5 	{
	font-family: 'Vollkorn';
	font-weight: 100;
}
.menu li,.menu_aufdraht li {
	font-weight: 100;
}
.blocktitel {
	text-align: right;
}
header	{
		/*font-family: ubuntu,arial,sans-serif!important;*/
				}	
	nav {
		width: 900px;
		margin: 0 auto; 
		height: 150px;
		position: relative;
		}		
	#menubox {
		margin: 0;
		padding: 0;
		}	
	.menu, .menu_aufdraht {
		float:left;
		width: 19%;
		height: 150px;
		}	
	.menu_aufdraht {
		width: 24%;
		}
	.menu li, .menu_aufdraht li {
		text-transform: uppercase;
		letter-spacing: 0.1em; 
		font-size: 1.0rem;
		text-align: center;
		margin-top: /*50%;*/ 95px;
		position: relative;
		top: -1em;
		list-style: none;
		}	
	.menu_aufdraht li {
		font-size: 1.8em;
		text-transform: none;
		}
	.menu_aufdraht a{
		color:#3E3E3E;
		}	
	.aktiv  {
		background-color: #847EFF;
		}	
	.aktiv li {
		color: #F2F2F2; 
		}
	#menubox a {
		text-decoration: none; 
		}
	a {
		color: #29274f;/* #878585; leichtes grau*/
		/* text-decoration:none; */
		}		
	a:hover {
		text-decoration: none;
		/*color: #4D4C4C;
		 transition: color 1.0s;	*/
		}
	a:hover div 
	{ background-color: #C2BFFF; }
		
#linie {
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	}		
#linie h1 {
	margin: 10px;
	text-align: center;
	font-size: 0.9em;
	font-weight: 100;
	letter-spacing: 0.1em; 
	text-transform: lowercase; 
	}		

/* Inhaltsbereich */
main { 
	display: table;
	/*width: 100%;*/
	margin: 35px auto 0;
	 	}
	 .main_h2 {
		font-weight: 100; 
		text-align: center;
		font-size: 2em;
		margin-bottom: 0;
		}
.zeile {
	clear: both;
	/*margin: 0 5%;*/
		}	
	article { 	
		/*float: left;*/
		display: table-cell;
		padding: 10px;
		/*min-height: 180px;*/
		width: 550px;
		}
		/*article:hover {
			background: #f2f2f2;
			}*/
	.kasten{	
		font-size: 1em;
		max-width: 660px;		
		padding: 15px;
		margin: 0px auto 30px;
		border: 5px solid #847EFF /*leicht dunkleres blau: #B2B2DB; */
		}
		.aufdraht { 
			letter-spacing: 0.1em; 
			margin-right: 0.1em;
			}
		.galerietitel {
			cursor: zoom-in;				
			}
		.galerietitel img { 
			width: 100%; 
			border: 1px solid #aaa;
			}
		.galerietitel:hover { opacity: 0.8;}
		.galerietitel figure {
			margin: 0;}
		.galerietitel figcaption {
			font-size: 0.7em;
			text-align: center;}
		.link::before {
			content: "→";
			}
		.block {
				width: 70%;
				text-align: justify;
				/*border: solid #000;
				border-width: 3px 3px;*/}		
		.block h3 { 
			text-align: left; 
			margin: 0 0 0 10px; 
			/* font-weight: 100; */
			}
		.block ul {
			text-align: left;
			}
		.block p, blockquote {
			margin: 10px;
			}
			blockquote, .hervorheben {
			padding: 0 40px;
			position: relative;
			background: #E7E6FF;
			} 
				.hervorheben::before {
					color: #847eff;
					display: block;
					font-size: 2em;
					position: absolute;
					content: "∗";
					left: 10px;
					top: -5px;
					}
				blockquote::before, blockquote::after {
					color: #847EFF;
					display: block;
					font-size: 5em;
					position: absolute;
				}			 
				blockquote::before {
					content: "“";
					left: 0;
					top: -10px;
				}
				blockquote::after {
				  content: '”';
				  top: -10px;
				  right: 0;
				}
		/*.galerie figure {
			margin: 0 10px 0 0;
			}
		.galerie figcaption {
			margin: 10px; }
		.galerie { }	
		.galerie h3 {
			margin: 0 10px 0 10px;
			font-weight: 400;
			text-align: left;
			}	
		.galerie p {
			margin: 10px; }	*/
		/*.block img {
				width: 100%; }		*/
		.blocktitel {
				width: 29%;
				float: left; }
		.blocktitel h3 { 
				margin: 4px 0 0 auto; /*.15em */
				font-size: 1.5em;
				word-wrap: break-word;
				text-transform: lowercase; 
				}		
		.blocktitel .news_date {
				font-size: .9em; 
				margin-top: 10px;
				}
		.blocktitel .news {
				font-size: 1.3em;
				margin: 0;
				}
		.rb .block {		
				margin: 0 30%;
				border: none;
				border-left: 1px solid #aaa;}		

/* Checkbox-Hack, siehe media-anpassungen */
	#checkbox_hack1,#checkbox_hack2,#checkbox_hack3,#checkbox_hack4 {
		display: none;
		}
	#checkbox_hack1:checked + label > .block,#checkbox_hack2:checked + label > .block,#checkbox_hack3:checked + label > .block,#checkbox_hack4:checked + label > .block {
		width: 60%;
		margin: 0 40%;
		}	
	#checkbox_hack1:checked + label > .blocktitel,#checkbox_hack2:checked + label > .blocktitel,#checkbox_hack3:checked + label > .blocktitel,#checkbox_hack4:checked + label > .blocktitel {
		width: 37%;
		cursor: zoom-out;
		}	
/* Ende Checkbox-Hack */

/* Bilder-Galerie 
		#bild_kasten {
			display: table;
			margin: 0 auto;
			width: 70%; 
			}
		#bild_kasten figure {
			/*display: table-cell;*/ /*
			box-shadow: 0px 0px 0px 5px #ccc;
			margin: 0;
			}
		#bild_kasten figcaption {
			background-color: #ccc;
			color: white;
			}
		@-webkit-keyframes gross {
			from {opacity: 0;}
			to {opacity:1;}
		}
		@keyframes gross {
			from {opacity: 0;}
			to {opacity:1;}
		}
		.bild {
		  display: none;
		  /*width: 300px;
		  margin: 0 auto;*/ /*
		  }		
		 .bild img {
		 width: 100%;
		 }
		.bild:target {	  
			display: block;
		  -webkit-animation-name: gross;
		  -webkit-animation-duration: 1.5s;
		  animation-name: gross;
		  animation-duration:1.5s;
		}
Bilder-Galerie Ende */
				
/* Kontakt-Formular */
form {
  background-color: #eee;
  width: auto; /* Breite des Formulars */
  padding: 20px;
  margin: 10px;
  border: 1px solid #8c8c8c;
}
#kontaktformular label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: text; 
}
input#absender,
textarea {
  width: 98%;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  /* height: 7em;*/
}
input:focus,
textarea:focus {
  background-color: #d9d9d9;
}
/* Kontakt-Formular Ende */
				
/* Responsive Design */	
@media (min-width: 1499px) {
	article {
		width: 700px; 
		}
	}	
@media (max-width: 1279px) {
	article { width: 500px; }
	}
@media (max-width: 1024px) {
	/*Breite des Menüs*/ 
	.blocktitel {
		text-align: left;
		}	
	nav {
		max-width: 900px;
		width: 100% }
	article {
		display: block;
		/*float: none;*/
		width: 700px; 
		min-height: auto; 
		/* margin: 25px; */ }
	.rb .block {		
		margin: 0 20%;}
	.blocktitel {
		width: 17%; }
	.block {
		width: 80%; }	
	}	
@media (max-width: 767px) {
	#menubox {
		margin: 0 auto;
		}	
	.menu {
		margin-top: 80px;
		height: auto; 
		width: 25%; }
	.menu li {
		margin: 20px 0 30px;
		top: auto; }	
	.menu_aufdraht {
		width: 100%; 
		position: absolute;
		height: auto;
	}
	.menu_aufdraht li {
		margin: 1.6em 0 0.2em;
		top: 0;
	}	
	#inhalt { width: auto; }
	.kasten { margin: 0 10px 30px 10px; }
	article { width: auto; }
	.block { width: 70% }
	.rb .block { margin: 0 130px;}
	.blocktitel {width: 120px; }
	}	
@media (max-width: 599px) {
	form {
		margin: 0; 
		}
	.rb .text  {		
		margin: 0;
		border: none;
		width: 100%;}
	.text { 
		width: auto; }
	.text p {margin: 5px 0;}
	.text {
		width: 100%; }
	.rb .text { 
		float:none;
		/*margin-right: 10px;
		padding-right: 10px;
		border-right: 1px solid #aaa;*/}
	.text h3 { 
		margin:0;	
		}
	}
@media (max-width: 499px) {
	nav {height: auto; }
	#menubox { padding: 10px 0 0;}
	.menu {
		float: none; 
		width: 50%;
		margin: 0;
		height: auto; }
	.menu li {
		margin: 0 30px;
		text-align: left;
		padding: 10px 0;
		}
	.menu_aufdraht {
	top:0;
	right: 0;
	width: 50%;
	height: 100%;
	/*margin-right: 30px;
	text-align: right;
	word-wrap: break-word;*/}
	.menu_aufdraht li {
		
		}
	}
/* Für Galerie: */	
@media (max-width: 450px) {
	.rb .galerie  {		
		margin: 0;
		border: none;
		width: 100%;
		}
	.rb .galerietitel {
		width: 30%;
		float: left; 
		margin: 0 10px 10px 0;
		}
	#checkbox_hack1:checked + label > .galerietitel,#checkbox_hack2:checked + label > .galerietitel,#checkbox_hack3:checked + label > .galerietitel,#checkbox_hack4:checked + label > .galerietitel  {	
		width: 100%;
		float: none;
		}
	#checkbox_hack1:checked + label > .block,#checkbox_hack2:checked + label > .block,#checkbox_hack3:checked + label > .block,#checkbox_hack4:checked + label > .block {
		width: 100%;
		margin: 0;
		}	
	}
@media (max-width: 399px) {
	.menu_aufdraht li {
		font-size: 1.5em;}
	}
/*@media (max-width: 349px) {
	.menu_aufdraht h1 {
		font-size: 1.3em;}
	}	*/
@media (max-width: /*319px*/349px) {
	#menubox { padding: 40px 0 0px;}
	.menu { width: 100%; }
	.menu_aufdraht {
		right: auto;
		width: 100%;
		height: auto; 
		}
	.menu_aufdraht li {
		margin: 10px auto 5px 30px;
		text-align: left;
		}
	}


footer {border-top: 1px solid #aaa;	}
footer p {	
	margin-top: 10px;
	text-align: center;
	font-size: 0.9em;
	}