/* CSS Reset */



		*{
			padding:0;
			margin:0;
			box-sizing: border-box;
		}
	
		html,body{
			scroll-behavior: smooth;
			text-align:center;
		}
		
		body {
			
		  font-family: "Roboto", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: 400;
		  font-style: normal;
		  font-variation-settings:100;
			background-color: lightgrey;
		}
		
		
		a{
			text-decoration: none;
		}
		
		li{
			list-style-type: none;
		}
		
		
		h1,h2,h3,a {
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			color: black;
			text-transform: uppercase;
		}
		
		
		h2{
			color: #5d7177;
		}
		
		h3{
			font-size: 40px;
			padding-top: 8%;
			margin-bottom: 5px;
		}
		
		h4, p{
			font-family: 'Roboto slab' serif;
		}
		
		
		hr{
			width: 30px;
			height:3px;
			background: #494949;
			border:0;
			margin:0px auto 40px auto;
		}

		
		#logo, li, img {
			transition: all 0.3s; 
			-webkit-transition: all 0.3s; 
			-moz-transition: all 0.3s; 
			-o-transition: all 0.3s;
		}
		
		.fa-bars{
			display:none;
		}		

		/* HEADER */
		header{
			width:100%;
			height:90px;
			position: fixed;
			top:0;
			left:0;
			background: white;
			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
			z-index: 1;
		}

		#logo{
			width:200px;
			float: left;
			margin: 10px 0 0 50px;	
			
		}
		
		#logo:hover{
			opacity: 0.5;
		}
		
		
		#logo img{
			width:140px;
		}
		
		header nav{
			float: right;
			margin: 16px 50px 0 0;
			padding-top: 20px;
		}
		
		header nav ul li{
			float: left;
			margin-left: 20px;
		}
		
		header nav ul li a{
			font-size:20px;
		}
		
		header nav ul li:hover{
			padding-top:5px;
			
		}
		
		
		
		/* HOME */
		
		#home {
			background: url("bilder/tunnel.JPG");
			background-position:bottom;
     		background-size:cover;
			background-attachment: fixed;
			height:100vh;
		}
		
		#home h1{
			margin: 240px auto 0 auto;
			font-size: clamp(15px, 8vw, 350px);
		}
		
		#home h2{
			margin: 0 auto 0 auto;
			font-size: 40px;
			color: black;
		}
		
		#home img{
			width:200px;
			margin-top: 150px;
			opacity: 0.3;
		}
		
		#home img:hover{
			opacity: 1;
		}
		
		
		/* ABOUT */

		.nebeneinander{
			display: flex;
			/*flex-direction: row;*/
			height: 100%;
			margin-bottom: 2rem;
			justify-content: center;
			align-content: center;
			/*grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));*/
		}


		
		.nebeneinander img{
			width:240px;
		}
		
		.nebeneinander img:hover{
			transform: scale(1.1);
			cursor: pointer;
		}
		
		.nebeneinander h4{
			font-size:25px;
		
		}
		
		.nebeneinander p {
			width:600px;
			margin:0 auto 0 auto;
		}
		
		

		/* WORK */
		#work{
			background-color: dimgray;
		}
		
		#projekts{
			width:900px;
			margin:0 auto 0 auto;
		}
		
		#projekts ul{
			padding: 0;
		}
		
		#projekts ul li{
			width:33.33%;
			/*float: left;*/
			margin-bottom: 5px;
		}
		
		
		#projekts img{
			width: 210px;
			height:280px;
			border-radius: 5px;
		}
		
		#projekts img:hover{
			transform: scale(1.1);
			box-shadow: 0 5px 5px rgba(0,0,0,0.3)
		}

		.bildgalerie {
			height:100%;
			display:grid;
			gap: 1rem;
			/*grid-template-areas:"bild_portrait bild_automotiv gallery_product "*/
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
			
		}

		.bild_1 {
			border:1px solid white;
			grid-area: bild_1;
		}
		
		.bild_3 {
			border:1px solid white;
			grid-area: bild_3;
			
		}
		.bild_4 {
			border:1px solid white;
			grid-area: bild_4;
			
		}
		.bild_5 {
			border:1px solid white;
			grid-area: bild_5;
			
		}

		.bild_6 {
			border:1px solid white;
			grid-area: bild_6;
			
		}
		
		.bild_7 {
			border:1px solid white;
			grid-area: bild_7;
			
		}

		.bild_8 {
			border:1px solid white;
			grid-area: bild_8;
			
		}
		
		.bild_9 {
			border:1px solid white;
			grid-area: bild_9;
			
		}
		

		
		.bildgalerie img {
			width:100%;
			aspect-ratio:3/4;
		}

		/* CONTACT */
		input, textarea{
			font-family: 'Roboto Slab', serif;
			font-size: 15px;
			margin-bottom: 10px;
			border-radius: 2px;
			border: 2px solid;
			border-color: #494949;
			
		}
		
		form input:first-child{
			margin-top: 10px;
		}
		
		form input{
			width: 552px;
			height:30px;
		}
		
		form textarea {
			width:550px;
			height:220px;
			resize: none;
		}
		
		#contact{
			padding-bottom: 2rem;
		}
		
		.input_text{
			color: #494949;
			padding-left: 10px;
		}
		
		
		.button{
			background-color: #f0f0f0;
			color:#494949;
			width:566px;
			height:50px;
		}
		
		.button:hover{
			background-color:#494949 ;
			color:#f0f0f0;
		}
		
		
		/* FOOTER */
		footer{
			width:100%;
			height:80px;
			background-color: #3f3f3f;
			padding: 2rem;
		}
		
		footer p{
			font-size:12px;
			color:#f0f0f0;
			padding-top: 10px;
		}
		
		.footer_button{
			font-family: 'Roboto Slab', serif;
			background-color: #f0f0f0;
			color:#494949;
			padding:5px;
		}

		#impressum,#datenschutz{
			border:1px solid black;
			position: fixed;
			left:1rem;
			top:6rem;
			width:80%;
			height:80vh;
			margin: 0 auto;
			background: rgba(255,255,255,0.8);
			padding: 2rem;
			overflow-x: hidden;
			display: none;
		}
		
		.show_element{
			display:block !important;
		}
		
		.flashcard{
			cursor: pointer;
		}
		
		.close_button{
			position: absolute;
			border:1px solid black;
			border-radius:50%;
			width:2rem;
			top:1rem;
			right:1rem;
			aspect-ratio:1/1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size:1rem;
		}
		
		.close_button .fa{
			pointer-events: none;
		}/* CSS Document */


		/* Hamburger display none*/
		/*.menu_mobile{
			display: none;
		}*/


		/* media query für 800px */
		@media screen and (max-width:768px){
			
			.nebeneinander{
			flex-direction: column;
			/*grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));*/
			}
		
			.nebeneinander div{
				margin-bottom:2rem;
				
			}
				.nebeneinander img{
				width:80%;
				
			}
			
			header nav{
				margin-top: 0;
			}
			
			header nav ul li{
				font-size: 12px;
			}
			
			#home h2{
				font-size:22px;
			}
			
			h3{
				padding-top:12%;
			}
			
			#about p {
				width: 80%;
			}
			
			/*.menu_desktop{
				display: none;
			}*/	

		} /*END MEDIA QUERY 800px*/


		@media screen and (max-width:480px){
			
			#logo{
				font-size: 20px;
				margin-left: -20px;
			}
			
			header nav {
				margin-right: 160px;
			}
			
			
			header nav ul li{
				font-size: 10px;
				padding-top:20px;
			}
			
			#home h1{
				font-size: 40px;
				margin-top:200px;
				
			}
			
			#home h2{
				width:70%;
				height: auto;
			}
			
			#work img{
				width:70%;
				height: auto;
			}
			
			.nebeneinander{
			flex-direction: column;
			/*grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));*/
			}
		
			.nebeneinander div{
				margin-bottom:1rem;
			}
				.nebeneinander p{
				width:80%;
			}
			
			

		}/*END MEDIA QUERY 480px*/