/* 1. Haupt-Schriftfarbe für den gesamten Body ändern */
body {
    color: #000000 !important;
}

/* 2. Sicherstellen, dass auch Absätze und Textelemente schwarz sind */
p, li, div, span {
    color: #000000;
}

/* 3. Überschriften ebenfalls auf Schwarz setzen (optional) */
h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
}

/* 1. Standard-Farbe für Links im Text */
a {
    color: #000000; 
    text-decoration: none !important; /* Entfernt die Unterlinie */
}

/* 2. Farbe, wenn man mit der Maus über den Link fährt */
a:hover, a:focus {
    color: #000000; /* Ein etwas dunkleres Blau beim Drüberfahren */
    text-decoration: none; /* Unterstreichung verschwindet beim Hover */
    font-weight: bold;
}

.com-content-article a {
    font-weight: bold; /* Macht Links im Fließtext deutlicher sichtbar */
}

.header {
    background-color: white !important;
    background-image: none !important;
    border-bottom: 1px solid #eeeeee; /* Dezente Linie zur Trennung zum Inhalt */
}

/* Hauptfarbe der Buttons ändern */
.btn-primary {
    background-color: #01C0F7; /* Deine Wunschfarbe (z.B. Orange) */
    border-color: #01C0F7;     /* Rahmenfarbe, meist etwas dunkler */
    color: #ffffff;            /* Textfarbe auf dem Button */
}

/* 2. Menüpunkte: Hintergrund entfernen (transparent) */
.mod-menu.metismenu a, 
.navbar-nav .nav-link {
    color: #01C0F7 !important;
    background-color: transparent !important; /* WICHTIG: Kein weißer Block um den Text */
    padding: 0.5rem 1rem;
    transition: all 0.3s ease; /* Macht den Übergang beim Hover weicher */
}

/* 3. Hover-Effekt: Nur Schrift fett oder dezente Farbänderung */
.mod-menu.metismenu a:hover, 
.navbar-nav .nav-link:hover {
    color: #01C0F7 !important; /* Dunkelgrau beim Drüberfahren */
    background-color: #FFE87E !important;
    font-weight: bold;

    /* Abgerundete Ecken hinzufügen */
    border-radius: 8px; /* Wert erhöhen für noch rundere Ecken (z.B. 20px oder 50% für Pillen-Form) */
    
    /* Optional: Ein kleiner Übergang, damit das Abrunden sanft erscheint */
    transition: all 0.2s ease-in-out;  
}

/* 4. Aktiver Menüpunkt */
.mod-menu.metismenu li.active > a, 
.mod-menu.metismenu li.current > a,
.navbar-nav .active > .nav-link {
    color: #01C0F7 !important;
    background-color: transparent !important;
    font-weight: bold;
    border-bottom: 2px solid #01C0F7; /* Zeigt an, wo man ist */
}

/* 1. Den Button standardmäßig auf Desktop-Monitoren verstecken */
.navbar-toggler {
    display: none !important;
}

/* 2. Den Button nur auf kleinen Bildschirmen (Tablets & Handys) anzeigen */
@media (max-width: 991.98px) {
    .navbar-toggler {
        border: 2px solid #01C0F7 !important;
        background-color: white !important;
        position: relative !important;
        width: 44px !important;
        height: 40px !important;
        display: block !important; /* Hier wird er wieder sichtbar */
        opacity: 1 !important;
        visibility: visible !important;
    }

    .navbar-toggler-icon {
        display: none !important;
    }

    .navbar-toggler::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 10px;
        width: 24px;
        height: 3px;
        background-color: #01C0F7;
        box-shadow: 0 8px 0 0 #01C0F7, 0 16px 0 0 #01C0F7; 
        display: block !important;
    }
}