/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.nav-container {
    display: flex;
    align-items: center; /* Horizontale Ausrichtung auf der gleichen Höhe */
    justify-content: space-between; /* Logo nach links, Menü-Icon nach rechts */
    padding: 0 20px; /* Abstand zu den Seiten */
    position: relative;
}

.nav-logo {
    height: 60px; /* Passe die Höhe des Logos nach Bedarf an */
    display: inline-block;
    vertical-align: middle;
    margin-right: auto; /* Schiebt das Logo nach links */
}

.menu-toggle {
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 70px;
    background: #333;
    color: white;
    text-align: center;
    padding: 0 15px;
    position: absolute;
    right: 20px; /* Schiebt das Menü-Icon nach rechts */
    z-index: 2; /* Stellt sicher, dass das Icon über dem Dropdown-Menü liegt */
}

.menu-toggle .menu-icon {
    font-size: 24px;
    margin-right: 10px;
}

.menu-toggle .menu-text {
    font-size: 18px;
}

nav {
    background: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

nav ul {
    list-style: none;
    margin: 0 auto; /* Change this to center the menu */
    padding: 0;
    display: flex;
    align-items: center; /* Vertikale Ausrichtung der Menüeinträge */
    justify-content: center; /* Center the menu items */
    flex-direction: row; /* Ensure the menu is horizontal */
    max-width: fit-content; /* Add this line to make the width fit its content */
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

nav ul li a:hover {
    background: #555;
}

nav ul.active {
    display: flex; /* Zeigt das Menü bei Aktivierung an */
    position: absolute;
    top: 70px; /* Positionierung unter dem Menü-Icon */
    right: 0;
    width: 100%;
    flex-direction: column;
    background-color: #333;
    z-index: 1; /* Stellt sicher, dass das Menü unter dem Icon liegt */
}

/* Mobile Navigation */
@media (max-width: 1024px) {
    .menu-toggle {
        display: flex; /* Zeigt den Toggle-Button bei kleineren Bildschirmen */
    }

    nav ul {
        display: none; /* Versteckt das Menü bei kleineren Bildschirmen */
        flex-direction: column;
        width: 100%;
        background: #333;
        text-align: center;
    }

    nav ul.active {
        display: flex; /* Zeigt das Menü an, wenn es aktiv ist */
    }
}

header {
    text-align: center;
    padding: 20px 20px;
    background: #f5f5f5;
    margin-bottom: 0;
}

afterheader {
    text-align: center;
    z-index: 1;
    padding: 20px 20px;
    margin-top: 0;
    margin-bottom: 0px; 
}

.scroll-section {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column; /* Anordnung von Text und Bild untereinander */
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding-top: 0;
    overflow: hidden;
}
.scroll-section img,
.scroll-section .content {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    transform: translateY(50px);
    opacity: 0; /* Start-Opazität */
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.scroll-section .content {
    z-index: 2; /* Sicherstellen, dass der Text über dem Bild angezeigt wird */
    transform: translateY(50px); /* Leicht verzögerte Startposition für den Text */
}

.scroll-section img {
    transform: translateY(70px); /* Bild startet etwas weiter unten */
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh; /* Stellt sicher, dass der Wrapper mindestens die Höhe des Bildschirms hat */
}

main {
    flex: 1; /* Hauptinhalt nimmt den verfügbaren Platz ein */
    text-align: center;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Optional: zentriert das Bild horizontal */
}
/* Verbesserte Kontaktseite */
.contact-details {
    padding: 40px 20px;
    text-align: center;
}

.contact-details h2 {
    margin-bottom: 20px;
    margin-top: 40px;
}

.email-highlight {
    background-color: #eef6ff; /* Leichtes Blau für Hervorhebung */
    padding: 15px;
    text-align: center;
    display: inline-block;
    max-width: 90%;
    width: auto;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    border-left: 5px solid #007bff;
    margin: 20px auto;
    line-height: 1.5;
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    margin: 0 15px;
}

.impressum-logo img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Passt sich der maximalen Inhaltsbreite an */
    display: block;
    margin: 20px auto; /* Zentriert das Bild */
}

footer {
    text-align: center;
    padding: 40px;
    background: #f5f5f5;
    /* Optional: Footer fixiert am unteren Rand bei großen Inhalten */
    position: relative;
    bottom: 0;
    width: 100%;
}

footer h2 {
    margin-top: 0;
}

footer .disclaimer {
    font-size: 0.8em; /* Verkleinert die Schriftgröße */
    color: #cccccc;   /* Helleres Grau, um die Schriftfarbe an den Hintergrund anzupassen */
    margin-top: 10px; /* Fügt einen kleinen Abstand nach oben hinzu */
}

footer a.footer-link  {
    color: #777777; /* Helleres Grau, um es subtil darzustellen */
    font-size: 0.8em; /* Verkleinert die Schriftgröße */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

footer a.footer-link :hover {
    color: #000000; /* Optional: Etwas dunkleres Grau beim Hover */
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Anpassung des Footer-Textes */
footer p {
    margin: 0; /* Entfernt zusätzlichen Abstand zwischen den Absätzen */
}

/* Links schwärzen */
a {
    color: #000000; /* Setzt die Linkfarbe auf Schwarz */
    text-decoration: none; /* Entfernt die Unterstreichung (optional) */
}

a:hover {
    color: #333333; /* Optional: Farbe beim Hover-Zustand etwas heller */
    text-decoration: underline; /* Unterstreichung beim Hover (optional) */
}

/* Galerie und Details */
.gallery {
    column-count: 3;
    column-gap: 10px;
    padding: 20px;
    background: #f5f5f5;
}

.gallery .image-container {
    margin-bottom: 10px;
    break-inside: avoid;
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
}

/* Galerie und Details F9 kleine Änderung, denn Bilder etwas anders wahrscheinlich aufgrund der Größe */
.ifagallery {
    column-count: 3;
    column-gap: 10px;
    padding: 20px;
    background: #f5f5f5;
}

.ifagallery .image-container {
    margin-bottom: 10px;
}

.ifagallery img {
    width: 100%;
    height: auto;
    display: block;
}

.details {
    padding: 20px;
    text-align: center;
    background: #ffffff;
}

.details h2 {
    margin-top: 0;
}

.contact-section {
    padding: 30px 0;
}
/* Media Queries für Responsive Design */

/* Tablets */
@media (max-width: 1024px) {
    .menu-toggle {
        display: flex;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #333;
        text-align: center;
    }

    nav ul.active {
        display: flex;
    }

    .gallery {
        column-count: 2;
    }

    .ifagallery {
        column-count: 2;
    }

    .scroll-section {
        flex-direction: column;
        padding: 20px;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    .gallery {
        column-count: 1;
    }

    .ifagallery {
        column-count: 1;
    }

    .scroll-section {
        flex-direction: column;
        padding: 10px;
    }

    .scroll-section img {
        max-width: 100%;
        transform: translateY(50px);
    }

    .scroll-section .content {
        margin: 10px 0;
    }

    .email-highlight {
        font-size: 18px;
        padding: 12px;
        line-height: 1.4;
    }

    footer {
        padding: 20px;
    }
    
}