/* Grundstyles für Body */
body {
    background-color: #f8f9fa;
    color: #212529;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
}

a:hover,
a:focus {
    color: #ffaa00;
}

/* Dark Mode – Farben kommen immer aus CSS-Variablen des gewählten Themes */
body.dark-mode {
    background-color: var(--site-body-bg, #121212);
    color: var(--bs-body-color, #e0e0e0);
}

body.dark-mode a {
    color: var(--site-accent, #66aaff);
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #ffaa00;
}

/* Zoom-Handling */
html {
    transition: transform 0.2s ease;
}

body.zoomed {
    transform-origin: top center;
}

/* Flatpickr Dark Mode */
body.dark-mode .flatpickr-calendar {
    background: #1a1a1a;
    color: #ccc;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

body.dark-mode .flatpickr-day {
    color: #ccc;
}

body.dark-mode .flatpickr-day:hover,
body.dark-mode .flatpickr-day.selected,
body.dark-mode .flatpickr-day.today {
    background: #333;
    color: #fff;
}

/* Schriftgröße Seite Switch */
body.font-normal {
    --community-font-scale: 1;
    font-size: var(--bs-body-font-size, 1rem);
}

body.font-large {
    --community-font-scale: 1.12;
    font-size: var(--bs-body-font-size, 1.12rem);
}

body.font-xlarge {
    --community-font-scale: 1.24;
    font-size: var(--bs-body-font-size, 1.24rem);
}


/* Simuliere kleine Auflösung, wenn mobile-mode aktiv */
body.mobile-mode .row {
    flex-direction: column !important;
}

body.mobile-mode .col-md-3,
body.mobile-mode .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Optional weitere Styles */
body.mobile-mode .sidebar {
    display: none;
    /* z. B. Seitenleiste verstecken */
}



.navbar-custom {
    background-color: #dcdcdc;
    justify-content: center;
    padding-top: 20px;
}

.tab-container {
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    padding: 0 10px;
}

.tab {
    position: relative;
    padding: 10px 18px 6px 18px;
    /*font-weight: bold;*/
    text-decoration: none;
    margin-right: -10px;
    min-width: 90px;
    text-align: center;
    transition: background-color 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
    border: 1px solid #adb5bd;
    border-bottom: transparent;
    /* Bootstrap gray-500 */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    z-index: 1;
    flex-shrink: 0;
    font-size: 14px;
}

.tab:hover {
    filter: brightness(1.05);
}

.tab-startseite {
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.tab-jappy {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.tab-suche {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.tab-forum {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #faa732;
    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    border-color: #f89406 #f89406 #ad6704;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.tab-settings {
    background-color: #adb5bd;
    color: #ffffff;
    z-index: 1;
}

.tab-logout {
    background-color: #dc3545;
    color: #ffffff;
    z-index: 0;
}

.border-bottom-r {
    border-bottom: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.border-right-c {
    border-right: 0px !important;
}

.border-top-c {
    border-top: 0px !important;
}


/* Cards: Theme-Card-Farbe, keine Hardcoded-Werte */
body.dark-mode .card {
    background-color: var(--site-card-bg, #1e1e1e);
    color: var(--bs-body-color, #f1f1f1);
    border-color: rgba(255,255,255,.1);
}

body.dark-mode .card-header {
    background-color: color-mix(in srgb, var(--site-card-bg, #1e1e1e) 60%, #000 40%);
    border-color: rgba(255,255,255,.08);
}

/* Formulare & UI-Elemente */
body.dark-mode .tab-container,
body.dark-mode .input-group-text,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--site-card-bg, #1e1e1e);
    color: var(--bs-body-color, #f1f1f1);
    border-color: rgba(255,255,255,.15);
}

body.dark-mode .btn-outline-dark {
    color: #f1f1f1;
    border-color: #f1f1f1;
}

body.dark-mode .tab {
    background-color: var(--site-card-bg, #2c2c2c);
    border-color: rgba(255,255,255,.12);
    color: var(--bs-body-color, #f1f1f1);
}

/* Selects: Feld und native Optionsliste an das aktive Theme koppeln */
:root {
    --community-select-bg: rgba(var(--community-card-bg-rgb, 255,255,255), .96);
    --community-select-menu-bg: rgba(var(--community-card-bg-rgb, 255,255,255), 1);
    --community-select-hover-bg: rgba(var(--community-card-header-bg-rgb, 248,249,250), 1);
    --community-select-text: var(--community-card-text, var(--bs-body-color, #212529));
    --community-select-muted: var(--bs-secondary-color, rgba(33,37,41,.70));
    --community-select-border: var(--community-card-border-color, var(--bs-border-color, #dee2e6));
}

[data-bs-theme="light"] select,
[data-bs-theme="light"] .form-select {
    color-scheme: light;
}

[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-select {
    color-scheme: dark;
}

select,
.form-select {
    background-color: var(--community-select-bg);
    color: var(--community-select-text);
    border-color: var(--community-select-border);
}

select:focus,
.form-select:focus {
    background-color: var(--community-select-bg);
    color: var(--community-select-text);
    border-color: var(--site-accent, var(--bs-primary));
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), .18);
}

select:disabled,
.form-select:disabled {
    background-color: color-mix(in srgb, var(--community-select-bg) 76%, var(--bs-body-bg, #fff) 24%);
    color: var(--community-select-muted);
    border-color: var(--community-select-border);
}

select option,
select optgroup,
.form-select option,
.form-select optgroup {
    background-color: var(--community-select-menu-bg);
    color: var(--community-select-text);
}

select option:hover,
.form-select option:hover {
    background-color: var(--community-select-hover-bg);
    color: var(--community-select-text);
}

select option:checked,
.form-select option:checked {
    background-color: var(--site-accent, var(--bs-primary));
    color: #fff;
}

select option:disabled,
.form-select option:disabled {
    background-color: var(--community-select-menu-bg);
    color: var(--community-select-muted);
}

span.flatpickr-weekday,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #6b6b6b !important;
}


/* Register.php Funktion für die Inputs / Animation */
.form-text-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    font-size: 0.8rem;
    /* etwas kleiner */
}

.form-text-info.visible {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.25rem;
}

.badge.bg-success-light {
    background-color: #D0F099 !important;
    /* helles Grün */
    color: #000000 !important;
    /* dunkler Text für guten Kontrast */
}



/* Bootstrap 2 Button */
.btn-bs2-primary.active,
.btn-bs2-warning.active,
.btn-bs2-danger.active,
.btn-bs2-success.active,
.btn-bs2-info.active,
.btn-bs2-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-bs2-primary {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-primary:hover,
.btn-bs2-primary:focus,
.btn-bs2-primary:active,
.btn-bs2-primary.active,
.btn-bs2-primary.disabled,
.btn-bs2-primary[disabled] {
    color: #ffffff;
    background-color: #0044cc;
}

.btn-bs2-primary:active,
.btn-bs2-primary.active {
    background-color: #003399;
}

.btn-bs2-warning {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #faa732;
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-warning:hover,
.btn-bs2-warning:focus,
.btn-bs2-warning:active,
.btn-bs2-warning.active,
.btn-bs2-warning.disabled,
.btn-bs2-warning[disabled] {
    color: #ffffff;
    background-color: #f89406;
}

.btn-bs2-warning:active,
.btn-bs2-warning.active {
    background-color: #c67605;
}

.btn-bs2-danger {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #da4f49;
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-danger:hover,
.btn-bs2-danger:focus,
.btn-bs2-danger:active,
.btn-bs2-danger.active,
.btn-bs2-danger.disabled,
.btn-bs2-danger[disabled] {
    color: #ffffff;
    background-color: #bd362f;
}

.btn-bs2-danger:active,
.btn-bs2-danger.active {
    background-color: #942a25;
}

.btn-bs2-success {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-success:hover,
.btn-bs2-success:focus,
.btn-bs2-success:active,
.btn-bs2-success.active,
.btn-bs2-success.disabled,
.btn-bs2-success[disabled] {
    color: #ffffff;
    background-color: #51a351;
}

.btn-bs2-success:active,
.btn-bs2-success.active {
    background-color: #408140;
}

.btn-bs2-info {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-info:hover,
.btn-bs2-info:focus,
.btn-bs2-info:active,
.btn-bs2-info.active,
.btn-bs2-info.disabled,
.btn-bs2-info[disabled] {
    color: #ffffff;
    background-color: #2f96b4;
}

.btn-bs2-info:active,
.btn-bs2-info.active {
    background-color: #24748c;
}

.btn-bs2-inverse {
    color: #ffffff;
    background-color: #363636;
    background-image: linear-gradient(to bottom, #444, #222);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.25);
}

.btn-bs2-inverse:hover,
.btn-bs2-inverse:focus,
.btn-bs2-inverse:active,
.btn-bs2-inverse.active,
.btn-bs2-inverse.disabled,
.btn-bs2-inverse[disabled] {
    background-color: #222;
}

#search-results {
    display: none;
    /* Verstecke Suchergebnisse standardmäßig */
}


/* Profil Buttons */
.btn-lighter-primary {
    --bs-btn-bg: #cfe2ff;
    --bs-btn-color: #084298;
    --bs-btn-border-color: #9ec5fe;
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-lighter-primary:hover {
    --bs-btn-bg: #9ec5fe;
    /* --bs-btn-color: #fff; */
    --bs-btn-border-color: #7ab1ff;
    background-color: var(--bs-btn-bg) !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.btn-lighter-success {
    --bs-btn-bg: #d1e7dd;
    --bs-btn-color: #0f5132;
    --bs-btn-border-color: #badbcc;
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-lighter-success:hover {
    --bs-btn-bg: #badbcc;
    /* --bs-btn-color: #fff; */
    --bs-btn-border-color: #82c682;
    background-color: var(--bs-btn-bg) !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.btn-lighter-danger {
    --bs-btn-bg: #f8d7da;
    --bs-btn-color: #842029;
    --bs-btn-border-color: #f5c2c7;
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-lighter-danger:hover {
    --bs-btn-bg: #f5c2c7;
    /* --bs-btn-color: #fff; */
    --bs-btn-border-color: #f08090;
    background-color: var(--bs-btn-bg) !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.btn-lighter-secondary {
    --bs-btn-bg: #e2e3e5;
    --bs-btn-color: #41464b;
    --bs-btn-border-color: #d3d6d8;
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-lighter-secondary:hover {
    --bs-btn-bg: #d3d6d8;
    --bs-btn-color: #212529;
    --bs-btn-border-color: #b8bbbe;
    background-color: var(--bs-btn-bg) !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* Dark mode Anpassung */
body.dark-mode .btn-lighter-primary {
    background-color: #0b5ed7 !important;
    /* Bootstrap dark primary */
    color: #fff !important;
    border-color: #0a53be !important;
}

body.dark-mode .btn-lighter-primary:hover {
    background-color: #0a53be !important;
    color: #fff !important;
    border-color: #084298 !important;
}

body.dark-mode .btn-lighter-success {
    background-color: #146c43 !important;
    /* Bootstrap dark success */
    color: #fff !important;
    border-color: #0f5132 !important;
}

body.dark-mode .btn-lighter-success:hover {
    background-color: #0f5132 !important;
    color: #fff !important;
    border-color: #0a3622 !important;
}

body.dark-mode .btn-lighter-danger {
    background-color: #b02a37 !important;
    /* Bootstrap dark danger */
    color: #fff !important;
    border-color: #842029 !important;
}

body.dark-mode .btn-lighter-danger:hover {
    background-color: #842029 !important;
    color: #fff !important;
    border-color: #610b0e !important;
}

body.dark-mode .btn-lighter-secondary {
    background-color: #495057 !important;
    /* Bootstrap dark secondary */
    color: #fff !important;
    border-color: #343a40 !important;
}

body.dark-mode .btn-lighter-secondary:hover {
    background-color: #343a40 !important;
    color: #fff !important;
    border-color: #212529 !important;
}

/* Font-Size */
.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-30 {
    font-size: 30px;
}

#mainNavbar {
    background-color: var(--primary-backcolor);
}

@media (min-width: 768px) {

    #main_nav,
    #main_nav .container {
        height: 80px;
    }
}

#mainNavbar #main_nav_full .row {
    width: 100%;
    margin-top: -10px;
}

#mainNavbar #main_nav_full .row .col-md-4:nth-child(odd) {
    padding-top: 20px;
}

#mainNavbar #main_nav_full .nav-link {
    padding-left: 2.5rem;
}

#main_nav_full div {
    max-height: 80px;
}

#mainNavbar *:not(.fas) {
    font-family: var(--dynfont);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
}

#mainNavbar .navbar-brand {
    text-transform: uppercase;
    font-weight: bold;
}

#mainNavbar .nav-item .nav-link:hover,
#mainNavbar .nav-item .nav-link:focus {
    text-shadow: 0px 0px 13px rgba(255, 255, 255, 1);
}

#mainNavbar .nav-item.active .nav-link {
    color: var(--primary-color);
}

#mainNavbar .nav-item.active .nav-link:hover,
#mainNavbar .nav-item.active .nav-link:focus,
.link-shadowed {
    text-shadow: 0px 0px 13px var(--primary-color);
}

#mainNavbar .nav-link-support * {
    color: var(--primary-color) !important;
}

#mainNavbar .nav-link-support:hover,
#mainNavbar .nav-link-support:focus {
    text-shadow: 0px 0px 13px var(--primary-color) !important;
}

#mainNavbar .account-nav-item {
    padding-left: 5px;
    vertical-align: middle;
    padding-right: 0px;
    margin-right: 0px;
}

#mainNavbar .account-nav-item a {
    padding-top: 1px;
    padding-bottom: 1px;
    color: var(--primary-backcolor) !important;
    font-size: 18px !important;
    text-transform: none !important;
}

#mainNavbar .account-nav-item img {
    margin-top: -2px;
    position: relative;
}

#main_nav_spacer {
    height: 1px;
    width: 100%;
    padding-bottom: 50px;
}

/* Community Gift / Bootstrap-next Farbmuster */
:root {
    --bs-gift: #d63384;
    --bs-gift-rgb: 214, 51, 132;
    --bs-berry: #b02a70;
    --bs-rose: #f06595;
    --bs-mint: #20c997;
    --bs-violet: #6f42c1;
}

.btn-gift,
.btn-bs2-gift {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-gift);
    --bs-btn-border-color: var(--bs-gift);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b82b72;
    --bs-btn-hover-border-color: #b82b72;
    --bs-btn-focus-shadow-rgb: var(--bs-gift-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a82466;
    --bs-btn-active-border-color: #a82466;
    background: linear-gradient(135deg, #d63384, #fd7e14);
    border: 0;
    box-shadow: 0 .35rem .9rem rgba(var(--bs-gift-rgb), .22);
}

.btn-gift:hover,
.btn-bs2-gift:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-lighter-gift {
    color: #b02a70 !important;
    background: rgba(var(--bs-gift-rgb), .12) !important;
    border: 1px solid rgba(var(--bs-gift-rgb), .20) !important;
}

.profile-meta-box {
    line-height: 1.35;
}

.profile-visitors-box .profile-visitor-line {
    line-height: 1.2;
}

.gift-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: .25rem;
    align-items: center;
}

.gift-mini {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    min-height: 30px;
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    background: var(--bs-body-bg);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.gift-mini:hover {
    transform: translateY(-1px);
    box-shadow: 0 .25rem .65rem rgba(0, 0, 0, .12);
    border-color: rgba(var(--bs-gift-rgb), .45);
}

.gift-mini img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

/* Admin Bug-Liste */
.bug-priority-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    display: inline-block;
}

.bug-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.bug-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .08);
}

.member-search-card {
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.member-search-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.bug-description {
    white-space: pre-wrap;
}

.bug-comment-box {
    max-height: 260px;
    overflow-y: auto;
}

.bug-meta-badge {
    font-size: .72rem;
}

/* =====================================================================
   Bootstrap 6 Button-Varianten (Vorab-Implementierung)
   .btn-{color}          – Ausgefüllt, solid
   .btn-outline-{color}  – Rahmen, transparent
   .btn-subtle-{color}   – Dezent, dunkler Hintergrund
   .btn-text-{color}     – Nur Text, kein Rahmen/Hintergrund
   Farben: blue · indigo · purple · pink · red · orange
           yellow · green · teal · cyan · gray
   ===================================================================== */

/* --- Farbpalette (Bootstrap 6 Design-Tokens) ------------------------- */
:root {
    /* blue */
    --b6-blue: #0d6efd;
    --b6-blue-dark: #0b5ed7;
    --b6-blue-darker: #0a53be;
    --b6-blue-subtle: #031633;
    --b6-blue-rgb: 13, 110, 253;
    /* indigo */
    --b6-indigo: #6610f2;
    --b6-indigo-dark: #520dc2;
    --b6-indigo-darker: #4709ad;
    --b6-indigo-subtle: #160533;
    --b6-indigo-rgb: 102, 16, 242;
    /* purple */
    --b6-purple: #6f42c1;
    --b6-purple-dark: #59359a;
    --b6-purple-darker: #4e2f89;
    --b6-purple-subtle: #1a0c35;
    --b6-purple-rgb: 111, 66, 193;
    /* pink */
    --b6-pink: #d63384;
    --b6-pink-dark: #b02a70;
    --b6-pink-darker: #9a2462;
    --b6-pink-subtle: #340818;
    --b6-pink-rgb: 214, 51, 132;
    /* red */
    --b6-red: #dc3545;
    --b6-red-dark: #bb2d3b;
    --b6-red-darker: #a71d2a;
    --b6-red-subtle: #2c0b0e;
    --b6-red-rgb: 220, 53, 69;
    /* orange */
    --b6-orange: #fd7e14;
    --b6-orange-dark: #e06c00;
    --b6-orange-darker: #c96000;
    --b6-orange-subtle: #330e02;
    --b6-orange-rgb: 253, 126, 20;
    /* yellow */
    --b6-yellow: #ffc107;
    --b6-yellow-dark: #e0aa06;
    --b6-yellow-darker: #c79400;
    --b6-yellow-subtle: #332701;
    --b6-yellow-rgb: 255, 193, 7;
    /* green */
    --b6-green: #198754;
    --b6-green-dark: #146c43;
    --b6-green-darker: #0f5132;
    --b6-green-subtle: #051b11;
    --b6-green-rgb: 25, 135, 84;
    /* teal */
    --b6-teal: #20c997;
    --b6-teal-dark: #1aa97d;
    --b6-teal-darker: #157a5a;
    --b6-teal-subtle: #031b17;
    --b6-teal-rgb: 32, 201, 151;
    /* cyan */
    --b6-cyan: #0dcaf0;
    --b6-cyan-dark: #0aaaca;
    --b6-cyan-darker: #088faa;
    --b6-cyan-subtle: #032830;
    --b6-cyan-rgb: 13, 202, 240;
    /* gray */
    --b6-gray: #6c757d;
    --b6-gray-dark: #5c636a;
    --b6-gray-darker: #51585e;
    --b6-gray-subtle: #1a1d20;
    --b6-gray-rgb: 108, 117, 125;
}

/* --- 1. SOLID: .btn-{color} ------------------------------------------ */
.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-blue);
    --bs-btn-border-color: var(--b6-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-blue-dark);
    --bs-btn-hover-border-color: var(--b6-blue-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-blue-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-blue-darker);
    --bs-btn-active-border-color: var(--b6-blue-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-blue);
    --bs-btn-disabled-border-color: var(--b6-blue);
}

.btn-indigo {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-indigo);
    --bs-btn-border-color: var(--b6-indigo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-indigo-dark);
    --bs-btn-hover-border-color: var(--b6-indigo-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-indigo-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-indigo-darker);
    --bs-btn-active-border-color: var(--b6-indigo-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-indigo);
    --bs-btn-disabled-border-color: var(--b6-indigo);
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-purple);
    --bs-btn-border-color: var(--b6-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-purple-dark);
    --bs-btn-hover-border-color: var(--b6-purple-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-purple-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-purple-darker);
    --bs-btn-active-border-color: var(--b6-purple-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-purple);
    --bs-btn-disabled-border-color: var(--b6-purple);
}

.btn-pink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-pink);
    --bs-btn-border-color: var(--b6-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-pink-dark);
    --bs-btn-hover-border-color: var(--b6-pink-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-pink-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-pink-darker);
    --bs-btn-active-border-color: var(--b6-pink-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-pink);
    --bs-btn-disabled-border-color: var(--b6-pink);
}

.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-red);
    --bs-btn-border-color: var(--b6-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-red-dark);
    --bs-btn-hover-border-color: var(--b6-red-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-red-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-red-darker);
    --bs-btn-active-border-color: var(--b6-red-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-red);
    --bs-btn-disabled-border-color: var(--b6-red);
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-orange);
    --bs-btn-border-color: var(--b6-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-orange-dark);
    --bs-btn-hover-border-color: var(--b6-orange-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-orange-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-orange-darker);
    --bs-btn-active-border-color: var(--b6-orange-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-orange);
    --bs-btn-disabled-border-color: var(--b6-orange);
}

.btn-yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--b6-yellow);
    --bs-btn-border-color: var(--b6-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--b6-yellow-dark);
    --bs-btn-hover-border-color: var(--b6-yellow-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-yellow-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--b6-yellow-darker);
    --bs-btn-active-border-color: var(--b6-yellow-darker);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--b6-yellow);
    --bs-btn-disabled-border-color: var(--b6-yellow);
}

.btn-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-green);
    --bs-btn-border-color: var(--b6-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-green-dark);
    --bs-btn-hover-border-color: var(--b6-green-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-green-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-green-darker);
    --bs-btn-active-border-color: var(--b6-green-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-green);
    --bs-btn-disabled-border-color: var(--b6-green);
}

