/*
 * BandArena - Farbschema (Hell/Dunkel) und gemeinsamer Look.
 * Wird als letztes Stylesheet geladen (Master.php beider Instanzen).
 *
 * Die Farben in design.css und local.css verweisen auf die Variablen unten.
 * Umschalten: Attribut data-theme="light|dark" am <html>-Element (Cookie ba_theme, siehe Master-Template).
 * Logo und Markenfarbe (Orange #f39200) bleiben in beiden Modi gleich.
 */

:root {
    /* Marke */
    --accent: #f39200;
    --accent-strong: #e07f00;
    --accent-grad: linear-gradient(135deg, #ffa733 0%, #f36f00 100%);
    --accent-glow: 0 10px 24px -12px rgba(243, 127, 0, 0.75);
    --navy: #0f2746;

    /* Hell */
    --bg: #f2f5fa;
    --bg-glow-1: rgba(243, 146, 0, 0.10);
    --bg-glow-2: rgba(42, 92, 190, 0.10);
    --surface: #ffffff;
    --surface-2: #f3f6fb;
    --surface-3: #e9eef6;
    --border: #e1e8f1;
    --text-strong: #0f2746;
    --text: #33475f;
    --text-muted: #6b7d96;
    --accent-soft: #fff3e2;
    --accent-soft-border: #f6dfbf;
    --nav-bg: rgba(255, 255, 255, 0.82);
    --nav-border: rgba(15, 39, 70, 0.08);
    --nav-text: #33475f;
    --shadow-sm: 0 1px 2px rgba(15, 39, 70, 0.05), 0 6px 18px -12px rgba(15, 39, 70, 0.25);
    --shadow-md: 0 2px 4px rgba(15, 39, 70, 0.05), 0 18px 40px -22px rgba(15, 39, 70, 0.38);
    --shadow-lg: 0 24px 60px -28px rgba(15, 39, 70, 0.55);
    --input-bg: #f5f8fc;
    --radius: 18px;
    --radius-sm: 12px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --navy: #f1f5fb;
    --bg: #0a111e;
    --bg-glow-1: rgba(243, 146, 0, 0.13);
    --bg-glow-2: rgba(52, 104, 214, 0.16);
    --surface: #131c2e;
    --surface-2: #1a2540;
    --surface-3: #223052;
    --border: #263450;
    --text-strong: #f1f5fb;
    --text: #c7d2e3;
    --text-muted: #8b9bb5;
    --accent-soft: rgba(243, 146, 0, 0.16);
    --accent-soft-border: rgba(243, 146, 0, 0.38);
    --nav-bg: rgba(10, 17, 30, 0.78);
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text: #c7d2e3;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -12px rgba(0, 0, 0, 0.7);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 44px -22px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 26px 64px -26px rgba(0, 0, 0, 0.95);
    --input-bg: #0f1829;
    color-scheme: dark;
}

/* ---------- Grundlage ---------- */

html { scroll-behavior: smooth; }

body,
.bandpage-modern,
.bandpage-modern body,
body.home-landing-page {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 520px at 100% -5%, var(--bg-glow-1), transparent 62%),
        radial-gradient(820px 520px at -8% 12%, var(--bg-glow-2), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    transition: background-color 0.25s ease, color 0.25s ease;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-strong); letter-spacing: -0.01em; }
hr { border-top: 1px solid var(--border); }
a { color: var(--accent); transition: color 0.15s ease; }
a:hover { color: var(--accent-strong); }
::selection { background: rgba(243, 146, 0, 0.3); }

.text-secondary, .text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-strong) !important; }
.bg-white, .bg-light { background-color: var(--surface) !important; color: var(--text) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--border) !important; }
small, .small { color: var(--text-muted); }

