@charset "UTF-8";
/* CSS Document */


/*Allgemeine Angaben zu Größe und Aurichtung*/
	body, {font-family: 'Open Sans', sans-serif;
			margin: 0;
			padding: 0;
			overflow-x: hidden;
			overflow-y: hidden;
			width: 100%;
			text-decoration: none;
			}

	.container {width: 100%;
				padding: 0;}
			
	.main { padding: 2% 5%;}
			
	p{	font-size: 120%;
		line-height: 1.8;}
	
	/*Überschriften vor Text*/
	.Seiteninhalt h1 {font-family: 'Yeseva One', cursive;
						color: #333333;
						background-image: url(../img/Balken.jpg);
						background-size: 40% auto;
						background-repeat: no-repeat;
						padding: 2% 2% 2% 0;
						margin-bottom: 8%;}
			
			
	/*Navigation
			-getrennt in Mobile und Pc
			-Mobile=Burgermenü
			-Pc=Seitenstreifen*/

			/*Allgemein*/
			.Nav_Schrift {text-decoration: none;
				color: white;
				text-align: center;
				}
			.Nav_Abstand{padding-bottom: 10%;}
			/*Pc*/
			nav h1{font-weight: 300;}
			.Blue_Pc {background-color: #95c8ff;
					position: fixed;
					right: 2%;
					top: 0;
					min-height: 100%;
					z-index: 101;
					-webkit-transform: skewX(5deg);
					-moz-transform: skewX(5deg);
					-ms-transform: skewX(5deg);
					-o-transform: skewX(5deg);
					transform: skewX(5deg);}
			.Blue_Pc_Schatten{background-color: #95c8ff;
					opacity: 0.5;
					position: fixed;
					right: 2%;
					top: 0;
					min-height: 100%;
					z-index: 100;
					-webkit-transform: skewX(-5deg);
					-moz-transform: skewX(-5deg);
					-ms-transform: skewX(-5deg);
					-o-transform: skewX(-5deg);
					transform: skewX(-5deg);}
			
			#Logo_Pc{-webkit-transform: skewX(-5deg);
						-moz-transform: skewX(-5deg);
						-ms-transform: skewX(-5deg);
						-o-transform: skewX(-5deg);
						transform: skewX(-5deg);
						
					}


