:root {
    --bs-primary: #2874B2; 
}
body { background-color: var(--bs-bg, #f8f9fa); }

.bg-primary { background-color: var(--bs-primary) !important; }
.btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-primary:hover {background-color: color-mix(in srgb, var(--bs-primary) 85%, white) !important;}
.btn-outline-primary { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-outline-primary:hover { 
    background-color: var(--bs-secondary) !important; 
    border-color: var(--bs-secondary) !important;
    color: white !important;
}
.navbar { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }

.navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.375rem;
}

.navbar-brand {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-left: -0.5rem;
}

.navbar-brand:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.375rem;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
}

.list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Weitere Bauteile mit fest einkompiliertem Blau auf die Designfarbe ziehen */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
}
.page-link { color: var(--bs-primary) !important; }
.page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary) !important;
}
.progress-bar { background-color: var(--bs-primary) !important; }

/* ===== Kalender-Buttons in der Designfarbe ===== */
.fc {
    --fc-button-bg-color:            var(--bs-primary);
    --fc-button-border-color:        var(--bs-primary);
    --fc-button-text-color:          #fff;
    --fc-button-hover-bg-color:      var(--bs-primary);
    --fc-button-hover-border-color:  var(--bs-primary);
    --fc-button-active-bg-color:     var(--bs-primary);
    --fc-button-active-border-color: var(--bs-primary);
}
/* Hover und aktiver Zustand abdunkeln ohne color-mix, weil iOS Safari den
   aktiven Button damit teils komplett weiß rendert. brightness ist überall sicher. */
.fc .fc-button-primary:hover {
    filter: brightness(0.92);
}
.fc .fc-button-primary.fc-button-active,
.fc .fc-button-primary:active {
    filter: brightness(0.82);
}

/* ===== Kalender-Header auf dem Handy umbrechen ===== */
/* Die Ansichts-Buttons rutschen unter Navigation und Datum in eine eigene Zeile,
   statt sich neben dem Datum zu quetschen. */
@media (max-width: 575.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1.2rem;
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
}

/* Kleine Smartphones (iPhone SE, iPhone 7, usw.) */
@media (max-width: 390px) {
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-button {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    .fc .fc-toolbar.fc-header-toolbar {
        row-gap: 0.25rem;
    }
}