/* CSS Dokument */
/* thank you for looking at this code */
/* Design by visu-art, Pierre Sulger */
		
	/* ===================================================== */
	/* schriften importieren							     */
	/* cropaso für titel / montserrat für fliesstext         */
	/* ===================================================== */
		
		@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,700;1,100;1,200;1,400;1,700&display=swap');
		
		
		/* eigene schriftart definieren und einbinden (cropaso für titel) */
		
		.cropaso_font {
		font-family:'cropaso_schrift';
		}
		
		@font-face {
			font-family:'cropaso_schrift';
			src:url('../fonts/Cropaso-Regular.otf');
		}
		
		/* dickere Schrift */
		.fett100 {
			font-weight:100; /* entspricht thin*/
		}
		.fett200 {
			font-weight:200; /* entspricht extralight*/
		}
		.fett400 {
			font-weight:400; /* entspricht regular*/
		}
		.fett700 {
			font-weight:700; /* entspricht bold*/
		}


		
		/* CSS RESET */
		* {
			box-sizing:border-box;
			margin:0;
			padding:0;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			font-weight:400;  /* entspricht extralight*/
		}
		
	/* ===================================================== */
	/* LAYOUT */
	/* ===================================================== */

		main {	
		}
		
		*{
			box-sizing:border-box;
			margin:0;  /* damit das bild bis am rand vom fenster geht */
			padding:0;
		}

		html, body {
			background:black;
			color:white;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			font-size:16px; /* Grundgrösse */
			letter-spacing:.2rem;
			line-height: 1.4rem;
			scroll-behavior: smooth;
		}

		
		h1,h2,h3,h4,h5,h6 {
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		}
		h1,h2 {
			padding:0rem;
			font-family: 'cropaso_schrift', Helvetica, Verdana, sans-serif;
			letter-spacing:.5rem;
			text-transform: lowercase;
			color:rgb(255,166,38);
		}
		h3 {
			font-family: 'cropaso_schrift', Helvetica, Verdana, sans-serif;
/*			letter-spacing:.5rem; */
			text-transform: lowercase;
			color:rgb(255,255,255);
/*			padding:0.5rem; */
		}

		h4,h5,h6 {
			padding:0.5rem;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			color:white;
		}

		/*		header    */

		.header_header_startseite {
			background-repeat: repeat;
			background-image: url("../logo/Logo_ohne_Text_10percent.svg");
			background-size: 20rem;
			background-position: center;
			height: 100vh;
}

		.header_generell {
			background-repeat: repeat;
			background-image: url("../logo/Logo_ohne_Text_10percent.svg");
			background-size: 20rem;
			background-position: center;
			height: 100vh;
}



		/* darstellung der links */

		a {
			text-decoration:none; /* nicht unterstrichen */	
		}

		a:link {
		}
		
		a:visited {
			color:white;
		}
		a:hover {
			color:white;				
		}

		a:active {
			color:white;				
		}

		.header_box {
/*			max-width: 1600px;
*/			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,166,38,.20) 30%, rgba(255,166,38,.7) 100%);
			height: 150px;
/*			padding-right: 50px; */
			padding:0;
			margin: 0;
			display: flex;
/*			flex-direction:row; */
			flex-wrap:nowrap;
			justify-content:space-between;
			align-items:center;
			z-index:900;
		}
		.header_box_logo {
			background-image: url('../logo/Logo_ohne_Text.svg');
			background-repeat: no-repeat;
			width:150px;
			height:150px;
			padding:0px;
			margin-left: 10px;
			margin-right: 20px;
/*			border:2px solid green; */
			transition:1s ease-in-out all;
			opacity:100%;
			z-index:901;
		}
		.header_box_logo:hover {
			background-image: url('../logo/Logo_komplett_SVG.svg');
			background-repeat: no-repeat;
			transition:1s ease-in-out all;
			opacity:100%;
			z-index:902;
		}
		
		.header_box_rechts {
			display:flex;
/*			flex-direction:row;
*/			flex-wrap:wrap;
			justify-content:flex-end;
			align-items:center;
			width:800px;
			height:88px;
			margin-top:-20px;
			padding-right:50px;
			padding-top:0px;
			background-attachment: scroll; /*scroll */
/*			border:1px solid yellow;
*/			border-radius: 0.3rem;
			transition:1s ease-in-out all;
			z-index:100;
		}
		
		.header_box_rechts div{
/*			border:1px solid red;
*/			flex-grow:1;
			text-align:right;
			align-items:center;
			}
			
		.nicht_sichtbar {
			visibility:hidden;
			}
		

	/* ===================================================== */
	/* navigation */
	/* ===================================================== */

