/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/
* {
    padding:0;
    margin:0;	
}

body, html{
    position:relative;
	font-family: Verdana, Arial, sans-serif;
	font-size: 20px;
	box-sizing: border-box;	
	background-color: #FAFAFA;
	
}

body {
/*	background-color: green;	*/
	background-color: #848484;
}

#hintergrund {
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index: -1;
	opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

#page-container {
	position: relative;
	min-height: 100vh;
	background-color: #FAFAFA;    
}

#content-wrap {
	padding-bottom: 4.2rem;    /* Footer height */
}
/******************************************************/
/* Top-wrapper ****************************************/     
/******************************************************/
#top-wrapper {	
	width: 60%;
	margin: 0 auto;	
	background-color: #FAFAFA; 
	text-align: right;
}

#top-wrapper a {
	border-right: 1em hsl(0, 100%, 30%);
	color: #9C2626; 
	text-decoration: none;
	padding: 0.25em;
}
/******************************************************/
/* logo above photo ***********************************/     
/******************************************************/  
.logo-above-photo_01, .logo-above-photo_02, .logo {
	display: none;
}

.logo-above-photo_01 img {
	display: none;
}
/******************************************************/
/* photo with logo ***********************************/     
/******************************************************/
.photo-with-logo {
	width: 100%;
    position: relative;
}

.photo-with-logo img {
	vertical-align: bottom;
}

.photo-with-logo span {
    background-color: hsla(0, 0%, 100%, 0.75);
    position: absolute;
	top: 20%;
    width: 100%;
    line-height: 1.5em;
	opacity: 0.98;
	display: block;
}

.photo-with-logo span img {
	float: right;
	text-align: right;
	margin-right: 2%;
	margin-top: 0.5%;
}


.photo-with-logo span h2 {
	margin-top: 0.25em;
	margin-right: 5%;	
}

.photo-with-logo span p{
	margin-right: 5%;
	margin-bottom: 0.25em;
}
/******************************************************/
/* header *********************************************/     
/******************************************************/
#header-wrapper {
	width: 60%;
	margin: 0 auto;	
	text-align: center;	
	display: block;
}

#header {
	width: 100%;
	position: relative;
	border-bottom: 6px solid hsl(0, 100%, 30%);  		
}
/******************************************************/
/* Horizontal navigation ******************************/     
/******************************************************/
#vertnav {
	display: none;
}

#levnav {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	padding: 0;
	text-align: center;	
	border: 0;
	opacity: 0.8;	
	z-index: 1000;
	display: inline;	
}

#levnav ul,
#levnav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#levnav ul {
	position: relative;
	z-index: 597;
}

#levnav ul li {
	float: left;
	min-height: 1px;
	vertical-align: middle;
}

#levnav ul li.hover,
#levnav ul li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}

#levnav ul ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: 100%;
}

#levnav ul ul li {
	float: none;
}

#levnav ul ul ul {
	top: 0;
	left: auto;
	right: -99.5%;
}

#levnav ul li:hover>ul {
	visibility: visible;
}

#levnav ul ul {
	bottom: 0;
	left: 0;
}

#levnav ul ul {
	margin-top: 0;
}

#levnav ul ul li {
	font-weight: normal;
}

#levnav a {
	display: block;
	line-height: 1em;
	text-decoration: none;
}

/*Menu-Styling*/

#levnav {
	margin: 0 auto;
	background-color: #E6E6E6;
}

#levnav>ul {
	*display: inline-block;
}

#levnav:after,
#levnav ul:after {
	content: '';
	display: block;
	clear: both;
}

#levnav a {
	background-color: #E6E6E6;  	
	color: #CBCBCB;
	color: #000;
	color: #2E2E2E;
	padding: 0 20px;
}

#levnav ul {
	text-transform: uppercase;
}

#levnav ul ul {
	border-top: 4px solid #1b9bff;
	text-transform: none;
	min-width: 190px;
}

#levnav ul ul a {
	background: #1b9bff;
	color: #FFF;
	border: 1px solid #0082e7;
	border-top: 0 none;
	line-height: 150%;
	padding: 16px 20px;
}

/*Menu-Höhe und hover*/

