/* --- Mobile Styles (Media Query) --- */
@media screen and (max-width: 768px) {

    /* --- Base Styles --- */
    body {
        background-attachment: scroll;
        min-height: auto;
    }

    /* --- Header-Styles anpassen --- */
    h1.header1 {
        font-size: 28px;
    }

    h2.header2,
    h2.header3 {
        font-size: 14px;
    }

    /* --- Menü-Anpassungen --- */
    .top-menus-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .menue1,
    .menue2,
    .menue3 {
        flex: 1 1 100%;
        height: auto;
        border: none;
        padding: 8px 0;

        /* Die Flexbox-Zentrierung muss auf dem übergeordneten Container sitzen */
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert den Inhalt der Menü-Boxen */
    }

    .menue2:focus-within .dropdown {
        display: block;
    }

    /* Das Dropdown-Menü-Element selbst anpassen */
    .dropdown {
        background-color: black;
        border: 0px solid #555;
        width: auto;
        min-width: unset;
        text-align: center;
        /* Positionierung zurücksetzen */
        position: static;
        margin-top: 5px; /* Kleiner Abstand zum Header */
    }

    /* Die einzelnen Listenelemente anpassen */
    .dropdown li {
        text-align: center;
        border-bottom: 0px solid #555;
    }

    /* Die Links innerhalb des Dropdowns anpassen */
    .dropdown li a {
        color: white; /* Textfarbe der Links */
        text-align: center;
        padding: 10px;
    }

    /* Optional: Farben beim Antippen ändern */
    .dropdown li a:active {
        background-color: #555;
        color: white;
    }

    /* --- Main Content Area & Text-Overlay anpassen --- */
    .main-content-area {
        padding: 10px;
    }

    .text-overlay-box {
        padding: 20px;
        max-width: 100%;
    }

    .text-overlay-box h1 {
        font-size: 2.5em;
    }

    .text-overlay-box p {
        font-size: 1em;
    }

    /* --- Galerie anpassen --- */
    .gallery-container {
        grid-template-columns: 1fr;
        gap: 15px;
        max-width: 100%;
        padding: 0 10px;
    }

    .gallery-item {
        transform: none;
    }

    .gallery-caption {
        font-size: 12px;
    }

    /* --- Footer anpassen --- */
    .footer1 {
        padding: 10px;
    }
}