user.css

/* =====================================
   Cassiopeia-Anpassung für eine Chor-Website
   ===================================== */

:root {
    --chor-blau: #1f3a5f;
    --chor-gold: #c89b3c;
    --hell: #f8f9fb;
    --text: #2f2f2f;
}

/* Seitenhintergrund */
body {
    background-color: var(--hell);
    color: var(--text);
    line-height: 1.7;
}

/* Kopfbereich */
.container-header {
    background: linear-gradient(90deg, var(--chor-blau), #355c8a);
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Logo */
.navbar-brand img {
    max-height: 110px;
    width: auto;
}

/* Menü */
.metismenu a {
    color: #ffffff !important;
    font-weight: 600;
}

.metismenu a:hover,
.metismenu .active > a {
    color: #ffe3a3 !important;
}

/* Überschriften */
h1, h2, h3, h4 {
    color: var(--chor-blau);
}

/* Links */
a {
    color: var(--chor-blau);
}

a:hover {
    color: var(--chor-gold);
}

/* Buttons */
.btn-primary {
    background-color: var(--chor-gold);
    border-color: var(--chor-gold);
    border-radius: 8px;
}

.btn-primary:hover {
    background-color: var(--chor-blau);
    border-color: var(--chor-blau);
}

/* Module und Karten */
.moduletable,
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* Bilder */
img {
    border-radius: 8px;
}

/* Fußzeile */
.container-footer {
    background-color: var(--chor-blau);
    color: #ffffff;
    padding: 25px;
}

.container-footer a {
    color: #ffe3a3;
}


/* Blauer Kopfbereich */
.container-header {
    background: #1f3a5f !important;
}

/* Goldene Menülinks beim Überfahren */
.container-header .metismenu a:hover {
    color: #eed480 !important;
}

/* Blaue Überschriften */
h1, h2, h3 {
    color: #1f3a5f !important;
}

/* Buttons */
.btn-primary,
.btn,
button,
input[type="submit"] {
    background-color: var(--chor-blau) !important;
    border-color: var(--chor-blau) !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary,
.btn,
button,
input[type="submit"] {
    background-color: #355c8a !important;
    border-color: #355c8a !important;
    color: #ffffff !important;
}