html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif; 
    color: #000; /* Einheitliche Schriftfarbe */
}

#home {
    margin: 0;
    padding: 0;
    overflow: hidden; 
    position: relative; 
}

#home-image {
    width: 100vw; /* damit es auf die Volle Breite des Viewports geht*/
    height: auto; /* Höhe passt sich an  */
    object-fit: contain; /* vollständige Anzeige des Bildes */
    display: block; 
    margin: 0; /* Entfernt alle Lücken */
    padding: 0; /* Entfernt alle Polsterung */
} 

#home-text, .project-description {
    text-align: center; /* Text in der mitte des Blocks */
    font-size: 1.5em; 
    color: #000; 
    margin: 20px auto; /* Abstand über und unter dem Text */
    padding: 20px 40px; /* für die gleichen Abstände von links und rechts */
    max-width: 800px; /* Maximale Breite des Textblocks */
    font-weight: normal;
    letter-spacing: 0.5px;
}

#about-link {
    position: absolute; 
    bottom: 20px; /* Abstand vom unteren Rand des Containers */
    right: 20px; /* Abstand vom rechten Rand des Containers */
    color: white; 
    font-size: 1.3em;
	text-decoration: none; /* Keine Unterstreichung */
    font-family: 'Arial', sans-serif; /* Einheitliche Schriftart */
    z-index: 10; 
}

#about-link:hover {
    text-decoration: underline; /* Unterstreichung bei Hover für visuelles Feedback */
}

#intro {
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    font-size: 1.5em;
    max-width: 800px;
}

#product-text {
    margin: 0;
    line-height: 1.6;
}

header {
    background: none; /* Keine Hintergrundfarbe */
    color: inherit; 
    padding: 20px 20px; /* Weniger Abstand */
    text-align: left; 
    width: 100%; /* Volle Breite */
    box-sizing: border-box; 
    position: relative; 
}

nav {
    position: fixed; 
    top: 20px; /* Gleiche Höhe wie die reduzierte Abstandsüberschrift */
    right: 40px; /* Erhöhter Abstand zur rechten Seite */
    background: none; /* Kein Hintergrund für das Menü */
    z-index: 1000; /* Über anderen Elementen */
}

header h1, .project-header h2, .project-header-right h3, section#about h2 {
    font-size: 2.5em; /* Einheitliche Schriftgröße */
    font-weight: 400;
    line-height: 1.2; /* Weniger Zeilenabstand für kompakteres Layout */
    margin: 0;
    padding-left: 20px; /* Einheitlicher Abstand von der linken Seite */
}

header p, footer p {
    font-size: 1.3em; /* Gleiche Größe wie die Unterüberschrift */
    margin-top: 10px;
    font-style: normal; 
    padding-left: 20px; 
    line-height: 1.2; /* Einheitliche Zeilenhöhe */
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: inherit; 
    font-size: 1.2em; /* Vergrößerte Schriftgröße */
}

/* Projekte Layout */
.projects-image img {
    width: 100vw; /* Volle Breite des Viewports */
    height: auto; /* Höhe bleibt proportional */
    object-fit: contain; /* Vollständige Anzeige ohne Zuschnitt */
    display: block; 
    margin: 0; /* Keine Außenabstände */
    padding: 0; /* Keine Innenabstände */
}

.project-header {
    display: flex;
    justify-content: space-between; /* Abstand zwischen Header und Header-Right */
    align-items: center;
    gap: 20px; 
    padding: 0 20px; 
    padding-bottom: 20px; /* Abstand nach unten */
}

.project-header-right {
    flex-shrink: 0; /* Verhindert das es kleiner wird als sein Inhalt */
}

section#projects {
    margin-bottom: 40px; 
    padding-top: 20px; 
}
.product-images img {
    width: 100%;  /* Volle Bildschirmbreite */
    height: auto;  /* Höhe proportional */
    display: block;
    margin: 0;
    padding: 0;
}

#product-details {
    text-align: center;
    padding: 20px;
}


.product-description {
    font-size: 1.5em;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Einheitliche Bilddarstellung für Desktop und Mobile */
.product-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding: 0 20px; /* Abstand zum Rand links und rechts */
}

.product-images img {
    width: 100%;  /* damit die bilder von Rand zu rand gehen  */
    max-width: 800px; /* Maximale Breite für größere Bildschirme */
    height: auto;  /* Seitenverhältnis beibehalten */
    display: block;
    border-radius: 10px; 
}


.product-images {
    background-color: #464646; 
    padding: 50px 0;  
    margin: 0;  
}


.product-images img {
    width: 100%;  /* Volle Breite der Seite */
    max-width: none;  /* Keine Begrenzung der Breite */
    height: auto;  /*  das die Seitenverhältnis so bleiben  */
    display: block;
    margin: 0; 
}


.product-images {
    display: flex;
    flex-direction: column;
    gap: 20px; 
}


#product-details {
    text-align: center;
    padding: 50px 20px;  
    color: white;  
}




footer {
    text-align: center;
    padding: 20px;
}

footer a {
    text-decoration: none;
    color: rgb(16, 15, 15);
    font-size: 1.2em;
}

.contact {
    text-align: center;
}