/* Root-Variables from BuddyBoss for Bootstrap-Overrides (by ChatGPT 4o 12-2024) */
:root {
    --primary: var(--bb-primary-button-background-regular);
    --primary-hover: var(--bb-primary-button-background-hover);
    --secondary: var(--bb-secondary-button-background-regular);
    --secondary-hover: var(--bb-secondary-button-background-hover);
    --success: var(--bb-success-color);
    --danger: var(--bb-danger-color);
    --warning: var(--bb-warning-color);
    --info: #c0c0c0; /*var(--bb-default-notice-color);*/
    --light: #f8f9fa; /* Standardwert für helle Bereiche */
    --dark: #343a40; /* Standardwert für dunkle Bereiche */
    --body-color: var(--bb-body-color);
    --heading-color: var(--bb-headings-color);
    --link-color: var(--bb-link-color); 
    --link-hover-color: var(--bb-link-hover-color);
    --card-bg: var(--bb-card-bg-color);
    --tooltip-bg: var(--bb-tooltip-background-color);
    --tooltip-text: var(--bb-tooltip-text-color);
    --badge-bg: var(--bb-primary-button-background-regular);
    --badge-text: var(--bb-primary-button-text-regular);
    --border-radius: var(--bb-button-radius, 0.25rem);
    
    /* VDX Colors */
    --vdx-primary-text: var(--bb-primary-button-text-regular);
    --vdx-secondary-text: var(--bb-secondary-button-text-regular);
    
    /* 45 Minuten Colors */
    --m45-tafel:                #045050; /* Tafel */
    
    --m45-mint:                 #e3f2ed; /* Pastellmint */
    --m45-mint-rgb:             227,242,237;
    --m45-mint-rgba:            227,242,237,0;
    
    --m45-neutral:              #808080;
    
    /* Text Muted */
    --m45-text-muted-font-size: .80em;
    --m45-text-muted-color:     var(--bb-alternate-text-color);
   
    /*
    --vdx-primary-background: var(--bb-primary-button-background-regular);
    --vdx-secondary-background: var(--bb-secondary-button-background-regular);
    --vdx-tertiary-background: #045050; 
    --vdx-quarternary-background: #e3f2ed; 
    */
    
    --grayramp-L6: #E2E2E2;
    --grayramp-L5: #E5E5E5;
    --grayramp-L4: #E9E9E9;
    --grayramp-L3: #F0F0F0;
    --grayramp-L2: #F4F4F4;
    --grayramp-L1: #F8F8F8;
    --grayramp-L0: #FAFAFA;
    
    --mintramp-L6: #E3EAE3;
    --mintramp-L5: #E4EBE4;
    --mintramp-L4: #EAF1EA;
    --mintramp-L3: #F0F5F0;
    --mintramp-L2: #F4F9F4;
    --mintramp-L1: #F6FCF6;
    --mintramp-L0: #FBFEFB;
}


.is-ignore {
    color: red!important;
    background:yellow!important;
}


/* Body-Text und Standard-Schrift */
body:not(.vdx-interactives-player) {
    color: var(--body-color);
    background-color: var(--bb-background-color);
    line-height: 1.6;
}

body.vdx-interactives-player {
    color: #E0E0E0;
    background-color: #000;
}


p {
    color: var(--body-color);
    /*margin-bottom: 1rem;*/
}

/* Links */
ul.nav.nav-tabs a {
    color: var(--body-color);
    /*text-decoration: none;*/
}

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

/* Buttons Common  */
.btn-primary, .btn-secondary, .btn-tafel {
    border-radius: var(--border-radius);
}


/* Button Tafel */

a.btn-tafel,
.btn-tafel,
a.btn-tafel:active,
.btn-tafel:active {
    background-color: var(--m45-tafel);
    border-color: var(--m45-tafel);
    color: var(--m45-mint);
}

.btn-tafel:hover,
.btn-tafel:focus {
    background-color: var(--m45-tafel)!important;
    border-color: var(--m45-tafel);
    filter: brightness(1.5);
    color: white;
}


/* Button Primary */

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bb-primary-button-text-regular);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--bb-primary-button-text-hover);
}

/* Button Secondary */

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--bb-secondary-button-text-regular);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--bb-secondary-button-text-hover);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--bb-content-border-color);
    box-shadow: 0 2px 4px var(--bb-box-shadow-color);
    border-radius: var(--border-radius);
    color: var(--body-color);
}

.card-header, .card-footer {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border-radius: var(--border-radius);
}

.tooltip .arrow::before {
    border-top-color: var(--tooltip-bg);
}

/* Badges */
.badge {
    background-color: var(--badge-bg);
    color: var(--badge-text);
    border-radius: var(--border-radius);
    font-weight: normal;
}

.badge-primary {
    background-color: var(--primary);
    color: var(--badge-text);
}

.badge-secondary {
    background-color: var(--secondary);
    color: var(--bb-secondary-button-text-regular);
}

.badge-success {
    background-color: var(--success);
    color: #fff;
}

.badge-danger {
    background-color: var(--danger);
    color: #fff;
}

.badge-warning {
    background-color: var(--warning);
    color: #212529; /* Dunkler Text für Kontrast */
}

.badge-info {
    background-color: var(--tafel-pastell);
    color: #fff;
}

.badge-light {
    background-color: var(--light);
    color: #212529; /* Dunkler Text für Kontrast */
}

.badge-dark {
    background-color: var(--dark);
    color: #fff;
}

/* Optional: Hover-Zustände für Badges */
.badge-primary:hover {
    background-color: var(--primary-hover);
}

.badge-secondary:hover {
    background-color: var(--secondary-hover);
}

.badge-success:hover {
    background-color: darken(var(--success), 10%);
}

.badge-danger:hover {
    background-color: darken(var(--danger), 10%);
}

.badge-warning:hover {
    background-color: darken(var(--warning), 10%);
}

.badge-info:hover {
    background-color: darken(var(--info), 10%);
}

.badge-light:hover {
    background-color: darken(var(--light), 5%);
}

.badge-dark:hover {
    background-color: lighten(var(--dark), 10%);
}

/* Formularelemente */
input.form-control,
textarea.form-control {
    background-color: var(--bb-input-bg-color);
    border-color: var(--bb-input-border-color);
    color: var(--body-color);
    border-radius: var(--border-radius);
}

input.form-control:focus,
textarea.form-control:focus {
    background-color: var(--bb-input-focus-background);
    border-color: var(--bb-input-focus-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bb-input-border-color-rgb), 0.25);
}

/* Alerts */
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
    border-radius: var(--border-radius);
    color: #fff;
}

.alert-success {
    background-color: var(--success);
}

.alert-danger {
    border: none;
    background-color: var(--danger);
}

.alert-warning {
    background-color: var(--warning);
}

.alert-info {
    background-color: var(--info);
}

/* Weitere Standardisierung */
small, .small {
    color: var(--bb-text-muted-color);
}

mark, .mark {
    background-color: var(--bb-warning-color);
    color: #fff;
}

blockquote {
    border-left: 4px solid var(--primary);
    color: var(--body-color);
    padding-left: 1rem;
    border-radius: var(--border-radius);
}

.m45-text-body-color {
    color: var(--body-color)!important;
}

.m45-text-muted-color {
    color: var(--m45-text-muted-color);
}