/* =============================================================================
   RIDECONNECT.EU - MAIN STYLESHEET
   =============================================================================
   
   Importiert alle CSS-Dateien in korrekter Reihenfolge.
   Diese Datei wird in header.php eingebunden.
   
   ============================================================================= */

/* Design Tokens & Variables */
@import url('variables.css');

/* Reset & Typography */
@import url('base.css');

/* Layout (Container, Header, Footer, Navigation) */
@import url('layout.css');

/* UI Components (Buttons, Cards, Forms, etc.) */
@import url('components.css');

/* Event-spezifische Styles */
@import url('events.css');

/* =============================================================================
   CUSTOM PAGE STYLES
   ============================================================================= */

/* Diese Sektion kann für seitenspezifische Styles verwendet werden,
   die nicht in eine eigene Datei ausgelagert werden sollen. */

/* Coming Soon Page */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - var(--safe-area-top) - var(--safe-area-bottom));
    text-align: center;
    padding: var(--space-8);
}

.coming-soon-icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
    color: var(--color-primary);
    animation: float 3s ease-in-out infinite;
}

.coming-soon-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.coming-soon-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    max-width: 400px;
    margin-bottom: var(--space-8);
}

.coming-soon-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.coming-soon-feature {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-surface);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
}

.coming-soon-feature svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse Animation für Badge */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.badge-pulse {
    animation: pulse 2s ease-in-out infinite;
}