@charset "utf-8";
/*General Style*/
body {
	font-family: "Comic Sans MS", "Times New Roman", Arial,serif;  
	font-size:110%;
	background:#454040;
	color:#660000;
	margin:0em;
	padding:0em;
}
ul {
	margin:0em;
	padding:0em;
}
li {
	list-style:none;
	font-weight:100;
	line-height:1.375em;
	padding: 0em;
	margin:0.313em 0em;
}	
a {
	text-decoration:none;
	color:#E7590B;
}	

/* On Top Bar */
#menubar {
	display:none;
	background:#fff;
	min-height: 3.125em;
}	
#menubar ul {
	display:block;	
	width:5.0em;
	padding:0.313em 0em;
}
#menubar img {
	width:90%;
	height:auto;
	max-width:100%;
}
#menubar ul li { 
	display: inline; /*später wichtig, wenn weitere Elemente,wie z.B. Facebook-Icon oder Links hinzu gefügt werden sollen*/
}
#menubar ul li a.menubutton{
	display:none;
}
.mobileflags {
	display: none;
}

/* Header */	
header {
	display:block;
	background:#2f2c2c;
	padding:1.250em 0em;
	margin: 0em;
	color:#fff;
}
header h1 {
	font-size: 2.5em;
	line-height:1.0em;
	font-weight:100;
	text-align:center;
	margin:0em 0em 0em 2.5em;
	padding:0em;
}
header h2 {
	font-size:1.875em;
	line-height:1.5em;
	font-weight:100;
	text-align:center;
	padding:0em;
	margin: 0em;
}

.flags {
	width: 3%;
	height: auto;
	margin: 0em 2.5em 0em 0em;
	padding:0em;
	float: right;
}

/* Navigation */
nav {
	display:block;
	height:2.813em;
	background:#fff;
	text-align:center;
}
nav ul {
	display:block;
}
nav ul li {
	display: inline;
	margin:0em;
}	
nav ul li a {
	color:#454040;
	font-size:1.125em;
	line-height:2.813em;
	padding:0.688em 1.063em 0.250em 1.063em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}
nav ul li a:hover {
	background:#454040;
	color:#fff;
	border-bottom: 0.188em solid #E7590B;
}

/*back-top*/
#back-top {
    position: fixed;
    bottom: 4.375em;
    right: 1.875em;
    z-index: 3;
    display: none;
}
 
#back-top a {
    width: 1.875em;
    height: 1.875em;
    display: block;
    text-align: center;
	font-size: 1.563em;
	color: #E7590B;
	background-color: #fff;  
    border-radius: 0.313em;
    -moz-border-radius: 0.313em;
    -webkit-border-radius: 0.313em;
    -o-border-radius: 0.313em;
    -ms-border-radius: 0.313em; 
    transition: background-color .15s;
    -moz-transition: background-color .15s;
    -webkit-transition: background-color .15s;
    -o-transition: background-color .15s;
    -ms-transition: background-color .15s;
}
 
#back-top a:hover {
    text-decoration: none;
    background-color: #E7590B;
	color:#fff;
}


/*Slider*/
#slider {
	background-color:#d7d7d7; 
	margin:auto;
	text-align: center;
}

/*Content Area */
article {
	width:980px;
	background:#fff;
	line-height:1.375em;
	font-weight:100;
	margin: 0em auto;
	padding:0em 1.250em 1.25em 1.250em;
	text-align:justify;
}
h1, h2 {
	font-size:1.875em;
	line-height:2.188em;
	font-weight:100;
	padding: 0em 0.938em 0em 0.938em;
	text-align:left;
}
img	{
	width:45%;
	height:auto;
	max-width:100%;
}
.imgleft {  
	float: left;  
	padding: 0em 0.625em 0em 0em;
	border-radius:0.938em;
	/*box-shadow:0px 0px 10px -5px #000;*/
}

.imgright {  
	float: right;  
	padding: 0em 0em 0em 0.625em;
	border-radius:0.938em;
	/*box-shadow:0px 0px 10px -5px #000;*/
}

