*{
	margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* @font-face Regel für Nephilm */
@font-face { 
    font-family: 'Nephilm';
    src: local('Nephilm'), url('/Free To Use/Nephilm.otf') format('truetype');
}

/* Überschriften mit Nelphim */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nelphim', 'Optima', Helvetica, sans-serif; /*Optima*/
}

/* Fließtext */
p, span, a, li {
    font-family: 'Brandon Grotesque', Avenir, sans-serif;
}

@keyframes smoothscroll1{
	from, to{ scroll-behavior: smooth;
	}
}
	@keyframes smoothscroll2{
		from, to{ scroll-behavior: smooth;
		}
	}
		html{
			animation: smoothscroll1 1s;
		}
			html:focus-within{
				animation-name: smoothscroll2;
				scroll-behavior: smooth;
			}

body{
	background: #0B0C0D;
	color: #fff;	
}

/*--------------HEADER Main Page and Main Unterseite--------------*/
#header, #header2 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#header {
    position: relative;

}

#header-video {
    width: 100%;
    padding: 2cm 2cm 0 2cm; /* oben + links/rechts je 2cm Abstand */
    height: 100vh; /* oder z. B. 80vh, wenn du weniger willst */
    justify-content: center;
    object-fit: contain; /* statt cover → zeigt das ganze Video an */
    border-radius: 20px; /* hier kannst du z. B. 12px, 20px etc. anpassen */
}

#header2 {
   	margin-top: 29px;
    height: 10vh;
    display: flex;
}

	/* Gemeinsame Styles für den Container und die Navigation */
	.container {
	    width: 100%;
	    padding: 20px 10%;
}

		nav {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    flex-wrap: wrap;
		    width: 100%;
		}

			nav ul {
			    list-style: none;
			    padding: 0;
			    margin: 0;
			    display: flex;
			    align-items: center;
			}

				nav ul li {
				    margin: 0 20px;
				}

					nav ul li a {
					    color: #fff;
					    text-decoration: none;
					    font-size: 25px;
					    position: relative;
					    margin: -50px 20px;
					}

						nav ul li a:hover {
						    transform: scale(1.1);
						}

							nav ul li a::after {
							    content: '';
							    width: 0;
							    height: 3px;
							    background: #AED580;
							    position: absolute;
							    left: 0;
							    bottom: -6px;
							    transition: 0.5s;
							}

								nav ul li a:hover::after {
								    width: 100%;
								}

	.fa-caret-down, .fa-xmark {
	    cursor: pointer;
	    color: #fff;
	    font-size: 25px;
	}

	/* Mobile Menü-Button */
	@media (max-width: 768px) {
	    .fa-caret-down {
	        display: block;
	    }

#sidemenu {
	display: none;
}

#sidemenu.open {
    display: block;
}

}


/* Stil für den Namen oben Rechts */
.name {
    position: fixed; /* Fixiert die Position */
    top: 25px; /* Abstand vom oberen Rand */
    right: 190px; /* Abstand vom rechten Rand, angepasst um ihn weiter nach innen zu rücken */
    color: #fff;
    font-family: 'Brandon Grotesque', Avenir, sans-serif;
    font-size: 25px;
    cursor: pointer;
    transition: color 0.5s, transform 0.5s; /* Übergangseffekte */
    z-index: 1000; /* Stellt sicher, dass es über dem Video angezeigt wird */
}