.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-teal);
    --bs-btn-border-color: var(--b6-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-teal-dark);
    --bs-btn-hover-border-color: var(--b6-teal-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-teal-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-teal-darker);
    --bs-btn-active-border-color: var(--b6-teal-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-teal);
    --bs-btn-disabled-border-color: var(--b6-teal);
}

.btn-cyan {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--b6-cyan);
    --bs-btn-border-color: var(--b6-cyan);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--b6-cyan-dark);
    --bs-btn-hover-border-color: var(--b6-cyan-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-cyan-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--b6-cyan-darker);
    --bs-btn-active-border-color: var(--b6-cyan-darker);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--b6-cyan);
    --bs-btn-disabled-border-color: var(--b6-cyan);
}

.btn-gray {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--b6-gray);
    --bs-btn-border-color: var(--b6-gray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-gray-dark);
    --bs-btn-hover-border-color: var(--b6-gray-dark);
    --bs-btn-focus-shadow-rgb: var(--b6-gray-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-gray-darker);
    --bs-btn-active-border-color: var(--b6-gray-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--b6-gray);
    --bs-btn-disabled-border-color: var(--b6-gray);
}

/* --- 2. OUTLINE: .btn-outline-{color} -------------------------------- */
.btn-outline-blue {
    --bs-btn-color: var(--b6-blue);
    --bs-btn-border-color: var(--b6-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-blue);
    --bs-btn-hover-border-color: var(--b6-blue);
    --bs-btn-focus-shadow-rgb: var(--b6-blue-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-blue-dark);
    --bs-btn-active-border-color: var(--b6-blue-dark);
    --bs-btn-disabled-color: var(--b6-blue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-blue);
}