/*		#navigation {
			border:1px solid white;				
			margin-right:0px;
			padding-right: 0px;
			flex-wrap:wrap;
			gap:1rem;
		}*/

		/* kontextsensitive Selektoren */
		#navigation a:link {
			font-family: 'cropaso_schrift', Helvetica, Verdana, sans-serif;
			letter-spacing:3px;
			text-transform: lowercase;
			border:none; /* nötig weil sonst von oben vererbt */
			background:none;
			color:rgba(255,166,38,1);
			flex-grow:1; /*fülle den Raum aus */
			text-align:center;
			padding:0.6rem;
			border-radius:.5rem;
			transition:all ease-in-out 0.3s;	
		}

		#navigation a:visited {
			color:rgba(255,166,38,1);
		}

		#navigation a:hover {
			background:rgba(255,255,255,.15);
/*			border:1px solid yellow;
			border-radius:.5rem;*/
			color:white;
			/* animierter effekt */
			transition:all ease-in-out 0.3s;
		}


/* Aktiver Menüpunkt hervorheben (eigene Klasse) */
	.navigation_aktiv {
/*		background-color: 	rgba(255,166,38,.1) !important; */
		color:white !important;
/*	   	padding:0.7rem !important;
*/		border:1px solid rgba(255,166,38,1) !important;
		border-radius: 0.3rem;
	}

