/* ========================================
Global Styles
======================================== */

/* Hintergrundfarbe für den Header */
#header {
    background: #13501b; /* Dunkelgrün */
    color: #ffffff; /* Standard-Schriftfarbe im Header */
}

/* Links im Header */
#header a {
    color: #ffffff !important; /* Weiß */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Hover-Effekt für Links im Header */
#header a:hover {
    color: #f7fb01 !important; /* Goldgelb beim Hover */
}

/* Hover-Effekt für Links im Header */
#header a:active {
    color: #83c28b !important;
}

/* Hover-Effekt für Links im Header */
#header a:focus {
    color: #83c28b !important;
}

img {
    display: block;
    margin: 0 auto;
}

/* abbildungen*/

.image-container {
    display: flex; /* Flexbox für nebeneinander angeordnete Elemente */
    justify-content: center; /* Zentriert die Bilder im Container */
    gap: 20px; /* Abstand zwischen den Bildern */
    margin: 20px auto; /* Zentriert den Container */
    max-width: 90%; /* Maximale Breite des Containers */
} 

figure {
    display: inline-block; /* Gruppiert Bild und Unterschrift */
    margin: 20px auto; /* Abstand um die Gruppe */
    text-align: left; /* Links ausgerichtet */
}

figure img {
    max-width: 75%; /* Bild passt sich an den Container an */
    height: auto; /* Proportionen bleiben erhalten */
    display: block; /* Verhindert unerwünschte Leerzeichen */
}

figcaption {
    background-color: #f0f0f0; /* Graue Fläche */
    color: #333; /* Dunkle Schriftfarbe für guten Kontrast */
    padding: 10px; /* Innenabstand für die Fläche */
    font-size: 0.9em; /* Etwas kleinere Schriftgröße */
    font-style: italic; /* Optional kursiv für Unterschriften */
    line-height: 1.4; /* Harmonische Zeilenhöhe */
    margin: 0 auto; /* Zentriert die graue Fläche unter dem Bild */
    width: 75%; /* Gleiche Breite wie das Bild */
    box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
}


/* sub-menue hg */
a {
  background-color: #13501bd6 !important; 
}


/* ========================================
Mobile Menu Styles
======================================== */

/* Hintergrundfarbe des mobilen Menüs */
#navbar, .mobile-menu {
    background-color: #13501b; /* Dunkelgrün */
    color: #ffffff; /* Weiße Schriftfarbe */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease; /* Animationen */
}

/* Hamburger-Icon (Menü-Toggle) */
.menu-toggle {
    color: #ffffff; /* Weiß */
    border-color: #ffffff; /* Weißer Rand */
}

/* Hover- und Fokus-Effekt für das Menü-Toggle */
.menu-toggle:hover,
.menu-toggle:focus {
    color: #83c28b; /* Helle Farbe beim Hover */
    border-color: #83c28b;
}

/* Links im mobilen Menü */
.navbar-nav li a {
    color: #ffffff; /* Weiß */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Hover-Effekt für Links im mobilen Menü */
.navbar-nav li a:hover {
    color: #ffcc00; /* Goldgelb beim Hover */
}

/* Aktive Links im mobilen Menü */
.navbar-nav li a.active {
    background-color: #0a3c12; /* Dunkleres Grün für aktive Links */
    color: #ffffff; /* Weißer Text */
}

/* hamburger farbe*/
.mobile-menu .button_container span {
	background: #83c28b;
}


/*schrift im menue*/
.treemenu li a.active, .treemenu li a:focus, .treemenu li a:hover {
	text-decoration: none;
	color: #83c28b !important;
}

/*schrift im menue*/
.treemenu li a.active, .treemenu li a {
        text-decoration: none;
        color: white !important;
}

.overlay {

	background: #13501b !important;
}

/* ========================================
Button Styles
======================================== */

/* Globale Buttons */
button,
.btn {
    background-color: #13501b; /* Dunkelgrün */
    color: #ffffff; /* Weißer Text */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover-Effekt für Buttons */
button:hover,
.btn:hover {
    background-color: #0a3c12; /* Dunkleres Grün */
    color: #ffcc00; /* Goldgelb */
}

/* ========================================
Media Queries
======================================== */

/* Zusätzliche Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    /* Header auf kleineren Geräten */
    #header {
        padding: 10px; /* Weniger Abstand für kleinere Geräte */
    }

    /* Schriftgröße der Links im mobilen Menü anpassen */
    .navbar-nav li a {
        font-size: 14px; /* Kleinere Schriftgröße */
    }

    /* Buttons auf mobilen Geräten */
    button,
    .btn {
        font-size: 14px; /* Kleinere Schriftgröße */
        padding: 8px 16px; /* Weniger Polsterung */
    }
}

/* ========================================
FOOTER
======================================== */

#footer {
        color: #83c28b  !important;
        background: #13501b !important;
}

#footer a{
        color: #ffffff !important;
}

/*hero-text*/
.custom-big-text {
    font-size: 3.5em; /* Größerer Schriftgrad */
    font-weight: bold; /* Fett */
    text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben */
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", Verdana, Arial, sans-serif; /* Abgerundete Schriftarten */
}