/* ============================================================
   EPS – Hauptstyles
   Alle Farben hier ändern, nirgendwo sonst!
   ============================================================ */

:root {
    --eps-red:      #6b0016;
    --eps-red-dark: #4a000f;
    --eps-red-rgb:  107, 0, 22;        /* für rgba() */
    --eps-bg:       #0a0a0f;
    --eps-surface:  #13131a;
    --eps-border:   rgba(255,255,255,0.08);
    --eps-muted:    rgba(255,255,255,0.45);
}

/* ============================================================
   BASIS
   ============================================================ */
body {
    background-color: var(--eps-bg);
    color: #f0f0f5;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.eps-navbar {
    background: rgba(10,10,15,0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--eps-border);
}
.eps-navbar .nav-link          { color: rgba(255,255,255,0.65) !important; transition: color .2s; }
.eps-navbar .nav-link:hover,
.eps-navbar .nav-link.active   { color: #fff !important; }

/* ============================================================
   CARDS
   ============================================================ */
.eps-card {
    background: var(--eps-surface);
    border: 1px solid var(--eps-border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color .2s;
}
.eps-card:hover { border-color: rgba(var(--eps-red-rgb), 0.3); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-eps {
    background: var(--eps-red);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    transition: background .2s, transform .1s;
}
.btn-eps:hover  { background: var(--eps-red-dark); color: #fff; transform: translateY(-1px); }
.btn-eps:active { transform: translateY(0); }

.btn-eps-outline {
    background: transparent;
    color: #fff;
    border: 1px solid var(--eps-border);
    border-radius: 12px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    transition: background .2s, border-color .2s;
}
.btn-eps-outline:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.eps-input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--eps-border) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: .75rem 1rem !important;
    transition: border-color .2s !important;
}
.eps-input::placeholder { color: var(--eps-muted) !important; }
.eps-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--eps-red-rgb), 0.2) !important;
    border-color: rgba(var(--eps-red-rgb), 0.5) !important;
    background: rgba(255,255,255,0.07) !important;
}
.eps-input option { background: #1a1a24; color: #fff; }
.form-label { color: rgba(255,255,255,0.7); font-size: .9rem; }

/* ============================================================
   HERO / AUTH HINTERGRUND
   ============================================================ */
.eps-hero {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--eps-red-rgb),0.15) 0%, transparent 65%),
                var(--eps-bg);
    min-height: 100vh;
}
.auth-container {
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--eps-red-rgb),0.12) 0%, transparent 60%),
                var(--eps-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ============================================================
   FARB-HILFSKLASSEN (ersetzt alle Inline-Styles)
   ============================================================ */
.eps-accent         { color: var(--eps-red) !important; }
.eps-muted          { color: var(--eps-muted) !important; }
.eps-border-accent  { border-color: rgba(var(--eps-red-rgb), 0.3) !important; }

.eps-badge-pill {
    background: rgba(var(--eps-red-rgb), 0.15);
    color: rgba(var(--eps-red-rgb), 1);
    filter: brightness(1.8);
    border: 1px solid rgba(var(--eps-red-rgb), 0.3);
}

.eps-premium-box {
    background: linear-gradient(135deg, rgba(var(--eps-red-rgb),0.15), rgba(var(--eps-red-rgb),0.05));
    border-color: rgba(var(--eps-red-rgb), 0.3) !important;
}

.eps-premium-inner {
    background: rgba(var(--eps-red-rgb), 0.08);
    border: 1px solid rgba(var(--eps-red-rgb), 0.3);
}

.eps-icon-lg {
    font-size: 2.5rem;
    color: var(--eps-red);
}

.eps-warning-box {
    border-color: rgba(234,179,8,0.3) !important;
    background: rgba(234,179,8,0.05) !important;
}

/* ============================================================
   PROFIL-KARTEN (Mitglieder-Übersicht)
   ============================================================ */
.profile-card {
    background: var(--eps-surface);
    border: 1px solid var(--eps-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    cursor: pointer;
}
.profile-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--eps-red-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(var(--eps-red-rgb), 0.15);
}
.profile-card .profile-img  { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.profile-card .profile-info { padding: .9rem; }

/* ============================================================
   BADGES
   ============================================================ */
.badge-online {
    display: inline-block;
    width: 10px; height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--eps-surface);
}
.badge-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-eps-error {
    background: rgba(220,38,38,0.1);
    border: 1px solid rgba(220,38,38,0.25);
    color: #fca5a5;
    border-radius: 12px;
}
.alert-eps-success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    color: #86efac;
    border-radius: 12px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.eps-footer {
    background: var(--eps-surface);
    border-top: 1px solid var(--eps-border);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.eps-page-link {
    background: var(--eps-surface) !important;
    border-color: var(--eps-border) !important;
    color: rgba(255,255,255,0.7) !important;
    border-radius: 8px !important;
    margin: 0 2px;
    transition: background .2s, color .2s;
}
.eps-page-link:hover {
    background: rgba(var(--eps-red-rgb), 0.15) !important;
    color: #fff !important;
    border-color: rgba(var(--eps-red-rgb), 0.3) !important;
}
.page-item.active .eps-page-link {
    background: var(--eps-red) !important;
    border-color: var(--eps-red) !important;
    color: #fff !important;
}
.page-item.disabled .eps-page-link {
    opacity: .4;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    .eps-card { padding: 1rem; border-radius: 12px; }
}