:root {    
    
    /* Bootstrap-Farben */
    --bs-body-bg: #ffffff;
    --bs-body-color: #323642;
    --bs-link-color: #e974aa;
    --bs-link-hover-color: #f7a6b9;
    
    --bs-card-border-color: #1e1e1e;
    --bs-primary: #818a91;
    --bs-emphasis-color: var(--bs-body-color);
    --sf-header-bg-color: #ffffff;
    --sf-header-color: #323642;
    --sf-header-hover-color: #f7a6b9;

    /* Framework-Farben */
    --sf-card-bg: #ffffff;
    
    --sf-footer-bg-color: #323642;
    --sf-footer-color: #ffffff;
    --sf-footer-link-color: #ffffff;
    --sf-footer-hover-color: #ffffff;
   
    --sf-btn-color: #ffffff;
    --sf-btn-bg: #e974aa;
    --sf-btn-border-color: #e974aa;
    --sf-btn-hover-color: #ffffff;
    --sf-btn-hover-bg: #f7a6b9;
    --sf-btn-hover-border-color: #f7a6b9;
    
    --sf-input-bg: #fff;
    --sf-input-color: var(--sf-card-bg);
    --sf-input-border-color: #d0d0d0;
    
    --sf-nav-tabs-link-active-bg: #ffff;
    --sf-nav-tabs-link-active-border-color: #d0d0d0;
    --sf-nav-tabs-link-color: var(--bs-body-color);
    
}

/**************************************************************************************
 * Für eine einefache Änderung reicht es, die Farben oberhalbt in :root{} anzupassen
 * und nachfollgendes unberührt zu lassen.
 *************************************************************************************/


.header {
    background-color: var(--sf-header-bg-color);
    border-bottom: 1px solid #292929;
}

a {
    color: var(--sf-btn-bg);
}

a:hover {
    color: var(--bs-link-hover-color);
}



/******************************************
 * Navigationsmenü - Desktop
 *****************************************/

.navbar .logo-img {
    height: 100%;
    width: auto;
    padding: 5px 10px;
    max-height: 80px;
}

.navbar-collapse .nav-item a {
    color: var(--sf-header-color);
}

.navbar-collapse .nav-item a:hover {
    color: var(--sf-header-hover-color);
}

.navbar-collapse .nav-item a.active {
    color: var(--sf-btn-bg);
    font-weight:bold;
}

.navbar-collapse .navbar-nav {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    justify-content: center;
}

/******************************************
 * Tabs
 *****************************************/
.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--sf-nav-tabs-link-active-bg);
}

.nav-tabs .nav-link {
    color: var(--sf-nav-tabs-link-color);
}

.nav-tabs .nav-link.active {
    color: var(--sf-nav-tabs-link-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--sf-nav-tabs-link-active-border-color);
    border-bottom:none;
}

.tab-content {
    background-color: var(--sf-nav-tabs-link-active-bg);
    padding: 20px;
    border:1px solid var(--sf-nav-tabs-link-active-border-color);
    border-top:none;
    margin-top: -1px;
}


/******************************************
 * Footer
 *****************************************/

footer {
    background-color: var(--sf-footer-bg-color);
    color: var(--sf-footer-color);
}

footer a {
    color: var(--sf-footer-link-color);
    text-decoration: none;
}

footer a:hover {
    color: var(--sf-footer-hover-color) !important;
    text-decoration: underline;
}

footer .hover-link:hover,
footer .hover-icon:hover {
    color: var(--bs-link-color) !important;
}


/******************************************
 * Footer
 *****************************************/

.card {
    background-color: var(--sf-card-bg) !important;
    border: 1px solid var(--bs-card-border-color) !important;
}

.card .text-muted {
    color: #777 !important;
}

.card .fw-light {
    color: #666;
}

/******************************************
 * Buttons
 *****************************************/

.btn-primary {
    --bs-btn-color: var(--sf-btn-color);
    --bs-btn-bg: var(--sf-btn-bg);
    --bs-btn-border-color: var(--sf-btn-border-color);
    --bs-btn-hover-color: var(--sf-btn-hover-color);
    --bs-btn-hover-bg: var(--sf-btn-hover-bg);
    --bs-btn-hover-border-color: var(--sf-btn-hover-border-color);

    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.btn-primary:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-primary:disabled {
    background-color: var(--bs-btn-disabled-bg);
    color: var(--bs-btn-disabled-color);
    border-color: var(--bs-btn-disabled-border-color);
}


.btn-outline-light {
    border: 1px solid var(--bs-link-color);
    color: var(--bs-link-color);
}

.btn-outline-light:hover {
    background-color: var(--bs-link-color);
    color: #ffffff;
}



/******************************************
 * DataTables
 *****************************************/

table.dataTable {
    background-color: var(--sf-input-bg);
    color: var(--bs-body-color);
    font-size: 0.9rem;
}

table.dataTable tbody td {
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-border-color);
}

table.dataTable thead th {
    font-size: 0.9rem !important;
    padding: 0.5rem;
}

.pagination {
    --bs-pagination-bg: var(--bs-primary);
    --bs-pagination-disabled-bg: var(--bs-body-bg);
    --bs-pagination-active-color: var(--sf-btn-hover-color);
    --bs-pagination-active-bg: var(--sf-btn-hover-bg);
    --bs-pagination-active-border-color:  var(--sf-btn-hover-bg);
    --bs-pagination-hover-color: var(--bs-pagination-active-color);
    --bs-pagination-hover-bg: var(--bs-pagination-active-bg);
    --bs-pagination-hover-border-color: var(--bs-pagination-active-border-color);
    --bs-pagination-color: var(--bs-pagination-active-color);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-focus-bg: var(--bs-pagination-disabled-bg);
    --bs-pagination-focus-box-shadow: none;
}

.pagination .disabled{
    --bs-pagination-disabled-bg: var(--bs-body-bg);
}


/******************************************
 * Formular- und input-Felder
 *****************************************/


/*
input[type="checkbox"] + label,
.form-check-label {
    color: #fff;
}
*/

.form-control,
.form-control:disabled {
    background-color: var(--sf-input-bg);
    color: var(--sf-input-color);
    border: 1px solid var(--sf-input-border-color);
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgb(255, 153, 153, .25);
    color: var(--sf-input-color);
    background-color: var(--sf-input-bg);
}

.form-control::placeholder {
    color: #bbb;
}

.input-group button {
    border-color: var(--bs-border-color);
}



.highlight-box {
    background-color: #effcf1;
    border-left: 4px solid var(--bs-primary);
}


.text-muted {
    color: #666 !important;
}


.breadcrumb a {
    color: var(--bs-link-color) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #bbb;
}

.breadcrumb-item a {
    color: var(--bs-link-color);
}

.breadcrumb-item.active {
    color: #999;
}


@media (max-width: 767.98px) {
    
    .navbar .sfd-container {
        margin: 0;
    }
    
    .navbar .logo-img {
        padding: 3px 10px;
        max-height: 50px;
    }
    
    .navbar .offcanvas .nav-item,
    .navbar .offcanvas .nav-link {
        color: var(--bs-body-color);
    }
    
    .navbar .offcanvas .nav-link:hover {
        color: var(--sf-header-hover-color);
    }
    
}