/* Vereinsfarben des KFV Holstein */
:root {
    --kfv-blau: #1d0480;
    --kfv-blau-dunkel: #140359;
    --kfv-rot: #e02027;
    --kfv-rot-dunkel: #b8191f;

    --bs-primary: var(--kfv-blau);
    --bs-primary-rgb: 29, 4, 128;
    --bs-link-color: var(--kfv-blau);
    --bs-link-color-rgb: 29, 4, 128;
    --bs-link-hover-color: var(--kfv-rot);
    --bs-link-hover-color-rgb: 224, 32, 39;
}

/* Nur der Seitenhintergrund wird leicht getönt, Karten und Felder bleiben weiß */
body {
    background-color: #f3f2f8;
}

/* Knöpfe */
.btn-primary {
    --bs-btn-bg: var(--kfv-blau);
    --bs-btn-border-color: var(--kfv-blau);
    --bs-btn-hover-bg: var(--kfv-blau-dunkel);
    --bs-btn-hover-border-color: var(--kfv-blau-dunkel);
    --bs-btn-active-bg: var(--kfv-blau-dunkel);
    --bs-btn-active-border-color: var(--kfv-blau-dunkel);
    --bs-btn-disabled-bg: var(--kfv-blau);
    --bs-btn-disabled-border-color: var(--kfv-blau);
}

.btn-outline-primary {
    --bs-btn-color: var(--kfv-blau);
    --bs-btn-border-color: var(--kfv-blau);
    --bs-btn-hover-bg: var(--kfv-blau);
    --bs-btn-hover-border-color: var(--kfv-blau);
    --bs-btn-active-bg: var(--kfv-blau-dunkel);
    --bs-btn-active-border-color: var(--kfv-blau-dunkel);
}

/* Roter Knopf für die wichtigste Aktion einer Seite */
.btn-akzent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kfv-rot);
    --bs-btn-border-color: var(--kfv-rot);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kfv-rot-dunkel);
    --bs-btn-hover-border-color: var(--kfv-rot-dunkel);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kfv-rot-dunkel);
    --bs-btn-active-border-color: var(--kfv-rot-dunkel);
}

/* Gelbe Schrift auf Weiß ist schwer lesbar, darum ein dunklerer Bernsteinton */
.btn-outline-warning {
    --bs-btn-color: #8a5a00;
    --bs-btn-border-color: #e0a800;
}

/* Eingabefelder: blauer Rahmen beim Anklicken */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #8e82c0;
    box-shadow: 0 0 0 0.25rem rgba(29, 4, 128, 0.2);
}

.form-check-input:checked {
    background-color: var(--kfv-blau);
    border-color: var(--kfv-blau);
}

/* Seitenleiste */
.seitenleiste {
    background: var(--kfv-blau);
}

@media (min-width: 992px) {
    .seitenleiste {
        width: 260px;
        flex-shrink: 0;
        min-height: 100vh;
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.seitenleiste .offcanvas-lg {
    background: var(--kfv-blau);
    color: #fff;
}

.logo-kreis {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

.seitenleiste .nav-link {
    color: rgba(255, 255, 255, 0.8);
    border-left: 4px solid transparent;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 0.6rem 1rem;
}

.seitenleiste .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.seitenleiste .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-left-color: var(--kfv-rot);
    font-weight: 600;
}

.seitenleiste .nav-link .bi {
    margin-right: 0.6rem;
}

/* Obere Leiste auf dem Handy */
.handy-leiste {
    background: var(--kfv-blau);
}

/* Inhalt */
.seitentitel {
    font-weight: 700;
    color: var(--kfv-blau);
}

.seitentitel::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 0.4rem;
    background: var(--kfv-rot);
    border-radius: 2px;
}

.card {
    border: 0;
    box-shadow: 0 0.125rem 0.5rem rgba(29, 4, 128, 0.08);
}

.card-header {
    background: #fff;
    font-weight: 600;
}

.mehrzeilig {
    white-space: pre-wrap;
}

/* Rundes Profilbild bzw. Kreis mit den Initialen eines Mitglieds */
.avatar {
    border-radius: 50%;
    background: var(--kfv-blau);
    color: #fff;
    border: 3px solid var(--kfv-rot);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    object-fit: cover;
}

.seitenleiste .avatar {
    border-color: #fff;
}

/* Suche */
.suchfeld .input-group-text,
.suchfeld .form-control {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.suchfeld .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.suchfeld .form-control:focus {
    background: #fff;
    color: #212529;
}

mark {
    background: #ffe58a;
    padding: 0 0.1em;
    border-radius: 0.15em;
}

.treffer {
    border-left: 3px solid #e2e0ee;
    padding: 0.4rem 0 0.4rem 0.75rem;
    margin-top: 0.5rem;
}

.treffer:hover {
    border-left-color: var(--kfv-rot);
    background: #faf9fd;
}

/* Beim Sprung zu einem TOP etwas Abstand nach oben lassen und ihn kurz hervorheben */
.top-karte {
    scroll-margin-top: 1.5rem;
}

.top-karte:target {
    box-shadow: 0 0 0 3px var(--kfv-rot);
}

/* Verlauf ("Chatter") */
.verlauf-kommentar {
    background: #f4f6ff;
}

.verlauf-symbol {
    color: var(--bs-secondary-color);
}

.verlauf-freigegeben, .verlauf-erledigt {
    color: var(--bs-success);
}

.verlauf-angelegt, .verlauf-hochgeladen {
    color: var(--kfv-blau);
}

.verlauf-entfernt, .verlauf-zurueckgenommen {
    color: var(--kfv-rot);
}

.verlauf-details {
    padding-left: 1.1rem;
    color: var(--bs-secondary-color);
}

.verlauf-details-mehr summary {
    color: var(--kfv-blau);
    cursor: pointer;
    margin-left: 1.1rem;
}

/* Tags: #Thema rot, @Person blau */
.tag {
    display: inline-block;
    padding: 0 0.4em;
    border-radius: 0.3em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tag-thema {
    color: var(--kfv-rot-dunkel);
    background: rgba(224, 32, 39, 0.09);
}

.tag-person {
    color: var(--kfv-blau);
    background: rgba(29, 4, 128, 0.08);
}

.tag:hover {
    text-decoration: underline;
}

.tag-gross {
    padding: 0.35em 0.7em;
    font-size: 1rem;
}

.tag-anzahl {
    font-size: 0.75em;
    font-weight: 700;
    background: #fff;
    border-radius: 1em;
    padding: 0.05em 0.5em;
    margin-left: 0.2em;
}

/* Aufgaben */
.aufgaben-bereich {
    background: #f8f7fc;
    border: 1px dashed #d6d2ea;
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.aufgaben-bereich .aufgabe + .aufgabe {
    border-top: 1px solid #e8e6f2;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.aufgabe-erledigt .aufgabe-text {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

/* Geburtstage */
.datumskasten {
    width: 64px;
    border: 1px solid #e2e0ee;
    border-top: 4px solid var(--kfv-rot);
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    background: #fff;
}

.datumskasten .tag {
    font-weight: 700;
    color: var(--kfv-blau);
}

.geburtstag-heute {
    background: rgba(224, 32, 39, 0.07);
}

.kennzahl {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kfv-blau);
    line-height: 1;
}

/* Login-Seite */
.login-hintergrund {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--kfv-blau) 0%, var(--kfv-blau-dunkel) 60%, var(--kfv-rot) 140%);
}