@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS-Variablen für Theme-System */
:root {
    /* Farben werden dynamisch durch ThemeManager gesetzt */
    --primary: #EAB308;
    --secondary: #4B5563;
    --accent: #8B5CF6;
    --background: #F9FAFB;
    --surface: #FFFFFF;
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-inverse: #FFFFFF;
    --border: #E5E7EB;
}

/* Basis-Stile mit CSS-Variablen */
body {
    background-color: var(--background);
    color: var(--text-primary);
}

@layer components {
    .taxi-btn {
        @apply rounded-full px-4 py-2 transition-colors duration-200;
        background-color: var(--primary);
        color: var(--text-primary);
    }
    .taxi-btn:hover {
        background-color: var(--hover-primary);
    }

    .nav-menu {
        @apply hidden md:flex space-x-4 items-center;
    }

    .mobile-menu {
        @apply fixed top-0 right-0 w-64 h-full bg-gray-800/80 backdrop-blur-sm
               transform translate-x-full transition-transform duration-300 ease-in-out z-50;
    }

    @media (min-width: 768px) {
        .mobile-menu {
            display: none !important;
        }
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
        display: block !important;
    }

    .hamburger-btn {
        @apply md:hidden p-2 rounded-lg transition-colors duration-200 z-50;
        display: block;
        background-color: var(--primary);
    }
    .hamburger-btn:hover {
        background-color: var(--hover-primary);
    }

    .mobile-menu-items {
        @apply flex flex-col space-y-4 p-4 mt-16;
        display: block;
    }

    .mobile-menu-overlay {
        @apply fixed inset-0 bg-black bg-opacity-50 z-40 hidden;
    }

    .mobile-menu-items a {
        @apply block py-2 px-4 rounded-lg transition-colors duration-200;
        color: var(--text-inverse);
    }
    .mobile-menu-items a:hover {
        background-color: var(--primary);
        color: var(--text-primary);
    }

    .taxi-table {
        @apply w-full border-collapse border border-gray-200 bg-white shadow-lg rounded-lg overflow-hidden;
    }

    .taxi-table th {
        @apply bg-gray-50 p-4 text-left font-semibold text-gray-600 border-b border-gray-200 whitespace-nowrap;
    }

    .taxi-table td {
        @apply p-4 border-t border-gray-200;
    }

    .taxi-table tbody tr:hover {
        @apply bg-gray-50;
    }

    .cookie-banner {
        @apply fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4;
    }
}

/* Custom styles that can't be handled by Tailwind */
.mobile-menu.active {
    transform: translateX(0);
}

@media (max-width: 768px) {
    .hamburger-btn {
        display: block !important;
    }
}