/* Schwarzer Hintergrund */
body {
	background-color: black;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	color: #b6ff00;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 10px;
}

/* Header Styling */
header {
	background-color: black;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	margin-top: 50px;
	padding: 0px 0;
	display: flex;
	justify-content: center; /* Zentriert das Logo auf der Gesamtbreite */
	align-items: center; /* Vertikale Ausrichtung */
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}

/* Logo Styling */
.logo {
	position: absolute;
left: 50%;
transform: translateX(-50%); /* Logo zentrieren */
}

.logo img {
	max-height: 50px;
	cursor: pointer;
	
}
nav.menu {
position: absolute;
right: 50px; /* Menü nach rechts verschieben */
}

/* Menü Styling */
nav.menu a {
	color: #b6ff00;
	text-decoration: none;
	font-size: 1.4rem;
	margin-left: 20px;
	transition: color    0.3s;
	font-family: "Inter Tight", sans-serif;
	font-weight: 500;
	
}

nav.menu a:hover {
	color: #ff00e4;
}
/* Hamburger-Menü */
.menu-toggle {
	
	display: none;
	cursor: pointer;
	position: absolute;
	right: 35px;
}

.menu-toggle div {
	width: 25px;
	height: 3px;
	background-color: #b6ff00;
	margin: 5px 15px;
	
}
.menu-toggle div:hover {
	width: 25px;
	height: 3px;
	background-color: #ff00e4;
	margin: 5px 15px;
	
}

/* Styling für das mobile Menü */
.menu-mobile {
	display: none; /* Standardmäßig ausgeblendet */
	flex-direction: column; /* Vertikale Anordnung */
	position: absolute; /* Über anderen Elementen */
	right: 10px; /* Abstand vom rechten Rand */
	background-color: rgba(0, 0, 0, 0.9); /* Halbtransparenter schwarzer Hintergrund */
	border-radius: 10px; /* Abgerundete Ecken */
	box-shadow: 0 4px 80px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
	top: 50px; /* Abstand zum Header */
	padding: 10px; /* Innenabstand */
	z-index: 100; /* Über anderen Elementen */
}


/* Styling für die Links im mobilen Menü */
.menu-mobile a {
	
	color: #b6ff00; /* Textfarbe */
	text-decoration: none; /* Keine Unterstreichung */
	font-size: 1.5rem; /* Schriftgröße */
	margin: 10px 0; /* Abstand zwischen Links */
	transition: color 0.3s; /* Sanfter Übergang bei Hover */
	font-family: "Inter Tight", sans-serif;
	font-weight: 500;
	
}

/* Hover-Effekt für die Links im mobilen Menü */
.menu-mobile a:hover {
color: #ff00e4; /* Farbe beim Hover */
}

/* Responsive Styles */
@media (max-width: 1020px) {
	.logo img {
		position: relative;
		max-height: 30px; /* Kleineres Logo */
	}

	nav.menu {
		display: none; /* Standardmenü ausblenden */
	}

	.menu-toggle {
		display: block; /* Hamburger-Icon anzeigen */
	}

	.menu-mobile {
		display: none; /* Mobiles Menü anzeigen */
	}
}

@media (max-width: 751px) {
	.logo img {
		
		max-height: 20px; /* Kleineres Logo */
		transform: translateX(-10%);
		
	}
.video-overlay {
font-size: 1.3rem !important;          /* Kleinere Schriftgröße */
left: 10px !important;                 /* Abstand vom linken Rand */
max-width: 90% !important;             /* Begrenzte Breite des Rahmens */
padding: 10px !important;              /* Kleinere Innenabstände */
}
}



.video-wrapper {
	display: flex;                /* Flexbox aktivieren */
	 justify-content: center;      /* Zentriert den Inhalt horizontal */
	 padding: 0 10px;            /* Fügt links und rechts Padding hinzu */
	 height: 90%;                /* Volle Höhe */
}
/* Video-Slider Styling */
#video-section {
	position: relative;
	width: 100%;
	height: calc(100vh - 80px);
	margin-top: 80px;
	
	
}

.video-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.video-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
	border-radius: 40px;
}

.video-item.active {
	display: block;
}

