/* CSS Document */
	
	@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap');
	
/* Allgemein */
	*{
		box-sizing:border-box;
		margin:0;
		padding:0;
	}
	
	a {
		color:white;
		font-family:ABeeZee, myriad-pro, sans-serif;
		text-decoration:none;
	}

	img {
		object-fit:cover;
		width:100%;
	}	

	textarea {
		font-family:ABeeZee, myriad-pro, sans-serif;
	}

	body {
		background-color:black;
	}

	html{
		overflow-x: hidden;
	}

	header {
		display:flex;
		align-items:center;
		justify-content:center;
		height:100vh;
		position:relative;
		margin-bottom:4rem;
	}

	h1 {
		font-size:5.5rem;
	}

	h2 {
		font-size:4rem;
	}

	h3 {
		font-size:3rem;
	}

	h4 {
		font-size:1.2rem;
	}

	p {
		font-size:1.2rem;
	}

	#container {
		font-family:ABeeZee, myriad-pro, sans-serif;
		margin:0 auto; 
		position:relative;
		max-width:2000px;
	}

	.header_img{
		height:100vh;
		position:absolute;
		top:0;
		width:100vw;
		z-index:0;
	}

	.flex {
		display:flex;
		align-items:center;
		justify-content:center;
	}

/* Navigation und Logo*/
	nav{
		display:flex;
		height:30vh;
	}

	#navigationsbalken {
		font-size:1.25rem;
		padding:1rem 1.5rem;
		position:absolute;
		top:0.1rem;
		right:0.2rem;
		transition:all 0.5s ease-in-out;
	}
	
	#navigationsbalken nav a {
		height:2rem;
		margin:0.3rem 0rem 1rem 6rem;
	}

	#navigationsbalken nav a:hover {
		transition:all 0.5s ease-in-out;
	}

	#navigationsbalken_mobile {
		background:rgba(18,18,18,0.9);
		display:none;
		font-size:1.25rem;
		padding:1.0rem;
		position:absolute;
		top:0rem;
		right:0rem;
		transition:all 0.5s ease-in-out;
		height:260px;
		width:250px;
		z-index:100;
	}

	#navigationsbalken_mobile a{
		height:2rem;
		margin:0rem 2rem 2rem 2rem;
	}
	
	#menu_mobile a{
		display:block;
	}

	#menu_mobile{
		display:none;
		flex-direction:column;
		margin-top:0.5rem;
	}
	
	.nav_mobile{
		display:none;
		padding:1rem;
		position:absolute;
		top:0.5rem;
		right:1rem;
		width:auto;
		z-index:1000;
	}

	.unterstrichen::after {
		background-color:white;
		content:"";
		display:block;
		height:2px;
		width:75%;
		margin:0.1rem auto 0rem 0rem;
		transition:all 0.5s ease-in-out;
	}

	.unterstrichen:hover::after {
		background-color:white;
		content:"";
		display: block;
		height:2px;
		width:15%;
		margin:0.1rem auto 0rem 0rem;
		transition:all 0.5s ease-in-out;
	}

	.logo img{
		padding:1rem 1.5rem;
		position:absolute;
		top:0.3rem;
		left:1rem;
		width:15%;
	}

/* To top */
	#totop {
		display:none;
		color:white;
		cursor:pointer;
		position:fixed;
		bottom:2rem;
		right:1rem;
		z-index:1000;
	}
	
/* Zitate */
	#zitatGesamt{
		display:none;
	}

	.zitat {
		color:white;
		display:flex;
		text-align:center;
		justify-content:center;
		font-weight:700;
		position:absolute;
		text-shadow:2px 2px 4px rgba(33,33,33,1);
	}
	
	.AutorZitat {
		color:white;
		display:flex;
		text-align:center;
		justify-content:center;
		font-weight:700;
		position:absolute;
		text-shadow:2px 2px 4px rgba(33,33,33,1);
		width:100%;
	} 

	.ZitatSpaeterEinblenden {
		display:none;
	}

