<style>
        /* Grundlegendes Reset und Schriftarten */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Merriweather', 'Georgia', serif; 
            background-color: #ffffff;
         }

        /* Hauptcontainer für den Inhalt */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.85); /* Leichte Transparenz für Lesbarkeit */
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        /* Header Bereich */
        header {
            text-align: center;
            padding: 40px 0;
        }

        .home-link {
            display: inline-block;
            margin-bottom: 20px;
            transition: transform 0.2s;
        }
        .home-link:hover {
            transform: scale(1.05);
        }

        h1 {
            color: #7E0D0C;
            font-size: 2.5rem;
            margin: 10px 0;
            font-style: italic;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #7E0D0C;
            font-style: italic;
            font-weight: normal;
            margin-top: 5px;
        }
        .text {
            font-size: 1.2rem;
            color: black;
            font-style: italic;
            font-weight: normal;
            margin-top: 5px;
        }


/* Masonry-Layout mit vergrößertem Abstand */
.gallery {
    column-count: 3; 
    column-gap: 50px; /* Erhöhter horizontaler Abstand (vorher 20px) */
    padding: 20px 0;
}

/* Responsive Anpassung */
@media (max-width: 900px) {
    .gallery {
        column-count: 2;
        column-gap: 30px;
    }
}

@media (max-width: 600px) {
    .gallery {
        column-count: 1;
        column-gap: 20px;
    }
}

.gallery-item {
    break-inside: avoid; 
    margin-bottom: 50px; /* Erhöhter vertikaler Abstand (vorher 20px) */
    background: #fff;
    padding: 15px; /* Etwas mehr Innenabstand im Rahmen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block; 
    width: 100%; 
}

/* Hover-Effekt beibehalten */
.gallery-item:hover {
    transform: translateY(-5px) rotate(1deg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}   
        /* Footer */
        footer {
            text-align: center;
            padding: 40px 0;
        }
</style>

