@charset "UTF-8";
.com-content-article {
    background-color: #fafc79; /* Farbe hellgelb als Hintergrundfarbe der Beitragsseiten */
    padding: 25px;            /* Innenabstand zum Text */
    border-radius: 8px;       /* Optionale abgerundete Ecken */
}

.container-header .mod-menu {
    background-color: #ffffff; /* Farbe weiss als Hintergrundfarbe des Hauptmenüs */
    padding: 5px 10px;        /* Innenabstand für mehr Raum um die Schrift */
    border-radius: 4px;        /* Optional: Abgerundete Ecken */
    width: 100%;               /* Streckt den Hintergrund über die verfügbare Breite */
}

/* Hintergrundfarbe beim Drüberfahren (Hover) über das Hauptmenü */
.container-header .mod-menu a:hover, 
.container-header .mod-menu span:hover {
    background-color: #135cae; /* Farbe dunkelblau für den Hover-Effekt */
    color: #ffffff;            /* Textfarbe beim Hovern (z.B. Weiß) */
    border-radius: 4px;        /* Optional: Leicht abgerundete Ecken für den Effekt */
}

/* Innenabstand der Links im Hauptmenü anpassen, damit der Hintergrund schön aussieht */
.container-header .mod-menu a,
.container-header .mod-menu span {
    padding: 4px 4px;         
    transition: background-color 0.2s ease; /* Macht den Farbübergang weicher */
}

/* Untermenü beim Drüberfahren (Hover) über das Hauptmenü direkt einblenden */
@media (min-width: 992px) {
    .container-header .metismenu-item:hover .mm-collapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        position: absolute;
        z-index: 1000;
        min-width: 200px; /* Breite des aufklappenden Menüs */
        background-color: #ffffff; /* Hintergrundfarbe des Dropdowns */
        box-shadow: 0px 8px 16px rgba(0,0,0,0.1); /* Optional: Schatten für räumliche Tiefe */
    }
}

/* Hintergrundfarbe des aktiven Menüpunktes */
.container-header .mod-menu .active > a,
.container-header .mod-menu .active > span,
.container-header .mod-menu .current > a,
.container-header .mod-menu .current > span {
    background-color: #135cae; /* Ihre Wunschfarbe für den aktiven Zustand (z.B. Grün) */
    color: #ffffff;            /* Schriftfarbe des aktiven Punktes (z.B. Weiß) */
    border-radius: 4px;        /* Optional: Abgerundete Ecken */
}

/* Abstände für das horizontale Footermenü */
footer .mod-menu.flex-row {
    list-style: none; /* Entfernt eventuelle Aufzählungspunkte */
    padding-left: 0;
    margin-bottom: 0;
}

footer .mod-menu.flex-row > li {
    margin-left: 5px;
    margin-right: 5px; /* Gleichmäßiger Abstand links und rechts */
}

/* Nur das Footermenü-Modul selbst einfärben */
.footer .mod-menu {
    background-color: #ffffff; /* Ersetzen Sie dies durch Ihre Wunschfarbe (z. B. Gelb) */
    padding: 10px 20px;        /* Innenabstand (oben/unten links/rechts) */
    display: inline-block;     /* Verhindert, dass der Hintergrund über die volle Breite geht */
    border-radius: 4px;        /* Optionale leicht abgerundete Ecken */
}

/* Linkfarbe innerhalb des Menüs anpassen */
.footer .mod-menu a {
    color: #135cae;            /* Textfarbe der Links (z. B. Schwarz) */
    text-decoration: none;     /* Entfernt den Unterstrich */
}

/* Linkfarbe beim Drüberfahren (Hover) */
.footer .mod-menu a:hover {
    color: #fca121;            /* Farbe beim Hovern */
    text-decoration: underline;/* Zeigt Unterstrich nur beim Hovern */
}