/* 
 * Schwarzlicht Minigolf Graz - Komplettes Design
 * Template: Cassiopeia
 * Features: Hintergrund-Slideshow, Transparente Module, Responsive Design
 */

/* Google Fonts laden */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fredoka:wght@300;400;500;600;700&display=swap');

/* 
 * HINTERGRUND-SLIDESHOW MIT FUNKTIONIERENDEM Z-INDEX
 * 10 Bilder, 5 Sekunden pro Bild, sanfte Übergänge
 */

/* Alle Bilder vorladen */
html body::after 
{
    content: '';
    position: absolute;
    top: -9999px;
    left: -9999px;
    background-image: 
        url('/media/templates/site/cassiopeia/images/backgrounds/bg1.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg2.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg3.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg4.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg5.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg6.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg7.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg8.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg9.jpg'),
        url('/media/templates/site/cassiopeia/images/backgrounds/bg10.jpg');
}

/* Basis-Ebene für Slideshow */
html body::before 
{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Funktionierender z-index */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg1.jpg');
    animation: backgroundSlideshow 75s infinite;
}

/* Animation für alle 10 Bilder */
@keyframes backgroundSlideshow 
{
    0%, 4% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg1.jpg'); }
    10%, 14% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg2.jpg'); }
    20%, 24% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg3.jpg'); }
    30%, 34% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg4.jpg'); }
    40%, 44% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg5.jpg'); }
    50%, 54% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg6.jpg'); }
    60%, 64% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg7.jpg'); }
    70%, 74% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg8.jpg'); }
    80%, 84% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg9.jpg'); }
    90%, 94% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg10.jpg'); }
    100% { background-image: url('/media/templates/site/cassiopeia/images/backgrounds/bg1.jpg'); }
}

/* 
 * GRUNDLAYOUT UND FONTS
 */