#levnav>ul>li>a {/*kann ggf. durch margin ersetzt werden*/
	line-height: 48px; 
	line-height: 2em; 		
}

#levnav ul ul li:hover> a {
	background: #35a6ff;  
/* 	background-color: green; */
}

/*Final*/

/*#levnav ul li:hover> a,*/
#levnav ul li.active> a { /*Fixiert die Farbe auf Home*/
	background-color: hsl(0, 100%, 30%);		
/*	background-color:  #646464;*/		
	color: #FFF;
}

#levnav ul li:hover> a {
	background-color: hsl(0, 20%, 60%);		
	background-color:  #999999;
	color: #FFF;
}

#levnav ul li.has-sub a:after {
  content: '+';
  margin-left: 5px;
}

#levnav ul li.last ul {
	left: auto;
	right: 0;
}

#levnav ul li.last ul ul {
	left: auto;
	right: 99.5%;
}
/******************************************************/
/* Main-wrapper ***************************************/     
/******************************************************/
#main-wrapper {
	min-height: 100%;
	position: relative;
	width: 60%;
	margin: 0 auto;	
	overflow-y: scroll;
	height: 100%;	
	background-color: #FAFAFA;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#main-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#main-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#main {
    background-color: red;
	background-color: #FAFAFA;
	
    width:100%;
	margin: 0 auto;
	padding: 30px;
    box-sizing:border-box;
    padding:10px;
	height: 100%;
	
	float: left;
}
/******************************************************/
/* Main left side porträt *****************************/     
/******************************************************/
#left{
    width: 30%;
    float: left;
    background: #bbb;
	background-color: #FAFAFA;
 /*   height: 100%;*/
}

#sideabout {	
	width: 95%;
	margin: 0.5em;	
}

#bottomabout {
	display: none;
}

#sideabout p, #bottomabout p {
	font-size: 0.75em;
	margin-right: 2%;
	text-align: left;
}

.post-photo-porträt {
	width: 100%;
}

.post-photo-captcha {
	width: 16%;	
}
/******************************************************/
/* Main left side sidenav *****************************/     
/******************************************************/
#sidenav {
	margin: 2.5% 1.5% 0% 4%;
	box-sizing: inherit;
}

#sidenav a {
	text-decoration: none;
	font-size: 1em;  
	color: hsl(0, 100%, 30%);
	display: block;
	padding: 0.25em;
}

#sidenav ul,
#sidenav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidenav a:hover {
	color: #064579;	
	background-color: hsl(0, 20%, 60%);
	color: #fff;
}

#sidenav .active { /*Fixiert die Farbe auf Home*/
	background-color: hsl(0, 100%, 30%);
	color: #FFF;
}
/******************************************************/
/* Main right side *************************************/     
/******************************************************/
#right{
    width: 70%;
	float: left;
    background: #aaa;
	background-color: #FAFAFA;
}

#content {
	margin: 0.5em;
	background-color: #FAFAFA;		
	box-sizing: inherit;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
/******************************************************/
/* Fields  ********************************************/     
/******************************************************/
h2 {
	color:	hsl(0, 100%, 30%);
}

h1 {
	color:	hsl(0, 100%, 30%);
	text-align: right;
	padding: 0em 0.5em;
}

#content ul {
	padding-left: 2em;
}

.link li, a { 
	color: hsl(0, 100%, 30%);
	text-decoration: none;
}

.link a:hover {
	color: #064579;	
	background-color: hsl(0, 20%, 60%);
	color: #fff;
}

.fields {
	width: 98%; 
	padding: 0.25%; 
	margin: 0 0.25%;
/*	font-size: 120%;*/	
}

.fields .row {
	font-size: 1em;
}

label {
	cursor: pointer;
	display: inline-block;
	padding: 0.5em 0em;
	text-align:left;
	text-align:top;
	width: 35%; 
	vertical-align: top;
}

input[type=email], input[type=text]:enabled {
	width: 35%;
	padding: 0.25em;
	font-size: 1em;
}

input[type=captcha] {
	width: 15%;
	padding: 0.25em;
	font-size: 1em;
}