/* Haupttitel für das aktive Video */
.video-overlay {
	position: absolute;
	bottom: 201px;
	left: 20px;
	color: #b6ff00;
	font-size: 3rem;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 15px;
	border-radius: 20px;
	z-index: 10;
	font-family: "Inter Tight", sans-serif;
	font-weight: 900;
	
}

/* Fortschrittsbalken Styling */
.progress-bar {
	margin-top: 10px;
	height: 5px;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
	
}

.progress-bar-inner {
	height: 100%;
	background-color: #ff00e4;
	width: 0%;
}

/* Kleinere Titel für die kommenden Videos */
.upcoming-titles {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: rgba(253, 0, 0, 0.7);
	font-size: 1.1rem;
	z-index: 9;
   
	
}

.upcoming-titles a {
	text-decoration: none;
	color: rgba(255, 0, 0, 0.7);
	display: block;
	margin: 5px 0;
	cursor: pointer;
}

.upcoming-titles a:hover {
	color: rgb(247, 11, 11);
}

/* Mute/Unmute Button Styling */
#mute-button {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #b6ff00;
	border: none;
	border-radius: 12px;
	padding: 10px;
	cursor: pointer;
	
}

/* Pause Button Styling */
#pause-button {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #b6ff00;
	border: none;
	border-radius: 12px;
	padding: 10px;
	cursor: pointer;
	
}

/* Logo Section */
#c_image-section {
    background-color: black; /* Schwarzer Hintergrund */
    padding: 20px 0; /* Abstand oben und unten */
}

.c_image-container {
    display: flex; /* Flexbox für mittige Ausrichtung */
    flex-wrap: wrap; /* Erlaubt Umbrüche in mehreren Zeilen */
    justify-content: center; /* Zentriert die Logos horizontal */
    gap: 100px; /* Abstand von 20px zwischen den Logos */
    padding: 0 20px; /* Abstand links und rechts */
}

.c_image-img {
    max-width: 250px; /* Maximalbreite der Logos */
    height: auto; /* Höhe bleibt proportional */
}

/* Contact Section */
#contact-section {
    background-color: black; /* Schwarzer Hintergrund */
    color: white; /* Textfarbe */
    padding: 20px 0; /* Abstand oben und unten */
	
}
	


.contact-container {
    display: flex; /* Flexbox für die Anordnung */
    justify-content: space-between; /* Abstand zwischen den beiden Containern */
    align-items: center; /* Vertikale Zentrierung */
    padding: 0 10px; /* Abstand links und rechts */
	gap: 0;
	
}

.contact-info {
	display: flex;
    gap: 20px; /* Abstand zwischen E-Mail und Telefonnummer */

}

#contact-section .contact-info a {
    color: #b6ff00; 
    text-decoration: none; /* Optional: entfernt die Unterstreichung */
}

#contact-section .contact-info a:hover {
    color: #b6ff00; /* Farbe beim Überfahren mit der Maus */
}

.social-media {
    display: flex; /* Flexbox für die Icons */
    gap: 20px; /* Abstand zwischen den Icons */
}

.social-icon {
    max-width: 30px; /* Maximale Breite der Icons */
    height: auto; /* Höhe bleibt proportional */
}








/*footer {
	background-color: black; /* Hintergrundfarbe für den Footer */
/*color: #b6ff00; /* Textfarbe */
/*text-align: center; /* Zentriert den Text */
/*padding: 20px; /* Innenabstand */
/*margin-top: auto; /* sorgt dafür, dass der Footer am Ende bleibt */
/*margin-top: auto; /* Fügt den Footer am unteren Ende hinzu */
/*} 
*/
#footer-section {
    background-color: black; /* Hintergrundfarbe für den Footer */
	color: #b6ff00; /* Textfarbe */
	text-align: center; /* Zentriert den Text */
	
	margin-top: auto; /* sorgt dafür, dass der Footer am Ende bleibt */
	margin-top: auto; /* Fügt den Footer am unteren Ende hinzu */
	
}

.footer-container {
    display: flex; /* Flexbox für die Anordnung */
    justify-content: space-between; /* Abstand zwischen den beiden Containern */
    align-items: center; /* Vertikale Zentrierung */
    padding: 0 10px; /* Abstand links und rechts */
	
}
.footer-info {
	display: flex;
    gap: 20px; /* Abstand zwischen E-Mail und Telefonnummer */


}