/* Angebotsteil */	
	#angebotsteil {
		background:rgba(0,0,0,0.9);
		max-width:1600px;
		margin:0 auto;
	}

	.AngebotZeile_1 {
		display:flex;
		height:50vh;
		margin-top:2rem;
	}
	
	.AngebotTitel {
		display:flex;
		align-items:center;
		justify-content:center;
		margin:0rem auto 0rem;
		height:50vh;
		width:40%;
	}

	.Texteffekt {
		color:white;
		font-size:3.0rem;
		text-transform:uppercase;
		white-space:nowrap;
	}
	
	.AngebotFotografie {
		margin:0rem auto 0rem;
		height:50vh;
		width:40%;
	}
	
	.Angebot {
		margin:0rem auto 0rem;
		overflow:hidden;
		position:relative;
		height:50vh;
		width:40%;
	}
	
	.AngebotZeile_2 {
		display:flex;
		height:50vh;
		margin-top:2rem;
	}
	
	.AngebotInhalt {
		filter:grayscale(1);
		height:50vh;
		object-fit:cover;
		transition:all 0.5s ease-in-out;
	}

	.Angebot:hover img {
		filter:grayscale(0);
		transition:all 1s ease-in-out;
	}

	.Angebot:hover video {
		filter:grayscale(0);
		transition:all 1s ease-in-out;
	}
	
	.AngebotText{
		background-color:rgba(0,0,0,0.7);
		color:white;
		padding:1rem;
		position:absolute;
		bottom:-100%;
		height:100%;
		width: 100%;
		text-align:center;
		transition:all 0.5s ease-in-out;
	}

	.Angebot:hover .AngebotText{
		bottom:-60%;
		transition: all 1s ease-in-out;
	}

/* Portfolio */
	.PortfolioAuswahl {
		background-color:black;
		color:white;
		cursor:pointer;
		font-size:2.5rem;
		margin-bottom:0rem;
		border-bottom-width: 3px;
	}

	.PortfolioAuswahl:link a{
		background-color:black;
	}

	.PortfolioAuswahl:visited a{
		background-color:black;
		color:white;
	}

	.PortfolioAuswahl:hover a{
		background-color:black;
		color:white;
	}

	.PortfolioAuswahl:active a{
		background-color:black;
	}

	.PortfolioAuswahl::after {
		background-color:white;
		content:"";
		display:block;
		margin:0.1rem auto 0rem 0rem;
		height:4px;
		width:50%;
	}


	.PortfolioBeschreibung {
		margin:0rem auto 2rem auto;
		overflow:hidden;
		position:relative;
		height:50vh;
		width:30%;
	}

	.PortfolioBeschreibung:hover img {
		filter:grayscale(0);
		transition:all 1s ease-in-out;
	
	}

	.PortfolioBeschreibung:hover video {
		filter:grayscale(0);
		transition:all 1s ease-in-out;
	}

	.PortfolioText{
		background-color:rgba(0,0,0,0.7);
		color:white;
		padding:1rem;
		position:absolute;
		bottom:-100%;
		height:100%;
		width: 100%;
		text-align:center;
		transition:all 0.5s ease-in-out;
	}

	.PortfolioBeschreibung:hover .PortfolioText{
		bottom:-60%;
		transition: all 1s ease-in-out;
	}


/* Galerie */
	.galerie {
		display:flex;
		flex-wrap:wrap; 
		justify-content:space-between;
		padding-bottom:3rem;
		
	}

	.galerie span {
		flex-shrink:0;
		flex-grow:1;
		height:calc(width);
		min-height:calc(width);
		padding:0.5rem; 
		width:25%;
	}

	.galerie span img {
		object-fit:cover;
		height:100%;
		width:100%;
	}

	.galerie img {
		max-height:600px;
		max-width: 500px;
	}

	.galerie video {
		max-height:600px;
		max-width: 500px;
	}

	#portfolio_click_einblenden {
		display:none;
	}

	#360-Grad-Fotografien_click_einblenden{
		display:none;
	}

	#Photoshop_click_einblenden{
		display:none;
	}

	#video_click_einblenden {
		display:none;
	}

	#website_click_einblenden {
		display:none;
	}

	.filterLink{
		font-size:2rem;
		text-align:center;
		margin-top:0rem;
	}	

	.filter{
		font-size:2rem;
	}

/* Über Mich */	
	.ueberMich {
		height:150vh;
		display:flex;
	}

	.uerberMichBild {
		object-fit:cover;
		overflow:hidden;
		width:45%;
	}

	.ueberMichText {
		color:white;
		font-size:2rem;
		padding:1rem;
		width:50%;
	}

	.ueberMichText a{
		color:rgba(255,153,0,1);
	}

