*{
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}


html{
	height: 100%;
	
}


@keyframes appear {
	from{
		opacity: 0;
		scale:0.5;
	}
	to{
		opacity: 1;
		scale: 1;
	}
}

		.header{
			padding: 9%;
			font-size: 80px;
			height: 40%;
			background-color: black;
			color: lightgray;
		    display: flex;
			justify-content: center;
			align-items: center;
		}

#navigation{
			height: 50px;
			width: 100%;
			background-color: #292929;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
			box-shadow: 0px 2px 4px rgba(0,0,0,0.144);
			
}
nav ul{
	float: right;
}
nav li{
	display: inline-block;
	margin: 30px;
	
}
nav li a{
	font-size: 18px;
	color: darkgray;
	text-decoration: none;
}
nav ul li .active{
	color: lightblue;
}

 #navigation:not(.sticky){
	position: absolute;
}
.sticky{
	position: fixed;
	top: 0;
}


		.projekt1{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-top: 100px;
			margin-right: 0px;
			margin-bottom: 0px;
			background-color: darkgrey;
			background-image: url("img/berlin4.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: left;
			width: 46.75%;  
			padding: 200px; 
			box-sizing: border-box;
	
		}
			.projekt1:hover {
  			opacity: 0.7;
			}
		.projekt2{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: darkgrey;
			background-image: url("img/milano.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 46.75%;  
			padding: 200px; 
			box-sizing: border-box;
		}
			.projekt2:hover {
  			opacity: 0.7;
			}
		.projekt3{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-right: 0px;
			background-color: darkgrey;
			background-image: url("img/dresden2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: left;
			width: 46.75%; 
			padding: 200px; 
			box-sizing: border-box;	
		}
			.projekt3:hover {
  			opacity: 0.7;
			}
		.projekt4{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-left: 0px;
			background-color: darkgrey;
			background-image: url("img/projekte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 46.75%;  
			padding: 200px; 
			box-sizing: border-box;
		}
			.projekt4:hover {
  			opacity: 0.7;
			}
		.projekt5{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-right: 0px;
			margin-bottom: 50px;
			margin-top: 0px;
			background-color: darkgrey;
			background-image: url("img/rudolstadt2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: left;
			width: 46.75%;  
			padding: 200px; 
			box-sizing: border-box;
	
		}
			.projekt5:hover {
  			opacity: 0.7;
			}
		.projekt6{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin: 40px;
			margin-left: 0px;
			margin-bottom: 50px;
			margin-top: 0px;
			background-color: darkgrey;
			background-image: url("img/glashutte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 46.75%;  
			padding: 200px; 
			box-sizing: border-box;
		}
			.projekt6:hover {
  			opacity: 0.7;
			}
		
		.berlinpic{
			margin-top: 100px;
			margin-left: 0px;
			margin-right: 0px;
			margin-bottom: 80px;
			background-image: url("img/berlin2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 900px;
}
		.berlintext{
			font-size: 22px;
			line-height: 140%;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 60px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			text-align: justify;
    		word-spacing: 0.1em;
    		letter-spacing: 0.05em;
			text-align-last: left;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 55%; 
			padding-top: 70px; 
			padding-left: 90px; 
			padding-right: 90px;
			height: 900px;
}

		.milanopic{
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-image: url("img/milano3.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 1000px;
			
}
		.milanotext{
			font-size: 22px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			word-spacing: 0.1em;
    		letter-spacing: 0.05em;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 55%;  
			height: 1000px;
			padding-top: 80px; 
			padding-left: 90px; 
			padding-right: 90px;
}

		.dresdenpic{
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-image: url("img/dresden2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 1000px;
			
}
		.dresdentext{
			font-size: 18px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 55%;  
			height: 1000px;
			padding: 80px; 
}

		.leipzigpic{
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-image: url("img/projekte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 1000px;
			
}
		.leipzigtext{
			font-size: 18px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 55%;  
			height: 1000px;
			padding: 80px; 
}

		.rudolstadtpic{
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-image: url("img/rudolstadt2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 1000px;
			
}
		.rudolstadttext{
			font-size: 18px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 55%;  
			height: 1000px;
			padding: 80px; 
}

		.glashuttepic{
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-image: url("img/glashutte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 45%;
			height: 1000px;
			
}
		.glashuttetext{
			font-size: 18px;
			margin-top: 100px;
			margin-left: 0px;
			margin-bottom: 80px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			float: right; 
			width: 55%;  
			height: 1000px;
			padding: 80px; 
}

		.about{
			margin-top: 100px;
			margin: 0;
			padding: 300px;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.438)), url("img/about.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;
			color: white;
			display: flex;
			justify-content: center;
			font-size: 20px;
			}

		.abouttext{
			margin-top: 0px;
			margin:0;
			padding: 5%;
			color: #c7c7c7;
			background-color: #292929;
			text-align: justify;
    		word-spacing: 0.5em;
    		letter-spacing: 0.25em;
			text-align-last: left;
			font-size: 31px;
		}

		.footer{
			width: 100%;
			height: 100%;
			padding-top: 45px;
			padding-left: 35%;
			padding-right: 35%;
			padding-bottom: 30px;
			font-size: 10px;
			color: darkgrey;
			background-color: black;
			float: left;
			display: flex;
			justify-content: center;
			align-content: center;
}
	
			.fa {
 			 padding: 150px;
 			 font-size: 30px;
 			 width: 50px;
 			 text-align: center;
 			 text-decoration: none;
				display: flex;
				}
			.fa:hover {
  			opacity: 0.7;
			}

			.fa-instagram {
			margin-right: 20px;
			margin-top: 100px;
			margin-bottom: 100px;
 			background: black;
 			color: white;
			float:right;
			
			}
			.fa-pinterest {
			margin-left: 20px;
			margin-top: 100px;
			margin-bottom: 100px;
 			background: black;
 			color: white;
			float:left;
			}
			.fa-linkedin {
			margin-right: 20px;
			margin-top: 100px;
			margin-bottom: 100px;
 			background: black;
 			color: white;
			float:right;
			}
			.fa-flickr {
			margin-left: 20px;
			margin-top: 100px;
			margin-bottom: 100px;
 			background: black;
 			color: white;
			float:left;
			}
			.fa-unsplash {
			margin-right: 20px;
			margin-top: 100px;
			margin-bottom: 100px;
 			background: black;
 			color: white;
			float:right;
			}
		

.ud_solution {
    width: 100%;
    float: left;
    position: relative;
    background-size: cover;
    text-align: center;
}
.ud_icon_canvas {
    transition: all 300ms;
}

#SocialIcon1 .ud_icon_canvas {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}
#SocialIcon1 .ud_icon_canvas .ud_icon {
    display: block;
    width: 100%;
	
}
#SocialIcon1 .ud_icon_canvas .ud_icon svg {
	margin: 0px;
    width: 30px;
    height: 30px;
}
#SocialIcon1 .ud_icon_canvas:hover > .ud_icon svg {
    transform: rotateY(360deg);
}

#SocialIcon2 .ud_icon_canvas {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}
#SocialIcon2 .ud_icon_canvas .ud_icon {
    display: block;
    width: 100%;
	
}
#SocialIcon2 .ud_icon_canvas .ud_icon svg {
	margin: 0px;
    width: 30px;
    height: 30px;
}
#SocialIcon2 .ud_icon_canvas:hover > .ud_icon svg {
    transform: rotateY(360deg);
}

#SocialIcon3 .ud_icon_canvas {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}
#SocialIcon3 .ud_icon_canvas .ud_icon {
    display: block;
    width: 100%;
	
}
#SocialIcon3 .ud_icon_canvas .ud_icon svg {
	margin: 0px;
    width: 30px;
    height: 30px;
}
#SocialIcon3 .ud_icon_canvas:hover > .ud_icon svg {
    transform: rotateY(360deg);
}

#SocialIcon4 .ud_icon_canvas {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}
#SocialIcon4 .ud_icon_canvas .ud_icon {
    display: block;
    width: 100%;
	
}
#SocialIcon4 .ud_icon_canvas .ud_icon svg {
	margin: 0px;
    width: 30px;
    height: 30px;
}
#SocialIcon4 .ud_icon_canvas:hover > .ud_icon svg {
    transform: rotateY(360deg);
}

