/*
	COLORS:
	- Narzissengelb				#dc9d00		220,157,0
	- Perlkupfer				#763c28 	118,60,40
	- Perlkupfer, 25% satter	#80371e		128,55,30
	- Silber					#c0c0c0		192,192,192
	- Silber, 15% blasser		#e6e6e6		230,230,230
	- Maroon					#800000		128,0,0
		
	*/

	/* ***** STANDARD-KLASSEN für LAYOUT ****** */
	html {
	width: 100%;
	}
	
	body {
		width: 100%;
		margin: 0px;
		font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
		font-size: 16px;
		letter-spacing:1px;
		font-weight: normal;
		background-color: #000000;
	}
	
	header {
		display: block;
	}

	/* ***** STANDARD-KLASSEN für SCHRIFTEN****** */	
	h1 {
		font-family: "Bradley Hand ITC";
		color: white;
		font-size: 72px;
	}
	
	h2 {
		font-family: "Bradley Hand ITC";
		color: white;
		font-size: 36px;
	}
	
	h3 {
		font-family: "Bradley Hand ITC";
		color: black;
		font-size: 32px;
		text-shadow: 0.1em 0.1em 0.15em #763c28; /* Farbe Perlkupfer */
	}

	h4 {
		font-family: "Bradley Hand ITC";
		color: black;
		font-size: 24px;
		text-decoration: underline;
		text-shadow: 0.1em 0.1em 0.15em #763c28; /* Farbe Perlkupfer */
	}

	h5 {
		font-family: "Bradley Hand ITC";
		color: black;
		font-size: 32px;
	}
	
	.loginstatus {
	font-size: 14px;
	}
	
	.loginstatus h3 {
		margin-block-start: 2px;
		margin-block-end: 2px;
	}
	
	/* ***** LAYOUT-KLASSEN ****** */
	.pageframe {
		background-color: #000000;
	}
		
	.pageheader {
		position: relative;
		top: 0px; 
		left: 0px; 
		width: 100%; 
		height: 140px; 
	}

	.contentheader {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 1080px;
		background-color: #000000;
		background-image: url('../img/rakotzbruecke.jpg');
		background-position: center top;
		background-repeat: no-repeat;
	
	}
	
	.contentheaderfilter {
		position:relative;
		margin-left: auto;
		margin-right: auto;
		width: 1920px;
		height: 1080px;
		background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
	}
	
	.contenttitle {
		position:relative;
		top: 0px;
		left: 0px;
		width: 100%;
		min-height: 200px;
		background-color: #000000;
		text-align: center;
		vertical-align: top;
	}
	
	.contentboardtitle {
		position:relative;
		margin-left: auto;
		margin-right: auto;
		max-width: 1920px;
		background-color: #000000;
	}
	
	.contentscreen {
		position: relative;
		overflow: hidden;
	 	top: 0px;
		width: 100%;
		background-color: #000000;
	}

	.contentscreenboard {
		overflow: hidden;
		position: relative;
	 	top: 0px;
		width: 100%;
		background-color: #000000;
	}
	
	.userscreenboard {
		overflow: hidden;
		position: relative;
	 	top: 0px;
		width: 100%;
		height: 186px;
		max-height: 52px;
		background-color: #000000;
	}
	
	.contentframe {
		overflow: hidden;
		position: absolute;
	 	top: 0px;
		width: 100%;
		background-color: #000000;
	}
	
	.contentframeuser {
		overflow: hidden;
		position: absolute;
	 	top: 0px;
		width: 100%;
		height: 100%;
		background-color: #000000;
	}


	.contentframeerror {
		overflow: hidden;
		position: absolute;
	 	top: 0px;
		width: 100%;
		background-color: #000000;
	}
	
	.contentframeboard {
		overflow: hidden;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		max-width: 1920px;
		height: 98%;
		min-height: 500px;
		background-color : #000000;
		border: 2px solid #80371e;
		padding: 1px;
	}
	
	.contentframeboarduser {
		overflow: hidden;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		max-width: 1920px;
		height: 180px;
		background-color : #000000;
		border: 2px solid #80371e;
		padding: 1px;
	}

	/* ***** CONTENTDESIGN-KLASSEN ****** */
	/* Style the container for Text-Content */
	.contentdesigncontainersmall {
	  border-radius: 5px;
	  background-color: #f2f2f2;
	  padding: 20px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 90%;
	/*  min-height: 100px;*/
	  
	}

	/* ***** CONTENTDESIGN-KLASSEN ****** */
	/* Style the container for Text-Content */
	.contentdesigncontainernews {
	  border-radius: 5px;
	  background-color: #f2f2f2;
	  padding: 5px 20px 5px 20px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 90%;
	  height: 100%;
	/*  min-height: 100px;*/
	  
	}

	/* Style the container for Contact-Formular */
	.contactcontainer {
	  border-radius: 5px;
	  background-color: #f2f2f2;
	  padding: 20px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 90%;
	  min-height: 800px;
	  
	}

	/* Style inputs, select elements and textareas for Contact-Formular */

	.contactcontainer form {
		border: 3px solid #f1f1f1;
		height: 100%
	}
	
	#kontaktformular input[type=text], select, textarea{
	  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size:13px;
	  width: 100%;
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  resize: vertical;
	}

	/* Style the label to display next to the inputs for Contact-Formular */
	#kontaktformular .registerrow label {
	  padding: 12px 12px 12px 0;
	  display: inline-block;
	}

	/* Style the form icons for Contact-Formular */
	#kontaktformular .registericon {
  	  padding: 12px;
  	  background: dodgerblue;
  	  color: white;
  	  min-width: 50px;
  	  text-align: center;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;

	}