/* Formular */
	.formular_container{
		margin-top:3.5rem;
		margin:0 auto;
		max-width:700px;
		padding:2rem;
		z-index:5;
	}

	#formular {
		color:white;
		display:flex;
		flex-wrap:wrap;
	}

	.formular_titel {
		color:white;
		font-size:2rem;
		margin:0 auto;
		padding-bottom:1.5rem;
		padding-left:2.5rem;
		text-align:center;
	}

	.formular_text {
		font-size:1.5rem;
		padding:0.8rem 0.5rem;
		text-align:right;
		width:33%;
	}

	.formular_feld {
		padding:0.3rem;
		width:60%;
	}

	.formular_feld_radio {
		display:flex;
		padding:0.5rem;
		width:60%;
	}

	input,textarea {
		background:rgba(0,0,0,0.2);
		border:none;
		border-bottom:1px solid white;
		color:white;
		font-size:1rem;
		padding:1rem;
		transition:background ease-in-out 0.4s;
		width:100%;
	}

	input:focus, textarea:focus {
		background:rgba(255,255,255,0.7);
		color:black;
		transition:background ease-in-out 0.4s;
	}

	input[type=radio]{
		margin:0.5rem;
		height:1rem;
		width:1rem;
	}

	input[type=button]{
		background:black;
		color:white;
	}
	
	input[type=submit] {
		background:white;
		color:rgba(0,0,0,0.7);
		cursor:pointer; 
		transition:background color ease-in-out 0.4s;
	}

	input[type=submit]:hover {
		background:black;
		color:white;
		transition:background color ease-in-out 0.4s;
	}

/* Kontakt */
	.kontakaufnahme {
		color:white;
	}
	.kontaktaufnahmeText {
		font-size:2.5rem;
		text-align:center;
	}
	
	.kontaktaufnahmeButtomLinks {
		background-color:white;
		border-radius:50px;
		color:black;
		font-size:1.5rem;
		margin-top:1.5rem;
		padding:0.5rem 1rem;
		text-align:center;
		width:250px;
	}
	.kontaktaufnahmeButtomLinks:hover {
		background-color:black;
		border:1px solid white;
		color:white;
	}

	.kontaktaufnahmeButtomLinks a{
		color:black;
		text-decoration: none;
	}
	.kontaktaufnahmeButtomLinks:hover a {
		background-color:black;
		color:white;
	}
	
	.kontaktaufnahmeBottom {
		background-color:white;
		border:1px solid white;
		border-radius:50px;
		color:black;
		font-size:2.5rem;
		margin:2rem auto;
		padding:0.5rem 1rem;
		text-align:center;
		width:400px;
	}

	.kontaktaufnahmeBottom:hover {
		background-color:black;
		border:1px solid white;
		color:white;
	}

	.kontaktaufnahmeBottom a{
		color:black;
		text-decoration:none;
	}
	.kontaktaufnahmeBottom:hover a {
		background-color:black;
		color:white;
	}

	.TextGross {
		font-size:2.5rem;
		padding-top:3rem;
	}

/* Fusszeile */
	.footer {
		color:white;
		display:flex;
		font-size:1rem;
		margin-top:15rem;
	}
	
	.footer_links{
		bottom:1rem;
		margin-top:0.5rem;
		padding-left:5px;
		position:absolute;
		left:0.5rem;
	}
	
	.footer_rechts {
		margin-top:0.5rem;
		padding-right:5px;
		position:absolute;
		bottom:1rem;
		right:0.5rem;
	}

	.footerID_links{
		margin-top:0.5rem;
		padding-bottom:3px;
		position:absolute;
		left:0rem;
	}
	
	.footerID_rechts {
		margin-top:0.5rem;
		padding-right:5px;
		padding-bottom:3px;
		position:absolute;
		right:0rem;
	}

	.footerKontaktImpressum {
		color:white;
		display:flex;
	}
	
	.footerLinksKontakt{
		margin-top:1.5rem;
		padding-left:5px;
		position:absolute;
		bottom:0.5rem;
		left:0.5rem;
	}
	
	.footerRechtsKontakt {
		margin-top:0.5rem;
		padding-right:5px;
		position:absolute;
		bottom:0.5rem;
		right:0.5rem;
	}

