/**
 * Event-Furs – Frontend: Statistik – Teilnahmen
 * Datei: /frontend/assets/css/frontend-statistics-registrations.css
 */

/* =========================
   Grundlayout
========================= */

.frontend-statistics-events {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4.5rem;

    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* =========================
   Header
========================= */

.frontend-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.frontend-section-header h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.frontend-subtitle {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

/* =========================
   Diagramm
========================= */

.frontend-events-chart {
    position: relative;
    height: 320px;
    padding: 1.6rem 1.8rem 1.4rem;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 30px rgba(0, 0, 0, 0.35);
}

.frontend-events-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =========================
   Leerzustand
========================= */

.frontend-empty {
    text-align: center;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 2.5rem 1rem;
}

/* =========================
   Responsive
========================= */

@media (max-width: 720px) {

    .frontend-events-chart {
        height: 260px;
        padding: 1.2rem 1.2rem 1rem;
    }
}