.row > textarea {
	width: 50%;
	padding: 0.25em;
	font-size: 1em;
	font-family: Verdana, Arial, sans-serif;	
}

.btn, .submit {
	opacity: 0.8;
    padding: 0.5em 1em; 
    background:#ccc; 
    border: none;
    cursor:pointer;
    border-radius: 5px; 
	text-align: center;
	font-weight: bold;
}
/******************************************************/
/* Anchor  ********************************************/     
/******************************************************/
.anchor {
	display: block;
	text-align: right;
	list-style-type: none;
	padding: 0;
}

.anchor ul {
}

.anchor li {
	display: inline;
}

.anchor a {
	color: #9C2626;
}
/******************************************************/
/* Footer-wrapper  ************************************/     
/******************************************************/
#footer-wrapper {
	position: absolute;	
	width: 60%;

	bottom: 0;
	
	margin-left: 20%;
	height: 4.2rem;            /* Footer height */
 	border-top: 4px solid hsl(0, 100%, 30%); 
	box-sizing: border-box;
	font-size: 0.70em;/*neu 20241110*/	
	background-color: yellow;
	background-color: #FAFAFA;
	box-sizing: border-box;
}

.footerbox_01, .footerbox_02, .footerbox_03 {
    float: left;
	margin-top: 1em;
	background-color: #FAFAFA;
	text-decoration: none; 
	color: hsl(0, 100%, 30%);
}

.footerbox_01 {
    width: 31%;
	margin-left: 2%;	
	margin-right: 0.5%;
}

.footerbox_02 {
    width: 26%;	/*57%*/
	margin-left: 0.5%;	
	margin-right: 0.5%;	
}

.footerbox_03 {
    width: 37%;	/*94%*/	
	margin-left: 0.5%;	
	margin-right: 2%;	
}

#footerboxes p {
	width: 100%;
	margin: 0 auto;	
	color: hsl(0, 100%, 30%);
	text-decoration: none; 	
}

.footerbox_03 a { 
	color: hsl(0, 100%, 30%);
	text-decoration: none; 
}
/******************************************************/
/* copyright*********************************************/     
/******************************************************/
#copyright {
	width: 100%;
	margin: 0 auto;
	background-color: #FAFAFA;
	color: color: #9C2626;
	text-align: center;
}
/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 1024px){
	
/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/ 
html, body { 
	font-size: 20px;
}

#top-wrapper, #header-wrapper, #main-wrapper, #footer-wrapper {
	width: 100%;
}
/******************************************************/
/* Fields *********************************************/     
/******************************************************/ 
h1 {
	color:	hsl(0, 100%, 30%);
	text-align: right;
	padding: 0em 0.5em;
}

/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	width: 100%;
	margin-left: 0;	
	font-size: 1em;	
}

}
/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 900px){
/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/
html, body { 
	font-size: 1em;
}

body {
	background-color: #FAFAFA;
}

#content-wrap {
	background-color: #FAFAFA;
}
/******************************************************/
/* logo above photo ***********************************/     
/******************************************************/
.logo-above-photo_01 {
	display: block;
	text-align: right;
	background-color: #FAFAFA;
	margin-right: 2%;
	margin-top: 0.5em;	
}

.logo-above-photo_02 {
	display: none;
}

.logo-above-photo_01 img {
	display: block;
	width: 75%;
	float: right;
	padding: 5px;	
}

.logo-above-photo_01 logo {
	width: 75%;
	float: right;
}	
/******************************************************/
/* photo with logo  ***********************************/     
/******************************************************/
.photo-with-logo span {
	display: none;
}
/******************************************************/
/* Fields *********************************************/     
/******************************************************/ 
h1 {
	color:	hsl(0, 100%, 30%);
	text-align: right;
	padding: 0;
	font-size: 1.5em;
}

h2 {
	font-size: 1.5em;
}
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 1em;
	font-size: 0.9em;	
}

}
/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 600px){
/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/ 
html, body { 
	font-size: 1em;
}

#content-wrap {
  padding-bottom: 0;    /* Footer height */
  padding-bottom: 4.2rem;    /* Footer height */  
}
/******************************************************/
/* logo above photo ***********************************/     
/******************************************************/