/* Impressum/Datenschutz */
	.Impressum {
		color:white;
		font-family:ABeeZee, myriad-pro, sans-serif;
		padding:2rem;
		position:absolute;
		left:1rem;
		top:5rem;
		width:95%;
	}

	.Datenschutz {
		color:white;
		font-family:ABeeZee, myriad-pro, sans-serif;
		padding:2rem;
		position:absolute;
		left:1rem;
		top:5rem;
		width:95%;
	}

	.Datenschutz li{
		margin-left:7rem;
	}
/* RESPONSIVE DESIGN */
	@media screen and (max-width:960px){
		header {
			margin-bottom:3rem;
			position:relative;
		}

		h1 {
			font-size:4rem;
		}

		h2 {
			font-size:3rem;
		}

		h3 {
			font-size:2rem;
		}

		h4 {
			font-size:1.2rem;
		}

		p {
			font-size:1rem;
		}

		#container {
			max-width:960px;
		}

		.TextGross {
			font-size:1.8rem;
			padding-top:0rem;
		}
		
		 #navigationsbalken nav a {
			display:none;
			margin:1rem 0rem 1rem 4rem;
		}
		
		#navigationsbalken {
			display:none;
			font-size:1rem;
			padding:0.5rem 1.2rem;
			right:0.1rem;
			top:0.1rem;
		} 

		.logo img{
			width:25%;
		}
		
		.nav_mobile {
			display:block;
		}
		
		#navigationsbalken_mobile{
			display:none;
		}
		
		#menu_mobile {
			display:flex;
		}
		
		.unterstrichen::after {
			width:50%;
		}
		
		.AngebotZeile_1 {
			height:50vh;
			margin-top:1rem;
		}

		.Texteffekt {
			font-size:1.6rem;
		}
		
		.PortfolioAuswahl {
			font-size:1.5rem;;
		}
		
		.filter{
			font-size:1.2rem;
		}
		
		.ueberMich {
			height:85vh;
		}
		.uerberMichBild {
			width:40%;
		}
		.ueberMichText {
			width:55%;
		}
		
		.formular_container{
			margin-top:2.5rem;
			max-width:500px;
			padding:1rem;
		}

		.formular_titel {
			font-size:1.5rem;
			padding-bottom:1.5rem;
		}

		.formular_text {
			font-size:1.0rem;
			padding:0.8rem 0.5rem;
		}
		
		.formular_feld {
			padding:0.3rem;
		}
		
		.kontaktaufnahmeText {
			font-size:2rem;
			margin-top:8rem;
			text-align:center;
		}

		.kontaktaufnahmeButtomLinks {
			font-size:1.2rem;
			width:200px;
		}

		.kontaktaufnahmeBottom {
			font-size:1.8rem;
			width:300px;
		}
		
		.kontakaufnahme {
			padding-bottom:1rem;
		}
		
		.TextGross {
			font-size:2rem;
			padding-top:3rem;
		}
		
		.footer {
			font-size:0.9rem;
		}
	}/* Ende Media 960*/

	@media screen and (max-width:760px){
		header {
			margin-bottom:1.5rem;
			position:relative;
		}

		h1 {
			font-size:3.0rem;
		}

		h2 {
			font-size:2.5rem;
		}

		#container {
			max-width:760px;
		}

		.TextGross {
			font-size:1.7rem;
			padding-top:0rem;
		}
		
		.Texteffekt {
			font-size:1.2rem;
		}
		.Angebot {
			width:45%;
		}
		
		.PortfolioAuswahl {
			font-size:1.4rem;;
		}
		
		.filter{
			font-size:1rem;
		}
		.galerie span {
			padding:0.2rem;
			width:33.3%;
		}
		
		.ueberMich {
			height:85vh;
		}
		.uerberMichBild {
			width:30%;
		}
		.ueberMichText {
			width:70%;
		}
		
		.kontaktaufnahmeBottom {
			font-size:1.8rem;
			width:300px;
		}
		
		.TextGross {
			font-size:1.8rem;
			padding-top:3rem;
		}
		
		.footer {
			font-size:0.8rem;
			margin-top:6rem;
		}
		
		.footerKontaktImpressum {
			font-size:0.8rem;
			margin-top:3rem;
		}
		
		.Impressum {
			padding:0.5rem;
		}

		.Datenschutz {
			padding:0.5rem;
		}

		.Datenschutz li{
			margin-left:1.5rem;
		}
	} /* Ende Media 760 */

	@media screen and (max-width:450px){
		header {
			margin-bottom:0.5rem;
		}

		h1 {
			font-size:1.7rem;
		}

		h2 {
			font-size:1.5rem;
		}

		h3 {
			font-size:1.2rem;
		}

		h4 {
			font-size:1.1rem;
		}

		p {
			font-size:0.9rem;
		}

		#container {
			max-width:450px;
		}

		.TextGross {
			font-size:1.2rem;
			padding-top:0rem;
		}
		
		.logo img{
			left:-0.5rem;
			top:0.5rem;
			width:50%;
			z-index:10;
		}
		
		.AngebotZeile_1 {
			display:flex;
			flex-direction:column;
			height:60vh;
			margin-top:0.5rem;
		}

		.AngebotTitel {
			height:40vh;
			width:80%;
		}

		.Texteffekt {
			font-size:1.5rem;
		}

		.AngebotFotografie {
			height:40vh;
			width:100%;
		}

		.Angebot {
			margin-bottom:1rem;
			height:40vh;
			width:90%;
		}

		.AngebotZeile_2 {
			display:flex;
			flex-direction:column;
			height:60vh;
			margin:0rem;
		}

		.AngebotInhalt {
			height:40vh;
		}
		
		.AngebotText{
			background-color:rgba(0,0,0,0.8);
			bottom:-30%;
			padding:0.4rem;
		}
		
		.Angebot:hover .AngebotText{
			bottom:-30%;
		}
		
		.PortfolioAuswahl {
			font-size:1.2rem;
		}
		
		.filter{
			font-size:1rem;
		}
		.galerie span {
			padding:0.2rem;
			width:50%;
		}

		.galerie img {
			max-height:300px;
			max-width: 155px;
		}

		.galerie video {
			max-height:300px;
			max-width: 144px;
		}
		
		.ueberMich {
			display:block;
			height:80vh;
			margin-bottom:2rem;
		}
		.ueberMichText {
			color:white;
			font-size:2rem;
			padding:1rem;
			width:100%;
		}
		.uerberMichBild {
			width:0%;
		}
		
		#formular {
			color:white;
			display:block;
			flex-wrap:wrap;
		}
		.formular_container{
			margin-top:2.5rem;
			max-width:400px;
			padding:1rem;
		}

		.formular_titel {
			font-size:1.3rem;
			margin:0;
			padding-bottom:0.5rem;
			padding-left:0.4rem;
			text-align:left;
		}

		.formular_text {
			display:none;
		}
		
		.formular_feld {
			margin-bottom:0.5rem;
			margin-top:0rem;
			width:100%;
		}	
		
		input[type=radio]{
			margin:0.5rem;
			height:0.8rem !important;
			width:0.8rem !important;
		}
		
		input[type=submit] {
			width:6.5rem;
		}
		
		.kontaktaufnahmeText {
			margin-top:5rem;
		}

		.kontaktaufnahmeButtomLinks {
			font-size:0.9rem;
			width:150px;
		}

		.kontaktaufnahmeBottom {
			font-size:1.2rem;
			width:210px;
		}
		
		.TextGross {
			font-size:1.2rem;
			padding-top:3rem;
		}
		
		.footer {
			font-size:0.8rem;
			margin-top:7rem;
		}
		
		.footer_links{
			position:absolute;
			bottom:0.5rem;
			left:0.5rem;
		}
		
		.footer_rechts {
			position:absolute;
			bottom:2rem;
			left:1rem;
		}
		
		.footerKontaktImpressum {
			font-size:0.8rem;
			margin-top:8rem;
		}
		
		.footerLinksKontakt{
			position:absolute;
			bottom:0.5rem;
			left:0.5rem;
		}
	
		.footerRechtsKontakt {
			position:absolute;
			bottom:2rem;
			left:1rem;
		}
		
		.footerID_links{
			position:absolute;
			bottom:0.5rem;
			left:0rem;
		}

		.footerID_rechts {
			position:absolute;
			bottom:2rem;
			left:0rem;
		}
		
		.Impressum {
			padding:0rem;
			width:90%;
		}

		.Datenschutz {
			padding:0rem;
			width:90%;
		}

		.Datenschutz li{
			margin-left:1rem;
		}
	} /* Ende Media 450 */