.name:hover {
    color: #AED580;
    transform: scale(1.1);
}

		.header-text {
		    position: absolute;
		    top: 40%;
		    left: 10%; /* Ändere den linken Abstand entsprechend deiner Präferenz */
		    transform: translateY(-50%);
		    text-align: left; /* Ändere die Ausrichtung des Textes auf linksbündig */
		    color: #fff;
		    z-index: 1; /* Stelle sicher, dass der Text über dem Video liegt */
		    font-size: 30px;
		}

		.header-text:hover {
		    font-weight: bold; /* Füge Fettdruck hinzu */
		}

		.header-text h1 {
		    font-size: 50px;
		    margin-top: 20px;
		    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
		}

		.header-text h1 {
		    font-size: 50px;
		    margin-top: 20px;
		    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
		    transition: font-size 0.5s, color 0.5s; /* Übergang für Schriftgröße und Farbe hinzufügen */
		}

		.header-text h1:hover {
		    font-size: 55px; /* Ändere die vergrößerte Schriftgröße */
		    color: #AED580; /* Ändere die Textfarbe beim Hovern */
		}

		.header-text h2 {
		    font-size: 25px; /* Ändere die Schriftgröße nach Bedarf */
		    font-family: 'Helvetica';
		}

		#sidemenu {
		    position: absolute;
		    top: calc(3% + 10px); /* Positioniere das sidemenu vertikal zentriert relativ zum Header */
		    left: calc(6.8% + 10px); /* Positioniere das sidemenu linksbündig mit dem Text von "Hey there!" */
		    transform: translateY(-50%);
		}


/*--------------HEADER für ROJEKT Unterseite!--------------*/
.header-text1 {
		    position: absolute;
		    top: 20%;
		    left: 10%; /* Ändere den linken Abstand entsprechend deiner Präferenz */
		    transform: translateY(-50%);
		    text-align: left; /* Ändere die Ausrichtung des Textes auf linksbündig */
		    color: #fff;
		    z-index: 1; /* Stelle sicher, dass der Text über dem Video liegt */
		    font-size: 30px;
		}

		.header-text1:hover {
		    font-weight: bold; /* Füge Fettdruck hinzu */
		}

		.header-text1 h1 {
		    font-size: 50px;
		    margin-top: 20px;
		    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
		}

		.header-text1 h1 {
		    font-size: 50px;
		    margin-top: 20px;
		    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
		    transition: font-size 0.5s, color 0.5s; /* Übergang für Schriftgröße und Farbe hinzufügen */
		}

		.header-text1 h1:hover {
		    font-size: 55px; /* Ändere die vergrößerte Schriftgröße */
		    color: #AED580; /* Ändere die Textfarbe beim Hovern */
		}

.aboutprojecttext{
	font-size: 20px;
	font-weight: 200;
	color: #fff;
	line-height: 135%;
	padding-top: 80px;
}


/*--------------Main Page ABOUT ME--------------*/
#about {
    padding: 20px 0%;
    color: #F0FFF0;
}

.col {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start; /* Ensure the items are aligned at the start */
}

.about-col-1 {
    flex-basis: 35%;
    display: flex;
    align-items: flex-start;
    max-height: 100%; /* Ensures that the image container doesn't exceed the height of the text container */
}

.about-col-1 img {
    width: 100%;
    border-radius: 20px;
    height: auto; /* Keep the aspect ratio */
    max-height: 100%; /* Ensures the image itself doesn't exceed the container height */
    object-fit: cover; /* Keeps the aspect ratio intact while filling the container */
}

.about-col-2 {
    flex-basis: 60%;
}

.headline {
    font-size: 60px;
    font-weight: 600;
    color: #fff;
}

.aboutmetext {
    font-size: 20px;
    font-weight: 200;
    color: #fff;
    line-height: 135%;
    padding-top: 20px;
}

.tab-titles {
    display: flex;
    margin: 20px 0px 40px;
}

.tab-links {
    margin-right: 40px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.tab-links::after {
    content: '';
    width: 0px;
    height: 4px;
    background: #AED580;
    position: absolute;
    left: 0px;
    bottom: -8px;
    transition: 0.5s;
}

.tab-links.active-link::after {
    width: 50%;
}

.btn.btn2 {
    display: inline-block;
}

.tab-contents ul li {
    list-style: none;
    margin: 10px 0px;
    font-size: 20px;
    padding-bottom: 10px;
}

.tab-contents ul li span {
    display: inline-block;
    color: #AED580;
    font-size: 20px;
    padding-bottom: 10px;
}

.tab-contents {
    display: none;
}

.tab-contents.active-tab {
    display: block;
}



/* ----------Main Page PORTFOLIO----------- */

#portfolio {
    padding: 5px 0px;    
}

.worklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 40px;
    margin-top: 50px;
}