.btn-outline-indigo {
    --bs-btn-color: var(--b6-indigo);
    --bs-btn-border-color: var(--b6-indigo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-indigo);
    --bs-btn-hover-border-color: var(--b6-indigo);
    --bs-btn-focus-shadow-rgb: var(--b6-indigo-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-indigo-dark);
    --bs-btn-active-border-color: var(--b6-indigo-dark);
    --bs-btn-disabled-color: var(--b6-indigo);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-indigo);
}

.btn-outline-purple {
    --bs-btn-color: var(--b6-purple);
    --bs-btn-border-color: var(--b6-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-purple);
    --bs-btn-hover-border-color: var(--b6-purple);
    --bs-btn-focus-shadow-rgb: var(--b6-purple-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-purple-dark);
    --bs-btn-active-border-color: var(--b6-purple-dark);
    --bs-btn-disabled-color: var(--b6-purple);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-purple);
}

.btn-outline-pink {
    --bs-btn-color: var(--b6-pink);
    --bs-btn-border-color: var(--b6-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-pink);
    --bs-btn-hover-border-color: var(--b6-pink);
    --bs-btn-focus-shadow-rgb: var(--b6-pink-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-pink-dark);
    --bs-btn-active-border-color: var(--b6-pink-dark);
    --bs-btn-disabled-color: var(--b6-pink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-pink);
}

