/* Grundlegende Stildefinitionen */
body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #eaeaea;
    margin: 0;
    padding: 0;
}

header, main, footer {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Navigationsmenü-Stile */
#main-nav {
    background-color: #376a28;
    padding: 10px 0;
}

#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#main-nav ul li {
    margin: 5px;
}

#main-nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#main-nav ul li.current a, #main-nav ul li a:hover {
    background-color: #004080;
    color: #ffd700;
    border-color: #ffd700;
}
/* Hamburger-Menü Stile */
.hamburger-menu {
    display: none; /* Standardmäßig nicht angezeigt */
    cursor: pointer;
    flex-direction: column;
    padding: 10px;
    margin-right: 15px;
}

.hamburger-menu .bar {
    background-color: #fff; /* Farbe der Hamburger-Icon-Balken */
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    transition: 0.3s;
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    #main-nav ul {
        display: none; /* Versteckt das Menü auf kleinen Bildschirmen */
        flex-direction: column;
        width: 100%; /* Menü nimmt die volle Breite ein */
    }

    #main-nav ul li {
        text-align: center; /* Zentriert die Menü-Items */
    }

    #main-nav ul li a {
        display: block; /* Damit die Links die volle Breite einnehmen */
    }

    .hamburger-menu {
        display: flex; /* Zeigt das Hamburger-Menü-Icon an */
    }

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

/* Responsive-Bild */
.responsive {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

/* Abschnittsstile */
section {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}

h1, h2 {
    color: #376a28;
	text-align: center;
}

h3, h4 {
    color: #376a28;
	text-align: center;
}

/* Anfrage-Button Stil */
.anfrage-button {
    text-align: center; /* Zentriert den Button im umgebenden Div */
    margin: 20px 0; /* Fügt oben und unten einen Abstand hinzu */
}

.anfrage-button .button {
    background-color: #007bff; /* Blaue Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    font-size: 16px; /* Größere Schrift für bessere Lesbarkeit */
    padding: 10px 20px; /* Innenabstand für größere Klickfläche */
    border: none; /* Entfernt den Standard-Browser-Rand */
    border-radius: 5px; /* Abgerundete Ecken für modernes Aussehen */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    transition: background-color 0.3s, transform 0.2s; /* Sanfter Übergang für Hover-Effekt und leichte Vergrößerung */
}

.anfrage-button .button:hover, .anfrage-button .button:focus {
    background-color: #0056b3; /* Dunklerer Blauton beim Darüberfahren oder Fokussieren */
    transform: scale(1.05); /* Leichtes Vergrößern für visuelles Feedback */
    color: #ffffff; /* Sicherstellen, dass die Textfarbe weiß bleibt */
    text-decoration: none; /* Unterstreichung bleibt entfernt */
}

.anfrage-button .button:active {
    transform: scale(0.95); /* Verkleinert den Button beim Klicken */
}

.image-gallery-item {
    text-align: center; /* Zentriert die Bilder und Texte innerhalb jedes Elements */
    margin-bottom: 20px; /* Fügt einen Abstand zwischen den Galerie-Elementen hinzu */
}

.image-gallery-item img {
    max-width: 100%; /* Stellt sicher, dass die Bilder responsive sind */
    height: auto; /* Behält das Seitenverhältnis der Bilder bei */
}

.image-info {
    margin-top: 10px; /* Fügt einen Abstand zwischen Bild und Link-Button hinzu */
}

.more-info-button {
    background-color: #007bff; /* Blaue Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    padding: 10px 20px; /* Innenabstand für eine größere Klickfläche */
    border-radius: 5px; /* Abgerundete Ecken für ein modernes Aussehen */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    transition: background-color 0.3s, transform 0.2s; /* Sanfter Übergang für Hover-Effekt */
}

.more-info-button:hover, .more-info-button:focus {
    background-color: #0056b3; /* Dunklerer Blauton beim Darüberfahren oder Fokussieren */
    transform: scale(1.05); /* Leichtes Vergrößern für visuelles Feedback */
    color: #ffffff; /* Sicherstellen, dass die Textfarbe weiß bleibt */
}

.more-info-button:active {
    transform: scale(0.95); /* Verkleinert den Button leicht beim Klicken */
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Versteckt die Bilder standardmäßig */
.mySlides {
  display: none;
}

/* Animationsstile */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Footer-Stile */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}

footer a {
    color: #ffd700;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
	text-align: center;
}

th, td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
	text-align: center;
}

th {
    background-color: #4CAF50;
    color: white;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    margin-bottom: 10px;
}
.container {
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    height: 30vh; /* Setzt die Höhe des Containers auf 100% der Viewport-Höhe */
    text-align: center; /* Zentriert den Text im <p>-Element */
}

        .formular-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .formular-gruppe {
            margin-bottom: 20px;
        }
        .formular-gruppe label {
            display: block;
            margin-bottom: 5px;
        }
        .formular-gruppe input[type="text"],
        .formular-gruppe input[type="email"],
        .formular-gruppe textarea {
            width: 98%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .formular-gruppe textarea {
            height: 140px;
        }
        .formular-gruppe button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .formular-gruppe button:hover {
			display: flex;
        }
.formular-button-gruppe {
    display: flex;
    justify-content: center; /* Zentriert den Button horizontal */
}
#googleMap iframe {
    width: 100%;
    height: 100%;
}
  .gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.main-image {
    max-width: 100%; /* Das Bild wird nie breiter als sein Container sein */
    height: auto; /* Automatische Höhe beibehalten */
    display: block; /* Element als Block anzeigen */
    margin-bottom: 20px; /* Abstand zum nächsten Element */
}
.thumbnail {
    max-width: 100px; /* Maximalbreite der Miniaturbilder */
    height: auto; /* Automatische Höhe beibehalten */
    cursor: pointer; /* Zeiger anzeigen beim Überfahren */
    margin-bottom: 10px; /* Abstand zwischen den Miniaturbildern */
}
.video-wrapper {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    /* Höhe des Containers auf 100% des Viewport-Höhe setzen entfernt */
    padding: 20px 0; /* Fügt vertikalen Abstand hinzu, ohne die gesamte Höhe zu beanspruchen */
}

.video {
    width: 100%; /* Breite auf 100% des Container setzen */
    height: auto; /* Automatische Höhe beibehalten */
    max-width: 600px; /* Maximale Breite des Videos festlegen */
}