/*
		.nav_container {
  			display: flex;
  			justify-content: flex-end;
		}*/






	section {
		height:100vh;  /*volle Höhe für jede Sektion*/
/*		border:2px dotted yellow;
*/	}



	.hintergrund_bildkomposition {
		background-repeat:no-repeat;
		background-image:url(../bilder/hintergrund/Bildkomposition_unerwartete_welt_Hintergrund.jpg);
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_logodesign {
		background-repeat:no-repeat;
		background-image:url(../bilder/hintergrund/Logodesign_Digicasa_Hintergrund.jpg);
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_3dmodell {
		background-repeat:no-repeat;
		background-image:url("../bilder/hintergrund/Visual_StAubin_Iso_Strasse_Konstruktion_Hintergrund.jpg");
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_struktur {
		background-repeat:no-repeat;
		background-image:url(../bilder/hintergrund/Struktur_Opernhaus_Saal_Oslo_Hintergrund.jpg);
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_architekturdetails {
		background-repeat:no-repeat;
		background-image:url(../bilder/hintergrund/Architekturdetails_foto_5_Hintergrund.jpg);
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_portraits {
		background-repeat:no-repeat;
		background-image:url("../bilder/hintergrund/Portraits_Dami_1_Hintergrund.jpg");
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_game {
		background-repeat:no-repeat;
		background-image:url("../bilder/hintergrund/Game_Silhouette_Hintergrund.jpg");
		background-size:150%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
	.hintergrund_fotobegehung {
		background-repeat:no-repeat;
		background-image:url("../bilder/hintergrund/Fotobegehung_Kirche_Hintergrund.jpg");
		background-size:170%;
		background-attachment:fixed;
		background-position:center;
		opacity: 30%;
	}
.hintergrund_height{
	height: 100vh;
}

		/* eigene Klassen */
		.rechts_text {
			text-align:right;
		}
		.intro {
/*			border:1px solid yellow;*/
			width:80vw;
			max-width:90vh;
			margin-top: 0;
			position: absolute;
			top: 70vh;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50vh);
			z-index:1;
		}

		.intro_text {
			padding:10px;
/*			width: 84vw;*/
			display: flex;
			flex-direction:column;
			flex-wrap:nowrap;
			align-items:flex-start;
			border:1px solid rgba(255,166,38,1);
			border-radius:1.2rem;
}

		.intro h1 {
/*			border: 2px solid green;
*/			margin:0;
		}
		.intro h3 {
/*			border: 2px solid lightgreen;
*/			margin-top: 0.3rem;
    		margin-left: 2rem;
			margin-bottom:2rem;
		}


		.intro_text h1 {
/*			border: 2px red solid;
*/			padding:10px;
		}
		.intro_text h3 {
/*			border: 2px red solid;
*/			padding:10px;
		}
		.intro_text p {
/*			border: 2px red solid;*/
			padding:10px;
			color:white;
		}
		.intro_text a {
			color:rgba(255,166,38,1);
		}

		.rubrik_titel {
/*			border: 2px yellow solid;
*/			height: 10vh;
			margin-left:3rem;
			margin-top: 3rem;
			margin-bottom: 1rem;
			padding:0;
		}

		.rubrik_titel h2 {
/*			border: 2px red solid;
*/			padding-top: 2rem;
			margin-left: 0rem;
			}

		.rubrik_titel h3 {
/*			border: 2px blue solid;
*/			margin-top: .5rem;
			margin-left: 2rem;
			}

	.portfolio_bild_container {
		height: calc( 98vh - 200px );
		max-width: 1200px;
		overflow: hidden;
		margin-top:0rem;
/*		margin-left:3rem;
		margin-right:3rem; */
		margin:auto;
	}

	.portfolio_bild_container_bildkomposition {
		height: calc( 98vh - 200px );
		max-width: 1200px;
		overflow: hidden;
		margin-top:0rem;
		margin-left:3rem;
		margin:auto;
	}

	.makingof_video_container {
		height:90vh;
		min-height:7rem;
		margin-top:2rem;
		margin-bottom:4rem;
		margin-left:2rem;
		margin-right:2rem;
	}

	.makingof_video_container video {
		border:1px solid rgba(255,166,38,1);
		border-radius:.8rem;

		width:90vw;
				max-width:1280px;
	}



	/* Berreiche mit Bild/Text */
	article {
		display:flex;
		justify-content: flex-start;
	}
	.article_bild {
		background-color: red;
		width:60%;
		padding:0; /* weil oben vom div vererbt */
/*		margin-left:2rem; */
	}

	.article_text {
		width:40%;
		padding:1rem;
		margin-right:2rem;
	}





	.img_lupe_container {
		position:relative;
		height: 100%;
		/*margin:0 auto;*/
		/*margin-top:5vh;*/
		/*width:90vw !important;*/
/*		border: 3px solid red;
*/	}

	.img_lupe_container img {
		width:auto;
		height:100%;
}
	.img_lupe_glass {
		position: absolute;
		border: 3px solid rgba(255,166,38,1);
		border-radius: 50%;
		cursor: none;
		/*Set the size of the magnifier glass:*/
		width: 25vh; /*200px */
		height: 25vh; /*200px */
		box-shadow: 1rem 1rem 3rem rgba(0,0,0,0.9);
		filter:brightness(1.1);
	}


	.vollbildcover {
		width:100%;
		height:100%;
		object-fit:cover;
	}

	.bildgalerie_navigation {

		display:flex;
/*		flex-direction:column;  => FÜR RESPONSIVE */
		flex-wrap:wrap;
		margin-top:2rem;
		width:100%;
		gap:2%;
		justify-content: space-between;
		align-content: center;
	}

	.bildcontainer_navigation {
		flex-grow: 1;
		background-color:black;
		width:47%;
		border:2px solid rgba(255,166,38,1);
		border-radius:.8rem;
		margin-bottom:2%;
		overflow:hidden;
		position:relative;
	}

	.bildcontainer_navigation a:link {
		padding:0;
		position:0px;
		line-height:0;
		color:rgba(255,166,38,1);
	}

	.bildcontainer_navigation a:visited {
		margin:0;
		line-height:0;
		color:rgba(255,166,38,1);
	}

	.bildcontainer_navigation img {
/*		object-fit:cover;
		padding:.5rem;
		border-radius:1rem;*/
		width:101%;
		height:101%;		
	}

	.bildtitel_navigation {
		font-family: 'cropaso_schrift', Helvetica, Verdana, sans-serif;
		font-size:1.3rem;
		color:white;
		background-color: rgba(255,166,38,1);
		position:absolute;
		bottom:-3rem;
		height:.7rem;
		left:1rem;
		right:1rem;
/*		width:90%;
*/		transition:0.5s all;
	}
	.bildcontainer_navigation:hover .bildtitel_navigation {
		bottom:1.5rem;
		transition:0.5s all;
	}
	.bildcontainer_navigation:hover img {
		opacity: 30%;
		transition:0.5s all;
	}

	ul.portfolio_archidetail {
	  	margin-left: 1rem;
		margin-right: 1rem;
		margin-top: 1rem;
		height:80%;
		padding: 0;
		white-space: nowrap;
		/*	  width: 600px;*/
		overflow-x: auto;
		background-color: black;
	}
	ul.portfolio_archidetail li {
		padding:0px;
	  display: inline;
	}


		/* Bildergalerie Struktur */
		
		.struktur_bildergalerie {
			display:flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.struktur_bild_container {
			border-radius:1rem;
			padding:0rem;
			flex-grow:1;
			margin:1%;
			height:30%;
			overflow: hidden; /* versteckt alles ausserhalb */
			position:relative;
			width:30%;
			gap:1%;
}

		.struktur_bild_container img {
			object-fit: cover;
			width:100%;
			height:100%;
			transition:all ease-in-out 0.3s;
						
		}
		/* bild skalieren */
		.struktur_bild_container:hover img {
			transform:scale(1.2);
			transition:all ease-in-out 0.5s;
		}
		.struktur_bild_container_titel {
			background-color:rgba(0,0,0,0.7);
			border-bottom:1px solid white;
			border-top:1px solid white;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			font-size:1rem;
			letter-spacing:.2rem;
			line-height: 1.4rem;
			font-weight:400;
			color:rgba(255,166,38,1);
			bottom:-4rem;			
			left:0;
			padding:0rem;
			position:absolute;
			text-align:center;
			transition:all ease-in-out 0.3s;
			width:100%;			
		}
		/* rollover beim container, aber animieren vom titel */
		.struktur_bild_container:hover .struktur_bild_container_titel {
			bottom:2rem;
			transition:all ease-in-out 0.5s;	
		}
		
		/* Fancybox stylen */
		.fancybox__caption {
			color:rgba(255,166,38,1);
			font-size:1rem;
		}
		.fancybox__backdrop {
			background:rgba(255,255,255,0.3);
		}

		/* swiper für portfolio_Architekturdetails */
		.swiper {
			width: 100% auto;
			swiper-navigation-size: 44px;
/*		  	height: auto;
*/}
	.swiper-button-next {
	color:rgba(255,166,38,1) !important;
}
	.swiper-button-prev {
	color:rgba(255,166,38,1) !important;
}

/* Bildergalerie Game */
		
	 	.game_bildergalerie {
			display:flex;
		/*	flex-wrap: wrap;*/
			justify-content: space-between;  
		}   

		.game_bild_container {
			border-radius:1rem;
			padding:0rem;
			flex-grow:1;
			margin:1%;
			height:100%;
			overflow: hidden; /* versteckt alles ausserhalb */
			position:relative;
			width:30%;
			gap:1%;
}

		.game_bild_container img {
			object-fit: contain;
			width:90vmax;
			height:90vh;
			transition:all ease-in-out 0.3s;
						
		}
		/* bild skalieren */
		.game_bild_container:hover img {
			transform:scale(1.2);
			transition:all ease-in-out 0.5s;
		}
		.game_bild_container_titel {
			background-color:rgba(0,0,0,0.7);
			border-bottom:1px solid white;
			border-top:1px solid white;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			font-size:1rem;
			letter-spacing:.2rem;
			line-height: 1.4rem;
			font-weight:400;
			color:rgba(255,166,38,1);
			bottom:-4rem;			
			left:0;
			padding:0rem;
			position:absolute;
			text-align:center;
			transition:all ease-in-out 0.3s;
			width:100%;			
		}
		/* rollover beim container, aber animieren vom titel */
		.game_bild_container:hover .game_bild_container_titel {
			bottom:2rem;
			transition:all ease-in-out 0.5s;	
		}
		
/* Bildergalerie Fotobegehung */
		
	 	.fotobegehung_bildergalerie {
			display:flex;
		/*	flex-wrap: wrap;*/
			justify-content: space-between;  
		}   

		.fotobegehung_bild_container {
			border-radius:1rem;
			padding:0rem;
			flex-grow:1;
			margin:1%;
			height:100%;
			overflow: hidden; /* versteckt alles ausserhalb */
			position:relative;
			width:30%;
			gap:1%;
}

		.fotobegehung_bild_container img {
			object-fit: contain;
			width:90vmax;
			height:90vh;
			transition:all ease-in-out 0.3s;
						
		}
		/* bild skalieren */
		.fotobegehung_bild_container:hover img {
			transform:scale(1.2);
			transition:all ease-in-out 0.5s;
		}
		.fotobegehung_bild_container_titel {
			background-color:rgba(0,0,0,0.7);
			border-bottom:1px solid white;
			border-top:1px solid white;
			font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
			font-size:1rem;
			letter-spacing:.2rem;
			line-height: 1.4rem;
			font-weight:400;
			color:rgba(255,166,38,1);
			bottom:-4rem;			
			left:0;
			padding:0rem;
			position:absolute;
			text-align:center;
			transition:all ease-in-out 0.3s;
			width:100%;			
		}
		/* rollover beim container, aber animieren vom titel */
		.fotobegehung_bild_container:hover .fotobegehung_bild_container_titel {
			bottom:2rem;
			transition:all ease-in-out 0.5s;	
		}



		/* footer immer unten fixiert */
		
	footer {
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,166,38,.20) 30%, rgba(255,166,38,.7) 100%);
		display:flex;
		flex-wrap: wrap;
		height:4rem; /* 20% Höhe für Footer */
		justify-content: flex-start;
		padding-left:0rem;
		padding-right:3rem;
		padding-top:.7rem;
		padding-bottom:.5rem;
		text-align:left;
		font-size:.8rem;
		font-weight: 400;
	}

	footer div {
/*		border:1px solid yellow;*/
		padding-left:2rem;
		color:white;
		flex-grow:1;
	}

	footer div a {
	color:white;
	}

/*	#infoanzeige {
		padding:1rem;
		position:fixed;
		top:0;
		right:0;
		z-index:666;
	}
*/
	#totop {
		position:fixed;
		width:2rem;
		height:2rem;
		bottom:10px;
		right:10px;
		border:1px solid rgba(255,166,38,1);
		border-radius:.3rem;
		background:rgba(255,166,38,.20);
		z-index:50;
	}
	#totop i {
		padding-left:.3rem;
		padding-bottom:10px;
		font-size:2rem;
		color:white;
		z-index:51;
	}

	.container_before_after {
/*		border:1px solid rgba(255,166,38,1);*/
		padding:0;		
		margin:0 auto;
		margin-top:5vh;
		width:80vw;
	}
	.container_buttons {
/*		border:1px solid yellow;
*/		margin-bottom: .5rem;
		}

	.actionbutton {
		background:none;
		color:rgba(255,166,38,1);
		margin-right:1rem
	}

	.formular_intro { /*vertical und horizontal center */
		border:1px solid black;
		position: relative;
		margin-top:2rem;
		margin-bottom:2rem;
		width:100% auto;
		left: 50%;
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%,0);
		z-index:1;
		}

	.formular_container {
		max-width: 380px;
		hight: 900px;
		background-color: black;
		margin: 0 auto;
		border:1px solid rgba(255,166,38,1);
		padding: 30px;
		border-radius: 1rem;
		color:white;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-size:.7rem;
		letter-spacing:.1rem;
		line-height: 1.1rem;
	}
	.formular_container h1 {
		font-size:1.1rem;
		color:rgba(255,166,38,1);
		margin-bottom:20px;
	}
	.formular_container i {
		color:rgba(255,166,38,1);
	}


	.formular_feld {
		width:100%;
		padding:.5rem;
		margin-top:.3rem;
		margin-bottom:1rem;
		box-sizing:border-box;
		border: 1px solid rgba(255,166,38,1);
  		border-radius: 4px;
		background-color: black;
		outline:none;
		color:white;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		letter-spacing:.1rem;
		line-height: 1rem;
	}

	.formular_interesse {
		margin-top:.3rem;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-around;
	
}

	ul {
		list-style-type:none;
		margin-left:10px;
		margin-right:20px;
	}

	.formular_textarea {
		width:320px;
		height:100px;
		padding:.5rem;
		margin-top:.3rem;
		margin-bottom:1rem;
		box-sizing:border-box;
		border: 1px solid rgba(255,166,38,1);
  		border-radius: 4px;
		background-color: black;
		outline:none;
		color:white;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		letter-spacing:.1rem;
		line-height: 1rem;
	}
	textarea {
		resize: none;
	}

	::placeholder {
		color: rgba(255,166,38,1);
	  	opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: rgba(255,166,38,1);
	}

	::-ms-input-placeholder { /* Microsoft Edge */
		color: rgba(255,166,38,1);
	}

	input[type=radio], input[type=checkbox] {
		appearance: none;
		background-color: black;
		border: 1px solid rgba(255,166,38,1);
		padding: .3rem;
		border-radius:30%;
      }	

	input[type=radio]:checked {
		background-color: white;
		border: 1px solid white;
      }

	input[type=checkbox]:checked {
		background-color: white;
		border: 1px solid white;
      }

	input[type=submit] {
		background-color: rgba(255,166,38,.3);
		border: 1px solid rgba(255,166,38,1);
		border-radius: 4px;
		color: white;
		width:320px;
		height:2rem;
		padding: 3px 3px;
		text-decoration: none;
		margin-top: 1rem;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		letter-spacing:.1rem;
		line-height: 1rem;
		cursor: pointer;
	}

	.intro_impressum {
		margin-left: 10vw;
		margin-right: 10vw;
		margin-bottom: 2rem;
		width:80vw;
		margin-top: 2rem;
	}

	.impressum_text {
		margin-top:2rem;
		padding-top:0rem;
		padding-left:2rem;
		padding-bottom:2rem;
		padding-right:2rem;
		width: 100%;
		border:1px solid rgba(255,166,38,1);
		border-radius:1.2rem;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-size:14px;
	}

	.impressum_text h2 {
		padding-top:1rem;
		color:white;
		margin-left:0;
		margin-bottom:0rem;
		font-size:1.4rem;
		letter-spacing:.2rem;
		line-height: 2rem;
		
	}

	.impressum_text p {
		color:white;
		font-size:1rem;
		letter-spacing:0rem;
		line-height: 1.3rem;
	}

	.impressum_text a {
			color:rgba(255,166,38,1);
	}







	.center {
		margin-left:30vw;
		margin-right:30vw;
		padding-top:10vh;
		object-fit:cover;

/*		padding:20vh;*/
}
			
/*			margin: 0 auto;

			width: 80vw;
			height:80vh;
			

		}*/
		
		.logoanimation {
			width:80vw auto;
			
			
		}


@media only screen and (max-width:800px) {
		/* For tablets: */

	
	.hintergrund_height{
		height:100vh;
	}
	
	.struktur_bild_container {
    height: 200px;
}
	
	
	.header_box_rechts {
		width: 400px;
}

	
	.portfolio_bild_container {
/*		border: 2px solid red;		*/
		height:auto;
		overflow: hidden;
		margin-top:0rem;
		margin-bottom:3rem;
		margin-left:3rem;
		margin-right:3rem;
	}
	
}		/* Ende vom @media !!! */


@media only screen and (max-width:500px) {
  /* For mobile phones: */
	
	.header_box_logo {
		background-image: url('../logo/Logo_komplett_SVG.svg');
		transition:none;
		}
	
	.header_box_rechts {
		display:flex;
		flex-direction:column;
		flex-wrap:nowrap;
		justify-content:flex-end;
		align-items:flex-end;
		height:88px;
		margin-top:5px;
		padding-right:20px;
		padding-top:0px;
		border-radius: 0.3rem;
		transition:1s ease-in-out all;
		z-index:100;
	}
	
		section {
		height:auto;  /*volle Höhe für jede Sektion*/
		border:none;
/*		border-top:1px solid rgba(255,166,38,1);
		border-bottom:1px solid rgba(255,166,38,1);
*/		}

	.intro {
/*			border:1px solid yellow;*/
		width:90vw;
		max-width:90vh;
		margin-top: 20px;
		position: absolute;
		top: 70vh;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50vh);
		z-index:1;
	}
	
		.intro_text p {
		line-height: 1.1;
		}
	
	
	.bildgalerie_navigation {

		display:flex;
		flex-wrap:wrap;
		margin-top:2rem;
		width:100%;
		gap:1rem;
	}

	.bildcontainer_navigation {
		flex-grow: 1;
		background-color:black;
		width:100%;
		height:75px;
		border:2px solid rgba(255,166,38,1);
		border-radius:.8rem;
		margin-bottom:0%;
		overflow:hidden;
		position:relative;
	}
	
	.bildcontainer_navigation img {
		object-fit:cover;
		border-radius:1rem;
		width:101%;
		height:101%;		
	}
	.hintergrund_height{
			height:10vh;}
	
	.hintergrund_bildkomposition {
		background-image:none;
	}
	.hintergrund_logodesign {
		background-image:none;
	}
	.hintergrund_3dmodell {
		background-image:none;
	}
	.hintergrund_struktur {
		background-image:none;
	}
	.hintergrund_architekturdetails {
		background-image:none;
	}
	.hintergrund_portraits {
		background-image:none;
	}
	.hintergrund_game {
		background-image:none;
	}
	.hintergrund_fotobegehung {
		background-image:none;
	}
	
	.struktur_bild_container {
    height: 100px;
}
	
	
	
	.rubrik_titel {
		height: 4rem;
		margin-left: 3rem;
		margin-top: 3rem;
		margin-bottom: 1rem;
		padding: 0;
	}
	

	.rubrik_titel h2 {
		margin-top: 0rem;
		padding-top: 1rem;
		margin-left: -.7rem;
		letter-spacing:.3rem;
		font-size:1.3rem;
	}

	.rubrik_titel h3 {
		margin-top: .3rem;
		margin-left: 0rem;
		letter-spacing:.3rem;
		font-size:1.1em;
	}
		
	.navigation_aktiv {
/*		background-color: 	rgba(255,166,38,.1) !important; */
		color:white !important;
		border:none !important;
		border-radius: none;
	}


	.portfolio_bild_container_bildkomposition {
		display: flex;
		margin-left: 2rem;
		margin-right: 2rem;
		height:25vh;
		justify-content: center;
	}

	.img_lupe_glass {
		display:none !important;
	}
	
	.makingof_video_container {
    height: 0vh;
    min-height: 7rem;
    margin-top: 2rem;
    margin-bottom: 30rem;
    margin-left: 2rem;
    margin-right: 2rem;
	}
	
	.impressum_text h2 {
    padding-top: 1rem;
    color: white;
    margin-left: 0;
    margin-bottom: 0rem;
    font-size: 1rem;
    letter-spacing: .2rem;
    line-height: 1.1rem;
}
	.impressum_text p {
    color: white;
    font-size: .8rem;
    letter-spacing: 0rem;
    line-height: 1.1rem;
}
	

}		/* Ende vom @media !!! */