.btn-outline-red {
    --bs-btn-color: var(--b6-red);
    --bs-btn-border-color: var(--b6-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-red);
    --bs-btn-hover-border-color: var(--b6-red);
    --bs-btn-focus-shadow-rgb: var(--b6-red-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-red-dark);
    --bs-btn-active-border-color: var(--b6-red-dark);
    --bs-btn-disabled-color: var(--b6-red);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-red);
}

.btn-outline-orange {
    --bs-btn-color: var(--b6-orange);
    --bs-btn-border-color: var(--b6-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-orange);
    --bs-btn-hover-border-color: var(--b6-orange);
    --bs-btn-focus-shadow-rgb: var(--b6-orange-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-orange-dark);
    --bs-btn-active-border-color: var(--b6-orange-dark);
    --bs-btn-disabled-color: var(--b6-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-orange);
}

.btn-outline-yellow {
    --bs-btn-color: var(--b6-yellow);
    --bs-btn-border-color: var(--b6-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--b6-yellow);
    --bs-btn-hover-border-color: var(--b6-yellow);
    --bs-btn-focus-shadow-rgb: var(--b6-yellow-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--b6-yellow-dark);
    --bs-btn-active-border-color: var(--b6-yellow-dark);
    --bs-btn-disabled-color: var(--b6-yellow);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-yellow);
}