/* Set a style for all buttons for Contact-Formular */
	#kontaktformular .contactcontainer button {
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	  width: 80px;
	  height: 42px;
	}

	/* Style the submit button for Contact-Formular */
	.contactcontainer input[type=submit] {
	  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size: 13px;
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 20px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	  width: 80px;
	}

	/* Style the title-field for Newsboard-records */
	.newsboard_rcdtitle {
		background-color: #dc9d00;
		opacity:1;
		color: #404040;
		cursor: pointer;
		width: 100%;
		height: 20px;
		max-height: 46px;
		text-align: left;
		padding: 2px;
		
		border: 1px solid #800000;
		outline: none;
		transition: 0.4s;
	}
	
	.newsboard_rcdtitleanc {
		background-color: #e60000;
		opacity:1;
		color: #404040;
		cursor: pointer;
		width: 100%;
		height: 20px;
		max-height: 46px;
		text-align: left;
		padding: 2px;
		
		border: 1px solid #800000;
		outline: none;
		transition: 0.4s;
	}
	


	/* ***** LINKDESIGN-KLASSEN ****** */
	.contentlink {
		text-decoration:none;
		color: #800000;
	  	padding: 1px 1px;
		
	}

	.contentlink:hover {
		text-decoration:none;
		color: #dc9d00;
		opacity: 1;
	  	padding: 1px 1px;
		border: 1px solid #dc9d00;	}
	
	.hideit{
		display: none;
	}
	
	.animateit{
		display: block;
	}
	.fadein{
		left: 5000px;
  		-webkit-animation: FadeInEffect 1s linear both;
  		animation: FadeInEffect 1s linear both;
  		animation-delay: 1s;
	}
	/* Fade in tabs */
	@-webkit-keyframes FadeInEffect {
  		0% {opacity: 0;left:-5000px;}
  		25% {opacity: 0.3;left:-5000px;}
  		50% {opacity: 0.5;left:-5000px;}
  		75% {opacity: 0.8;left:0px;}
  		100% {opacity: 1;left:0px;}
	}

	@keyframes FadeInEffect {
  		0% {opacity: 0;left:-5000px;}
  		25% {opacity: 0.3;left:-5000px;}
  		50% {opacity: 0.5;left:-5000px;}
  		75% {opacity: 0.8;left:0px;}
  		100% {opacity: 1;left:0px;}
	}

	.fadeout{
  		left: 0px;
  		-webkit-animation: FadeOutEffect 1s linear both;
  		animation: FadeOutEffect 1s linear both;
	}
	
	/* Fade in tabs */
	@-webkit-keyframes FadeOutEffect {
  		0% {opacity: 1;left:0px;}
  		25% {opacity: 0.8;left:0px;}
  		50% {opacity: 0.5;left:0px;}
  		75% {opacity: 0.3;left:-5000px;}
  		100%{opacity: 0;left:-5000px;}
	}

	@keyframes FadeOutEffect {
  		0% {opacity: 1;left:0px;}
  		25% {opacity: 0.8;left:0px;}
  		50% {opacity: 0.5;left:0px;}
  		75% {opacity: 0.3;left:-5000px;}
  		100%{opacity: 0;left:-5000px;}
	}
	
	/* Accordion */
	.accordion {
		/* background-color: #000000;*/
		background-color: inherit;
		color: #404040;
		cursor: pointer;
		width: 100%;
		height: inherit;
		max-height: 46px;
		text-align: left;
		padding: 0px;
		
		border: none;
		outline: none;
		transition: 0.4s;
	}

	.cbdctr .accordion {
		opacity:0.0;
	}	

	.panel {
		overflow: hidden;
		max-height: 46px;
		transition: max-height 0.2s ease-out;
	}

	.panelheader {
		position: relative;
		width: 100%;
		height: 46px;
		max-height: 46px;
	}

	.panelcontent {
		position: relative;
		width: 100%;
		height: inherit;
		max-height: 0px;
	}
	
	.panelcontent .showpanel {
		max-height: 100%;
	}

	.panelheader:hover .accordion {
	/*	background-color: #1a1a1a;*/
		background-color: #dc9d00;
		opacity: 0.25;
	}
	
	.cbdlft .accordion:before {
	  content: '\02795'; /* Unicode character for "plus" sign (+) */
	  font-size: 13px;
	  color: #777;
	  position: absolute;
	  top: 6px;
	  left: 3px;
	  margin-left: 5px;
	}
	
	.cbdrgt .accordion:after {
	  content: '\02795'; /* Unicode character for "plus" sign (+) */
	  font-size: 13px;
	  color: #777;
	  position: absolute;
	  top: 6px;
	  right: 3px;
	  margin-left: 5px;
	}
	
	.cbdlft .accactive:before {
	  content: "\2796"; /* Unicode character for "minus" sign (-) */
	  position: absolute;
	  top: 6px;
	  left: 3px;
	}
	
	.cbdrgt .accactive:after {
	  content: "\2796"; /* Unicode character for "minus" sign (-) */
	  position: absolute;
	  top: 6px;
	  right: 3px;
	}
	
	/* Gallery */
	
	.contentgallery {
		position: relative;
		top: 0px; 
		left: 0px; 
		width:100%; 
		background-color: #000000;
	}

	.footer {
		position:relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 70px;
		background-color: #000000;
		overflow: hidden;
	}	
	
	
	.endspacer {
	 	position: relative;
	 	top: 0px;
	 	left: 0px;
	 	width: 100%;
	 	height: 35px;
		background-color: #000000;
	 	overflow: hidden;
	}
	
	.endline {
		position:relative;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100px;
		overflow: hidden;
	}

	.headerspacer {
		position: relative;
		top: 0px;
		left: 0px;
		width: auto;
		height: 30px;
		background-color: #000000;
	}

	.contentspacer {
		position: relative;
		top: 0px;
		left: 0px;
		width: auto;
		height: 100px;
		background-color: #000000;
	}

	.contentspacer_userscreen {
		position: relative;
		top: 0px;
		left: 0px;
		width: auto;
		height: 30px;
		background-color: #000000;
	}

	.spacer {
		display: none;
		position: relative;
		top: 0px;
		left: 0px;
		width: auto;
		height: 30px;
		background-color: #000000;
	}


	/* *****CONTENTFRAME-KLASSEN ****** */

	.cbdlft {
	 	position:relative;
	 	top:0;
	 	left:0;
	 	width: 10%;
		height: inherit;
	 	background:linear-gradient(270deg, rgba(192,192,192,1) 10.00%, rgba(118,60,40,1) 99% );
	 	float: left;	
	}
	
	.cbdctr {
 		position:relative;
 		top:0;
 		left: 0px;
 		width: 80%;
		height: inherit;
 		background-color: #C0C0C0;
 		float: left;	
	}
	
	.cbdrgt {
		position:relative;
		top:0;
		right:0;
		width: 10%;
		height: inherit;
		background:linear-gradient(90deg, rgba(192,192,192,1) 10.00%, rgba(118,60,40,1) 99% );
		float: right;
	}


	/* ***** POSITIONIERUNGS-KLASSEN ****** */
	
	/* Klassen für Logo-Picture */
	.TopLogo {
		position:absolute;
		top: 90px;
		z-index: 101;
	}
	
	.TopNiete {
			position:relative;
			top: 2px;
			left: 2px;
			width: 28px;
			z-index: 101;
		}

	/* Klassen für Header-Picture */
	.top-left {
	 	position: absolute;
	 	top: 50px;
	 	left: 10px; 	
	}
	
	.top-right {
	 	position: absolute;
	 	top: 50px;
	 	right: 10px; 
	}
	
	.centered-title {
		position: absolute;
	  	top: -100px;
	  	left: 50%;
	  	transform: translate(-50%, -00%);	 
	}
	
	.centered-top {
		position: absolute;
	  	top: 50px;
	  	left: 50%;
	  	transform: translate(-50%, -00%);
	}

	.centered-center {
		position: absolute;
	  	top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	}

	.centered-bottom {
		position: absolute;
	  	bottom: 50px;
	  	left: 50%;
	  	transform: translate(-50%, -0%);
	 
	}
	
	.bottom-left {
	  	position: absolute;
	  	bottom: 50px;
	  	left: 10px;	
	}
	
	.bottom-right {
	  	position: absolute;
	  	bottom: 50px;
	  	right: 10px;	
	}

	/* Klassen für Header-Positionierung - Sticky */
	.fixed-top {
	  position: fixed;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	}
	
	/* Korrektur-Klassen für Floating */
	.clearfix::after {
	  content: "";
	  clear: both;
	  display: table;
	}

/* **************************************************************************************************************************** */
/*																																*/
/* @MEDIA-KLASSEN 																												*/
/*																																*/
/* **************************************************************************************************************************** */


	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 414 MAX																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (max-width: 414px) {

		html {
			max-width: 414px;
		}
		
		body {
			max-width: 414px;
			font-size: 16px;
		}

		h1 {font-size: 16px;}
		h2 {font-size: 12px;}
		h3 {font-size: 10px;}
		h4 {font-size: 9px;}
		h5 {font-size: 8px;}
		
		/* Klassen für Logo-Picture */
		.TopLogo {
			position:fixed;
			top: 0px;
			width: 44px;
			visibility: hidden;
			z-index: 101;
		}
		
		.TopNiete {
			position:relative;
			top: 2px;
			left: 2px;
			width: 28px;
			z-index: 101;
		}
		
		/* Klassen für Header-Picture */
		.centered-title {top: -60px;}
		.top-left {top: -30px; left: 0px;}
		.top-right {top: -30px; right: 0px;}
		
	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 135px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x240.jpg');
			background-position: center top;
			background-repeat: no-repeat;
	 	}
	 	
	 	.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 240px;
			height: 135px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 18px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 18px;
			max-height: 18px;
		}

		.cbdlft .accordion:before {
		  font-size: 8px;
		  color: #777;
		  top: 2px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 8px;
		  color: #777;
		  top: 2px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 2px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 2px;
		  right: 3px;
		}
 
 	}
	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 414 MIN																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 414px) {

		html {
			max-width: 500px;
		}
		
		body {
			max-width: 500px;
			font-size: 16px;
		}

		h1 {font-size: 16px;}
		h2 {font-size: 12px;}
		h3 {font-size: 10px;}
		h4 {font-size: 9px;}
		h5 {font-size: 8px;}
		
		/* Klassen für Logo-Picture */

		.TopLogo {
			position:fixed;
			top: 0px;
			width: 44px;
			visibility: hidden;
			z-index: 101;
		}
		
		.TopNiete {
			position:relative;
			top: 2px;
			left: 2px;
			width: 28px;
			z-index: 101;
		}
		
		/* Klassen für Header-Picture */
		.centered-title {top: -60px;}
		.top-left {top: -30px; left: 0px;}
		.top-right {top: -30px; right: 0px;}
		
	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 213px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x380.jpg');
			background-position: center top;
			background-repeat: no-repeat;
	 	}
	 	
	 	.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 380px;
			height: 213px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 18px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 18px;
			max-height: 18px;
		}

		.cbdlft .accordion:before {
		  font-size: 9px;
		  color: #777;
		  top: 3px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 9px;
		  color: #777;
		  top: 3px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 3px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 3px;
		  right: 3px;
		}
 
 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 520																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 520px) {

		html {
			max-width: 600px;
		}
		
		body {
			max-width: 600px;
			font-size: 16px;
		}

		h1 {font-size: 18px;}
		h2 {font-size: 14px;}
		h3 {font-size: 12px;}
		h4 {font-size: 10px;}
		h5 {font-size: 9px;}
		
		/* Klassen für Logo-Picture */

		.TopNiete {
			position:relative;
			top: 2px;
			left: 2px;
			width: 28px;
			z-index: 101;
		}
		
		/* Klassen für Header-Picture */
		.centered-title {top: -30px;}
		.top-left {top: 0px; left: -45px;}
		.top-right {top: 0px; right: -45px;}
		
	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 213px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x380.jpg');
			background-position: center top;
			background-repeat: no-repeat;
	 	}
	 	
	 	.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 380px;
			height: 213px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 21px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 21px;
			max-height: 21px;
		}

		.cbdlft .accordion:before {
		  font-size: 10px;
		  color: #777;
		  top: 3px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 10px;
		  color: #777;
		  top: 3px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 3px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 3px;
		  right: 3px;
		}
 
 	}
 	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 620																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 620px) {

		html {
			max-width: 768px;
		}
		
		body {
			max-width: 768px;
			font-size: 16px;
		}

		h1 {font-size: 20px;}
		h2 {font-size: 16px;}
		h3 {font-size: 14px;}
		h4 {font-size: 12px;}
		h5 {font-size: 10px;}

		/* Klassen für Logo-Picture */

		.TopNiete {
			position:relative;
			top: 2px;
			left: 2px;
			width: 28px;
			z-index: 101;
		}
		
		/* Klassen für Header-Picture */
		.centered-title {top: -35px;}
		.top-left {top: 0px; left: -50px;}
		.top-right {top: 0px; right: -50px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 252px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x450.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 450px;
			height: 252px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 24px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 24px;
			max-height: 24px;
		}

		.cbdlft .accordion:before {
		  font-size: 11px;
		  color: #777;
		  top: 4px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 11px;
		  color: #777;
		  top: 4px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 4px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 4px;
		  right: 3px;
		}
 
 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 788																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 788px) {

		html {
			max-width: 992px;
		}
		
		body {
			max-width: 992px;
			font-size: 16px;
		}

		h1 {font-size: 24px;}
		h2 {font-size: 18px;}
		h3 {font-size: 16px;}
		h4 {font-size: 12px;}
		h5 {font-size: 10px;}

		/* Klassen für Header-Picture */
		.centered-title {top: -40px;}
		.top-left {top: 2px; left: -50px;}
		.top-right {top: 2px; right: -50px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 292px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x520.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 520px;
			height: 292px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 26px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 26px;
			max-height: 26px;
		}

		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 5px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 5px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 5px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 5px;
		  right: 3px;
		}
 
 	}
	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1012																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1012px) {

		html {
			max-width: 1200px;
		}
		
		body {
			max-width: 1200px;
			font-size: 16px;
		}

		h1 {font-size: 28px;}
		h2 {font-size: 20px;}
		h3 {font-size: 18px;}
		h4 {font-size: 14px;}
		h5 {font-size: 12px;}


		/* Klassen für Header-Picture */
		.centered-title {top: -50px;}
		.top-left {top: 5px; left: -60px;}
		.top-right {top: 5px; right: -60px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 337px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x600.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 600px;
			height: 337px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 28px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 28px;
			max-height: 28px;
		}

		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 6px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 6px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 6px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 6px;
		  right: 3px;
		}
 
 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1220																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1220px) {

		html {
			max-width: 1600px;
		}
		
		body {
			max-width: 1600px;
			font-size: 16px;
		}

		h1 {font-size: 32px;}
		h2 {font-size: 24px;}
		h3 {font-size: 20px;}
		h4 {font-size: 16px;}
		h5 {font-size: 14px;}


		/* Klassen für Header-Picture */
		.centered-title {top: -60px;}
		.top-left {top: 5px; left: -60px;}
		.top-right {top: 5px; right: -60px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 432px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x768.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 768px;
			height: 432px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 32px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 32px;
			max-height: 32px;
		}
	
		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 8px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 8px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 8px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 8px;
		  right: 3px;
		}
 
 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1620																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1620px) {

		html {
			max-width: 1920px;
		}
		
		body {
			max-width: 1920px;
			font-size: 16px;
		}

		h1 {font-size: 40px;}
		h2 {font-size: 32px;}
		h3 {font-size: 24px;}
		h4 {font-size: 20px;}
		h5 {font-size: 16px;}

		/* Klassen für Header-Picture */
		.centered-title {top: -70px;}
		.top-left {top: 10px; left: -100px;}
		.top-right {top: 10px; right: -100px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 558px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x992.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 992px;
			height: 558px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}

		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 36px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 36px;
			max-height: 36px;
		}
	
		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 10px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 10px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 10px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 10px;
		  right: 3px;
		}
 
	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1940																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1940px) {

		html {
			max-width: 2220px;
		}
		
		body {
			max-width: 2220px;
			font-size: 16px;
		}

		h1 {font-size: 48px;}
		h2 {font-size: 36px;}
		h3 {font-size: 24px;}
		h4 {font-size: 20px;}
		h5 {font-size: 16px;}

		/* Klassen für Header-Picture */
		.centered-title {top: -80px;}
		.top-left {top: 20px; left: -100px;}
		.top-right {top: 20px; right: -100px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 675px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x1200.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 1200px;
			height: 675px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}
		
		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 36px;
			transition: max-height 0.2s ease-out;
		}
	
		.panelheader {
			height: 36px;
			max-height: 36px;
		}
	
		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 10px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 10px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 10px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 10px;
		  right: 3px;
		}
 
 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 2240																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 2240px) {

		html {
			max-width: 100%;
		}
		
		body {
			max-width: 100%;
			font-size: 16px;
		}

		h1 {font-size: 56px;}
		h2 {font-size: 48px;}
		h3 {font-size: 32px;}
		h4 {font-size: 24px;}
		h5 {font-size: 20px;}

		/* Klassen für Header-Picture */
		.centered-title {top: -90px;}
		.top-left {top: 30px; left: -200px;}
		.top-right {top: 30px; right: -200px;}

	 	.contentheader {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 788px;
			background-color: #000000;
			background-image: url('../img/rakotzbruecke - x1400.jpg');
			background-position: center top;
			background-repeat: no-repeat;
		}
 	
 		.contentheaderfilter {
			position:relative;
			margin-left: auto;
			margin-right: auto;
			width: 1400px;
			height: 788px;
			background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,169,0,0) 60.00%, rgba(0,0,0,1) 70.00% );
		}
		
		/* ACCORDION */
		.panel {
			overflow: hidden;
			max-height: 46px;
			transition: max-height 0.2s ease-out;
		}

		.panelheader {
			height: 46px;
			max-height: 46px;
		}
	
		.cbdlft .accordion:before {
		  font-size: 13px;
		  color: #777;
		  top: 15px;
		  left: 3px;
		}
		
		.cbdrgt .accordion:after {
		  font-size: 13px;
		  color: #777;
		  top: 15px;
		  right: 3px;
		}
		
		.cbdlft .accactive:before {
		  top: 15px;
		  left: 3px;
		}
 
		.cbdrgt .accactive:after {
		  top: 15px;
		  right: 3px;
		}
 

	}