.photo-gallery{
	padding-top: 100px;
	padding-bottom: 3%;
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-rows: repeat(auto-fit);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 60px;
}

.pic img {
    width: 100%;
    height: auto;
    min-height: 200px; /* Beispielwert, je nach Layout anpassen */
}

   .lazy-img {
      opacity: 0;
      transition: opacity 0.9s ease-in-out;
    }
    .lazy-img.fade-in {
      opacity: 1;
    }
@media only screen and (max-width : 1280px ){
	
	.photo-gallery{
	padding-top: 80px;
	padding-bottom: 3%;
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-rows: repeat(auto-fit);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px;
	}

	.pic img {
    width: 100%;
    height: auto;
    min-height: 200px; /* Beispielwert, je nach Layout anpassen */
	}
	
#navigation{
	height: 50px;
	width: 100%;
	background-color: #292929;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.144);
	}
nav ul{
	float: right;
	}
nav li{
	display: inline-block;
	margin: 30px;
	}
nav li a{
	font-size: 30px;
	color: darkgray;
	text-decoration: none;
	}
nav ul li .active{
	color: lightblue;
	}

 #navigation:not(.sticky){
	position: absolute;
	}
.sticky{
	position: fixed;
	top: 0.5px;
	}
	
.header{
	
	padding: 110px;
	font-size: 30px;
	background-color: black;
	color: lightgray;
 	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
		}