/* Inhalt mittig statt linksbündig */
nav .container,
#content.container {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    nav .container { padding-left: 15px; padding-right: 15px; }
    #content.container { padding-left: 15px; padding-right: 15px; }
}
/* Handy: Zeilen ohne negativen Rand, sonst wird die Seite breiter als der Bildschirm */
@media (max-width: 34em) {
    #content .row { margin-left: 0; margin-right: 0; }
}
img, video, iframe { max-width: 100%; }

/* ---------- Icons ---------- */

.material-icons.md-dark { color: var(--text-strong); }
.material-icons.md-light { color: var(--text-muted); }
[data-theme="dark"] .material-icons.md-dark,
[data-theme="dark"] .material-icons.md-light { color: #dbe4f2; }
[data-theme="dark"] .btn-dark .md-light,
[data-theme="dark"] .card-footer .btn-dark .md-light,
[data-theme="dark"] .bandpage-admin-actions .btn-dark .material-icons { color: #dbe4f2 !important; }
[data-theme="dark"] .sidebar .list-group-item-bandarena i,
[data-theme="dark"] .timeline-bands-filter-wrap .material-icons { color: #b9c6da; }
.btn-bandarena .material-icons,
.btn-bandarena .material-icons.md-dark,
.btn-bandarena .material-icons.md-light { color: inherit !important; }

/* ---------- Kopfzeile ---------- */

nav,
.navbar,
.bandpage-modern nav,
.bandpage-modern .navbar {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.navbar {
    min-height: 68px;
    box-shadow: 0 10px 30px -24px rgba(15, 39, 70, 0.55) !important;
}
.navbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, #ff6f1f 65%, transparent 100%);
    opacity: 0.55;
    pointer-events: none;
}
header .navbar img.navbar-logo,
.bandpage-modern header .navbar img.navbar-logo {
    height: 50px !important;
    width: auto !important;
    opacity: 1;
    transition: transform 0.2s ease;
}
header .navbar a:hover img.navbar-logo { transform: scale(1.05) rotate(-2deg); }

/* Logo je nach Untergrund: logo-on-light = dunkle Schrift, logo-on-dark = helle Schrift */
.navbar-logo.logo-on-dark { display: none; }
[data-theme="dark"] .navbar-logo.logo-on-light { display: none; }
[data-theme="dark"] .navbar-logo.logo-on-dark { display: inline-block; }
.home-guest-nav .navbar-logo.logo-on-light { display: none !important; }
.home-guest-nav .navbar-logo.logo-on-dark { display: inline-block !important; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.top-icon,
.bandpage-modern .top-icon,
.bandpage-modern .navbar-dark .navbar-brand { color: var(--nav-text) !important; margin-left: 0; }
.top-icon .md-24 { margin-top: 0; }

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.nav-btn-ghost { color: var(--nav-text) !important; border-color: var(--border); background: transparent; }
.nav-btn-ghost:hover { background: var(--surface-2); color: var(--text-strong) !important; }
.nav-btn-primary { color: #fff !important; background: var(--accent-grad); box-shadow: var(--accent-glow); }
.nav-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Umschalter Hell/Dunkel */
.theme-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { transform: rotate(18deg) scale(1.06); color: var(--accent); border-color: var(--accent-soft-border); }
.theme-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.3); }
.theme-toggle .material-icons { font-size: 20px; color: inherit !important; }
.theme-toggle .icon-to-light { display: none; }
[data-theme="dark"] .theme-toggle .icon-to-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-to-light { display: inline-flex; color: #ffc46b !important; }
.home-guest-nav .theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f2f6fc;
}

header .navbar img.avatar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-soft-border);
    transition: box-shadow 0.2s ease;
}
header .navbar a:hover img.avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

body.has-mobile-sidebar .mobile-sidebar-toggle,
body.has-mobile-sidebar .mobile-sidebar-toggle:hover,
body.has-mobile-sidebar .mobile-sidebar-toggle:focus,
body.has-mobile-sidebar .mobile-sidebar-toggle .material-icons { color: var(--nav-text) !important; }

@media (max-width: 575px) {
    .nav-btn { height: 36px; padding: 0 0.7rem; font-size: 0.86rem; }
    header .navbar img.navbar-logo { height: 44px !important; }
    .theme-toggle { width: 36px; height: 36px; }
    .nav-actions { gap: 0.35rem; }
}

/* ---------- Karten ---------- */

.card,
.timeline-layout .contentcard.card,
.timeline-layout .timeline-list-card,
.bandpage-modern .contentcard.card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card > .card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.card-header { background: transparent; border-bottom: 0; color: var(--text-strong); }
.card-footer,
.timeline-layout .contentcard.card .card-footer,
.bandpage-modern .contentcard.card .card-footer,
.bandpage-modern .card .card-footer {
    background: transparent;
    border-top: 1px solid var(--border);
}
.card.bg-bandarena { background: var(--accent-grad) !important; border: 0; color: #2a1a00; box-shadow: var(--accent-glow); }
.card.bg-bandarena .card-header, .card.bg-bandarena h4 { color: #2a1a00; }
.card.bg-bandarena a { color: #2a1a00; text-decoration: underline; }
.raised, .raised2 { box-shadow: var(--shadow-sm); }
.raised3 { box-shadow: var(--shadow-lg); }

.contentcard.card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.contentcard.card img { max-width: 100%; }
.contentcard .card-header a { font-weight: 700; }

.timeline-band-card,
.home-band-card,
.home-info-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.timeline-band-card:hover,
.home-band-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-soft-border);
}
.home-band-card img { transition: transform 0.4s ease; }
.home-band-card:hover img { transform: scale(1.04); }
.timeline-band-top-text h3 a, .home-band-card-body h3, .home-bands-head h2,
.home-perspectives-intro h2, .home-info-card h3 { color: var(--text-strong); }
.home-bands { background: var(--surface); }

/* Aktionen unter einem Beitrag */
.card-footer .btn-dark,
.timeline-layout .contentcard.card .card-footer .btn-dark,
.bandpage-modern .contentcard.card .card-footer .btn-dark,
.bandpage-modern .card .card-footer .btn-dark,
.bandpage-modern .bandpage-meta-footer .btn-dark {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted) !important;
    border-radius: 999px;
    box-shadow: none !important;
}
.card-footer .btn-dark:hover,
.timeline-layout .contentcard.card .card-footer .btn-dark:hover,
.bandpage-modern .contentcard.card .card-footer .btn-dark:hover,
.bandpage-modern .card .card-footer .btn-dark:hover,
.bandpage-modern .bandpage-meta-footer .btn-dark:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* ---------- Seitenmenü ---------- */

.timeline-layout .timeline-sidebar-col { background: transparent; border-right: 0; }
.timeline-layout .timeline-content-col { background: transparent; }
.timeline-layout .timeline-sidebar-menu,
.sidebar > .sidebar__inner > .list-group,
.sidebar > .list-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.sidebar > .sidebar__inner > .list-group,
.sidebar > .list-group { padding: 0.6rem; }
.list-group-item { background-color: transparent; color: var(--text); border-color: var(--border); }
.sidebar .list-group-item-bandarena,
.timeline-layout .timeline-sidebar-menu .list-group-item-bandarena {
    border-radius: 12px !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar .list-group-item-bandarena:hover,
.timeline-layout .timeline-sidebar-menu .list-group-item-bandarena:hover { transform: translateX(2px); }
.sidebar .list-group-item-bandarena.active,
.timeline-layout .timeline-sidebar-menu .list-group-item-bandarena.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
    box-shadow: inset 3px 0 0 var(--accent);
}
@media (min-width: 992px) {
    .timeline-layout .timeline-sidebar-col { padding-right: 1rem; min-height: 0; }
}
@media (max-width: 768px) {
    .mobile-sidebar-drawer { background: var(--bg); }
    .mobile-sidebar-drawer-head { border-bottom-color: var(--border); }
    .mobile-sidebar-close { color: var(--text); }
    .mobile-sidebar-drawer .timeline-sidebar-menu { border: 0; box-shadow: none; background: transparent; }
}

/* ---------- Buttons ---------- */

.btn { border-radius: 999px; font-weight: 600; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.28) !important; }
.btn-bandarena,
.btn-bandarena:not(:disabled):not(.disabled).active,
.btn-bandarena:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--accent-grad);
    border-color: transparent;
    box-shadow: var(--accent-glow);
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.btn-bandarena:hover { color: #fff; background: var(--accent-grad); border-color: transparent; transform: translateY(-1px); filter: brightness(1.06); }
.btn-bandarena.disabled, .btn-bandarena:disabled { color: #fff; background: var(--accent-grad); border-color: transparent; opacity: 0.55; box-shadow: none; }
.btn-dark {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.btn-dark:hover { background: var(--surface-2) !important; color: var(--text-strong) !important; }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--surface-2); border-color: var(--border); color: var(--text-strong); }
.btn-outline-danger { color: #d9534f; border-color: rgba(217, 83, 79, 0.5); }
.btn-outline-danger:hover { color: #fff; }
.btn-light { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-bordered { border-color: var(--border); }

/* ---------- Formulare ---------- */

label { color: var(--text); font-weight: 500; }
.form-control,
.custom-select,
.form-control:focus {
    background: var(--input-bg);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control { padding: 0.6rem 0.85rem; height: auto; min-height: 44px; }
textarea.form-control { min-height: 96px; }
.form-control:focus,
.custom-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.18) !important;
}
.form-control::placeholder { color: var(--text-muted); opacity: 0.85; }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--text-muted); }
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    border: 1px solid var(--border);
}
option { background: var(--surface); color: var(--text-strong); }
.input-group-text { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
.input-group > .input-group-prepend > .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > .input-group-append > .input-group-text { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-text { color: var(--text-muted) !important; }
.custom-control-label::before { background-color: var(--surface-3); border-color: var(--border); }
.emojionearea, .emojionearea.form-control { background: var(--input-bg) !important; border-color: var(--border) !important; box-shadow: none !important; }
.emojionearea .emojionearea-editor { color: var(--text-strong) !important; }
.emojionearea .emojionearea-editor:empty:before { color: var(--text-muted) !important; }
.bandpage-modern #content_new_textarea,
.bandpage-modern #content_new .emojionearea-editor { color: var(--text-strong) !important; }

/* ---------- Menüs, Dialoge, Meldungen ---------- */

.dropdown-menu {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    overflow: hidden;
}
.dropdown-item { color: var(--text); border-radius: 9px; padding: 0.45rem 0.8rem; }
.dropdown-item:focus, .dropdown-item:hover { background: var(--surface-2); color: var(--text-strong); }
a.dropdown-item:focus, a.dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
.dropdown-divider { border-color: var(--border); }
.modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--border); }
.close { color: var(--text-strong); text-shadow: none; }
.close:hover { color: var(--accent); }
.alert { border-radius: var(--radius-sm); border: 0; box-shadow: var(--shadow-sm); }
.table { color: var(--text); }
.table td, .table th { border-color: var(--border); }
.table thead th { color: var(--text-strong); border-bottom-color: var(--border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-2); }
.page-link { background: var(--surface); border-color: var(--border); color: var(--accent); }
.badge-light { background: var(--surface-3); color: var(--text); }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link.active { background: var(--surface); color: var(--text-strong); border-color: var(--border) var(--border) var(--surface); }
.nav-pills .nav-link { color: var(--text); border-radius: 999px; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background: var(--accent-grad); }
pre, code { color: var(--text-strong); }