#footer-section .footer-info a {
    color: #b6ff00; 
    text-decoration: none; /* Optional: entfernt die Unterstreichung */
	font-weight: 900;
}

#footer-section .footer-info a:hover {
    color: #b6ff00; /* Farbe beim Überfahren mit der Maus */
}


/* Hintergrundbild Styling */
#background-section {
	margin-top: 80px;
    position: relative;
    width: 100%;
    height: calc(100vh - 80px); /* Höhe für den Header */
    background-image: url('images/profile_pic_small.jpg'); /* Pfad zu deinem Hintergrundbild */
    background-size: cover; /* Hintergrundbild skalieren */
    background-position: 80% center; /* Hintergrundbild an der linken Seite zentrieren */
    overflow: hidden; /* Versteckt den Teil des Bildes, der über den Bereich hinausgeht */
    display: flex;
    align-items: center; /* Zentriert den Inhalt vertikal */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    padding: 20px; /* Innenabstand */
}

        /* Textfeld Styling */
        .text-box {
            background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
            color: #b6ff00;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-family: "Inter Tight", sans-serif;
            font-weight: 600;
			font-size: 20px;
            max-width: 900px; /* Maximale Breite */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
			
        }
/* Hintergrundbild Styling */
#impress-section {
	margin-top: 80px;
	
    position: relative;
    width: 100%;
    
    
    
    
    overflow: hidden; /* Versteckt den Teil des Bildes, der über den Bereich hinausgeht */
    display: flex;
    align-items: center; /* Zentriert den Inhalt vertikal */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    padding: 20px; /* Innenabstand */
}

        /* Textfeld Styling */
        .impress-box {
            background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Schwarz */
            color: #b6ff00;
            padding: 20px;
            border-radius: 20px;
            text-align: left;
            font-family: "Inter Tight", sans-serif;
            font-weight: 900;
            max-width: 1200px; /* Maximale Breite */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
			
        }

		/* Projekte Section Styling */
#projects-section {
    margin: 40px;
    padding: 40px;
    background-color: black;
    color: #b6ff00;
    display: grid; /* Vermeidet Flexbox-Vererbung und Einrückungen */
	grid-template-columns: 1fr; /* Standardmäßig eine Spalte */
    gap: 20px; /* Abstand zwischen den Projekten */
    
	
}

/* Einzelnes Projekt */
.project-item {
    width: 100%;
    max-width: 1000px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin: 20px auto; /* Vermeidet Einrückung */
    display: block; /* Sicherstellen, dass Projekte untereinander angezeigt werden */
	
}
@media (min-width: 1400px) {
    #projects-section {
        grid-template-columns: 1fr 1fr; /* Zwei Spalten ab 780px Breite */
    }
}
.project-item {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
/* Projekt Header (Bild und Titel nebeneinander) */
.project-header {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0;
}

.project-header:hover {
    background-color: rgba(182, 255, 0, 1);
	font-size: 1.8rem;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    color: black;
	
}
.project-header:hover .project-title {
    color: black; /* Setzt die Schriftfarbe auf Schwarz beim Hover */
}

.project-title:hover {
    font-size: 1.8rem;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    color: black;
    margin: 0;
	
}
.project-img {
    width: 440px;
    height: 276px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 20px;
    flex-shrink: 0;
	
}

.project-title {
    font-size: 1.8rem;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    color: #b6ff00;
    margin: 0;
	
}

/* Versteckte Details, die bei Klick angezeigt werden */
.project-details {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #b6ff00;
    display: none;
    margin: 0;
	
}

.project-details p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.project-details video {
    width: 100%;
    max-width: 1920px;
    margin-bottom: 20px;
    border-radius: 20px;
    border: 1px solid black;
}


@media (max-width: 780px) {
    .project-header {
        display: block; /* Anordnung der Elemente untereinander */
        text-align: center; /* Zentriert den Titel */
    }

    .project-img {
        width: 100%; /* Passt das Bild an die Bildschirmbreite an */
        height: auto; /* Beibehaltung der Proportionen */
        margin: 0 auto; /* Zentriert das Bild */
    }

    .project-title {
        font-size: 1.5rem; /* Kleinere Schriftgröße für mobile Ansichten */
        margin-top: 10px; /* Abstand zum Bild */
    }
}
@media (max-width: 751px) {
    #projects-section {
        margin: 0;
        padding: 0;
    }
}