.brclear {  
	clear: both;  
	height: 0em;  
	margin: 0em;
	font-size: 0.063em;  
	line-height: 0em;
}

/* CTA-Container */
.cta-box {
    text-align: center;
    padding: 10px;
    background: #fff /*linear-gradient(135deg, #ff6600, #cc3300)*/;
    color: #660000 /*#E7590B*/;
    border-radius: 12px;
    margin: 10px auto;
    max-width: 600px;
    box-shadow: none /*0 4px 8px rgba(0,0,0,0.2)*/;
}

/* Überschrift */
.cta-box h3 {
	color: #660000;
    margin-bottom: 5px;
    font-size: 20px;
}

/* Beschreibungstext */
.cta-box p {
    font-size: 16px;
}

/* CTA-Button */
.cta-box a {
    display: inline-block;
    padding: 14px 24px;
    background: #ff6600;
    color: white;
    text-decoration: none;
    /*font-weight: bold;*/
    border-radius: 8px;
    font-size: 16px;
    margin-top: 10px;
	transition: 0.3s ease-in-out;
}

/* Hover-Effekt für den Button */
.cta-box a:hover {
    /*background: #ffcc99;
    color: #cc3300;*/
	background:#454040;
	color:#fff;
	/*border-bottom: 0.188em solid #E7590B*/;
}
	
}


/* Footer */

#arealeft{
	width: 33%;
    float: left;
	padding:0em;
    margin: 0em;
    text-align:left;
}

#areacenter {
	width: 33%;
    float: left;
	padding:0em;
    margin: 0em;
    text-align: center;
}

#arearight {
	width: auto;
    float: right;
	padding: 0em;
    margin: 0em;
    text-align:right;
}

footer {
	display:block;
	background:#2F2C2C;
	border-top: 0.125em solid #E7590B;
	border-bottom: 0.125em solid #E7590B;
	color:#000;
	margin: 0em;
	padding: 0em;
}

footer section {
	display:block;
	max-width:1010px;
	margin:0em auto;
}


footer p, h3 {
	font-size:0.875em;
	line-height:1.125em;
	font-weight:100;
	color: #fff;
}	

.imprint {
		font-family: Arial;
		font-size: 0.875em;
		color:#fff;
		display:none;
		height:auto;
		margin: 0em 0em 1.250em 0em;
}

footer li {
	font-size:0.875em;
	line-height:0.625em;
	font-weight:100;
}

/* Mobile Style */
@media screen and (max-width:850px) {
	body {
		font-size:90%;
		padding: 0.313em;
		background:#fff;
}
	#menubar {
		display: block;
		background:#fff;
		min-height: 3.125em;
}
	#menubar ul li a.menubutton {
		display:block;
		float: left;
}
		
	.mobileflags {
	display: block;
	width: 55%;
	height: auto;
	margin: 0.25em 0em 0em 6em;
	padding:0em;
}


	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.313em 0em 0.313em 0em;
	}
article {
		width:100%;
		display:block;
		margin: 0em;
		padding:0em;
}

.flags {
	display:none;
}

header h1 {
	margin: 0;
}

}
@media screen and (max-width:600px) {
	/*body {
		-webkit-text-size-adjust:none;
		padding:5px;
	}*/
		
	.imgleft, .imgright {
		max-width:100%;
		height:auto;
		float:none;
		margin:0em;
	}
}
*@media screen and (min-width:550px) {
	nav.nav {
		display: block !important;
	}

}	
@media screen and (max-width:550px) {
	body {
		font-size:86%;
		margin-left: 5px;
		margin-right: 5px;
		
}	body h1, body h2 {
	
	font-size: 1.75em;
}

.cta-box {
		transform: scale(0.8); /* 80% der Originalgröße */
		/*transform-origin: top left; /* Skalierung vom oberen linken Punkt aus */
	
}

	#back-top {
		bottom: 7.500em;
		right: 1.875em;
}
	#back-top a {
		color: #fff;
		background-color: #E7590B;  

}
	#back-top a:hover {
		text-decoration: none;
		color:#E7590B;
		background-color: #fff;
}
}