.btn-outline-green {
    --bs-btn-color: var(--b6-green);
    --bs-btn-border-color: var(--b6-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-green);
    --bs-btn-hover-border-color: var(--b6-green);
    --bs-btn-focus-shadow-rgb: var(--b6-green-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-green-dark);
    --bs-btn-active-border-color: var(--b6-green-dark);
    --bs-btn-disabled-color: var(--b6-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-green);
}

.btn-outline-teal {
    --bs-btn-color: var(--b6-teal);
    --bs-btn-border-color: var(--b6-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-teal);
    --bs-btn-hover-border-color: var(--b6-teal);
    --bs-btn-focus-shadow-rgb: var(--b6-teal-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-teal-dark);
    --bs-btn-active-border-color: var(--b6-teal-dark);
    --bs-btn-disabled-color: var(--b6-teal);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-teal);
}

.btn-outline-cyan {
    --bs-btn-color: var(--b6-cyan);
    --bs-btn-border-color: var(--b6-cyan);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--b6-cyan);
    --bs-btn-hover-border-color: var(--b6-cyan);
    --bs-btn-focus-shadow-rgb: var(--b6-cyan-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--b6-cyan-dark);
    --bs-btn-active-border-color: var(--b6-cyan-dark);
    --bs-btn-disabled-color: var(--b6-cyan);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-cyan);
}