.work {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.work img {
    width: 100%;
    border-radius: 20px;
    display: block;
    transition: transform 0.8s;
}

.layer {
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.2), #AED580);
    border-radius: 20px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 40px;
    text-align: center;
    font-size: 20px;
    transition: height 0.9s;
}

.layer h3 {
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 25px;
}

.layer a {
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    line-height: 80px;
    background: #AED580;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    transition: transform 0.3s;
}

.layer a:hover .fa-arrow-pointer {
    transform: scale(1.5);
}

.work:hover img {
    transform: scale(1.1);
}

.work:hover .layer {
    height: 100%;
}

.btn {
    display: block;
    margin: 50px auto;
    width: fit-content;
    border: 1px solid #AED580;
    padding: 14px 50px;
    border-radius: 6px;
    text-decoration: none;
    color: #0B0C0D;
    background: #fff;
    transition: background 0.5s;
    font-size: 20px;
}

.btn:hover {
    background: #AED580;
}



/* ----------PORTFOLIO Main Unterseite----------- */

#animations, #illustrations, #posters, #gamedesign #artworks{
	padding: 0px 0px;	
}

.headline-unterseite{
	font-size: 60px;
	font-weight: 600;
	color: #fff;
	margin-top: 30px;
	margin-bottom: 15px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex start; /* Änderung zu "space-between" auf nach Links angeordnet */
    gap: 16px; /* Abstand zwischen den einzelnen container*/
    margin-top: 20p;
    padding: 0px; /* Abstand nach unten*/
    margin-left: 0; /* Linksbündig */
}

.image-container {
    width: calc(25% - 16px); /* Vier Boxen nebeneinander, berücksichtigt den Abstand (gap) */
    height: 701,6px; /* Feste Höhe für die Boxen, du kannst dies entsprechend anpassen; in dem Fall ist es jetzt die Abmessung von 3508pixeln des original bildes durch 5 (damits besser auf die Seite passt)*/
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.5s ease, border-radius 0.5s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 0;
    transform: translateY(50px);
}

.image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild an den Rahmen anpassen, ohne das Seitenverhältnis zu verzerren */
    transition: transform 0.5s ease, border-radius 0.5s ease;
}

.image-container:hover img {
    transform: scale(1.1);
    border-radius: 16px;
}

.image-container.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----------PROEKTE KLEINE Unterseiten!----------- */



/* CSS für spezielle Headline im Responsive-Design */
.header-text2 .headline {
    position: absolute;
	top: 20%;
	left: 10%; /* Ändere den linken Abstand entsprechend deiner Präferenz */
	transform: translateY(-50%);
	text-align: left; /* Ändere die Ausrichtung des Textes auf linksbündig */
	color: #fff;
	font-size: 40px;
}

	.header-text2:hover {
		ont-weight: bold; /* Füge Fettdruck hinzu */
	}

		.header-text2 h1 {
			font-size: 50px;
			margin-top: 20px;
			margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
		}

			.header-text2 h1 {
			    font-size: 50px;
			    margin-top: 20px;
			    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
			    transition: font-size 0.5s, color 0.5s; /* Übergang für Schriftgröße und Farbe hinzufügen */
			}

				.header-text2 h1:hover {
				    font-size: 50px; /* Ändere die vergrößerte Schriftgröße */
				    color: #AED580; /* Ändere die Textfarbe beim Hovern */
				}


/* hebt mir Verlinkungen beim Hovern hervor! */
.highlight-link {
    color: #fff; /* Stellt sicher, dass die initiale Farbe verwendet wird */
    transition: color 0.3s ease, font-size 0.3s ease;
}

.highlight-link:hover {
    color: #AED580; /* Hier kannst du die gewünschte Farbe einfügen */
    font-size: 1.1em; /* Vergrößert den Text beim Hovern */
}

.project-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px; /* Abstand zwischen den Arbeiten */
    padding: 20px 0; /* Innenabstand oben und unten */
}

.project-work-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Arbeiten */
}

.project-work {
    width: calc(50% - 10px); /* Maximale Breite für zwei nebeneinander liegende Arbeiten */
}

.project-work img,
.project-work video {
    width: 100%;
    max-width: 100%; /* Maximale Breite des Bildes auf 100% der Elternelementbreite */
    height: auto;
    border-radius: 8px; /* Abgerundete Ecken */
}


