/* Titel der Popovers anpassen */
.popover-header {
    background-color: #87189D !important; /* Hintergrundfarbe des Titels */
    color: #ffffff !important; /* Weiße Schrift für maximalen Kontrast */
    font-weight: bold; /* Optional: Schrift fett machen */
    border-bottom: none !important; /* Optional: Rahmen unter Titel entfernen */
    text-align: center; /* Optional: Titel zentrieren */
}


.txt-magenta {
    color: #87189D !important;
}

.txt-blue {
    color: #004c97 !important;
}

.sidebar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    z-index: 1030;
    background-color: #f8f9fa; /* Standard Hintergrundfarbe für die Sidebar */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Navigation Links Styling */
.sidebar-fixed ul.nav .nav-link {
    color: black; /* Standardfarbe für nicht aktive Links */
}

.sidebar-fixed ul.nav .nav-link.active {
    background-color: #87189D !important; /* Hintergrundfarbe für aktive Links */
    color: white !important; /* Schriftfarbe für aktive Links */
}

/* Optional: Hover-Zustand der aktiven Links */
.sidebar-fixed ul.nav .nav-link.active:hover {
    background-color: #87189D;
    color: white;
}

/* Standard Hover für nicht aktive Links */
.sidebar-fixed ul.nav .nav-link:not(.active):hover {
    color: #87189D; /* Farbe beim Hover */
    text-decoration: none; /* Kein Unterstreichen beim Hover */
}

.content-wrapper {
    margin-left: 300px;
    transition: margin-left 0.3s ease-in-out;
}

/* Standardmäßig Sidebar verstecken bei kleiner Breite */
@media (max-width: 768px) {
    .sidebar-fixed {
        transform: translateX(-100%); /* Sidebar außerhalb des Bildschirms */
    }

    .sidebar-active {
        transform: translateX(0); /* Sidebar einblenden */
    }

    .content-wrapper {
        margin-left: 0; /* Kein Platz für die Sidebar */
    }

    .overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1020;
        transition: opacity 0.3s ease;
    }

    .overlay.hidden {
        display: none;
    }
}

/* Der Button für kleinere Bildschirme */
#sidebarToggle {
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 1050;
    background: #004c97;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 1.2rem;
}

@media (min-width: 769px) {
    #sidebarToggle {
        display: none; /* Kein Toggle-Button bei größeren Bildschirmen */
    }

    .overlay {
        display: none; /* Overlay ist nur in mobiler Ansicht sichtbar */
    }
}





/* Kleinere Button mit violettem Hintergrund (#87189D) und weißer Schrift */
.btn-purple {
    background-color: #87189D !important;
    color: white !important;
    border: 2px solid #87189D !important;
    padding: 5px 15px !important; /* Kleinere Höhe und Breite */
    border-radius: 5px !important;
    font-size: 0.875rem !important; /* Kleinere Schriftgröße */
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.btn-purple:hover {
    background-color: transparent !important; /* Background beim Hover */
    border: 2px solid #87189D !important;
    color: black !important;
}


/* Kleinere Button mit schwarzer Schrift und violettem Outline (#87189D) */
.btn-purple-outline {
    background-color: transparent;
    color: #87189D;
    border: 2px solid #87189D;
    padding: 5px 15px; /* Kleinere Höhe und Breite */
    border-radius: 5px;
    font-size: 0.875rem; /* Kleinere Schriftgröße */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-purple-outline:hover {
    background-color: #87189D; /* Violetter Hintergrund beim Hover */
    color: white; /* Schrift wird weiß */
}

/* Textfarben entsprechend der Bootstrap Hintergrundfarben */

/* Erfolgsfarbe (text-success, wie bg-success) */
.text-success-custom {
    color: #198754 !important; /* Farbwert von bg-success */
}

/* Warnfarbe (text-warning, wie bg-warning) */
.text-warning-custom {
    color: #ffc107 !important; /* Farbwert von bg-warning */
}

/* Infotextfarbe (text-info, wie bg-info) */
.text-info-custom {
    color: #0dcaf0 !important; /* Farbwert von bg-info */
}