/******************************************************/
/* Vertikalmenü ***************************************/     
/******************************************************/
#levnav {
	display: none;
}

#header {
	border-bottom: none;  		
}

label.hamburg { 
	background-color: #9C2626;   
	width: 30px; 
	height: 30px; 
	position: relative; 
	margin-left: auto; 
	margin-right: auto;
	border-radius: 4px;   
	padding: 0;
}

.line { 
   position: absolute; 
   left:0.25em;
   height: 3px; 
   width: 90%; 
   background: #fff; 
   border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 7px; }
.line:nth-child(2) { top: 14px; }
.line:nth-child(3) { top: 21px; }

input#hamburg {display:none}

/* The container <div> - needed to position the dropdown content */
#vertnav {
    position: relative;
    display: block;
	overflow: visible;
	background-color: #9C2626;
	width: 100%;	
	text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.menu {
	width: 33%;
	width: 55%;
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5000;
}

.row {
	text-align: left;
}

.topmenu .submenu {
	background-color: #9C2626;
}

/*neu*/
.menu ul {
	text-align: left;
	padding-left: 0.5em;
}

/* Links inside the dropdown */
.menu a {
    color: #424242;
    padding: 0.25% auto;
    text-decoration: none;
    display: block;
	font-weight: 200;	
	background-color: #848484;
	background-color: #BDBDBD;	
}

/* Change color of dropdown links on hover */
.menu a:hover {
	background-color: #ddd;
}

/* Show the dropdown menu on hover */
#vertnav:hover .menu {
	display: block;
}
/*NEU*/
/* Show the dropdown menu on hover */
#vertnav:hover .submenu {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
#vertnav:hover .navbtn {
	background-color: #848484;	
} 

ul.submenu {
    display: none;
	list-style-type: none;	
}

ul.submenu .subsubmenu {
    display: none;
	list-style-type: none;	
}


li:hover ul.submenu {
    display: block;
}

/*NEU*/
li ul li:hover ul.subsubmenu {
    display: block;
}

.menu ul li {
	display: block;
	position: relative;
	float: none;
/*	background-color: #3e8e41;	*/
	padding: 0;
}

.menu ul li a {
	padding: 0.25em 0.5em;
}

.submenu li ul {
}

/******************************************************/
/* Main-wrapper ***************************************/     
/******************************************************/
#left{
   display: none;
}

#right{
    width: 100%;
}

#bottomabout {
	display: block;	
	width: 95%;
	margin: 0.5em;
}
/******************************************************/
/* Fields *********************************************/     
/******************************************************/ 
h1 {
	color:	hsl(0, 100%, 30%);
	text-align: right;
	padding: 0;
	font-size: 0.0em;
}

h2 {
	font-size: 0.9em;
}

.post-photo-captcha {
	width: 30%;	
}

input[type=captcha] {
	width: 30%;
}
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.675em;
}

}
/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 450px){
/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/ 
html, body { 
	font-size: 0.9em;
}

#content-wrap {
	padding-bottom: 0;    /* Footer height */
	padding-bottom: 4.2rem;    /* Footer height */  
}

/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.7em;
}


/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 400px){
/******************************************************/
/* Hauptstruktur **************************************/     
/******************************************************/ 
html, body { 
	font-size: 0.85em;
}
/******************************************************/
/* logo above photo ***********************************/     
/******************************************************/
.logo-above-photo_01 {
/*	display: none;*/
}
/*
.logo-above-photo_02 {
	display: block;
}*/
/******************************************************/
/* Fields *********************************************/     
/******************************************************/
h1 {
	color:	hsl(0, 100%, 30%);
	text-align: right;
	padding: 0;
	font-size: 0.85em;
}

h2 {
	font-size: 0.825em;
}
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.55em;
}

/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 360px){
/******************************************************/
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.525em;
}

/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 300px){
/******************************************************/
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.45em;
}

/******************************************************/
/* Responsiv  *****************************************/     
/******************************************************/
@media screen and (max-width : 250px){
/******************************************************/
/******************************************************/
/* Footer-Wrapper *************************************/     
/******************************************************/
#footer-wrapper {
	font-size: 0.4em;
}
}