/* Gaertner Pocking Allgemeine Stile */
body {
    font: 0.85em/1.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;
	  color: #666;
    margin: 0;
    padding: 0;
    background-color: #e8fd8b;
}

.container {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fbfff3;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    unicode-bidi: isolate;
}

h2 {
    display: block;
    font-size: 1.2em;
}

h3 {
    display: block;
    font-weight: bold;
}

/* Header */
.header {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}


.logo img {
    width: 100%; /* Die Breite des Logos passt sich an die Breite des Containers an */
    height: auto; /* Die Höhe wird automatisch angepasst, um das Seitenverhältnis zu wahren */
    max-width: 500px; /* Sicherstellen, dass das Logo nicht größer als der Container wird */
    display: block;
    margin: 0 auto;
	text-align: left;
}

/* Navigation ---------------------------------------*/
nav {
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
}

.navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.navigation li {
    margin: 0px;
  	border-bottom: 1px solid #ddd;
}

.navigation li a {
    text-decoration: none;
    padding: 5px 30px;
/*    background-color: #eee; */
    color: #3c8057;
    border-radius: 5px;
    display: block;
	font-weight: bold;
}

.navigation li.active a {
    color: #d61c21;
}

/* Content --------------------------------------------------------------*/
.content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
}

/* Linke Spalte */
.left-column {
    flex: 2;
    min-width: 200px;
}

/* Stil für die Content-Liste */
.content-sepp {
	margin: 20px;
  padding: 10px;
	border: 1px solid #ddd;
  font-weight: bold;
}


/* Bild in der linken Spalte */
.left-column img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.left-column blockquote {
  padding: 10px;
}

.left-column p a {
    color: #3c8057;
    text-decoration: none;
}

.left-column p a:hover {
    text-decoration: underline;
}

.content-list {
    list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
    padding: 0;
    margin: 0;
	line-height: 1.1em;
}


.content-list li {
    margin-bottom: 10px; /* Abstand zwischen den Listenelementen */
}

.content-list li strong {
	font-size: 1em; /* Vergrößerung der Schrift für die Titel */
    margin-top: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 0px;
	display: block;
	background: url(https://www.gaertner-pocking.de/wp-content/themes/oxygen/images/gaertner_bullet.png) no-repeat  left center;
}

.content-list li a {
    color: #3c8057; /* Farbe für die "mehr..." Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight: bold; /* Hebt die Links hervor */
}

.content-list li a:hover {
    text-decoration: underline; /* Unterstreicht den Link beim Hover */
}

/* Rechte Spalte ------------------------------ */
.right-column {
    flex: 1;
    min-width: 200px;
    padding: 15px;
    border-left: 1px solid #ddd;
}

.right-column h2, .right-column h3 {
    color: #3c8057;
}

.right-column p {
    margin: 10px 0;
}

.right-column a {
    color: #3c8057;
    text-decoration: none;
}

.right-column a:hover {
    text-decoration: underline;
}

.logos {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logos .logo {
    max-width: 100px;
    height: auto;
    display: block;
}

.logos img {
    width: 100%; /* Die Breite des Logos passt sich an die Breite des Containers an */
    height: auto; /* Die Höhe wird automatisch angepasst, um das Seitenverhältnis zu wahren */
    max-width: 500px; /* Sicherstellen, dass das Logo nicht größer als der Container wird */
    display: block; /* Entfernt eventuelle Leerzeichen unter dem Bild */
}


/* --------------------------- Galerie-Styling ---------------------------*/
/* Galerie-Container */
.gallery {
    position: relative;
    width: 100%;
    max-width: 500px; /* Maximale Breite der Galerie */
    margin: 0 auto;   /* Zentrierung der Galerie */
    height: 300px;    /* Höhe des Containers festlegen (kann an die Bildhöhe angepasst werden) */
    overflow: hidden; /* Verhindert das Austreten der Bilder */
    background-color: #f0f0f0; /* Hintergrundfarbe, falls kein Bild geladen wird */
}

/* Fade-Transition für die Bilder */
.gallery img {
    position: absolute; /* Überlappen der Bilder */
    top: 0;
    left: 0;
    width: 100%; /* Bild passt sich der Container-Breite an */
    transition: opacity 0.5s ease; /* Weicher Übergang für den Fade-Effekt */
    opacity: 0;  /* Standardmäßig unsichtbar */
    z-index: 0;  /* Hinter anderen Elementen */
}

.gallery img.active {
    opacity: 1;  /* Das aktive Bild ist sichtbar */
    z-index: 1;  /* Das sichtbare Bild bleibt oben */
}

/* Navigations-Buttons */
.gallery-button {
    position: absolute;
    top: 50%;  /* Vertikale Zentrierung */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparente schwarze Buttons */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 2;  /* Sicherstellen, dass Buttons über den Bildern liegen */
}

#prev-button {
    left: 10px;  /* Links vom Bild positionieren */
}

#next-button {
    right: 10px;  /* Rechts vom Bild positionieren */
}

/* Navigationspunkte (Dots) */
.dots {
    text-align: center;
    margin-top: 15px;
    position: relative;
    z-index: 2;  /* Dots über den Bildern */
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #717171;
}

/* Unsichtbare Bereiche für Mobilgeräte */
.touch-area {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
}

.touch-left {
    left: 0;
}

.touch-right {
    right: 0;
}

/* -------------------------------- Footer  -----------------------------*/
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    color: #999;
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: right;
}

.footer-right a {
    color: #3c8057;
    text-decoration: none;
    margin-left: 10px;
}

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

/* ----------------------------- Responsives Design -------------------- */
@media (max-width: 600px) {

    .navigation {
        flex-direction: column;
        align-items: center;
    }

    .navigation li {
        width: 100%;
        text-align: left;
    }

    .content {
        flex-direction: column;
    }

    .footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-left, .footer-right {
        text-align: center;
        margin-top: 10px;
    }

    .gallery-button {
        display: none;
    }

    .right-column {
        border-top: 1px solid #ddd;
    }
}