/* Basis-Styles für mobile Geräte */
@media (max-width: 768px) {
    /* Body-Anpassungen */
    body {
        font-size: 1em; /* Kleinere Schriftgröße für bessere Lesbarkeit */
    }
    
    .startbild {
      width: 95%;
      }

    /* Header und Navigation */
    header {
        line-height: 2.5em; /* Weniger vertikaler Abstand */
    }

    /* Normale Navigation ausblenden */
    nav {
        display: none; /* Normale Navigation wird nicht angezeigt */
    }

    /* Burger-Menü */
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40px; /* Breite des Menüs */
        height: 30px; /* Höhe des Menüs */
        cursor: pointer;
        position: relative;
        z-index: 2000; /* Über andere Elemente legen */
        margin: 10px auto; /* Zentrieren */
    }

    .burger-menu div {
        width: 100%;
        height: 4px;
        background-color: #fff; /* Farbe der Linien */
        border-radius: 2px;
        transition: all 0.3s ease; /* Sanfter Übergang */
    }

    /* Das mobile Menü (ausgeblendet) */
    #mobile-nav {
        position: fixed;
        top: 0;
        left: -100%; /* Navigation außerhalb des sichtbaren Bereichs */
        width: 70%; /* Breite der Navigation */
        height: 100%; /* Gesamte Höhe des Bildschirms */
        background-color: #333; /* Dunkler Hintergrund */
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: left 0.3s ease-in-out; /* Animation für das Hineinsliden */
        z-index: 1000;
    }

    #mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #mobile-nav ul li {
        margin: 20px 0;
    }

    #mobile-nav ul li a {
        text-decoration: none;
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        transition: color 0.2s;
    }

    #mobile-nav ul li a:hover {
        color: orange;
    }

    /* Mobile Navigation sichtbar machen */
    #mobile-nav.active {
        left: 0; /* Navigation in den sichtbaren Bereich sliden */
    }

    /* Hauptbereich */
    main {
        width: 95%; /* Reduziere die Breite auf fast volle Ansicht */
        margin: 20px auto; /* Mittig mit kleinerem Rand */
        border-radius: 10px; /* Abgerundete Ecken */
    }

    .rand {
        border: 10px solid #333; /* Kleinere Rahmen für mobile Ansicht */
    }

    .innen {
        padding: 20px; /* Reduziere das Innenpadding */
    }

    /* Galerie */
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Kleinere Thumbnails */
        gap: 5px;
    }

    .thumbnail {
        width: 100px;
        height: 100px;
    }

    /* Lightbox */
    .lightbox img {
        max-width: 100%; /* Nutze die volle Breite für mobile Geräte */
        max-height: 70%; /* Anpassung an mobile Ansichten */
    }

    /* Captions */
    .caption {
        font-size: 1rem; /* Kleinere Schriftgröße */
        padding: 5px 10px; /* Weniger Padding */
    }

    /* Facebook-Icon */
    .FB-icon {
        width: 25px; /* Reduzierte Größe des Icons */
        height: 25px;
    }

    .FB-icon:hover {
        width: 25px; /* Gleiche Größe wie normal */
        height: 25px;
    }
}