/* Rechteckiger Video Container */
.project-video {
    width: 100%;
    margin-bottom: 20px; /* Abstand nach unten */
    overflow: hidden; /* Damit die abgerundeten Ecken sichtbar sind */
}

/* Quadratischer Video Container */
.project-video.square-video {
    width: 100%;
    max-width: 600px; /* Maximalbreite des speziellen Videos */
    margin: 0 auto; /* Zentriert das Video horizontal */
    overflow: hidden; /* Damit die abgerundeten Ecken sichtbar sind */
}

.project-video.square-video video {
    width: 100%; /* Füllt die Breite des Containers aus */
    height: auto; /* Behält das Seitenverhältnis des Videos bei */
    display: block; /* Entfernt den zusätzlichen Platz unter dem Video */
    border-radius: 8px; /* Abgerundete Ecken */
}

/* Responsives Bild */
.responsive-image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Abgerundete Ecken */
}

/* GIF Container */
.project-gif img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.5s ease, border-radius 0.5s ease;
}


/* FÜR BILDER wenn ich keine Videos von einem Projekt habe :) */
/* Zentriertes Hauptbild */
.project-main-work {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px; /* Abstand nach unten */
}

.project-main-work img {
    max-width: 40%; /* Maximale Breite auf 80% des Container-Bereichs beschränkt */
    height: auto;
    border-radius: 8px; /* Abgerundete Ecken */
}

/* Spezifische Regel für die Unterseite mit VIER hochformat Bildern nebeneinander */
.project-gallery.four-images .project-work {
    width: calc(25% - 15px); /* Maximale Breite für vier nebeneinander liegende Arbeiten */
}


/* ----------PROEKTE IM VOLLBILD MODUS ANZEITEN!----------- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 80%;
    max-width: 700px; 
}

.modal-content img {
    width: 100%;
    height: auto;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Cursor pointer for clickable images */
.art-img {
    cursor: pointer;
}

/* Cursor pointer for clickable images */
#myImg {
    cursor: pointer;
}





/* ----------CONTACT----------- */

#siteseal {
    display: inline-block; /* Damit das Element inline bleibt und zentriert wird */
}

.contact-left{
	padding: 5px 0px;	
	flex-basis: 35%;
	font-size: 25px;
}

	.contact-left p{
		margin-top: 30px;
	}
		.contact-left p i{
			color: #AED580;
			margin-right: 15px;
			font-size: 30px;
		}
			.contect-left a:hover{
						color: #AED580;								
								transform: translateY(-5px);
			}
				.contact-left i:hover{
					transform:scale(1.2)
				}	
					.social-icons{
						margin-top: 30px;
					}
						.social-icons a{
							text-decoration: none;
							font-size: 35px;
							margin-right: 15px;
							color: #ababab;
							display: inline-block;
							transition: transform 0.5s;
						}
							.social-icons a:hover{
								color: #AED580;								
								transform: translateY(-5px);
							}
								.social-icons i:hover{
										transform:scale(1.1)
									}

.contact-right{
	flex-basis: 60%;
}
	.contact-right form{
		width: 100%;
	}
		form input, form textarea{
			width: 100%;
			border: 0px;
			outline: none;
			background: #262626;
			padding: 15px;
			margin: 15px 0px;
			color: #fff;
			font-size: 20px;
			border-radius: 6px;
		}	

.copyright{
	width: 100%;
	text-align: center;
	padding: 25px 0px;
	background: #262626;
	font-weight: 300;
	margin-top: 20px;
	font-size: 14px;
}
	.copyright i{
		color: #AED580;
	}
		.copyright i:hover{
			transform:scale(1.3)
		}


/* ----------CSS RESPONSIVE MAIN PAGE----------- */

nav .fa-solid {
	display: none;
}

nav .back-button {
    display: none;
}

