/* ==========================================================================
   1. SEITEN-HINTERGRUND (Edles Hellgrau)
   ========================================================================== */
body {
    background-color: #f4f6f9 !important;
}

.site-container {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}


/* ==========================================================================
   2. MENÜ-BAR (Suchbereich bleibt weiß, Menü-Box wird grau)
   ========================================================================== */
.header {
    background-color: #ffffff !important;
}

/* WICHTIG: Das justify-content holt deine engen Abstände zurück! */
.header .mod-menu,
.navigation-wrapper {
    background-color: #f1f5f9 !important; 
    padding: 6px 10px !important;         
    border-radius: 6px !important;       
    display: flex !important;
    justify-content: flex-start !important; 
}


/* ==========================================================================
   3. HAUPTMENÜ-BUTTONS & DROPDOWN-HOVER (DEIN ORIGINAL-CODE)
   ========================================================================== */
.hoverdd > li > a, 
.hoverdd > li > span {
    padding: 6px 10px !important;         
    margin: 0 1px;                        
    border-radius: 4px !important;        
    background-color: #cbd5e1 !important; 
    color: #1e293b !important;            
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover-Effekt: Blau beim Drüberfahren */
.hoverdd > li:hover > a,
.hoverdd > li:hover > span {
    background-color: #0d6efd !important; 
    color: #ffffff !important;            
}

/* Aktiver Menüpunkt (Hervorhebung) */
.hoverdd > li.active > a,
.hoverdd > li.current > a {
    background-color: #1e3a8a !important; 
    color: #ffffff !important;            
    font-weight: bold !important;
}

/* Dropdown beim Drüberfahren öffnen */
@media (min-width: 992px) {
    .hoverdd li:hover > ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Styling für das aufklappende Dropdown-Fenster */
.hoverdd ul {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;        
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    padding: 4px 0 !important;            
}

.hoverdd ul li a {
    padding: 4px 12px !important;         
}

.hoverdd ul li a:hover {
    background-color: #f1f5f9 !important;
    color: #0d6efd !important;
}

/* ==========================================================================
   4. KORREKTUR FÜR DIE PFEILE (NUR DIESER BEFEHL IST NEU)
   ========================================================================== */

/* Zwingt das maskierte Bootstrap-Symbol deiner Seite auf Schwarz */
.header button.mm-toggler::after {
    background-color: #1e293b !important;
}

/* Lässt den Pfeil weiß leuchten, wenn man mit der Maus über den Button fährt */
.header li:hover button.mm-toggler::after {
    background-color: #ffffff !important;
}

/* ==========================================================================
   5. SPEZIFISCHE FIXES FÜR ABSTÄNDE UND DOPPELTE PFEILE
   ========================================================================== */

/* 1. Abstände der Menüpunkte verringern */
.hoverdd {
    display: flex !important;
    gap: 4px !important;       /* Bestimmt den exakten Abstand zwischen den grauen Boxen */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.hoverdd > li {
    margin: 0 !important;     /* Entfernt störende Standard-Außenabstände */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. Doppelte Pfeile entfernen (Versteckt das standardmäßige Bootstrap-Dreieck) */
.hoverdd .dropdown-toggle::after,
.hoverdd .deeper > a::after,
.hoverdd .deeper > span::after {
    display: none !important;
    content: none !important;
}

/* 3. Den verbleibenden mm-toggler-Pfeil sauber neben den Text setzen */
.hoverdd button.mm-toggler {
    margin-left: -4px !important; /* Zieht den Pfeil näher an das Textfeld heran */
    padding: 0 4px !important;    /* Verhindert, dass der Button die Box sprengt */
}

/* ==========================================================================
   6. PFEIL-FIX: DOPPELTES DREIECK ENTFERNEN
   ========================================================================== */

/* Setzt das fehlerhafte Symbol komplett zurück */
.header button.mm-toggler::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important; /* Entfernt die fehlerhafte Maske */
    
    /* Erzeugt ein echtes, sauberes CSS-Dreieck nach unten */
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 5px solid #1e293b !important; 
    
    /* Positionierung */
    vertical-align: middle !important;
    margin-left: 2px !important;
}

/* Ändert die Farbe des neuen Dreiecks beim Hovern auf Weiß */
.header li:hover button.mm-toggler::after {
    border-top-color: #ffffff !important;
    background-color: transparent !important;
}

/* ==========================================================================
   7. ZWEISPRACHIGES MENÜ: DAUERHAFTE ANZEIGE ÜBER BEFORE (PC & HANDY)
   ========================================================================== */

/* Erzwingt das Untereinander-Layout auf den echten Menü-Links */
.header .mod-menu li a, 
.header .mod-menu li span,
.navigation-wrapper li a,
.navigation-wrapper li span,
.nav li a,
.nav li span {
    display: inline-flex !important;
    flex-direction: column-reverse !important; /* Setzt Deutsch nach oben, Arabisch nach unten */
    align-items: center !important;          /* Zentriert beide Sprachen */
    text-align: center !important;
    line-height: 1.3 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Erzeugt die arabische Zeile dauerhaft über das unblockierte Before-Element */
.header .mod-menu li a::before,
.header .mod-menu li span::before,
.navigation-wrapper li a::before,
.navigation-wrapper li span::before,
.nav li a::before,
.nav li span::before {
    display: block !important;
    font-size: 0.8rem !important;            /* Arabisch dezent kleiner */
    font-weight: normal !important;
    color: #475569 !important;               /* Dunkelgrau für inaktive Buttons */
    opacity: 0.9 !important;
    margin-bottom: 2px !important;           /* Kleiner Abstand zum deutschen Wort */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Aktiv-Zustand: Arabisch auf dem blauen Button (Home) weiß leuchten lassen */
.header .mod-menu li.active a::before,
.header .mod-menu li.current a::before,
.nav li.active a::before,
.nav li.current a::before {
    color: #ffffff !important;
}

/* Farbwechsel für das Arabische beim Drüberfahren (PC-Hover) */
.header .mod-menu li:hover a::before,
.header .mod-menu li:hover span::before,
.nav li:hover a::before,
.nav li:hover span::before {
    color: #ffffff !important;               /* Schaltet Text beim Hovern auf Weiß um */
    opacity: 1 !important;
}

/* ==========================================================================
   EXAKTE ZUORDNUNG FÜR DEINE 6 SICHTBAREN MENÜBOXEN (ÜBER BEFORE)
   ========================================================================== */

/* 1. Box: Home */
.header .mod-menu > li:nth-child(1) a::before, .nav > li:nth-child(1) a::before { content: "الرئيسية" !important; }

/* 2. Box: Gebetszeiten */
.header .mod-menu > li:nth-child(2) a::before, .nav > li:nth-child(2) a::before { content: "مواقيت الصلاة" !important; }

/* 3. Box: Verhaltensregeln Moschee (Jetzt exakt übersetzt) */
.header .mod-menu > li:nth-child(3) a::before, .nav > li:nth-child(3) a::before { content: "آداب المسجد" !important; }

/* 4. Box: Kontakt (Klassisch für Webseiten: Kontaktier uns) */
.header .mod-menu > li:nth-child(4) a::before, .nav > li:nth-child(4) a::before { content: "اتصل بنا" !important; }

/* 5. Box: Spenden (Kurz, universell und absolut korrekt für jede Art von Spende) */
.header .mod-menu > li:nth-child(5) a::before, .nav > li:nth-child(5) a::before { content: "تبرعات" !important; }

/* 6. Box: Impressum (Bedeutet: "Rechtliche Hinweise" - versteht jeder Araber sofort) */
.header .mod-menu > li:nth-child(6) a::before, .nav > li:nth-child(6) a::before { content: "إشعار قانوني" !important; }


/* ==========================================================================
   8. ERWEITERUNG: ZWEISPRACHIGES UNTERMENÜ (NUR FÜR GEBETSZEITEN)
   ========================================================================== */

/* Aktiviert das Untereinander-Layout AUSSCHLIESSLICH für das 2. Hauptmenü-Dropdown */
.header .mod-menu > li:nth-child(2) li a,
.navigation-wrapper > li:nth-child(2) li a,
.nav > li:nth-child(2) li a {
    display: inline-flex !important;
    flex-direction: column-reverse !important; /* Deutsch oben, Arabisch unten */
    align-items: flex-start !important;        /* Text im Dropdown linksbündig */
    text-align: left !important;
    padding-left: 12px !important;
    line-height: 1.3 !important;
}

/* Erzeugt die arabische Unterzeile dauerhaft NUR für das 2. Hauptmenü-Dropdown */
.header .mod-menu > li:nth-child(2) li a::before,
.navigation-wrapper > li:nth-child(2) li a::before,
.nav > li:nth-child(2) li a::before {
    display: block !important;                 /* Zwingt den Text zur dauerhaften Anzeige */
    font-size: 0.8rem !important;
    font-weight: normal !important;
    color: #475569 !important;                 /* Gut lesbares Dunkelgrau auf weißem Grund */
    opacity: 0.9 !important;
    margin-bottom: 2px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Farbwechsel zu Blau beim Drüberfahren (Hover) NUR für diese Unterpunkte */
.header .mod-menu > li:nth-child(2) li:hover a::before,
.nav > li:nth-child(2) li:hover a::before {
    color: #0d6efd !important;
}

/* ==========================================================================
   DIREKTE POSITIONIERUNG (NUR IM ZWEITEN DROPDOWN-MENÜ)
   ========================================================================== */

/* Unterpunkt 1 im 2. Dropdown: Gebetszeiten ganzes Jahr */
.header .mod-menu > li:nth-child(2) li:nth-child(1) a::before, 
.nav > li:nth-child(2) li:nth-child(1) a::before { 
    content: "مواقيت الصلاة لعام كامل" !important; 
}

/* Unterpunkt 2 im 2. Dropdown: Sonnenaufgang und Sonnenuntergang */
.header .mod-menu > li:nth-child(2) li:nth-child(2) a::before, 
.nav > li:nth-child(2) li:nth-child(2) a::before { 
    content: "شروق الشمس وغروبها" !important; 
}

/* ==========================================================================
   9. MODERNISIERUNG DES JOOMLA-STANDARD-KONTAKTFORMULARS
   ========================================================================== */

/* Rahmen um das gesamte Formular legen */
#contact-form {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
    font-family: sans-serif !important;
}

/* Eingabefelder (Name, E-Mail, Betreff) und Textbereich modernisieren */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    margin-bottom: 5px !important;
    background-color: #ffffff !important;
}

/* Fokus-Effekt: Wenn der Nutzer in ein Feld klickt */
#contact-form input:focus,
#contact-form textarea:focus {
    border-color: #0d6efd !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

/* Beschriftungen (Labels) fetten und lesbarer machen */
#contact-form label {
    font-weight: bold !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
    font-size: 0.9rem !important;
}

/* Den Sende-Button im Joomla-Design verschönern */
#contact-form button[type="submit"],
#contact-form .btn-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2) !important;
    transition: background-color 0.2s ease !important;
}

/* Hover-Effekt für den Sende-Button */
#contact-form button[type="submit"]:hover,
#contact-form .btn-primary:hover {
    background-color: #0b5ed7 !important;
}
/* ==========================================================================
   10. KONTAKT-ÜBERSCHRIFTEN AUSBLENDEN (UNIVERSAL-FIX)
   ========================================================================== */

/* Blendet das große, doppelte Wort "Kontakt" ganz oben sicher aus */
.com_contact h1,
.com_contact .page-header,
.com_contact h2:first-of-type,
.com_contact_address h2 {
    display: none !important;
}

/* ==========================================================================
   11. Kontaktformular-Text zweisprachig
   ========================================================================== */

/* Zwingt das Label, Deutsch und den Stern in einer Zeile zu lassen */
#contact-form label {
    display: block !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
    color: #1e293b !important;
}

