:root {
    --bs-body-bg: #fff; /* weiß*/
    --bs-body-color: #212529; /*dunkles Grau*/
    --bs-input-bg: #fff;
    --bs-input-color: #212529;
    --bs-input-border: #ced4da; /*helles Grau - Rahmenfarbe für Eingabefelder*/
    --bs-navbar-bg: #343a40;
    --bs-navbar-color: #f8f9fa;
    --bs-navbar-link-color: #f8f9fa;
    --bs-navbar-color: #fff;
    --bs-navbar-link-color: #fff;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #181a1b;
    --bs-body-color: #f8f9fa;
    --bs-input-bg: #23272b;
    --bs-input-color: #f8f9fa;
    --bs-input-border: #495057;
    --bs-navbar-bg: #23272b;
    --bs-navbar-color: #f8f9fa;
    --bs-navbar-link-color: #f8f9fa;
}

body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  transition: background-color 0.2s, color 0.2s;
}

input,
textarea,
select {
    /*  background-color: var(--bs-input-bg) !important;  */ /*rausgenommen wegen checkboxen in AddAndEdit*/
    color: var(--bs-input-color) !important;
    border-color: var(--bs-input-border) !important;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

input::placeholder,
textarea::placeholder {
  color: #adb5bd;
  opacity: 1;
}

.navbar,
.navbar .navbar-brand,
.navbar .navbar-text {
    background-color: var(--bs-navbar-bg) !important;
    color: var(--bs-navbar-color) !important;
}

    .navbar .nav-link {
        color: var(--bs-navbar-link-color) !important;
    }

.footer,
footer {
    background-color: var(--bs-footer-bg) !important;
    color: var(--bs-footer-color) !important;
}

.navbar-expand-sm {
  font-size: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-toggleable-sm {
  padding-left: 1rem;
  padding-right: 1rem;
}

.border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.box-shadow {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

[data-bs-theme="dark"] .table {
    background-color: #23272b;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2c3035;
}

[data-bs-theme="dark"] .table thead {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
    border-color: #495057;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #23272b;
    color: #f8f9fa;
    border-color: #495057;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
   /* background-color: #2c3035;*/
    background-color: red;
    color: #f8f9fa;
    border-color: #495057;
}

[data-bs-theme="dark"] .modal-backdrop {
    background-color: #000 !important;
    opacity: 0.85 !important;
}

            [data-bs-theme="light"] .navbar .navbar-brand,
            [data-bs-theme="light"] .navbar .nav-link,
            [data-bs-theme="light"] .navbar .navbar-text,
            [data-bs-theme="dark"] .navbar .navbar-brand,
            [data-bs-theme="dark"] .navbar .nav-link,
            [data-bs-theme="dark"] .navbar .navbar-text {
                color: #f8f9fa !important;
            }

[data-bs-theme="dark"] .user-details-modal .image-picker,
[data-bs-theme="dark"] .user-details-modal .image-picker label,
[data-bs-theme="dark"] .user-details-modal .image-picker .form-label {
    color: #fff !important;
}

document.documentElement.setAttribute('data-bs-theme', theme);
}