@media only screen and (max-width: 600px) {
    #header {
        margin-bottom: -15px;
    }

     .video-wrap {
        position: relative;
        width: 133.3vw;           /* Video bis an den rechten Rand gedrängt */
        left: 33.7%;			  /* Video bis an den linken Rand gedrängt lol */
        right: 50%;
        margin-left: -50vw;     /* bricht aus zentralem Container */
        margin-right: -50vw;
        aspect-ratio: 16/9;
        max-height: 60vh;
        border-radius: 0;       /* bündig an den Rand */
        overflow: hidden;
    }

    #header-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

.name {
        font-size: 14px;
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
    }

    .header-text {
        position: absolute;
        margin-top: 50px;
        bottom: 40px; /* Adjusted bottom spacing */
        font-size: 14px; /* Smaller text size */
    }

    .header-text h1 {
        font-size: 30px; /* Smaller headline */
        margin: 0;
        transform: none;
    }

    .header-text h2 {
        font-size: 14px; /* Smaller sub-headline */
        margin: 0;
    }

    .headline {
        margin-bottom: 0px;
        font-size: 40px;
    }

    .about-col-1,
    .about-col-2 {
        flex-basis: 100%;
    }

    .about-col-1 {
        margin-bottom: 20px;
    }

    .aboutmetext {
        font-size: 18px;
        margin-right: 10px;
    }

    .tab-links {
        padding-top: 15px;
        font-size: 16px;
        margin-right: 10px;
        white-space: nowrap;
    }

    .tab-contents ul li {
        font-size: 16px;
    }

    .tab-contents ul li span {
        font-size: 17px;
    }

    #portfolio {
        padding: 0px 5%;
    }

    .worklist {
        margin-top: 20px;
    }

    .work {
        width: 100%;
        margin-bottom: 20px;
    }

    .work img {
        width: 100%;
        height: auto;
    }

    .btn {
        margin: 20px auto; /* Adjusted margin for button */
        display: block;
        width: fit-content;
        padding: 10px 20px;
        font-size: 16px;
    }

    .btn.btn2 {
        display: block;
        margin: 20px auto; /* Centering the button */
        width: fit-content;
        padding: 10px 20px;
        font-size: 16px;
    }

    .contact-left {
        flex-basis: 100%;
        font-size: 15px;
        white-space: nowrap;
    }

    .contact-left p {
        margin-top: 30px;
    }

    .contact-left p i {
        color: #AED580;
        margin-right: 15px;
        font-size: 20px;
    }

    .copyright {
        font-size: 13px;
    }


/* ----------CSS RESPONSIVE MY PROJECTS----------- */

@media only screen and (max-width: 600px) {
	/* Mobile Menü-Button */
	nav .fa-solid {
		display: block;
	}
	    .back-button {
    		position: fixed;
		    top: 45px;
		    left: 45px;
		    font-size: 24px;
		    color: #fff;
		    cursor: pointer;
		    z-index: 1000;
		}

		.back-button:hover {
    		color: #AED580;
    		transform: scale(1.3); /* Vergrößern beim Hover */
		}



    /* Überschriften-Stil */
    .headline-unterseite {
        font-size: 40px;
        font-weight: 600;
        color: #fff; /* Schriftfarbe auf Weiß zurücksetzen */
        margin-top: 30px;
        margin-bottom: 15px;
    }

    /* Name oben rechts */
    .name {
        color: #000; /* Schriftfarbe auf Schwarz setzen */
        background-color: rgba(255, 255, 255, 0.8);
        padding: 5px 10px;
        border-radius: 4px;
        position: fixed;
        top: 40px;
        right: 20px;
        z-index: 1000;
    }

    .name:hover {
        color: #000; /* Schriftfarbe auf Schwarz setzen */
        position: fixed;
    }

    /* Galerie-Anpassungen */
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* Bilder linksbündig ausrichten */
        gap: 16px; /* Abstand zwischen den Bildcontainern */
        margin-top: 20px;
        padding: 0;
    }

    /* Alle Bildcontainer-Stile */
    .image-container {
        width: calc(50% - 8px); /* Zwei Bilder pro Reihe auf mobilen Geräten (minus halbes gap) */
        height: auto;
        margin-bottom: 16px; /* Spacing zwischen den Bildcontainern */
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.5s ease, border-radius 0.5s ease;
    }

    .image-container:hover img {
        transform: scale(1.1);
        border-radius: 16px;
    }

    .image-container.visible {
        opacity: 1;
        transform: translateY(0);
    }

	/* Modal Styles */
	.modal {
	    display: none;
	    position: fixed;
	    z-index: 1000;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    background-color: rgba(0, 0, 0, 0.8);
	}

	.modal-content {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    padding: 0;
	    max-width: 100vw; /* Maximale Breite auf 100% der Viewport-Breite begrenzen */
	    max-height: 100vh; /* Maximale Höhe auf 100% der Viewport-Höhe begrenzen */
	}

	.modal-content img {
	    display: block; /* Bild als Block-Element anzeigen */
	    width: 100%;
	    height: auto;
	}

	.close {
	    position: absolute;
	    top: 15px;
	    right: 15px;
	    color: #fff;
	    font-size: 30px;
	    font-weight: bold;
	    transition: 0.3s;
	    cursor: pointer;
	}

	.close:hover,
	.close:focus {
	    color: #ccc;
	    text-decoration: none;
	}

	/* Cursor pointer for clickable images */
	.art-img {
	    cursor: pointer;
	}

}



