* {
    box-sizing: border-box;
    margin: 0;
    padding-left: 10;
    padding-right: 10;
    list-style-position: inside;
}

body {
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    align-items: center;
    background-color: #4c7d83;
    color: white;
    padding: 10px;
    width: 100%;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-left: auto; /* sorgt dafür, dass Burger-Menu nach rechts rückt */
}

.burger-menu div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
}

.nav {
    display: flex;
    gap: 10px;
    align-items: center; /* Geändert von 'right' zu 'center' */
    margin-left: auto;
}

/* GEMEINSAME STILE FÜR ALLE BUTTONS UND LINKS */
.nav a,
.nav button {
    background-color: #4c7d83;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    text-decoration: none;
    text-align: center; /* Zentriert statt rechts */
    min-width: 150px; /* Einheitliche Mindestbreite */
    display: block;
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
    font-size: 16px;
    font-family: inherit;
}

.nav a:hover,
.nav button:hover {
    background-color: #bbcdcf;
}

.dropdown {
    position: relative;
}

/* DROPDOWN-HAUPTBUTTON (Home) */
.dropdown > button {
    width: 100%;
    min-width: 150px; /* Gleiche Breite wie andere Buttons */
    padding: 10px 15px;
    text-align: center;
}

/* DROPDOWN-INHALT */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #bbcdcf;
    width: 100%; /* Gleiche Breite wie Hauptbutton */
    min-width: 150px; /* Gleiche Mindestbreite */
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
    box-sizing: border-box; /* Für konsistente Breite */
}

/* DROPDOWN-LINKS - GLEICHE BREITE WIE BUTTON */
.dropdown-content a {
    padding: 10px 15px; /* Gleiches Padding wie Button */
    display: block;
    text-decoration: none;
    color: white;
    text-align: center; /* Zentriert statt links */
    width: 100%;
    box-sizing: border-box;
    min-width: 150px; /* Gleiche Mindestbreite */
}

.dropdown-content a:hover {
    background-color: #a8b9bb; /* Etwas dunkler für Hover */
}

/* Desktop: Dropdown bei Hover */
@media (min-width: 801px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/* Handy-Ansicht */
@media (max-width: 800px) {
    .header {
        flex-wrap: wrap;
    }

    .burger-menu {
        display: flex;
    }

    .nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #4c7d83;
        gap: 0; /* Kein Abstand zwischen Items */
    }

    .nav.show {
        display: flex;
    }

    .nav a,
    .nav button {
        width: 100%;
        text-align: center; /* Zentriert auf Mobile */
        min-width: 100%; /* Nimmt volle Breite ein */
        border-bottom: 1px solid #3a6a70; /* Trennlinien */
    }

    .dropdown > button {
        width: 100%;
        min-width: 100%;
    }

    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        min-width: 100%;
    }

    .dropdown-content a {
        width: 100%;
        min-width: 100%;
        text-align: center;
        padding-left: 20px; /* Einrückung für Unterpunkte */
        background-color: #3a6a70; /* Etwas dunkler für Hierarchie */
    }

    .dropdown.open .dropdown-content {
        display: block;
    }
}

.content {
    padding: 10px;
}

/* Für große Bildschirme 2 Bilder nebeneinander*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.image-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.image-item {
    flex: 1 1 calc(50% - 20px);
    min-width: 300px;
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-caption {
    margin-top: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Für sehr kleine Bildschirme */
@media (max-width: 600px) {
    .image-item {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .container {
        padding: 10px;
    }
    
    .image-row {
        gap: 15px;
    }
}