/* ---------------------------------------------------- */
        /* 1. TAILWIND CONFIG & CUSTOM CSS VARIABLES            */
        /* ---------------------------------------------------- */

        /* AWO-Farben als Tailwind-Konfiguration */
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'awo-red': '#e3001b', /* Offizielles AWO Rot */
                        'awo-red-hover': '#c00018', /* Dunkler für Hover */
                    },
                    fontFamily: {
                        // Standardmäßiger Font, Inter wird über den Browser geladen
                        sans: ['Inter', 'sans-serif'],
                    }
                }
            }
        }


/* AWO Farben */
.awo-red { background-color: #D62020; }
.awo-red-hover:hover { background-color: #a31818; }
.text-awo-red { color: #D62020; }
.border-awo-red { border-color: #D62020; }
.awo-red-bg { background-color: #D92323; }
.awo-red-text { color: #D92323; }
        
/* Hintergrundfarbe für die AWO-Elemente, da Tailwind-Utilities nicht immer direkt externe Namen unterstützen */
.awo-red {
   background-color: #e3001b;
}
.text-awo-red {
   color: #e3001b;
}

        /* ---------------------------------------------------- */
        /* 2. CUSTOM CSS FÜR MOBILE DROPDOWN TRANSITION         */
        /* ---------------------------------------------------- */

        /* Stil für das Dropdown-Icon (Kleiner Pfeil) */
        .dropdown-arrow {
            transition: transform 0.3s ease-in-out;
        }
        
        /* Pfeil-Rotation für Desktop- und Mobile-Menüs, wenn geöffnet */
        .dropdown-toggle[aria-expanded="true"] .dropdown-arrow,
        .mobile-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
            transform: rotate(180deg);
        }

        /* Animation für das Aus- und Einblenden des Dropdown-Inhalts (Mobile) */
        .mobile-dropdown-content {
            transition: all 0.3s ease-out;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            /* Sorgt dafür, dass Links nicht geklickt werden können, wenn es unsichtbar ist */
            pointer-events: none; 
            padding-top: 0;
            padding-bottom: 0;
        }

        /* Zustand, wenn das Dropdown geöffnet ist (durch JS gesetzt) */
        .mobile-dropdown-content.visible {
            opacity: 1;
            /* Muss groß genug sein, um den Inhalt anzuzeigen, ohne abgeschnitten zu werden */
            max-height: 500px; 
            pointer-events: auto;
            /* Fügt oben/unten etwas Platz hinzu */
            padding-top: 0.5rem; 
            padding-bottom: 0.5rem;
        }

        /* ---------------------------------------------------- */
        /* 3. HARD-CODED AWO COLORS (FALLBACK/KONSISTENZ)       */
        /* ---------------------------------------------------- */

        /* Nutzung der im Config definierten Farben als Utility-Klassen */
        .bg-awo-red { background-color: #e3001b; }
        .text-awo-red { color: #e3001b; }
        .hover\:bg-awo-red-hover:hover { background-color: #c00018; }