nav ul{
		
	float: right;
}
nav li{
	display: inline-block;
	margin: 25px;
}
nav li a{
	font-size: 20px;
	color: darkgray;
	text-decoration: none;
	
}
nav ul li .active{
	color: lightblue;
}
	
			.projekt1{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/berlin4.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-top: 100px;
			margin-left: 40px;
			float:left;
		}
			.projekt2{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/milano4.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-top: 100px;
			margin-right: 40px;
			float:right;
		}
			.projekt3{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/dresden2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-top: 50px;
			margin-left: 40px;
			margin-bottom: 25px;
			float:left;
		}
			.projekt4{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/projekte2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-bottom: 25px;
			margin-top: 50px;
			margin-right: 40px;
			float: right;
		}	
		.projekt5{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/rudolstadt2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-bottom: 50px;
			margin-top: 25px;
			margin-left: 40px;
			margin-right: 0px;
			float: left;
		}	
			.projekt6{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/glashutte2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 120px;
            width: 43%;
			margin-top: 25px;
			margin-right: 40px;
			margin-left: 0px;
			margin-bottom: 50px;
			float:right;
		}
			
	
			.berlinpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/berlin3.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 450px;
}
			.berlintext{
			hyphens: auto;
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.milanopic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/milano2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 500px;
}
			.milanotext{
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.dresdenpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/dresden2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.dresdentext{
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.leipzigpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/projekte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.leipzigtext{
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.rudolstadtpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/rudolstadt2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.rudolstadttext{
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.glashuttepic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/glashutte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.glashuttetext{
			font-size: 20px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
		
	.about{
		
			padding: 90px;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url("img/about.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;
			color: white;
			display: flex;
			justify-content: center;
			font-size: 14px;
			margin-top: 50px;
			height:400px;
			}

		.abouttext{
			margin-top: 0px;
			margin:0;
			padding: 40px;
			color: #c7c7c7;
			background-color: #292929;
			text-align: justify;
    		word-spacing: 0.5em;
    		letter-spacing: 0.3em;
			text-align-last: left;
			font-size: 20px;
		}
			
			.fa-instagram {
			margin-right: 10px;
			margin-top: 80px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			
			}
			.fa-pinterest {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-linkedin {
			margin-right: 20px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-flickr {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-unsplash {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 50px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			
	.footer{
			width: 100%;
			padding: 30px;
			padding-top: 40px;
			font-size: 10px;
			color: darkgrey;
			background-color: black;
			float: left;
			display: flex;
			justify-content: center;
			align-content: center;
			margin-bottom: 0px;
}
}
@media only screen and (max-width : 500px ){
	.photo-gallery{
	padding-top: 80px;
	padding-bottom: 3%;
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-rows: repeat(auto-fit);
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 40px;
}

.pic img {
    width: 100%;
    height: auto;
    min-height: 200px; /* Beispielwert, je nach Layout anpassen */
}
	
#navigation{
			height: 50px;
			width: 100%;
			background-color: #292929;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
			box-shadow: 0px 2px 4px rgba(0,0,0,0.144);
}
nav ul{
	float: right;
}
nav li{
	display: inline-block;
	margin: 30px;
}
nav li a{
	font-size: 18px;
	color: darkgray;
	text-decoration: none;
}
nav ul li .active{
	color: lightblue;
}

 #navigation:not(.sticky){
	position: absolute;
}
.sticky{
	position: fixed;
	top: 0.5px;
}
	
.header{
	
			padding: 70px;
			font-size: 17px;
			background-color: black;
			color: lightgray;
		    display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
nav ul{
		
	float: right;
}
nav li{
	display: inline-block;
	margin: 10px;
}
nav li a{
	font-size: 13px;
	color: darkgray;
	text-decoration: none;
	
}
nav ul li .active{
	color: lightblue;
}
	
			.projekt1{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/berlin4.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-top: 70px;
			margin-left: 18px;
			float:left;
		}
			.projekt2{
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/milano4.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-top: 25px;
			margin-left: 18px;
			float:left;
		}
			.projekt3{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/dresden2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-top: 25px;
			margin-left: 18px;
			margin-bottom: 25px;
			float:left;
		}
			.projekt4{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/projekte2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-bottom: 0px;
			margin-top: 0px;
			margin-left: 18px;
			float:left;
		}	
			.projekt5{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/rudolstadt2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-top: 25px;
			margin-left: 18px;
			margin-bottom: 0px;
			float:left;
		}
			.projekt6{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			background-color: darkgrey;
			background-image: url("img/glashutte2.webp");
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 90px;
            width: 90%;
			margin-top: 25px;
			margin-left: 18px;
			float:left;
		}	
	
			.berlinpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/berlin3.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 450px;
}
			.berlintext{
			hyphens: auto;
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.milanopic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/milano2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 500px;
}
			.milanotext{
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.dresdenpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/dresden2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.dresdentext{
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.leipzigpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/projekte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.leipzigtext{
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.rudolstadtpic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/rudolstadt2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.rudolstadttext{
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
			.glashuttepic{
			margin-top: 50px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-image: url("img/glashutte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			float: left; 
			width: 100%;
			height: 400px;
}
			.glashuttetext{
			font-size: 18px;
			margin-top: 0px;
			margin-left: 0px;
			margin-bottom: 0px;
			background-color: #292929;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: white;
			display: flex;
			justify-content: center;
			width: 100%;  
			height: 100%;
			padding: 30px; 
			box-sizing: border-box;
}	
		
	.about{
		
			padding: 40px;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url("img/about.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;
			color: white;
			display: flex;
			justify-content: center;
			font-size: 14px;
			margin-top: 50px;
			height:265px;
			}

		.abouttext{
			margin-top: 0px;
			margin:0;
			padding: 40px;
			color: #c7c7c7;
			background-color: #292929;
			text-align: justify;
    		word-spacing: 0.5em;
    		letter-spacing: 0.3em;
			text-align-last: left;
			font-size: 18px;
		}
			
			.fa-instagram {
			margin-right: 10px;
			margin-top: 80px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			
			}
			.fa-pinterest {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-linkedin {
			margin-right: 20px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-flickr {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 25px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			.fa-unsplash {
			margin-left: 0px;
			margin-top: 0px;
			margin-bottom: 50px;
 			background: black;
 			color: white;
			float: left;
 			position: relative;
  			left: 50%;
  			transform: translateX(-50%);
			}
			
	.footer{
			width: 100%;
			padding: 30px;
			padding-top: 40px;
			font-size: 10px;
			color: darkgrey;
			background-color: black;
			float: left;
			display: flex;
			justify-content: center;
			align-content: center;
			margin-bottom: 0px;
}
}
@media only screen and (max-width: 320px) {
	
	.photo-gallery{
	padding-top: 80px;
	padding-bottom: 3%;
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-rows: repeat(auto-fit);
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 40px;
}

.pic img {
    width: 100%;
    height: auto;
    min-height: 200px; /* Beispielwert, je nach Layout anpassen */
}

	.header{
	
			padding: 70px;
			font-size: 14px;
			background-color: black;
			color: lightgray;
		    display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
	nav ul{
		
	float: right;
}
nav li{
	display: inline-block;
	margin: 6px;
}
nav li a{
	font-size: 13px;
	color: darkgray;
	text-decoration: none;
	
}
nav ul li .active{
	color: lightblue;
}
			.projekt1{ 
			will-change: transform, opacity;
			clear: right;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 100px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/berlin4.webp");
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 10px;
			color: white; 
			padding: 100px;
            width: 90%;
				
		}
			.projekt2{ 
			will-change: transform, opacity;
			clear: right;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 15px;
			margin-right: 20px;
			margin-left: 20px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/milano4.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 100px;
            width: 90%;
		}
			.projekt3{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 15px;
			margin-right: 0px;
			margin-left: 20px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/dresden.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 100px;
            width: 90%;
		}
			.projekt4{ 
			will-change: transform, opacity;
			clear: right;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 15px;
			margin-right: 20px;
			margin-left: 20px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/projekte.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 100px;
            width: 90%;
		}
			.projekt5{ 
			will-change: transform, opacity;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 15px;
			margin-right: 0px;
			margin-left: 20px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/rudolstadt2.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 10px;
			color: white; 
			padding: 100px;
            width: 90%;
		}
			.projekt6{ 
			will-change: transform, opacity;
			clear: right;
			animation: appear linear;
			animation-timeline: view();
			animation-range: entry 0% cover 20%; 
			margin-top: 15px;
			margin-right: 20px;
			margin-left: 20px;
			margin-bottom: 25px;
			background-color: darkgrey;
			background-image: url("img/glashutte2.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 20px;
			color: white; 
			padding: 100px;
            width: 90%;
		}
		
		
		.abouttext{
			margin-top: 0px;
			margin:0;
			padding: 40px;
			color: #c7c7c7;
			background-color: #292929;
			font-size: 18px;
			text-align: justify;
    		
			text-align-last: left;
		}

	
			.footer{
			width: 100%;
			padding: 30px;
			padding-top: 40px;
			font-size: 10px;
			color: darkgrey;
			background-color: black;
			float: left;
			display: flex;
			justify-content: center;
			align-content: center;
			margin-bottom: 0px;
}
	}