/*Größenanpassung (Navigation wechselt den Style zwischen Pc und Handy nach Seitengröße in Pixel)*/	

	/*Handy-Größe
		-Pc-Nav ausgeblendet
		-Überschriften anpassung (Schrift- und Balkengröße)
		-Einpassung Bilder durch neu verlinkung
		-Nav-Mobile */	
			@media only screen and (max-width: 768px){
			.Nav_Pc{display: none}
				
			#Willkommen h1 {font-size: 430%;
						margin-bottom: 3%;
						background-size: 90% 80%;
						background-repeat: no-repeat;
						padding: 2% 2% 2% 0;}
			.Seiteninhalt h1 {
				background-image: url(../img/Balken.jpg);
				background-size: 60% 100%;
				background-repeat: no-repeat;
				padding: 2% 2% 2% 0;}
				
				.background_content1{position: relative;
									  top: 0px;
									  width: 100%;
									  height: 100vh;
									  background: white;
									  margin: -200px auto 0 auto;
									  z-index: 98;
									  position: relative;
									  background: url('../img/AOKSchwerbindertenversammlung2010_Mobile.jpg') no-repeat center center fixed; 
									   background-size: cover;}

				.background_content2 {width: 100%;
									  height: 80vh;
									  margin: -50px auto 0 auto;
									  z-index: 98;
									  position: relative;
									  background:   url('../img/SommerempfangStadtBrandenburg_Mobile.jpg') no-repeat center center fixed;
									   background-size: cover;
									   text-align: center;
									}
				
				
			/*Nav Mobile*/	
				nav ul, li {margin: 0;
				  			color: #ffffff;}

				nav li{list-style-type: none;}
				
				nav .inner{text-decoration: none;
						  color: #fff;
						  padding: 7px 15px;
						  box-sizing: border-box;}

				nav{background-color: #95c8ff;}

				div.wrapper, ul{text-align: center;}

				nav ul{padding: 0px 0;}

				nav{padding: 2% 0;}

				#menu a{display: block;}

				#menu li{padding: 5px 0;}

				#menu li{border-bottom: 1px solid #ffffff;}

				#logo{width: 30%;
					  height: auto;
					  padding: 3%;}
				
				#Logo_PC{
					margin: 15px 20px;
				}

				#burger-menu{position: relative;
					top: 0;
					left: 100%;
					margin-top: -55px;
					margin-left: -60px;
					cursor: pointer;}

				ul#menu,ul#sosmed{display: none;}

				ul#menu.open-menu{display: block;}


			/*Styling Menu_Bars*/

				.menu-btn {
				  display: block;
				  width: 50px;
				  height: 50px;
				  background-color: #fff;
				  border-radius: 50%;
				  position: relative;
				}

				.menu-btn span,
				.menu-btn span::before,
				.menu-btn span::after {
				  position: absolute;
				  top: 50%;
				  left: 50%;
				  margin-left: -10px;
				  margin-top: -1px;
				  width: 20px;
				  height: 2px;
				  background-color: #222;
				}

				.menu-btn span::before,
				.menu-btn span::after {
				  content: '';
				  display: block;
				  transition: 0.2s;
				}

				.menu-btn span::before {
				  transform: translateY(-5px);
				}

				.menu-btn span::after {
				  transform: translateY(5px);
				}

				.menu-btn_active span {
				  height: 0;
				}

				.menu-btn_active span:before {
				  transform: rotate(45deg);
				}

				.menu-btn_active span:after {
				  transform: rotate(-45deg);
				}
				
			/*Anpassung oberer Abstand zur Mobile-Nav*/
				.forground_Willkommen {padding-top: 70px;}
	/*Ende Handy-Größe*/			
		}
			


	/*Tablet-Größe
		-Mobile-Nav ausgeblendet
		-Überschriften anpassung (Schrift- und Balkengröße)*/	
		@media only screen and (min-width: 768px) {
			.Nav_Mobile {display: none;}
			
			/*Herzlich Willkommen*/	
			#Willkommen h1 {font-size: 320%;
							margin-bottom: 3%;
							background-size: 90% 120%;
							background-repeat: no-repeat;
							padding: 2% 2% 2% 0;}

			.Seiteninhalt h1 {background-image: url(../img/Balken.jpg);
								background-size: 35% 120%;
								background-repeat: no-repeat;
								padding: 2% 2% 2% 0;}
			
			#Logo_Pc{
				margin: 5%;
			
			}
			
			/*Abstand zur Seiten-Nav für Pc*/
			.Rahmenbegrenzung{width: 80%;}
	/*Ende Tablet-Größe*/		
		}


	/*Kleiner Computer-Bildschirm
			-Mobile-Nav ausgeblendet
			-Überschriften anpassung (Schrift- und Balkengröße)*/
			
		@media only screen and (min-width: 992px) {
			.Nav_Mobile {display: none;}
			
			/*Herzlich Willkommen*/	
			#Willkommen h1 {font-size: 420%;
						margin-bottom: 3%;
						background-size: 80% 110%;
						background-repeat: no-repeat;
						padding: 2% 2% 2% 0;}
			
			
			.Seiteninhalt h1 {
				background-image: url(../img/Balken.jpg);
				background-size: 30% 110%;
				background-repeat: no-repeat;
				padding: 2% 2% 2% 0;
			}
			
			#Logo_Pc{
				margin: 5% 11%;
			
			}
	/*Ende kleiner Computer-Bildschirm*/
			}
			
			
	/*Großer Computer-Bildschirm
			-Mobile-Nav ausgeblendet
			-Überschriften anpassung (Schrift- und Balkengröße)*/		
		@media only screen and (min-width: 1200px) {
			.Nav_Mobile {display: none;}
			
			/*Herzlich Willkommen*/	
			#Willkommen h1 {font-size: 500%;
						margin-bottom: 3%;
						background-size: 80% 100%;
						background-repeat: no-repeat;
						padding: 2% 2% 2% 0;}
			
			
			.Seiteninhalt h1 {
				background-image: url(../img/Balken.jpg);
				background-size: 30% 100%;
				background-repeat: no-repeat;
				padding: 2% 2% 2% 0;
			}
			
			#Logo_Pc{
				
				margin-left: 28%;
			}
			
	/*Ende großer Computer-Bildschirm*/
			}
			

	/*Parallax-Effekt
			-Informationen liegen oben
			-Bilder liegen unten
			-Navigation ist ausgeschlossen*/		
			* {-moz-box-sizing: border-box;	
				box-sizing: border-box;}

			/*Inhalte Text-Vordergrund*/			
			.forground {min-width: 100vw;
					  min-height: 100vh;
					  background: white;
					  margin: 0 auto 0 auto;
					  z-index: 99;
					  position: relative;
					  box-shadow: 10px 0px 15px black;}

			/*Bild 1 Hintergrund-Hintergrund*/
			.background_content1{position: relative;
								  top: 0px;
								  width: 100%;
								  height: 100vh;
								  background: white;
								  margin: -200px auto 0 auto;
								  z-index: 98;
								  position: relative;
								  background:   url('../img/AOKSchwerbindertenversammlung2010.jpg') no-repeat center center fixed; 
								  background-size: cover;}

			/*Bild 2 Hintergrund-Hintergrund*/
			.background_content2 {width: 100%;
								  height: 80vh;
								  margin: -50px auto 0 auto;
								  z-index: 98;
								  position: relative;
								  background:   url('../img/SommerempfangStadtBrandenburg.jpg') no-repeat center center fixed;
								  background-size: cover;
								  text-align: center;}

			/*Bild 3 Hintergrund-Hintergrund*/
			.background_content3 {width: 100%;
								  height: 80vh;
								  margin: -50px auto 0 auto;
								  z-index: 98;
								  position: relative;
								  background:   url('../img/PolitischeRede.jpg') no-repeat center center fixed;
								  background-size: cover;
								  text-align: center;}


			
	/*Inhalte Allgemein (Navigation ist ausgeschlossen)
			-Herzlich Willkommen
			-Kontakt
			-Leistungen
			-Footer*/
		
		/*Herzlich Willkommen*/
			/*Zitat unter Begrüßungstext*/
		.zitat{font-size: 250%;
			font-weight: 300;
			color:#95c8ff;
			padding-top: 5%;}
			


			
		/*Kontakt*/
			/*Abstand zwischen Titel und Beschriftungsfeld*/
			label {}
			/*Benachrichtigungsfeld
				-Größen*/
			#feld_proportion {width: 60%;
						height: 30%;}


	/*Checkbox für DSGVO Bestimmung*/
		#ankreuzen{width: 3%; margin-top: -3px}

		@media only screen and (min-width: 768px){
						#checkbox span{white-space: nowrap;}
						#checkbox {margin-left: 15%;}
						#ankreuzen{width: 3%; margin-top: -3px;}
	
}
		/*Leistungen
			-Fontstyling*/
		.Leistungen_Begriff { padding: 10%;
							color: #35a8e0;}

		/*Referenzen
			-Fontstyling*/
		.Referenzen_Text {font-weight: 600;}

		
		
		/*Footer
			-Datenschutz und Impressum*/
			footer{text-decoration: none;
				
				position: relative;
				z-index: 99;
				background-color: white;}

			.Letzte_Zeile{background-color: white;}


			#impressum{
					font-size: 1.5em;
					color: #337ab7;
					text-align: center;
					position: relative;
					z-index: 99;
					cursor: pointer;
			}
			
				
			#dsgvo{
					font-size: 1.5em;
					color: #337ab7;
					text-align: center;
					cursor: pointer;
					display: block;
			}


			.aufklapper{
					text-align: left;
					position: fixed; 
					color: #333333;
					font-size: 2em;
			}

/*Für kleine bis große Bildschirme*/
@media only screen 
				and (min-width: 1200px) 
				and (max-width: 1600px)

{
	#impressum{
		float: left;
		padding-left: 35%;
	
}
	#dsgvo{
		text-align: left;
	}
		

/*Für Tablet Größe*/
@media only screen 
				and (min-width: 768px)
				and (max-width: 1024px)
{
	#impressum{
		padding-left: 20%;
	}
}


/*Für Handy Größe*/
@media only screen 
				and (min-width: 320px)
				and (max-width: 640px)
{
	#impressum{
		text-align: center;
		position: relative;
		}
	#dsgvo{
		text-align: center;
	}
}