/* Hintergrundfarbe der gesamten Website */
body {
    background-color: #dbe292; /* Deine CD-Farbe */
}

.header.container-header.full-width {
    background: #dbe292 !important;
    background-image: none !important;
}

.brand-logo img {
    width: 100px !important; /* Breite anpassen */
    height: auto !important; /* Höhe automatisch anpassen, damit das Seitenverhältnis erhalten bleibt */
}

.site-description {
    color: #000000 !important;
    font-size: 3em; /* Anpassen je nach gewünschter Größe */
    font-weight: bold; /* Optional für fetten Text */
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Verhindert Abstand zwischen den Elementen */
}

.brand-logo {
    margin-bottom: 0; /* Entfernt den Abstand unter dem Logo */
}

.site-description {
    margin-top: 0; /* Entfernt den Abstand über dem Text */
}

/* Hauptfarbe für Links & Buttons */
a, .btn-primary {
    color: #737e29;  /* Primärfarbe */
}

a {
    text-decoration: none !important;
}

a:hover {
  color: #C04D07;
}

#field73 {
    background-color: #b7ca3c; /* Primärfarbe (Standard-Blau) */
    border: none;
    color: #000000; /* Textfarbe */
}

#field73:hover {
    background-color: #737e29; /* Dunkleres Blau beim Hover */
    color: #ffffff;
}

#field125 {
    background-color: #737e29; /* Standard-Rot */
    border: none;
    color: #000000;
}

#field125:hover {
    background-color: #737e29; /* Dunkleres Rot beim Hover */
    color: #ffffff;
}

p {
    font-size: 1.125rem !important; /* 18px = 1.125rem (18px ÷ 16px) */
}

/* Hauptmenüpunkte - Schwarz */
.mod-menu > .nav-item > a {
    color: #000000 !important; /* Hauptmenüpunkte in Schwarz */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 15px;
    display: block;
}

/* Hover-Effekt für Hauptmenüpunkte */
.mod-menu .nav-item:hover > a {
    color: #737e29 !important; /* Farbe für den ausgeklappten Menüpunkt */
    background-color: #dbe292; /* Leichte Hintergrundänderung */
    border-radius: 5px;
}

/* Untermenüpunkte (Dropdown) */
.mod-menu .mod-menu__sub {
    display: none; /* Versteckt das Untermenü standardmäßig */
    position: absolute; /* Absolut positioniert für das Dropdown */
    left: 0; /* Die erste Ebene wird direkt unter dem Menüpunkt angezeigt */
    top: 100%; /* Das Untermenü erscheint direkt unter dem Menüpunkt */
    background-color: rgba(219, 226, 146, 1); /* #dbe292 mit 50% Transparenz */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für das Untermenü */
    z-index: 10; /* Damit es vor anderen Elementen angezeigt wird */
    width: max-content; /* Breite an Inhalt anpassen */
    /*border: 1px solid #ddd; /* Rand für das Untermenü */
    border-radius: 5px;
    padding: 5px 0;
}

/* Wenn der Benutzer mit der Maus über das Hauptmenü fährt, wird das Untermenü angezeigt */
.mod-menu .nav-item:hover > .mod-menu__sub {
    display: block; /* Zeigt das Untermenü an */
}

/* Untermenüpunkte Links */
.mod-menu .mod-menu__sub a {
    color: #737e29 !important; /* Dropdown-Menüpunkte in #737e29 */
    text-decoration: none;
    display: block;
    padding: 10px 15px; /* Etwas Abstand für die Menüeinträge */
    font-size: 14px;
    font-weight: normal;
}

/* Hover-Effekt für Untermenüpunkte */
.mod-menu .mod-menu__sub a:hover {
    color: #000000 !important; /* Untermenüpunkte ändern auf Schwarz beim Hover */
    background-color: #f0f0f0; /* Hellgrauer Hintergrund beim Hover */
    border-radius: 5px;
}

/* Erste Ebene der Untermenüpunkte (nach unten ausklappen) */
.mod-menu .nav-item > .mod-menu__sub {
    left: 0; /* Positioniert das Untermenü unter dem übergeordneten Menüpunkt */
    top: 100%; /* Das Untermenü wird direkt darunter angezeigt */
    right: auto; /* Stellt sicher, dass es nicht nach rechts ausklappt */
}

/* Nur tiefere Ebenen (z.B. Fachkommission) nach rechts ausklappen */
.mod-menu .mod-menu__sub .nav-item.deeper {
    position: relative;
}

.mod-menu .mod-menu__sub .nav-item.deeper > .mod-menu__sub {
    left: 100%; /* Positioniert das Untermenü rechts neben dem übergeordneten Untermenü */
    top: 0; /* Das Untermenü wird auf gleicher Höhe angezeigt */
    right: auto; /* Verhindert Überschneidung mit dem Hauptmenü */
}

/* Sicherstellen, dass das Menü nach unten klappt und tiefere Ebenen nach rechts */
.mod-menu .nav-item {
    position: relative; /* Damit die absolute Positionierung des Untermenüs funktioniert */
}

/* Verhindern, dass das Untermenü nach rechts über das Hauptmenü hinausgeht */
.mod-menu .nav-item .mod-menu__sub {
    max-width: 300px; /* Optional: Begrenze die Breite des Untermenüs */
}

.header.container-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
    width: 100%;
}

.navbar-brand {
    text-align: center;
    display: block;
    width: 100%;
}

.brand-logo img {
    display: block;
    margin: 0 auto; /* Logo zentrieren */
    width: 150px !important;
    height: auto !important;
}

.container-nav {
    width: 100%;
    text-align: center;
}

.container-nav ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
    list-style: none;
}

/* Hamburger Button*/
/*.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1000;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px;
    transition: 0.4s;
}*/

/* Zeige den Hamburger Button nur auf mobilen Geräten */
/*@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    /* Menü wird standardmäßig ausgeblendet */
    /*.container-nav {
        display: none;
        width: 100%;
        background-color: #fff;
    }

    .container-nav.active {
        display: block;
    }
}*/

/* Hamburger Button Animation */
/*.hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}*/

.footer.container-footer.full-width {
    background-color: #92a130 !important;
   background-image: none !important;
}

.container-footer {
    background-color: #92a130;
    color: #fff;
    padding: 15px 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Menü links, Copyright rechts */
    align-items: center;
    width: 100%;
}

.mod-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; /* Abstand zwischen den Menüpunkten */
}

.mod-menu a {
    color: #fff;
    text-decoration: none;
}

.footer-copyright {
    font-size: 14px;
    text-align: right;
    color: #000000;
}