/* Farbschema der Demo-Version ("Abendrot"): überschreibt die Farben der Hauptseite (Magenta/Schwarz).
   Wird nur geladen, wenn APP_MODE=demo gesetzt ist. */
:root {
    --bg: #fbf6ec;
    --fg: #1f1b3a;
    --muted: #675f80;
    --card: #ffffff;
    --border: #e8dcc6;

    --accent: #ffb000;         /* Bernstein, Text darauf dunkel */
    --accent-fg: #1f1b3a;
    --link: #5b30d6;           /* Violett für Links und Zweitknöpfe */

    --bar-bg: #221a5c;
    --bar-fg: #ffffff;
    --brand: #ffc933;

    --demo-a: #ffb000;
    --demo-b: #ff5e62;
    --demo-c: #8e54e9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #120f2c;
        --fg: #f3f0ff;
        --muted: #aaa4cf;
        --card: #1c1844;
        --border: #38336e;

        --link: #bba6ff;
    }
}

/* Obere Leiste: tiefes Indigo mit Verlauf, unten ein dreifarbiger Streifen */
.bar {
    background: linear-gradient(100deg, #1b1450 0%, #2f1d7a 55%, #5b2488 100%);
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--demo-a), var(--demo-b), var(--demo-c)) 1;
}

/* Eigenes Demo-Logo (singfähig) */
.bar a.brand img { height: 40px; width: auto; }

.card { box-shadow: 0 1px 0 rgba(31, 27, 58, .04), 0 6px 18px -12px rgba(46, 29, 122, .35); }
a.chip.active { box-shadow: 0 2px 0 var(--demo-b); }

/* Hinweisband ganz oben: bewusst laut, damit niemand die Demo mit der echten App verwechselt */
.demo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
    padding: .6rem 1rem;
    background: #c81d25;
    color: #ffffff;
    font-size: 1rem;
    border-bottom: 2px solid #8f0f16;
}
.demo-banner a { color: #ffffff; font-weight: 700; }
.demo-banner .demo-role { margin-left: auto; font-size: .92rem; }
.demo-tag {
    padding: .1rem .7rem;
    border-radius: 999px;
    background: #ffffff;
    color: #c81d25;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    white-space: nowrap;
}

/* Rollenwahl */
.demo-hero h1 { font-size: 1.9rem; line-height: 1.2; margin-top: 1rem; }
.demo-hero p { max-width: 38rem; }

.role-grid { display: grid; gap: 1rem; margin: 1.25rem 0 2rem; }
@media (min-width: 40rem) { .role-grid { grid-template-columns: 1fr 1fr; } }

.role-card {
    --c: var(--demo-a);
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.1rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 5px solid var(--c);
    border-radius: .7rem;
    color: var(--fg);
    text-decoration: none;
    box-shadow: 0 8px 22px -16px rgba(46, 29, 122, .6);
    transition: transform .15s ease, box-shadow .15s ease;
}
.role-card:hover, .role-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(46, 29, 122, .7);
}
.role-mitglied    { --c: #ffb000; }
.role-stimmgruppe { --c: #12b5a6; }
.role-chorleitung { --c: #ff6b5e; }
.role-admin       { --c: #8e54e9; }

.role-emblem {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--c);
    color: #1f1b3a;
    font-weight: 800;
    font-size: 1.2rem;
}
.role-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.role-name { font-size: 1.1rem; }
.role-tagline { color: var(--muted); font-size: .95rem; }
.role-body ul { margin: .25rem 0 .4rem; padding-left: 1.1rem; font-size: .92rem; }
.role-body li { margin: .15rem 0; }
.role-go { margin-top: auto; font-weight: 700; color: var(--link); }