body 
{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* HTML-Element für vollständige Abdeckung */
html 
{
    scroll-behavior: smooth;
}

/* Überschriften - Verspielte Schrift */
h1, h2, h3, h4, h5, h6,
.page-header h1,
.item-page h1,
.blog-item h2 a 
{
    font-family: 'Fredoka', cursive;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 
 * ALLE MODULPOSITIONEN TRANSPARENT MACHEN + Z-INDEX
 */

/* Header-Bereich transparent */
.container-header 
{
    background: transparent !important;
    backdrop-filter: blur(1px);
    position: relative;
    z-index: 10;
}

/* Topbar transparent */
.container-topbar 
{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    background: transparent !important;
    padding: 12px 15px;
    order: -1;
    width: 100%;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 20; /* Über dem Hintergrund */
}

/* Alle anderen Modulpositionen transparent */
.container-below-top,
.container-menu,
.container-search,
.container-banner,
.container-top-a,
.container-top-b,
.container-main-top,
.container-main-bottom,
.container-breadcrumbs,
.container-sidebar-left,
.container-sidebar-right,
.container-bottom-a,
.container-bottom-b,
.container-footer 
{
    background: transparent !important;
    position: relative;
    z-index: 5; /* Über dem Hintergrund */
}

/* Module selbst transparent */
.moduletable,
.module,
.card 
{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 
 * CONTENT-BEREICH - SCHWARZ MIT 30% TRANSPARENZ
 */
.container-component,
.com-content-article,
.com-content-category,
.blog-item,
.item-page,
.article-content,
.blog 
{
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10; /* Über dem Hintergrund */
}


/* 
 * NAVIGATION - HORIZONTAL IN TOPBAR
 */

/* Horizontales Menü-Layout */
.container-topbar .mod-menu 
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

/* Menüpunkte */
.container-topbar .nav-item 
{
    margin: 0 20px;
    position: relative;
}

/* Menülinks */
.container-topbar .nav-link 
{
    color: #ffffff;
    text-decoration: none;
    padding: 12px 18px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    border-radius: 6px;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Hover-Effekt - Neon-Grün */
.container-topbar .nav-link:hover 
{
    color: #00ff00;
    background-color: rgba(0, 255, 0, 0.15);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    transform: translateY(-2px);
}

/* Aktiver Menüpunkt */
.container-topbar .nav-link.active,
.container-topbar .current .nav-link 
{
    color: #00ffff;
    background-color: rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 12px rgba(0, 255, 255, 1);
}

/* 
 * LOGO-BEREICH TRANSPARENT
 */
.container-header .navbar-brand,
.container-header .brand 
{
    background: transparent !important;
    color: transparent !important;
}

/* Cassiopeia-Text unsichtbar machen */
.container-header .navbar-brand img,
.container-header .brand img 
{
    opacity: 0;
}

/* 
 * HAMBURGER-MENÜ FÜR MOBILE
 */
.container-topbar .navbar-toggler 
{
    color: #00ff00;
    border: 2px solid #00ff00;
    background-color: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    transition: all 0.3s ease;
}

.container-topbar .navbar-toggler:hover 
{
    color: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

/* Hamburger-Icon mit Neon-Farben */
.container-topbar .navbar-toggler-icon 
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300ff00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 
 * LINKS UND BUTTONS
 */
a 
{
    color: #00ff00;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover 
{
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

/* Buttons */
.btn, 
.button 
{
    background: linear-gradient(45deg, #00ff00, #00ffff);
    border: none;
    color: #000000;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    text-shadow: none;
}

.btn:hover,
.button:hover 
{
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.4);
}

/* 
 * RESPONSIVE DESIGN - MOBILE ANPASSUNGEN
 */
@media (max-width: 991.98px) 
{
    /* Mobile Topbar */
    .container-topbar 
    {
        padding: 10px 15px;
    }
    
    /* Mobile Menü kollabiert */
    .container-topbar .navbar-collapse 
    {
        margin-top: 15px;
        background-color: rgba(0, 0, 0, 0.9);
        border-radius: 8px;
        padding: 20px;
        border: 1px solid rgba(0, 255, 0, 0.3);
        backdrop-filter: blur(10px);
    }
    
    /* Mobile Menüpunkte vertikal */
    .container-topbar .mod-menu 
    {
        flex-direction: column;
        text-align: center;
    }
    
    .container-topbar .nav-item 
    {
        margin: 8px 0;
        width: 100%;
    }
    
    .container-topbar .nav-link 
    {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 20px;
    }
    
    /* Content für Mobile anpassen */
    .container-component,
    .com-content-article,
    .blog-item 
    {
        margin: 10px 0;
        padding: 20px 15px;
        border-radius: 8px;
    }
}

@media (max-width: 576px) 
{
    /* Sehr kleine Bildschirme */
    .container-topbar 
    {
        padding: 8px 10px;
    }
    
    .container-topbar .nav-link 
    {
        font-size: 14px;
        padding: 12px 15px;
    }
    
    .container-component 
    {
        padding: 15px 10px;
    }
    
    /* Kleinere Überschriften auf Mobile */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
}

/* 
 * ZUSÄTZLICHE SCHWARZLICHT-EFFEKTE
 */

/* Neon-Glow Linie oben */
.container-topbar::before 
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #00ff00 25%, 
        #00ffff 50%, 
        #ff00ff 75%, 
        transparent 100%);
    opacity: 0.8;
    animation: neonFlow 3s infinite;
}

/* Animation für Neon-Linie */
@keyframes neonFlow 
{
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Subtle Glow-Effekt für Content */
.container-component:hover 
{
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

/* 
 * FOOTER STYLING
 */
.container-footer 
{
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.container-footer,
.container-footer * 
{
    color: #cccccc;
    font-size: 14px;
}

/* Topbar Navigation - 67% schwarzer Hintergrund */
.container-topbar 
{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(0, 0, 0, 0.67) !important; /* 67% schwarz */
    padding: 12px 15px;
    order: -1;
    width: 100%;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 20;
    border-radius: 8px; /* Leicht gerundete Ecken */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle Border */
}

/* Top-A, Top-B, Bottom-A, Bottom-B - 67% schwarzer Hintergrund */
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b 
{
    background: rgba(0, 0, 0, 0.67) !important; /* 67% schwarz */
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 5;
}

/* 
 * OPTIMIERUNGEN FÜR PERFORMANCE
 */
* 
{
    box-sizing: border-box;
}

/* Bessere Schrift-Rendering */
body 
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Seitenüberschrift "HOME" im Content verstecken */
/* Nur auf der Startseite die H1 verstecken */
body.home .page-header h1,
body.itemid-101 h1:first-child  /* 101 ist meist die Home-ID */
{
    display: none !important;
}

/* 
 * Funktion: Einfache 50/50 Aufteilung für Top-A/Top-B und Bottom-A/Bottom-B
 * Beschreibung: Überschreibt das Cassiopeia Grid für exakte 50% Breite
 * Parameter: Media Query für Desktop-Ansicht ab 992px
 */
@media (min-width: 992px) 
{
    /* 
     * Funktion: Grid-Template komplett überschreiben
     * Beschreibung: Vereinfachtes Grid mit 50/50 Aufteilung
     */
    .site-grid 
    {
        grid-template-areas: 
            "banner banner"
            "top-a top-b"                           /* Exakt 50/50 ohne Abstände */
            "comp comp"
            "bot-a bot-b"                           /* Exakt 50/50 ohne Abstände */
            !important; /* Wichtig für Überschreibung */
        display: grid !important; /* Grid-Display sicherstellen */
        grid-template-columns: 1fr 1fr !important; /* Exakt 50% + 50% */
        gap: 0 !important; /* Kein Abstand zwischen Elementen */
        width: 100% !important; /* Volle Breite */
        max-width: 1320px !important; /* Maximale Breite wie Topbar */
        margin: 0 auto !important; /* Zentrieren */
    }
    
    /* 
     * Funktion: Container auf exakt 50% setzen
     * Beschreibung: Jeder Container nimmt exakt die Hälfte der verfügbaren Breite
     */
    .container-top-a,
    .container-top-b,
    .container-bottom-a,
    .container-bottom-b 
    {
        display: block !important; /* Block-Display für Inhalt */
        width: 100% !important; /* Volle Breite des Grid-Bereichs */
        max-width: none !important; /* Keine Breitenbegrenzung */
        margin: 0 !important; /* Kein Margin */
        padding: 15px !important; /* Innenabstand für Inhalt */
        float: none !important; /* Kein Float */
        position: relative !important; /* Relative Position */
        box-sizing: border-box !important; /* Padding in Breite einrechnen */
    }
    
    /* 
     * Funktion: Grid-Areas für Container definieren
     * Beschreibung: Weist den Containern ihre Grid-Bereiche zu
     */
    .container-top-a 
    {
        grid-area: top-a !important; /* Grid-Bereich für Top-A */
    }
    
    .container-top-b 
    {
        grid-area: top-b !important; /* Grid-Bereich für Top-B */
    }
    
    .container-bottom-a 
    {
        grid-area: bot-a !important; /* Grid-Bereich für Bottom-A */
    }
    
    .container-bottom-b 
    {
        grid-area: bot-b !important; /* Grid-Bereich für Bottom-B */
    }
    
    /* 
     * Funktion: Banner und Component Areas definieren
     * Beschreibung: Stellt sicher, dass andere Bereiche funktionieren
     */
    .container-banner 
    {
        grid-area: banner !important; /* Grid-Bereich für Banner */
    }
    
    .container-component 
    {
        grid-area: comp !important; /* Grid-Bereich für Content */
    }
}
    
    /* 
     * Alternative Lösung: Falls das Grid-System nicht überschrieben werden kann
     * Beschreibung: Flexbox-Fallback-Lösung
     */
    /*
    .site-grid 
    {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .container-top-a,
    .container-top-b 
    {
        display: inline-flex !important;
        width: calc(50% - 0.5rem) !important;
        margin: 0.25rem !important;
    }
    
    .container-bottom-a,
    .container-bottom-b 
    {
        display: inline-flex !important;
        width: calc(50% - 0.5rem) !important;
        margin: 0.25rem !important;
    }
    */
}

/*
 * Funktion: Überschriften-Styling in den Container-Bereichen
 * Beschreibung: Helle Überschriften mit leichtem Glow-Effekt
 * Parameter: color - Sehr helles Grau für Überschriften
 * Parameter: text-shadow - Stärkerer Schatten für bessere Sichtbarkeit
 */

.container-top-a h1, .container-top-a h2, .container-top-a h3, .container-top-a h4, .container-top-a h5, .container-top-a h6,
.container-top-b h1, .container-top-b h2, .container-top-b h3, .container-top-b h4, .container-top-b h5, .container-top-b h6,
.container-bottom-a h1, .container-bottom-a h2, .container-bottom-a h3, .container-bottom-a h4, .container-bottom-a h5, .container-bottom-a h6,
.container-bottom-b h1, .container-bottom-b h2, .container-bottom-b h3, .container-bottom-b h4, .container-bottom-b h5, .container-bottom-b h6
{
    color: #ffffff !important; /* Weißer Text für Überschriften */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important; /* Starker Schatten */
    margin-bottom: 15px !important; /* Abstand nach unten */
}

.container-top-a *, 
.container-top-b *, 
.container-bottom-a *, 
.container-bottom-b * 
{
    color: #cccccc !important; /* grauer Text */
    margin-bottom: 5px !important; /* Abstand nach unten */
}


/* 
 * Funktion: Sigplus Integration für Schwarzlicht Minigolf Design
 * Beschreibung: Sigplus-Galerie an dein bestehendes transparentes Design anpassen
 * Kompatibel mit: Deiner vorhandenen user.css und Hintergrund-Slideshow
 */

/* 
 * Funktion: Sigplus-Container an dein Design anpassen
 * Beschreibung: Transparenter Hintergrund mit Blur-Effekt wie deine anderen Module
 */
.sigplus
{
    background-color: rgba(0, 0, 0, 0.6) !important; /* Wie deine Content-Bereiche */
    border-radius: 12px !important; /* Wie deine anderen Container */
    padding: 25px !important; /* Einheitliches Padding */
    margin: 20px 0 !important; /* Einheitlicher Margin */
    backdrop-filter: blur(5px) !important; /* Blur-Effekt */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle Border */
    position: relative !important; /* Position für z-index */
    z-index: 10 !important; /* Über dem Hintergrund */
}

/* 
 * Funktion: Sigplus-Thumbnails stylen
 * Beschreibung: Kleine Vorschaubilder mit Neon-Hover-Effekten
 */
.sigplus .sigplus-thumbnail
{
    display: inline-block !important; /* Nebeneinander anordnen */
    margin: 5px !important; /* Abstand zwischen Thumbnails */
    border-radius: 6px !important; /* Abgerundete Ecken */
    overflow: hidden !important; /* Ecken abschneiden */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Weißer Rahmen */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; /* Schatten */
}

/* 
 * Funktion: Thumbnail-Bilder formatieren
 * Beschreibung: Einheitliche Größe und Proportionen
 */
.sigplus .sigplus-thumbnail img
{
    width: 120px !important; /* Feste Breite */
    height: 80px !important; /* Feste Höhe */
    object-fit: cover !important; /* Proportional beschneiden */
    cursor: pointer !important; /* Zeiger-Cursor */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
}

/* 
 * Funktion: Neon-Hover-Effekt für Thumbnails
 * Beschreibung: Grüner Glow-Effekt passend zu deinem Schwarzlicht-Design
 */
.sigplus .sigplus-thumbnail:hover
{
    transform: scale(1.1) !important; /* Leichte Vergrößerung */
    border-color: #00ff00 !important; /* Neon-grüner Rahmen */
    box-shadow: 
        0 0 15px rgba(0, 255, 0, 0.6) !important, /* Grüner Glow */
        0 4px 15px rgba(0, 0, 0, 0.5) !important; /* Schwarzer Schatten */
}

.sigplus .sigplus-thumbnail:hover img
{
    filter: brightness(1.2) !important; /* Aufhellung */
}

/* 
 * Funktion: Lightbox/Modal an dein Design anpassen
 * Beschreibung: Dunkler Hintergrund mit Neon-Akzenten
 */
.sigplus-lightbox,
.sigplus-modal
{
    background-color: rgba(0, 0, 0, 0.9) !important; /* Fast schwarzer Hintergrund */
    backdrop-filter: blur(10px) !important; /* Starker Blur */
    border: 2px solid rgba(0, 255, 0, 0.3) !important; /* Grüner Rahmen */
    border-radius: 8px !important; /* Abgerundete Ecken */
    z-index: 9999 !important; /* Über allem anderen */
}

/* 
 * Funktion: Großes Bild im Lightbox stylen
 * Beschreibung: Optimale Darstellung mit Neon-Rahmen
 */
.sigplus-lightbox img,
.sigplus-modal img
{
    border-radius: 4px !important; /* Leicht abgerundete Ecken */
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.4) !important, /* Grüner Glow */
        0 0 60px rgba(0, 0, 0, 0.8) !important; /* Schwarzer Schatten */
    max-width: 90vw !important; /* Maximale Breite */
    max-height: 90vh !important; /* Maximale Höhe */
}

/* 
 * Funktion: Schließen-Button stylen
 * Beschreibung: Neon-Design für den Close-Button
 */
.sigplus-close,
.sigplus-lightbox .close
{
    color: #00ff00 !important; /* Neon-grün */
    background-color: rgba(0, 0, 0, 0.8) !important; /* Schwarzer Hintergrund */
    border: 2px solid #00ff00 !important; /* Grüner Rahmen */
    border-radius: 50% !important; /* Runder Button */
    width: 40px !important; /* Feste Breite */
    height: 40px !important; /* Feste Höhe */
    font-size: 20px !important; /* Große Schrift */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important; /* Glow-Effekt */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
}

.sigplus-close:hover,
.sigplus-lightbox .close:hover
{
    color: #00ffff !important; /* Cyan bei Hover */
    border-color: #00ffff !important; /* Cyan-Rahmen */
    text-shadow: 0 0 15px rgba(0, 255, 255, 1) !important; /* Stärkerer Glow */
    transform: scale(1.1) !important; /* Leichte Vergrößerung */
}

/* 
 * Funktion: Navigation-Buttons (Vor/Zurück) stylen
 * Beschreibung: Konsistente Neon-Navigation
 */
.sigplus-prev,
.sigplus-next,
.sigplus-lightbox .prev,
.sigplus-lightbox .next
{
    color: #00ff00 !important; /* Neon-grün */
    background-color: rgba(0, 0, 0, 0.8) !important; /* Schwarzer Hintergrund */
    border: 2px solid rgba(0, 255, 0, 0.5) !important; /* Grüner Rahmen */
    border-radius: 6px !important; /* Abgerundete Ecken */
    padding: 10px 15px !important; /* Innenabstand */
    font-size: 16px !important; /* Schriftgröße */
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6) !important; /* Glow */
    transition: all 0.3s ease !important; /* Übergänge */
}

.sigplus-prev:hover,
.sigplus-next:hover,
.sigplus-lightbox .prev:hover,
.sigplus-lightbox .next:hover
{
    border-color: #00ffff !important; /* Cyan bei Hover */
    color: #00ffff !important; /* Cyan-Text */
    text-shadow: 0 0 12px rgba(0, 255, 255, 1) !important; /* Stärkerer Glow */
}

/* 
 * Funktion: Responsive Anpassung für Mobile
 * Beschreibung: Kleinere Thumbnails auf Smartphones
 */
@media (max-width: 768px) 
{
    .sigplus .sigplus-thumbnail img
    {
        width: 100px !important; /* Kleinere Breite */
        height: 67px !important; /* Kleinere Höhe */
    }
    
    .sigplus
    {
        padding: 15px !important; /* Weniger Padding */
        margin: 10px 0 !important; /* Weniger Margin */
    }
}

@media (max-width: 480px) 
{
    .sigplus .sigplus-thumbnail img
    {
        width: 80px !important; /* Minimale Breite */
        height: 53px !important; /* Minimale Höhe */
    }
    
    .sigplus .sigplus-thumbnail
    {
        margin: 3px !important; /* Kleinere Abstände */
    }
}

/* 
 * Funktion: Sigplus-Caption/Titel stylen
 * Beschreibung: Bildunterschriften im Neon-Design
 */
.sigplus-caption,
.sigplus-title
{
    color: #ffffff !important; /* Weiße Schrift */
    font-family: 'Fredoka', cursive !important; /* Deine Headline-Schrift */
    font-weight: 600 !important; /* Fettere Schrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Schatten */
    text-align: center !important; /* Zentriert */
    margin-top: 10px !important; /* Abstand nach oben */
    font-size: 14px !important; /* Kleinere Schriftgröße */
}

/* 
 * Funktion: Sigplus-Container Grid-Layout
 * Beschreibung: Responsive Anordnung der Thumbnails
 */
.sigplus .sigplus-thumbnail-container
{
    display: flex !important; /* Flexbox-Layout */
    flex-wrap: wrap !important; /* Umbruch erlauben */
    justify-content: center !important; /* Zentriert */
    gap: 10px !important; /* Abstand zwischen Elementen */
    align-items: flex-start !important; /* Oben ausrichten */
}

/**
 * Funktion: Hauptmenü mit Fredoka-Schriftart anpassen
 * Beschreibung: Die gleiche verspielte Schriftart wie bei den Überschriften für das Hauptmenü verwenden
 * Kompatibel mit: Bestehendem Schwarzlicht-Design und transparenter Navigation
 */

/* 
 * Funktion: Hauptmenü-Navigation mit Fredoka-Schrift
 * Beschreibung: Alle Navigationslinks bekommen die gleiche Schriftart wie die Überschriften
 * Parameter: font-family wird auf 'Fredoka' gesetzt
 * Rückgabe: Einheitliches Schriftbild zwischen Überschriften und Navigation
 */
.container-topbar .nav-link,
.container-topbar .mod-menu a,
.navbar-nav .nav-link,
.menu-item a
{
    font-family: 'Fredoka', cursive !important; /* Gleiche Schrift wie Überschriften */
    font-weight: 500 !important; /* Mittlere Stärke für bessere Lesbarkeit */
    color: #ffffff !important; /* Weiße Schrift */
    text-decoration: none !important; /* Keine Unterstreichung */
    padding: 12px 18px !important; /* Ausreichend Padding */
    font-size: 18px !important; /* Etwas größere Schrift für bessere Sichtbarkeit */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
    border-radius: 6px !important; /* Abgerundete Ecken */
    position: relative !important; /* Für Effekte */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Textschatten wie Überschriften */
}

/* 
 * Funktion: Hover-Effekt für Hauptmenü mit Fredoka-Schrift
 * Beschreibung: Neon-Effekt beim Überfahren mit der Maus
 * Parameter: Farbe ändert sich zu Neon-Grün mit Glow-Effekt
 * Rückgabe: Visuelles Feedback für Benutzerinteraktion
 */
.container-topbar .nav-link:hover,
.container-topbar .mod-menu a:hover,
.navbar-nav .nav-link:hover,
.menu-item a:hover
{
    color: #00ff00 !important; /* Neon-grüne Schrift */
    background-color: rgba(0, 255, 0, 0.15) !important; /* Leichter grüner Hintergrund */
    text-shadow: 0 0 12px rgba(0, 255, 0, 0.9) !important; /* Starker Neon-Glow */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important; /* Äußerer Glow */
    transform: translateY(-2px) !important; /* Leichte Anhebung */
    font-weight: 600 !important; /* Etwas fetter beim Hover */
}

/* 
 * Funktion: Aktiver Menüpunkt mit Fredoka-Schrift
 * Beschreibung: Hervorhebung des aktuellen Menüpunkts
 * Parameter: Cyan-Farbe für aktiven Zustand
 * Rückgabe: Klare Orientierung für den Benutzer
 */
.container-topbar .nav-link.active,
.container-topbar .current .nav-link,
.navbar-nav .nav-link.active,
.menu-item.active a,
.current .menu-item a
{
    color: #00ffff !important; /* Cyan für aktiven Zustand */
    background-color: rgba(0, 255, 255, 0.2) !important; /* Leichter cyan Hintergrund */
    text-shadow: 0 0 15px rgba(0, 255, 255, 1) !important; /* Cyan-Glow */
    font-weight: 600 !important; /* Fettere Schrift für aktiven Zustand */
    border: 1px solid rgba(0, 255, 255, 0.3) !important; /* Subtle cyan Border */
}

/* 
 * Funktion: Mobile Hamburger-Menü mit Fredoka-Schrift
 * Beschreibung: Auch das mobile Menü bekommt die verspielte Schriftart
 * Parameter: Anpassungen für kleinere Bildschirme
 * Rückgabe: Konsistentes Design auf allen Geräten
 */
@media (max-width: 991.98px) 
{
    /* 
     * Funktion: Mobile Menüpunkte mit Fredoka formatieren
     * Beschreibung: Vertikale Anordnung mit einheitlicher Schriftart
     */
    .container-topbar .nav-link,
    .container-topbar .mod-menu a,
    .navbar-nav .nav-link
    {
        display: block !important; /* Vollbreite Darstellung */
        width: 100% !important; /* Komplette Breite nutzen */
        text-align: center !important; /* Zentrierte Ausrichtung */
        padding: 15px 20px !important; /* Größeres Padding für Touch */
        font-size: 16px !important; /* Angepasste Schriftgröße */
        margin: 8px 0 !important; /* Vertikaler Abstand */
        font-family: 'Fredoka', cursive !important; /* Schriftart beibehalten */
    }
    
    /* 
     * Funktion: Mobile Menü-Container anpassen
     * Beschreibung: Hintergrund und Rahmen für das ausgeklappte Menü
     */
    .container-topbar .navbar-collapse,
    .mobile-menu-container
    {
        margin-top: 15px !important; /* Abstand zum Hamburger-Button */
        background-color: rgba(0, 0, 0, 0.95) !important; /* Dunklerer Hintergrund */
        border-radius: 8px !important; /* Abgerundete Ecken */
        padding: 20px !important; /* Innenabstand */
        border: 1px solid rgba(0, 255, 0, 0.3) !important; /* Grüner Rahmen */
        backdrop-filter: blur(10px) !important; /* Blur-Effekt */
    }
}

/* 
 * Funktion: Sehr kleine Bildschirme (Smartphones)
 * Beschreibung: Weitere Anpassungen für sehr kleine Displays
 * Parameter: Reduzierte Schriftgrößen und Abstände
 * Rückgabe: Optimale Darstellung auch auf kleinen Handys
 */
@media (max-width: 576px) 
{
    .container-topbar .nav-link,
    .container-topbar .mod-menu a
    {
        font-size: 15px !important; /* Kleinere Schrift für sehr kleine Bildschirme */
        padding: 12px 15px !important; /* Reduziertes Padding */
        font-family: 'Fredoka', cursive !important; /* Schriftart beibehalten */
    }
}

/* 
 * Funktion: Dropdown-Menüs mit Fredoka-Schrift (falls vorhanden)
 * Beschreibung: Auch Untermenüs bekommen die verspielte Schriftart
 * Parameter: Styling für mehrstufige Navigation
 */
.dropdown-menu .dropdown-item,
.sub-menu a,
.navbar-nav .dropdown-menu a
{
    font-family: 'Fredoka', cursive !important; /* Fredoka für Dropdown-Items */
    font-weight: 400 !important; /* Normale Stärke für Untermenüs */
    color: #ffffff !important; /* Weiße Schrift */
    background-color: rgba(0, 0, 0, 0.8) !important; /* Dunkler Hintergrund */
    border: none !important; /* Keine Rahmen */
    padding: 10px 20px !important; /* Ausreichend Padding */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
}

/* 
 * Funktion: Dropdown-Hover-Effekt
 * Beschreibung: Hover-Effekt für Dropdown-Menü-Items
 */
.dropdown-menu .dropdown-item:hover,
.sub-menu a:hover
{
    color: #00ff00 !important; /* Neon-grün beim Hover */
    background-color: rgba(0, 255, 0, 0.2) !important; /* Grüner Hintergrund */
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; /* Glow-Effekt */
}

/* 
 * Funktion: Breadcrumbs mit Fredoka-Schrift (falls vorhanden)
 * Beschreibung: Auch die Brotkrümel-Navigation bekommt einheitliche Schrift
 */
.breadcrumb,
.breadcrumb-item,
.pathway
{
    font-family: 'Fredoka', cursive !important; /* Fredoka für Breadcrumbs */
    font-weight: 400 !important; /* Normale Stärke */
    font-size: 14px !important; /* Kleinere Schrift für Breadcrumbs */
}

/* 
 * Funktion: Logo-Bereich (falls Text vorhanden)
 * Beschreibung: Auch Markentext bekommt die Fredoka-Schrift
 */
.navbar-brand,
.brand-text,
.site-title
{
    font-family: 'Fredoka', cursive !important; /* Fredoka für Marke */
    font-weight: 700 !important; /* Fett für Logo/Titel */
    color: #ffffff !important; /* Weiße Schrift */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9) !important; /* Starker Schatten */
}

/**
 * Funktion: MetisMenu-Untermenü für Schwarzlicht Minigolf Design
 * Beschreibung: Transparente MetisMenu-Dropdowns mit Neon-Effekten statt weißem Hintergrund
 * Kompatibel mit: Bestehendem Cassiopeia MetisMenu und Fredoka-Schriftart
 */

/* 
 * Funktion: MetisMenu-Container stylen
 * Beschreibung: Ersetzt weißen Hintergrund durch transparenten mit Blur-Effekt
 * Parameter: background-color - Schwarzer transparenter Hintergrund
 * Parameter: backdrop-filter - Blur-Effekt für Tiefenwirkung
 * Rückgabe: MetisMenu passt zum Schwarzlicht-Design
 */
.mm-collapse,
.mm-show,
.metismenu-item .mm-collapse,
.metismenu-item ul,
ul.mm-collapse,
li.deeper ul
{
    background-color: rgba(0, 0, 0, 0.9) !important; /* Sehr dunkler transparenter Hintergrund */
    border: 1px solid rgba(0, 255, 0, 0.3) !important; /* Grüner Neon-Rahmen */
    border-radius: 8px !important; /* Abgerundete Ecken */
    backdrop-filter: blur(10px) !important; /* Starker Blur-Effekt */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.7) !important, /* Schwarzer Schatten */
        0 0 20px rgba(0, 255, 0, 0.3) !important; /* Grüner Glow */
    padding: 10px !important; /* Innenabstand */
    margin: 5px 0 !important; /* Abstand oben und unten */
    z-index: 9999 !important; /* Über allen anderen Elementen */
}

/* 
 * Funktion: MetisMenu-Button (Haupt-Item) mit Fredoka-Schrift
 * Beschreibung: Der klickbare Hauptmenü-Button bekommt Fredoka-Schrift
 * Parameter: font-family - Fredoka wie im Rest des Menüs
 * Parameter: background - Transparenter Hintergrund mit Neon-Effekten
 */
.mod-menu__heading,
.mm-toggler,
.mm-toggler-nolink,
button.mod-menu__heading
{
    font-family: 'Fredoka', cursive !important; /* Gleiche Schrift wie Hauptmenü */
    font-weight: 500 !important; /* Mittlere Stärke */
    color: #ffffff !important; /* Weiße Schrift */
    background-color: transparent !important; /* Transparenter Hintergrund */
    border: none !important; /* Kein Rahmen */
    padding: 12px 18px !important; /* Wie die anderen Menüpunkte */
    font-size: 18px !important; /* Gleiche Größe wie Hauptmenü */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Textschatten */
    cursor: pointer !important; /* Zeiger-Cursor */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
    border-radius: 6px !important; /* Abgerundete Ecken */
    position: relative !important; /* Für Effekte */
}

/* 
 * Funktion: MetisMenu-Button Hover-Effekt
 * Beschreibung: Neon-Effekt beim Überfahren des Hauptbuttons
 */
.mod-menu__heading:hover,
.mm-toggler:hover,
button.mod-menu__heading:hover
{
    color: #00ff00 !important; /* Neon-grüne Schrift */
    background-color: rgba(0, 255, 0, 0.15) !important; /* Grüner transparenter Hintergrund */
    text-shadow: 0 0 12px rgba(0, 255, 0, 0.9) !important; /* Starker Neon-Glow */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important; /* Äußerer Glow */
    transform: translateY(-2px) !important; /* Leichte Anhebung */
    font-weight: 600 !important; /* Etwas fetter beim Hover */
}

/* 
 * Funktion: MetisMenu-Button aktiver Zustand
 * Beschreibung: Wenn das Untermenü ausgeklappt ist
 */
.mm-active .mod-menu__heading,
.mm-active .mm-toggler,
.mm-active button.mod-menu__heading
{
    color: #00ffff !important; /* Cyan für aktiven Zustand */
    background-color: rgba(0, 255, 255, 0.2) !important; /* Cyan transparenter Hintergrund */
    text-shadow: 0 0 15px rgba(0, 255, 255, 1) !important; /* Cyan-Glow */
    font-weight: 600 !important; /* Fettere Schrift für aktiven Zustand */
}

/* 
 * Funktion: MetisMenu-Untermenü-Links mit Fredoka-Schrift
 * Beschreibung: Alle Untermenü-Links bekommen einheitliches Styling
 * Parameter: font-family - Fredoka wie im Hauptmenü
 * Parameter: color - Weiße Schrift für Kontrast
 * Rückgabe: Konsistente Schriftart im gesamten Menü
 */
.mm-collapse li a,
.mm-show li a,
.metismenu-item.level-2 a,
.level-2 a,
li.level-2 a
{
    font-family: 'Fredoka', cursive !important; /* Gleiche Schrift wie Hauptmenü */
    font-weight: 400 !important; /* Normale Stärke für Untermenüs */
    color: #ffffff !important; /* Weiße Schrift */
    background-color: transparent !important; /* Transparenter Hintergrund */
    border: none !important; /* Kein Rahmen */
    padding: 12px 20px !important; /* Großzügiges Padding für Touch */
    font-size: 16px !important; /* Etwas kleinere Schrift als Hauptmenü */
    transition: all 0.3s ease !important; /* Sanfte Übergänge */
    text-decoration: none !important; /* Keine Unterstreichung */
    display: block !important; /* Block-Display für vollständige Klickfläche */
    border-radius: 4px !important; /* Leicht abgerundete Ecken */
    margin: 2px 5px !important; /* Kleiner Abstand zwischen Items */
}

/* 
 * Funktion: MetisMenu-Untermenü-Links Hover-Effekt
 * Beschreibung: Neon-Effekt beim Überfahren von Untermenü-Items
 * Parameter: background-color - Grüner transparenter Hintergrund
 * Parameter: text-shadow - Neon-Glow-Effekt
 * Rückgabe: Visuelles Feedback bei Benutzerinteraktion
 */
.mm-collapse li a:hover,
.mm-show li a:hover,
.metismenu-item.level-2 a:hover,
.level-2 a:hover
{
    color: #00ff00 !important; /* Neon-grüne Schrift */
    background-color: rgba(0, 255, 0, 0.2) !important; /* Grüner transparenter Hintergrund */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important; /* Starker Neon-Glow */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4) !important; /* Äußerer Glow */
    transform: translateX(3px) !important; /* Leichte Bewegung nach rechts */
    font-weight: 500 !important; /* Etwas fetter beim Hover */
}

/* 
 * Funktion: Aktives MetisMenu-Untermenü-Item
 * Beschreibung: Hervorhebung des aktuell ausgewählten Untermenü-Punkts
 * Parameter: color - Cyan für aktiven Zustand
 * Parameter: background-color - Cyan transparenter Hintergrund
 */
.mm-collapse li.current a,
.mm-show li.current a,
.metismenu-item.level-2.current a,
.level-2.current a
{
    color: #00ffff !important; /* Cyan für aktiven Zustand */
    background-color: rgba(0, 255, 255, 0.2) !important; /* Cyan transparenter Hintergrund */
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.9) !important; /* Cyan-Glow */
    font-weight: 500 !important; /* Mittlere Stärke für aktiven Zustand */
    border-left: 3px solid #00ffff !important; /* Cyan-Markierung links */
}

/* 
 * Funktion: MetisMenu-Container-Anpassungen
 * Beschreibung: Stellt sicher, dass das Menü richtig positioniert ist
 */
.metismenu-item.deeper,
li.deeper
{
    position: relative !important; /* Relative Position für Dropdown */
}

/* 
 * Funktion: MetisMenu-Ebenen-Einrückung
 * Beschreibung: Level-2 Items leicht eingerückt für Hierarchie
 */
.metismenu-item.level-2,
.level-2,
li.level-2
{
    padding-left: 10px !important; /* Einrückung für Untermenü */
    border-left: 2px solid rgba(0, 255, 0, 0.2) !important; /* Subtile grüne Linie */
    margin-left: 5px !important; /* Abstand von links */
}

/* 
 * Funktion: Mobile MetisMenu-Anpassungen
 * Beschreibung: Optimierungen für Tablets und Smartphones
 * Parameter: Größere Touch-Targets und angepasste Abstände
 */
@media (max-width: 991.98px) 
{
    /* 
     * Funktion: Mobile MetisMenu-Container
     * Beschreibung: Vollbreite Darstellung für Touch-Geräte
     */
    .mm-collapse,
    .mm-show
    {
        width: 100% !important; /* Vollbreite */
        margin: 5px 0 !important; /* Vertikaler Abstand */
        border-radius: 6px !important; /* Kleinere Rundung */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; /* Reduzierter Schatten */
        padding: 5px !important; /* Kleineres Padding */
    }
    
    /* 
     * Funktion: Mobile MetisMenu-Buttons
     * Beschreibung: Größere Touch-Targets für bessere Bedienung
     */
    .mod-menu__heading,
    .mm-toggler
    {
        padding: 15px 20px !important; /* Größeres Padding für Touch */
        font-size: 16px !important; /* Angepasste Schriftgröße */
        width: 100% !important; /* Vollbreite */
        text-align: left !important; /* Links ausgerichtet */
    }
    
    /* 
     * Funktion: Mobile MetisMenu-Untermenü-Items
     * Beschreibung: Größere Touch-Targets für Untermenü-Links
     */
    .mm-collapse li a,
    .mm-show li a
    {
        padding: 15px 20px !important; /* Größeres Padding für Touch */
        font-size: 15px !important; /* Angepasste Schriftgröße */
    }
}

/* 
 * Funktion: Sehr kleine Bildschirme (Smartphones)
 * Beschreibung: Weitere Anpassungen für sehr kleine Displays
 */
@media (max-width: 576px) 
{
    .mod-menu__heading,
    .mm-toggler
    {
        font-size: 15px !important; /* Kleinere Schrift */
        padding: 12px 15px !important; /* Kompakteres Padding */
    }
    
    .mm-collapse li a,
    .mm-show li a
    {
        font-size: 14px !important; /* Kleinere Schrift für Untermenü */
        padding: 12px 15px !important; /* Kompakteres Padding */
    }
}

/* 
 * Funktion: MetisMenu-Animationen verbessern
 * Beschreibung: Sanfte Ein- und Ausklapp-Effekte
 */
.mm-collapse
{
    transition: all 0.3s ease !important; /* Sanfte Animation */
    overflow: hidden !important; /* Verhindert Scroll-Balken */
}

.mm-show
{
    animation: slideDown 0.3s ease !important; /* Einblend-Animation */
}

/* 
 * Funktion: Slide-Down Animation für MetisMenu
 * Beschreibung: Sanftes Einblenden des Untermenüs
 */
@keyframes slideDown 
{
    0% 
    {
        opacity: 0; /* Startet unsichtbar */
        max-height: 0; /* Startet mit Höhe 0 */
        transform: translateY(-10px); /* Startet leicht nach oben versetzt */
    }
    100% 
    {
        opacity: 1; /* Wird sichtbar */
        max-height: 500px; /* Maximale Höhe */
        transform: translateY(0); /* Bewegt sich in Position */
    }
}

/* 
 * NOTFALL z-index FIX für MetisMenu
 * Stellt sicher, dass Untermenü über Content erscheint
 */
.container-topbar,
.container-topbar .mod-menu,
.container-topbar .metismenu-item,
.container-topbar li.deeper
{
    z-index: 10000 !important;
    position: relative !important;
}

.mm-collapse,
.mm-show 
{
    z-index: 10001 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
}

/**
 * Z-INDEX FIX FÜR DROPDOWN-MENÜS
 * Fügen Sie diesen Code zu Ihrer user.css hinzu
 */

/* 
 * DROPDOWN-MENÜ Z-INDEX ERHÖHEN
 * Das Dropdown muss über allen anderen Elementen liegen
 */
.container-header .mod-menu .mod-menu__sub,
.container-topbar .mod-menu .mod-menu__sub,
.dropdown-menu,
.mod-menu .dropdown-menu,
.nav-item .dropdown-menu,
.navbar-nav .dropdown-menu 
{
    z-index: 9999 !important; /* Sehr hoher z-index für Dropdown */
    position: absolute !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

/* 
 * CONTAINER-HEADER Z-INDEX ERHÖHEN
 * Header muss über Content liegen, aber unter Dropdown
 */
.container-header 
{
    z-index: 100 !important; /* Höher als Content */
    position: relative !important;
}

/* 
 * CONTAINER-TOPBAR Z-INDEX ANPASSEN
 * Topbar muss über Content liegen, aber unter Dropdown
 */
.container-topbar 
{
    z-index: 200 !important; /* Höher als Header */
    position: relative !important;
}

/* 
 * CONTENT-BEREICH Z-INDEX REDUZIEREN
 * Content muss unter Navigation und Dropdown liegen
 */
.container-component,
.com-content-article,
.com-content-category,
.blog-item,
.item-page,
.article-content,
.blog 
{
    z-index: 5 !important; /* Niedriger als Navigation */
    position: relative !important;
}

/* 
 * DROPDOWN-ITEMS STYLING
 * Bessere Sichtbarkeit der Dropdown-Links
 */
.container-header .mod-menu .mod-menu__sub a,
.container-topbar .mod-menu .mod-menu__sub a,
.dropdown-menu .dropdown-item,
.mod-menu .dropdown-menu a 
{
    color: #ffffff !important;
    padding: 12px 20px !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 
 * DROPDOWN-ITEM HOVER-EFFEKT
 * Neon-Effekt für bessere Sichtbarkeit
 */
.container-header .mod-menu .mod-menu__sub a:hover,
.container-topbar .mod-menu .mod-menu__sub a:hover,
.dropdown-menu .dropdown-item:hover,
.mod-menu .dropdown-menu a:hover 
{
    color: #00ff00 !important;
    background-color: rgba(0, 255, 0, 0.15) !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
    transform: translateX(5px) !important;
}

/* 
 * PARENT-MENÜPUNKT MIT DROPDOWN
 * Zusätzlicher Styling für bessere Erkennbarkeit
 */
.container-header .mod-menu li.has-children > a:after,
.container-topbar .mod-menu li.has-children > a:after,
.dropdown-toggle:after 
{
    content: "▼" !important;
    font-size: 12px !important;
    margin-left: 8px !important;
    color: #00ff00 !important;
    transition: transform 0.3s ease !important;
}

/* 
 * DROPDOWN PFEIL ROTATION BEI HOVER
 */
.container-header .mod-menu li.has-children:hover > a:after,
.container-topbar .mod-menu li.has-children:hover > a:after,
.dropdown-toggle:hover:after 
{
    transform: rotate(180deg) !important;
    color: #00ffff !important;
}

/* 
 * MOBILE DROPDOWN-ANPASSUNGEN
 */
@media (max-width: 991.98px) 
{
    .container-header .mod-menu .mod-menu__sub,
    .container-topbar .mod-menu .mod-menu__sub,
    .dropdown-menu 
    {
        position: static !important;
        z-index: auto !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
        margin-top: 10px !important;
        border-left: 3px solid #00ff00 !important;
        padding-left: 20px !important;
    }
}

/* 
 * SICHERSTELLUNG DASS DROPDOWN SICHTBAR IST
 * Falls das Dropdown standardmäßig versteckt ist
 */
.container-header .mod-menu li:hover .mod-menu__sub,
.container-topbar .mod-menu li:hover .mod-menu__sub,
.nav-item:hover .dropdown-menu,
.dropdown:hover .dropdown-menu 
{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 
 * DROPDOWN ERSCHEINUNGS-ANIMATION
 */
.container-header .mod-menu .mod-menu__sub,
.container-topbar .mod-menu .mod-menu__sub,
.dropdown-menu 
{
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.container-header .mod-menu li:hover .mod-menu__sub,
.container-topbar .mod-menu li:hover .mod-menu__sub,
.nav-item:hover .dropdown-menu,
.dropdown:hover .dropdown-menu 
{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}