body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #131212;
}

* {
    box-sizing: border-box;
}

/* Logo Header */
.container-logo nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixiertes Logo */
    top: 30px; 
    left: 30px; 
    z-index: 100; /* Logo bleibt über anderen Elementen */
}

.container-logo img {
    cursor: pointer;
    width: 13.2%; /* Vergrößertes Logo */
    height: auto;
}

/* Main Section Styling */
.content-container, .content-containerprojects {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100vh; 
    margin: 0; 
    padding: 0;
}

.content-container .text,
.content-containerprojects .text {
    width: 50%; 
    padding-right: 10mm; 
    position: relative;
    z-index: 10; /* Text bleibt über dem Bild sichtbar */
    text-align: right; 
    font-weight: 200; /* Schriftstärke */
    color: #333; 
}

.content-container .text h2, /* größer hervorgehobene Schrift */
.content-containerprojects .text h2 {
    font-size: 24px; 
    font-weight: 200; /* Dünnste Schrift */
    color: #333; /* 80% Schwarz */
}

.content-container .text h4, /* kleiner Schrift */
.content-containerprojects .text h4 {
    font-size: 16px; 
    margin-bottom: 5px;
    font-weight: 200; /* Dünnste Schrift */
    color: #333; /* 80% Schwarz */
}

/* Entfernt Punkte aus den Listen */
.content-containerprojects .text ul,
.content-containerprojects .text ul li {
    list-style: none; /* Keine Punkte bei Listen */
    padding: 0;
    margin: 0;
}

/* Bilder und Text in den Bildern */
.content-container .front,
.content-containerprojects .bild {
    width: 50%; 
    position: relative;
    height: 100%; 
    overflow: hidden; 
}

.content-container img,
.content-containerprojects img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease; /* Überblendung bei Hover */
    z-index: 0;
}


.content-container .front a,
.content-containerprojects .bild a {
    position: absolute;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 25px; 
    font-weight: 20; 
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* Text in einer Zeile halten */
    background: none;
}

.content-container .front a.Johannes {
    color: #6e7279; /* Königsblau */
}

.content-containerprojects .bild a {
    color: #d6d5d5; 
}

/* Hover-Effekt für Bilder */
.content-container .front:hover img,
.content-containerprojects .bild:hover img {
    opacity: 0.7; /* Bild wird zu 30% transparent */
}

.content-container .front:hover a,
.content-containerprojects .bild:hover a {
    color: #000; 
}


.content-container, .content-containerprojects {
    margin: 0; 
    padding: 0; 
}


/* Footer Styling */
footer {
    background-color: #fff; 
    padding: 5px 0; 
    text-align: center;
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    width: 100%;
    margin: 0; 
    
    
}

footer .footer a {
    color: #555;
    text-decoration: none; /* Entfernt Unterstrich */
    font-size: 16px; 
    font-weight: 100; /* Schriftstärke */
    transition: color 0.5s;
    
}

footer .footer a:hover {
    color: #051d35; /* Farbwechsel im Footer */
}

footer .footer {
    width: 100%;
    display: flex;
    justify-content: space-around; /* Gleichmäßige abstand der Links */
}

h1 {
    font-weight: 200; 
}

/* Impressum */
.Impressum {
        position: absolute; 
        top: 55%; /* Vertikal */
        left: 50%; /* Horizontal  */
        transform: translate(-50%, -50%); 
        text-align: left; 
}