/* ----------CSS RESPONSIVE KLEINE UNTERSEITEN ----------- */


@media only screen and (max-width: 600px) {

	.header-text2 .headline {
	    position: absolute;
	    top: 20%;
	    left: 10%; /* Ändere den linken Abstand entsprechend deiner Präferenz */
	    transform: translateY(-50%);
	    text-align: left; /* Ändere die Ausrichtung des Textes auf linksbündig */
	    color: #fff;
	    font-size: 35px; /* Verkleinere die Schriftgröße auf 30px */
	    transition: font-size 0.5s, color 0.5s; /* Übergang für Schriftgröße und Farbe hinzufügen */
	}

	.header-text2 .headline:hover {
	    font-size: 35px; /* Bleibt bei der gleichen Schriftgröße, da keine Vergrößerung beim Hover */
	    color: #fff; /* Behält die gleiche Textfarbe bei, da keine Änderung beim Hover */
	}

	.header-text2 h1 {
	    font-size: 50px;
	    margin-top: 20px;
	    margin-bottom: 10px; /* Füge einen unteren Abstand hinzu */
	}

    .project-gallery {
        gap: 10px; /* Kleinere Lücken zwischen den Arbeiten */
        padding: 10px 0; /* Weniger Innenabstand oben und unten */
    }

    .project-work-container {
        flex-direction: column; /* Alle Arbeiten untereinander anordnen */
    }

    .project-work {
    width: calc(100% - 20px); /* Vollbreite für einzelne Arbeiten */
    margin: 0 auto 10px; /* Zentriert die einzelnen Arbeiten und gibt oben und unten 10px Abstand */
	}

	/* Spezifische Anpassung für das letzte Bild */
	.project-work:last-child {
	    margin-bottom: -50px; /* Beispielwert für das letzte Bild */
	}

	.project-video.square-video {
    width: 100%;
    max-width: 600px; /* Maximalbreite des speziellen Videos */
    margin: 0 auto; /* Zentriert das Video horizontal */
    overflow: hidden; /* Damit die abgerundeten Ecken sichtbar sind */
    margin-bottom: -30px; /* Anpassung des Abstands nach unten */
	}

	/* Stil für das Bild unter dem Video */
	.project-main-work {
	    text-align: center; /* Zentrieren des Inhalts */
	}

	.project-main-work img {
	    max-width: 100%; /* Bildbreite auf maximal 100% des Containers begrenzen */
	    height: auto; /* Automatische Höhe beibehalten */
	    display: block; /* Sicherstellen, dass das Bild als Blockelement behandelt wird */
	    margin: 0 auto; /* Horizontal zentrieren */
	}

}

@media only screen and (max-width: 600px) {
    .project-gallery.four-images .project-work {
        width: calc(50% - 8px); /* Zwei Bilder nebeneinander, mit etwas Abstand */
        margin-bottom: 16px; /* Spacing zwischen den Bildcontainern */
        box-sizing: border-box; /* Innenabstände und Rand zur Berechnung der Breite hinzufügen */
    }
}


}