/* ---------- Bandseite ---------- */

.bandpage-header { border-radius: var(--radius); overflow: visible; }
.bandpage-header-image { border-radius: var(--radius) var(--radius) 0 0; }
.bandpage-logo { border-color: var(--surface); background: var(--surface-2); box-shadow: var(--shadow-md); }
.bandpage-meta-footer h4 { color: var(--text-strong); font-weight: 800; }
.bandpage-chip { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.bandpage-nav-tabs { background: var(--surface); border-color: var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.bandpage-nav-item { color: var(--text-muted); }
.bandpage-nav-item:hover { color: var(--text-strong); border-bottom-color: var(--border); }
.bandpage-nav-item.active { color: var(--accent); border-bottom-color: var(--accent); }
.bandpage-modern .contentcard.card { border-radius: var(--radius); }
/* Inhalt in einer Flucht mit dem Kopfbereich der Band (Spalten haben sonst 15px Innenabstand) */
@media (min-width: 992px) {
    .bandpage-content-row { margin-left: -15px; margin-right: -15px; }
}
@media (max-width: 991.98px) {
    .bandpage-content-row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .bandpage-content-row > .col-12 > .row { margin-left: 0; margin-right: 0; }
    .bandpage-content-row > .col-12 > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}
@media (max-width: 34em) {
    /* Buttons liegen auf dem Headerbild - brauchen einen festen Untergrund */
    .bandpage-admin-actions .btn-dark,
    .bandpage-modern .bandpage-admin-actions .btn-dark,
    .bandpage-modern .bandpage-meta-footer .bandpage-admin-actions .btn-dark,
    .contentcard.card .card-footer.bandpage-meta-footer .bandpage-admin-actions .btn-dark,
    .bandpage-modern .contentcard.card .card-footer .bandpage-admin-actions .btn-dark {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-strong) !important;
        border-radius: 999px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    .bandpage-meta-footer { border-top-color: var(--border); }
}

/* ---------- Fußzeile ---------- */

.footer {
    background: transparent;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    height: auto;
    min-height: 44px;
    line-height: 1.5;
    padding: 0.7rem 0;
}
.footer .container { max-width: 1280px; padding: 0 14px; }
.footer a { color: var(--text-muted); font-weight: 500; text-decoration: none; }
.footer a:hover { color: var(--accent); }
@media (max-width: 575px) {
    body { margin-bottom: 96px; }
    .footer .container { text-align: center; }
    .footer .float-right { float: none !important; display: block; }
}

/* ---------- Dunkel: Reste mit festen hellen Farben ---------- */

[data-theme="dark"] .bg-dark { background: var(--surface-2) !important; }
[data-theme="dark"] .formerror input,
[data-theme="dark"] .formerror select,
[data-theme="dark"] .formerror textarea { background: rgba(220, 53, 69, 0.18) !important; border-color: #e0606d !important; }
[data-theme="dark"] .alert-success { background: #12382a; color: #b6f0cf; }
[data-theme="dark"] .alert-warning { background: #3d2f0c; color: #ffe2a0; }
[data-theme="dark"] .alert-danger { background: #44171c; color: #ffc4c9; }
[data-theme="dark"] .alert-info { background: #10344a; color: #bfe6fb; }
[data-theme="dark"] .alert .close { color: inherit; }
[data-theme="dark"] .home-bands { border-color: var(--border); }
[data-theme="dark"] .home-info-icon-fan { background: var(--surface-3); color: #dbe4f2; }
[data-theme="dark"] .timeline-band-badge-fan,
[data-theme="dark"] .timeline-band-badge-public { background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .timeline-band-badge-owner { background: var(--accent-soft); border-color: var(--accent-soft-border); color: #ffb555; }
[data-theme="dark"] img.emojione { filter: none; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Benutzermenü und Dialoge: Feinheiten ---------- */

header .navbar .dropdown-menu { min-width: 270px; }
header .navbar .dropdown-menu img.avatar.large {
    margin: 0 12px 0 0 !important;
    flex-shrink: 0;
    box-shadow: none;
    border-radius: 12px;
}
header .navbar .dropdown-menu .dropdown-item > .d-flex > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); font-weight: 600; }
header .navbar .dropdown-menu .dropdown-item .text-secondary { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.modal-content { overflow: hidden; }

/* ---------- Events ---------- */

.event-list { display: flex; flex-direction: column; gap: 0.8rem; }
.event-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text) !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-soft-border); }
.event-date {
    flex: 0 0 64px;
    height: 68px;
    border-radius: 14px;
    background: var(--accent-grad);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--accent-glow);
    line-height: 1;
}
.event-date-day { font-size: 1.7rem; font-weight: 800; }
.event-date-month { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }
.event-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.event-title { color: var(--text-strong); font-size: 1.15rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.event-meta { color: var(--text-muted); font-size: 0.93rem; display: flex; align-items: center; gap: 0.3rem; }
.event-meta .material-icons { color: var(--accent); }
.event-band { color: var(--accent); font-weight: 600; font-size: 0.93rem; }
.event-band:empty { display: none; }
.event-arrow { color: var(--text-muted); flex: 0 0 auto; }
.event-empty,
.event-cta {
    margin-top: 1rem;
    padding: 1.4rem 1.2rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.event-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; background: var(--surface); }
.event-empty .material-icons { font-size: 40px; color: var(--accent); }
.event-empty strong, .event-cta strong { color: var(--text-strong); }
.event-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.event-cta > div { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 260px; }
/* Termine in der schmalen Spalte der Bandseite */
.bandpage-content-row .event-card { padding: 0.6rem 0.7rem; gap: 0.7rem; box-shadow: none; margin-bottom: 0.5rem; }
.bandpage-content-row .event-date { flex-basis: 52px; height: 56px; }
.bandpage-content-row .event-date-day { font-size: 1.35rem; }
.bandpage-content-row .event-band, .bandpage-content-row .event-arrow { display: none; }
.bandpage-content-row .event-title { font-size: 1rem; }
@media (max-width: 575px) {
    .event-list, .event-empty, .event-cta { margin-left: 0.6rem; margin-right: 0.6rem; }
    .timeline-bands-page .timeline-bands-header { padding: 0 0.7rem; }
}

/* ---------- Beitrag erstellen ---------- */

.content-new-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem 0.7rem;
    border-top: 1px solid var(--border);
}
.content-new-actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
#content_new_textarea { background: transparent; border-radius: 0; }
#upload-status { color: var(--text); }
#content_new_header.bg-bandarena, #content_new_header.bg-bandarena h4 { color: #fff; }
#content_new_header .close { color: var(--text-strong); opacity: 0.8; }
.dropify-wrapper { background-color: var(--input-bg) !important; background-image: none !important; border: 2px dashed var(--border) !important; border-radius: var(--radius-sm); color: var(--text-muted) !important; }
.dropify-wrapper .dropify-preview { background-color: var(--input-bg) !important; }
.dropify-wrapper .dropify-message p { color: var(--text-muted); }
.dropify-wrapper:hover { border-color: var(--accent); background-image: none; }

/* ---------- Registrierung, Einstellungen ---------- */

.register-page { margin-top: 2rem; }
.sidebar .card > .list-group { padding: 0.5rem; }
.sidebar .card > .list-group .list-group-item { border-width: 1px; }
@media (max-width: 575px) {
    /* Menü der Einstellungen als wischbare Leiste statt als lange Liste */
    .settings-nav { flex-direction: row; overflow-x: auto; gap: 0.3rem; -webkit-overflow-scrolling: touch; }
    .settings-nav .list-group-item { flex: 0 0 auto; white-space: nowrap; width: auto; padding: 0.5rem 0.8rem; }
    .register-page { margin-top: 0.6rem; }
}

/* ---------- Fußzeile: Links ---------- */

.footer-links a { margin-left: 1.1rem; }
.footer-made { white-space: nowrap; }
@media (max-width: 575px) {
    .footer-links a { margin: 0 0.5rem; }
}