/* Verhindert, dass der Stern (*) in eine eigene Zeile rutscht */
#contact-form label span.star,
#contact-form label .asterisk,
#contact-form label span.required {
    display: inline-block !important;
    margin-left: 4px !important;
    color: #dc3545 !important; /* Macht den Stern schön rot, falls er es noch nicht ist */
}

/* Erzeugt die arabische Unterzeile mit einem echten Zeilenumbruch (\A) */
#contact-form label::after {
    display: block !important;
    white-space: pre-line !important; /* Erlaubt den Zeilenumbruch im CSS-Content */
    font-size: 0.85rem !important;    /* Arabisch dezent kleiner */
    font-weight: normal !important;
    color: #475569 !important;        /* Angenehmes Dunkelgrau */
    opacity: 0.85 !important;
    margin-top: 4px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Blendet die automatische Generierung beim Hinweistext "Benötigtes Feld" aus */
#contact-form .control-group:first-of-type label::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   EXAKTE UND DIREKTE ÜBERSETZUNGEN (NUR FÜR DIE REINEN EINGABEFELDER)
   ========================================================================== */

/* 0. Hinweistext ganz oben: Benötigtes Feld (Beide Zeilen einheitlich rot) */
#contact-form .control-group:first-of-type label,
#contact-form .form-horizontal .control-group:first-of-type label {
    color: #dc3545 !important; /* Färbt den deutschen Text und das Sternchen rot */
}

