.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(13deg, #234680, #802363, #dbc639);
    color: white;
    padding: 20px;
    position: relative;
}

.navbar button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 8px;
    background-color: white;
    color: #234680;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    padding: 0;
    display: inline-block;
    text-align: center;
    line-height: 20px;
}

/* Das H1 sauber zentrieren */
.navbar h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(25, 25, 25, 0.25);
    border-radius: 5px;
    padding: 5px;
    font-size: 1.2em;
    text-align: center;
}


/* Grundlayout */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f0f0f0;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode */
body.dark-mode {
    background: linear-gradient(90deg, #050505, #1c1c1c);
    color: #f0f0f0;
}

#startButton {
    text-align: center;
    border: none;
    background-color: rgb(125, 125, 125);
    color: #ffffff;
    font-size: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 200px;
    margin-bottom: 10px;
}

#upBtn, #downBtn, #leftBtn, #rightBtn {
    font-family: Arial, sans-serif;
    border-radius: 5px;
    border: none;
    background-color: rgb(125, 125, 125);
    color: #ffffff;
    font-size: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#upBtn:hover, #downBtn:hover, #leftBtn:hover, #rightBtn:hover {
    background-color: #606060;
}

#startButton:hover {
    background-color: #606060;
}

/* Container für die Inhalte */
.container {
    padding: 20px;
}

/* Top-Bereich: Linker und rechter Block nebeneinander */
.top-section {
    display: flex;
    flex-wrap: wrap; /* Umbruch bei Platzmangel */
    gap: 10px;
}

/* Linker Block */
.left-block, .right-block {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode für Blöcke */
body.dark-mode .left-block,
body.dark-mode .right-block,
body.dark-mode .bottom-section {
    background-color: #292929;
    color: #f0f0f0;
}

/* Zentrierter Text im Block 'Über mich' */
.right-block {
    flex-direction: column; /* Stellt sicher, dass h2 über den p-Tags steht */
    text-align: center;
}

/* Unterer Block */
.bottom-section {
    background-color: white;    
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Linker Block */
.left-block {
    flex: 1 1 50px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Rechter Block */
.right-block {
    flex: 2 1 50px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}


/* Bottom-Section immer unter beiden Blöcken */
.bottom-section {    
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container, .left-block, .right-block, .bottom-section {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .top-section {
        flex-direction: column; /* Blöcke untereinander */
    }

    .left-block, .right-block, .bottom-section {
        width: 100%;
        max-width: 100%;
    }
}

footer {
    background: linear-gradient(13deg, #0a1423, #132644, #234680);
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    padding-bottom: 10px;
}

.footer {
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.right-block img {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.right-block img:hover {
    transform: scale(1.1); /* Vergrößert das Bild um 10% */
}

img[src="16pers.jpg"] {
    transition: filter 0.3s ease-in-out;
}

img[src="16pers.jpg"]:hover {
    filter: brightness(70%); /* Reduziert die Helligkeit auf 70% */
}.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(13deg, #234680, #802363, #dbc639);
    color: white;
    padding: 20px;
    position: relative;
}

.navbar button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 8px;
    background-color: white;
    color: #234680;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    padding: 0;
    display: inline-block;
    text-align: center;
    line-height: 20px;
}

/* Das H1 sauber zentrieren */
.navbar h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(25, 25, 25, 0.25);
    border-radius: 5px;
    padding: 5px;
    font-size: 1.2em;
    text-align: center;
}


/* Grundlayout */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f0f0f0;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode */
body.dark-mode {
    background: linear-gradient(90deg, #050505, #1c1c1c);
    color: #f0f0f0;
}

#startButton {
    text-align: center;
    border: none;
    background-color: rgb(125, 125, 125);
    color: #ffffff;
    font-size: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 200px;
    margin-bottom: 10px;
}

#upBtn, #downBtn, #leftBtn, #rightBtn {
    text-align: center;
    border: none;
    background-color: rgb(125, 125, 125);
    color: #ffffff;
    font-size: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 35px;
    margin-bottom: 10px;
}

#startButton:hover, #upBtn:hover, #downBtn:hover, #leftBtn:hover, #rightBtn:hover {
    background-color: #606060;
}

/* Container für die Inhalte */
.container {
    padding: 20px;
}

/* Top-Bereich: Linker und rechter Block nebeneinander */
.top-section {
    display: flex;
    flex-wrap: wrap; /* Umbruch bei Platzmangel */
    gap: 10px;
}

/* Linker Block */
.left-block, .right-block {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode für Blöcke */
body.dark-mode .left-block,
body.dark-mode .right-block,
body.dark-mode .bottom-section {
    background-color: #292929;
    color: #f0f0f0;
}

/* Zentrierter Text im Block 'Über mich' */
.right-block {
    flex-direction: column; /* Stellt sicher, dass h2 über den p-Tags steht */
    text-align: center;
}

/* Unterer Block */
.bottom-section {
    background-color: white;    
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Linker Block */
.left-block {
    flex: 1 1 50px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

/* Rechter Block */
.right-block {
    flex: 2 1 50px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}


/* Bottom-Section immer unter beiden Blöcken */
.bottom-section {    
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container, .left-block, .right-block, .bottom-section {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .top-section {
        flex-direction: column; /* Blöcke untereinander */
    }

    .left-block, .right-block, .bottom-section {
        width: 100%;
        max-width: 100%;
    }
}

footer {
    background: linear-gradient(13deg, #0a1423, #132644, #234680);
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    padding-bottom: 10px;
}

.footer {
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.right-block img {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.right-block img:hover {
    transform: scale(1.1); /* Vergrößert das Bild um 10% */
}

img[src="16pers.jpg"] {
    transition: filter 0.3s ease-in-out;
}

img[src="16pers.jpg"]:hover {
    filter: brightness(70%); /* Reduziert die Helligkeit auf 70% */
}