.btn-outline-gray {
    --bs-btn-color: var(--b6-gray);
    --bs-btn-border-color: var(--b6-gray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--b6-gray);
    --bs-btn-hover-border-color: var(--b6-gray);
    --bs-btn-focus-shadow-rgb: var(--b6-gray-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--b6-gray-dark);
    --bs-btn-active-border-color: var(--b6-gray-dark);
    --bs-btn-disabled-color: var(--b6-gray);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--b6-gray);
}

/* --- 3. SUBTLE: .btn-subtle-{color} ---------------------------------- */
/* Dunkler Hintergrund mit farbiger, heller Schrift – für Dark-UIs       */
.btn-subtle-blue {
    --bs-btn-color: #6ea8fe;
    --bs-btn-bg: var(--b6-blue-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #9ec5fe;
    --bs-btn-hover-bg: #052c65;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-blue-rgb);
    --bs-btn-active-color: #9ec5fe;
    --bs-btn-active-bg: #073a7a;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6ea8fe;
    --bs-btn-disabled-bg: var(--b6-blue-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-indigo {
    --bs-btn-color: #a370f7;
    --bs-btn-bg: var(--b6-indigo-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #c29ffa;
    --bs-btn-hover-bg: #2d0b69;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-indigo-rgb);
    --bs-btn-active-color: #c29ffa;
    --bs-btn-active-bg: #3a0e82;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #a370f7;
    --bs-btn-disabled-bg: var(--b6-indigo-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-purple {
    --bs-btn-color: #b397f7;
    --bs-btn-bg: var(--b6-purple-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #c9b3f9;
    --bs-btn-hover-bg: #36196b;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-purple-rgb);
    --bs-btn-active-color: #c9b3f9;
    --bs-btn-active-bg: #442184;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #b397f7;
    --bs-btn-disabled-bg: var(--b6-purple-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-pink {
    --bs-btn-color: #f27bba;
    --bs-btn-bg: var(--b6-pink-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #f6a4ce;
    --bs-btn-hover-bg: #6e1035;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-pink-rgb);
    --bs-btn-active-color: #f6a4ce;
    --bs-btn-active-bg: #8c1544;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #f27bba;
    --bs-btn-disabled-bg: var(--b6-pink-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-red {
    --bs-btn-color: #ea868f;
    --bs-btn-bg: var(--b6-red-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #f1adb3;
    --bs-btn-hover-bg: #5c171d;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-red-rgb);
    --bs-btn-active-color: #f1adb3;
    --bs-btn-active-bg: #752027;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #ea868f;
    --bs-btn-disabled-bg: var(--b6-red-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-orange {
    --bs-btn-color: #feb272;
    --bs-btn-bg: var(--b6-orange-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fec89a;
    --bs-btn-hover-bg: #6b1d04;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-orange-rgb);
    --bs-btn-active-color: #fec89a;
    --bs-btn-active-bg: #872506;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #feb272;
    --bs-btn-disabled-bg: var(--b6-orange-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-yellow {
    --bs-btn-color: #ffda6a;
    --bs-btn-bg: var(--b6-yellow-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ffe699;
    --bs-btn-hover-bg: #6b5002;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-yellow-rgb);
    --bs-btn-active-color: #ffe699;
    --bs-btn-active-bg: #856403;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #ffda6a;
    --bs-btn-disabled-bg: var(--b6-yellow-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-green {
    --bs-btn-color: #75b798;
    --bs-btn-bg: var(--b6-green-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #a3cfbb;
    --bs-btn-hover-bg: #0b3828;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-green-rgb);
    --bs-btn-active-color: #a3cfbb;
    --bs-btn-active-bg: #0f4d37;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #75b798;
    --bs-btn-disabled-bg: var(--b6-green-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-teal {
    --bs-btn-color: #79dfc1;
    --bs-btn-bg: var(--b6-teal-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #a8ead4;
    --bs-btn-hover-bg: #073830;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-teal-rgb);
    --bs-btn-active-color: #a8ead4;
    --bs-btn-active-bg: #0a4a3f;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #79dfc1;
    --bs-btn-disabled-bg: var(--b6-teal-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-cyan {
    --bs-btn-color: #6edff6;
    --bs-btn-bg: var(--b6-cyan-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #9eeaf9;
    --bs-btn-hover-bg: #065466;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-cyan-rgb);
    --bs-btn-active-color: #9eeaf9;
    --bs-btn-active-bg: #096b82;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6edff6;
    --bs-btn-disabled-bg: var(--b6-cyan-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-subtle-gray {
    --bs-btn-color: #adb5bd;
    --bs-btn-bg: var(--b6-gray-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ced4da;
    --bs-btn-hover-bg: #363d44;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-gray-rgb);
    --bs-btn-active-color: #ced4da;
    --bs-btn-active-bg: #454d55;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-bg: var(--b6-gray-subtle);
    --bs-btn-disabled-border-color: transparent;
}

/* --- 4. TEXT: .btn-text-{color} -------------------------------------- */
/* Kein Hintergrund, kein Rahmen – nur farbige Schrift + Underline Hover */
.btn-text-blue {
    --bs-btn-color: var(--b6-blue);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-blue-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-blue-rgb);
    --bs-btn-active-color: var(--b6-blue-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-blue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-indigo {
    --bs-btn-color: var(--b6-indigo);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-indigo-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-indigo-rgb);
    --bs-btn-active-color: var(--b6-indigo-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-indigo);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-purple {
    --bs-btn-color: var(--b6-purple);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-purple-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-purple-rgb);
    --bs-btn-active-color: var(--b6-purple-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-purple);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-pink {
    --bs-btn-color: var(--b6-pink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-pink-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-pink-rgb);
    --bs-btn-active-color: var(--b6-pink-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-pink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-red {
    --bs-btn-color: var(--b6-red);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-red-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-red-rgb);
    --bs-btn-active-color: var(--b6-red-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-red);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-orange {
    --bs-btn-color: var(--b6-orange);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-orange-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-orange-rgb);
    --bs-btn-active-color: var(--b6-orange-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-yellow {
    --bs-btn-color: var(--b6-yellow);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-yellow-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-yellow-rgb);
    --bs-btn-active-color: var(--b6-yellow-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-yellow);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-green {
    --bs-btn-color: var(--b6-green);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-green-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-green-rgb);
    --bs-btn-active-color: var(--b6-green-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-teal {
    --bs-btn-color: var(--b6-teal);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-teal-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-teal-rgb);
    --bs-btn-active-color: var(--b6-teal-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-teal);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-cyan {
    --bs-btn-color: var(--b6-cyan);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-cyan-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-cyan-rgb);
    --bs-btn-active-color: var(--b6-cyan-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-cyan);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-text-gray {
    --bs-btn-color: var(--b6-gray);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--b6-gray-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--b6-gray-rgb);
    --bs-btn-active-color: var(--b6-gray-darker);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--b6-gray);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Text-Buttons: Underline on hover/focus */
[class^="btn-text-"]:hover,
[class^="btn-text-"]:focus-visible {
    text-decoration: underline;
}

/* --- Dark-Mode-Overrides: Outline-Buttons (hellere Farbe auf dunklem BG) */
body.dark-mode .btn-outline-blue {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
}

body.dark-mode .btn-outline-indigo {
    --bs-btn-color: #a370f7;
    --bs-btn-border-color: #a370f7;
}

body.dark-mode .btn-outline-purple {
    --bs-btn-color: #b397f7;
    --bs-btn-border-color: #b397f7;
}

body.dark-mode .btn-outline-pink {
    --bs-btn-color: #f27bba;
    --bs-btn-border-color: #f27bba;
}

body.dark-mode .btn-outline-red {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #ea868f;
}

body.dark-mode .btn-outline-orange {
    --bs-btn-color: #feb272;
    --bs-btn-border-color: #feb272;
}

body.dark-mode .btn-outline-yellow {
    --bs-btn-color: #ffda6a;
    --bs-btn-border-color: #ffda6a;
}

body.dark-mode .btn-outline-green {
    --bs-btn-color: #75b798;
    --bs-btn-border-color: #75b798;
}

body.dark-mode .btn-outline-teal {
    --bs-btn-color: #79dfc1;
    --bs-btn-border-color: #79dfc1;
}

body.dark-mode .btn-outline-cyan {
    --bs-btn-color: #6edff6;
    --bs-btn-border-color: #6edff6;
}

body.dark-mode .btn-outline-gray {
    --bs-btn-color: #adb5bd;
    --bs-btn-border-color: #adb5bd;
}

/* --- Dark-Mode-Overrides: Text-Buttons (hellere Farbe auf dunklem BG)  */
body.dark-mode .btn-text-blue {
    --bs-btn-color: #6ea8fe;
}

body.dark-mode .btn-text-indigo {
    --bs-btn-color: #a370f7;
}

body.dark-mode .btn-text-purple {
    --bs-btn-color: #b397f7;
}

body.dark-mode .btn-text-pink {
    --bs-btn-color: #f27bba;
}

body.dark-mode .btn-text-red {
    --bs-btn-color: #ea868f;
}

body.dark-mode .btn-text-orange {
    --bs-btn-color: #feb272;
}

body.dark-mode .btn-text-yellow {
    --bs-btn-color: #ffda6a;
}

body.dark-mode .btn-text-green {
    --bs-btn-color: #75b798;
}

body.dark-mode .btn-text-teal {
    --bs-btn-color: #79dfc1;
}

body.dark-mode .btn-text-cyan {
    --bs-btn-color: #6edff6;
}

body.dark-mode .btn-text-gray {
    --bs-btn-color: #adb5bd;
}

/* =====================================================================
   SIDEBAR-NAVIGATION (Tones, Bootstrap 6 RGB-Tokens)
   ---------------------------------------------------------------------
   - Eine Tone-Klasse pro Eintrag (sb-item--blue, sb-item--cyan, ...)
   - Sanfter farbiger Hintergrund + Akzent-Border links
   - fw-semibold Text, Emoji als Farbcue
   - Light/Dark-Theme automatisch via [data-bs-theme]
   ===================================================================== */
.nav-sidebar .list-group-item.sb-item {
    --sb-tone: var(--b6-gray-rgb);
    --sb-bg-alpha: .55;              /* deutlich farbiger Hintergrund */
    --sb-bg-hover-alpha: .75;
    --sb-bg-active-alpha: 1;
    --sb-border-alpha: 1;
    /* Textfarbe: dunkle Variante der Tone-Farbe, gut lesbar auf hellem Tint */
    --sb-text-mix: 75%;

    background-color: rgba(var(--sb-tone), var(--sb-bg-alpha));
    border: 0;
    border-left: 4px solid rgb(var(--sb-tone));
    border-radius: .4rem;
    margin-bottom: 3px;
    padding: .55rem .8rem;
    /* dunkler Mix aus Tone + Schwarz für Lesbarkeit auf farbigem Untergrund */
    color: color-mix(in srgb, rgb(var(--sb-tone)) 30%, #1a1d20);
    font-weight: 600;                /* fw-semibold */
    transition: background-color .15s ease, border-left-color .15s ease, transform .1s ease, color .15s ease;
}
.nav-sidebar .list-group-item.sb-item:hover,
.nav-sidebar .list-group-item.sb-item:focus {
    background-color: rgba(var(--sb-tone), var(--sb-bg-hover-alpha));
    border-left-color: rgb(var(--sb-tone));
    color: color-mix(in srgb, rgb(var(--sb-tone)) 25%, #000);
    z-index: auto;
    transform: translateX(1px);
}
.nav-sidebar .list-group-item.sb-item.active {
    background-color: rgb(var(--sb-tone));
    border-left-width: 5px;
    border-left-color: rgb(var(--sb-tone));
    color: #fff;
}
.nav-sidebar .list-group-item.sb-item.active::before {
    content: "";
}

/* Section-Header (KONTO & CREDITS / KONTO) */
.nav-sidebar .sb-section {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    margin-top: .55rem;
    padding: .65rem .25rem .35rem;
    font-size: .68em;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-secondary-color);
    border-radius: 0;
}

/* Color-Modifier – nutzen die Bootstrap-6-RGB-Tokens */
.nav-sidebar .sb-item--blue   { --sb-tone: var(--b6-blue-rgb); }
.nav-sidebar .sb-item--indigo { --sb-tone: var(--b6-indigo-rgb); }
.nav-sidebar .sb-item--purple { --sb-tone: var(--b6-purple-rgb); }
.nav-sidebar .sb-item--pink   { --sb-tone: var(--b6-pink-rgb); }
.nav-sidebar .sb-item--red    { --sb-tone: var(--b6-red-rgb); }
.nav-sidebar .sb-item--orange { --sb-tone: var(--b6-orange-rgb); }
.nav-sidebar .sb-item--yellow { --sb-tone: var(--b6-yellow-rgb); }
.nav-sidebar .sb-item--green  { --sb-tone: var(--b6-green-rgb); }
.nav-sidebar .sb-item--teal   { --sb-tone: var(--b6-teal-rgb); }
.nav-sidebar .sb-item--cyan   { --sb-tone: var(--b6-cyan-rgb); }
.nav-sidebar .sb-item--gray   { --sb-tone: var(--b6-gray-rgb); }

/* Dark-Theme – Tint dunkler, Text aufgehellt für Kontrast */
[data-bs-theme="dark"] .nav-sidebar .list-group-item.sb-item {
    --sb-bg-alpha: .32;
    --sb-bg-hover-alpha: .50;
    --sb-bg-active-alpha: 1;
    /* Text: heller Mix aus Tone + Weiß, da der Untergrund dunkel-getönt ist */
    color: color-mix(in srgb, rgb(var(--sb-tone)) 45%, #fff);
}
[data-bs-theme="dark"] .nav-sidebar .list-group-item.sb-item:hover,
[data-bs-theme="dark"] .nav-sidebar .list-group-item.sb-item:focus {
    color: color-mix(in srgb, rgb(var(--sb-tone)) 30%, #fff);
}
[data-bs-theme="dark"] .nav-sidebar .list-group-item.sb-item.active {
    color: #fff;
}

/* Badge in Sidebar-Items soll sich tonal anpassen */
.nav-sidebar .list-group-item.sb-item .badge {
    box-shadow: 0 0 0 1px rgba(var(--sb-tone), .25);
}