#contact-form .control-group:first-of-type label::after,
#contact-form .form-horizontal .control-group:first-of-type label::after {
    display: block !important;
    content: "* الحقول المطلوبة" !important;
    color: #dc3545 !important; /* Hält den arabischen Text rot */
    margin-top: 2px !important;
}

/* 1. Feld: Name */
#contact-form label[for="jform_contact_name"]::after,
#contact-form label[for="contact_name"]::after { 
    content: "الاسم" !important; 
    margin-top: 2px !important;
}

/* 2. Feld: E-Mail */
#contact-form label[for="jform_contact_email"]::after,
#contact-form label[for="contact_email"]::after { 
    content: "البريد الإلكتروني" !important; 
    margin-top: 2px !important;
}

/* 3. Feld: Betreff */
#contact-form label[for="jform_contact_email_subject"]::after,
#contact-form label[for="contact_subject"]::after,
#contact-form label[for="contact_email_subject"]::after,
#contact-form .control-group:nth-of-type(4) label::after { 
    content: "الموضوع" !important; 
    margin-top: 2px !important;
}

/* 4. Feld: Nachricht */
#contact-form label[for="jform_contact_message"]::after,
#contact-form label[for="contact_message"]::after { 
    content: "الرسالة" !important; 
    margin-top: 2px !important;
}

/* ==========================================================================
   ZWEISPRACHIGER SENDE-BUTTON
   ========================================================================== */
#contact-form button[type="submit"] {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 10px 25px !important;
}

#contact-form button[type="submit"]::after {
    content: "ارسال الرسالة" !important;
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   ZWEISPRACHIGER SENDE-BUTTON
   ========================================================================== */
#contact-form button[type="submit"] {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 10px 25px !important;
}

#contact-form button[type="submit"]::after {
    content: "ارسال الرسالة" !important;
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    opacity: 0.9 !important;
}


.prayertime-container a:hover {
    background-color: #0b5ed7 !important;
}