@charset "utf-8";  /*** UTF Kodierung erspart Sonderzeichenkodierung ***/

html { height: 101%; }

body { 
height: 100%; 
margin: 0; padding:0;
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
background: #f4e9d3;
}


img {
border: none;
width: auto;
max-width: 100%; }


/**** link im text ****/

a, a:visited {
color: #990000;
text-decoration: none;
}

a:hover {
color:#cc0000;
text-decoration: underline;
}

a:active, a:focus { 
outline: 0; 
}

/********/


#wrapper {
position:relative; 
margin-right: auto; 
margin-left: auto;
width: 100%; 
max-width: 980px; 
}

.header {
position:relative; 
min-height: 200px;
width: 100%;
max-width: 980px;
text-align: center;
}

.headin {
position:relative; 
margin: -60px 0 0 0;
padding: 70px 0 20px 0;
width: 100%;
max-width: 980px;
background: #fdf9ed;
-webkit-box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
-moz-box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
}

.logotop{   
position:relative;       /**** Logo big ****/
margin: 10px 0 0 0;
padding: 0;
z-index: 999;
}

.logomobil {          /**** Logo mini ****/
display: none;
text-align: left;
width: auto;
}

.name {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.7em; color: #6b6863; padding-bottom: 5px;}
.subtitle {font-size: 0.75em; color: #6b6863; font-weight: normal;text-transform: uppercase; padding-bottom: 20px; letter-spacing: 0.05em;}

.content {
position:relative;
width: 100%;
max-width: 980px;
background: #faf7f0;
-webkit-box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
-moz-box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
box-shadow: 3px 3px 4px 0px rgba(181,181,181,1);
}

.inhalt {
width: auto;
height: auto;
min-height: 450px;
background: #fff;
max-width: 75%; 
}

.sidebar {
float: right;
width: 25%;
height: auto;
min-height: 450px;
}

/** Hamburger-Icon wird in Großansicht ausgeblendet **/
   label.open-menu-label {display: none;}
   input#open-menu {display: none;}
   input[type=checkbox]:checked ~ nav {display: none;}


.menu {
float: left;
display: block;
padding: 25px;
margin: 0;
}

nav {float: none;}

nav ul { float: right; list-style: none; margin:0; padding:0; border-bottom: 2px solid #fff;}
nav > ul > li { float: left; width: 100%; text-transform: uppercase;}

nav > ul a, nav > ul a:visited  {
    display: block;
    margin: 0;
	padding: 8px 2px;
    color: #000;
	font-size: 0.8em;
	letter-spacing: 0.09em;
    text-decoration: none;
	border-bottom: 1px solid #ccc;
	border-top: 2px solid #fff;
}

nav > ul a:hover {
    color: red;
	text-decoration: none;
	-webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
	background: #fff;
}
nav > ul a.active {
    display: block;
	margin: 0;
	color: red;
    padding: 8px 2px; 
	font-size: 0.85em;
	font-weight: normal;
    text-decoration: none;
}
nav > ul a.active:hover {
	font-weight: normal;
    text-decoration: none;
}


/*******************************************************/

.feature {padding: 30px 40px 20px 60px;}
 
h1 {
font-size: 0.7em; 
padding: 0 0 0 0; 
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #9a906a; 
}
 
h2 {
padding: 0;
margin: 25px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.1em;
font-weight: normal;
color: #000;
text-transform: none;
}

h3 {
margin: 30px 0 0 0;
font-size: 1em;
color: #877c50;
font-weight: bold;
}

.feature ul { 
font-size: 0.85em; line-height: 1.6em; margin-left: 10px; }

.feature li { padding: 5px; list-style-type: square;}

hr { width: 100%; height: 1px; margin:0; padding: 0; border-top: 1px solid #afafaf; 
border-right-style: none; border-right-width: 0; border-bottom-style: none; border-bottom-width: 0; border-left-style: none; border-left-width: 0;}
	 
 p { 
 font-size: 0.85em;
 line-height: 1.6em; 
padding-bottom: 20px; 
 }
 
 em {font-style: italic; font-size: 0.8em; color: #666; font-family: Georgia, serif; }
 
 .rot {color: red;}
 
 .zitat { padding: 25px;}
   
.clear {clear: both; display: block; width: 100%}

	.alignleft { float: left; margin: 0 10px 20px 0; }
	.alignright { float: right; margin: 5px 0 15px 20px;}
	.aligncenter { margin-bottom: 20px; }

	.footer { min-height: 2em; background: #faf7f0; }
	.footer p { font-size: 0.8em; text-align: center; padding: 50px 0 30px 0; }
	.footer a, .footer a:visited {text-decoration: underline; }
	.footer a:hover {text-decoration: none; }
	
	
	
	
/***************** Mobile Layout ************************/	

@media only screen and (min-width: 769px) and (max-width: 980px) {

.sidebar {width: 28%; min-height: auto;}
.inhalt {min-height: auto; max-width: 72%;}
.feature {padding: 20px;}
}

	
	
@media only screen and (min-width: 240px) and (max-width: 768px) {

body {width: 100%; min-width: 240px; padding: 0 0 60px 0;}
img {width: auto; max-width: 100%;}

.header {min-height: 180px;}

.logotop {max-width: 130px;}
.logomobil {display: none;}
.name {font-size: 1.3em;}
.subtitle {font-size: 0.65em; letter-spacing: 0;}

.sidebar {float: none; width: 100%; min-height: auto;}
.zitat {display: none;}
.inhalt {min-height: auto; max-width: 100%;}

.menu {float: right; margin: -180px 0 0 0; padding: 10px; width: auto; min-height: auto; border: none;}
input#open-menu {display: none;}
input[type=checkbox]:checked ~ nav {display: block; cursor: pointer;}

label.open-menu-label {position: relative; float: right; display: block; margin: 0; cursor: pointer;}
nav {display: none; position: absolute; margin: 42px 0 0 -180px; font-size: 1em;  
	  background: #2e3d42; cursor: pointer; z-index:999; transition: all 0.3s ease-in-out;}

nav ul { width: 100%; min-width: 296px;}
nav ul li { float: none; display: block; margin:0;}
nav ul a { display: block; padding: 12px 0 12px 40px; color: #fff !important;} 
nav ul a.hover { transition: all 0.5s ease-in; background: #900;} 
nav ul a.active { display: block; padding: 12px 0 13px 40px; color: #fff; background: #900;} 

.feature {padding: 10px; }
h1  {font-size: 0.65em;}
h2  {font-size: 1.6em;}
.feature ul {margin-left: 15px; padding-left: 0;}

.alignleft, .alignright {float: none; padding: 0;}
.footer {padding: 10px; line-height: 2em; font-size: 1em;}
}