/* --- USER.CSS FÜR CASSIOPEIA BANNER (10% HEIGHT) --- */

/* 1. Standard-Abstände von Cassiopeia am oberen Rand entfernen */
.header-white,
.brand-logo,
.container-header {
    display: none !important;
}

/* 2. Banner-Container auf exakt 10% der Viewport-Höhe einstellen */
.hero-header {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 10vh !important; 
    min-height: 70px !important; 
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Hintergrundbild an die 10% Höhe anpassen */
.hero-bg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. PNG-Logo-Overlay in der Mitte zentrieren */
.hero-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
}

/* 5. Logo-Größe dynamisch anpassen */
.hero-logo {
    max-height: 7vh !important; 
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}


/* --- RESPONSIVES FLACHES MENÜBAND (HAUPTMENÜ DROP-DOWN & ZENTRIERT) --- */

/* 1. Äußere Modul-Container von Cassiopeia auf flache Höhe zwingen */
.container-maintop,
.container-maintop .grid-child,
.container-maintop .card,
.container-maintop .card-body {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* 2. Navigationsleiste als Container */
nav.navbar {
    padding: 4px 1rem !important;
    margin: 4px 0 12px 0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
}

/* 3. Hauptmenü-Leiste zentrieren */
nav.navbar .mod-menu,
nav.navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 16px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    position: relative !important;
}

/* 4. Hauptmenü-Punkte Ausrichtung (Pfeil wieder neben den Text!) */
nav.navbar .mod-menu > li,
nav.navbar .navbar-nav > li {
    display: inline-flex !important;
    flex-direction: row !important; /* Pfeil steht auf gleicher Höhe rechts neben dem Text */
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    position: relative !important;
}

/* 5. Normale Menü-Links (NUR in der oberen Navbar!) */
nav.navbar .mod-menu li a,
nav.navbar .navbar-nav li a {
    padding: 4px 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Pfeil-Icon exakt nebeneinander ausrichten */
nav.navbar .mod-menu li button,
nav.navbar .navbar-nav li button,
nav.navbar .mod-menu li .dropdown-toggle,
nav.navbar .navbar-nav li .dropdown-toggle {
    margin-left: 2px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 6. Unterseiten / Dropdown-Menü (DESKTOP) */
@media (min-width: 768px) {
    /* Standardmäßig einklappen */
    nav.navbar .mod-menu li ul,
    nav.navbar .navbar-nav li ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
        padding: 4px 0 !important;
        min-width: 160px !important;
        z-index: 1000 !important;
    }

    /* Bei Hover aufklappen */
    nav.navbar .mod-menu li:hover > ul,
    nav.navbar .navbar-nav li:hover > ul {
        display: block !important;
    }

    nav.navbar .mod-menu li ul li,
    nav.navbar .navbar-nav li ul li {
        display: block !important;
        width: 100% !important;
    }

    nav.navbar .mod-menu li ul li a,
    nav.navbar .navbar-nav li ul li a {
        display: block !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        font-weight: 400 !important;
        text-align: left !important;
    }
}

/* 7. MOBILE SONDERREGELN (unter 768px Displaybreite) */
@media (max-width: 767.98px) {
    /* Untermenü Positionierung & Styling */
    nav.navbar .mod-menu li ul,
    nav.navbar .navbar-nav li ul {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15) !important;
        padding: 4px 0 !important;
        min-width: 150px !important;
        z-index: 1000 !important;
    }

    /* Aufklappen über Joomla/Bootstrap-Klasse .show ermöglichen */
    nav.navbar .mod-menu li.show > ul,
    nav.navbar .navbar-nav li.show > ul,
    nav.navbar .mod-menu li:hover > ul,
    nav.navbar .navbar-nav li:hover > ul {
        display: block !important;
    }

    nav.navbar .mod-menu li ul li a,
    nav.navbar .navbar-nav li ul li a {
        display: block !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        font-weight: 400 !important;
        color: #475569 !important;
        text-align: center !important;
    }
}


/* --- FOOTER: DEFINITIV WEISS & FLACH MIT KLEINER/DÜNNER SCHRIFT --- */

/* 1. Hintergrund für ALLE Footer-Ebenen auf Weiß erzwingen */
footer,
footer.footer,
.site-footer,
.container-footer,
div[class*="container-bottom"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    min-height: 25px !important;
}

/* 2. Innere Standard-Abstände & Karten-Hintergründe aufheben */
.container-footer .grid-child,
.container-footer .card,
.container-footer .card-body,
footer .card,
footer .card-body {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. Footer-Menü explizit überschreiben (Greift höher als nav.navbar) */
footer .mod-menu,
footer .nav,
.container-footer .mod-menu,
.container-footer .nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 4. Text-, Schriftgröße & Stärke für ALLE Footer-Links und Texte */
footer *,
footer a,
footer li,
footer span,
.container-footer *,
.container-footer a,
.container-footer li {
    color: #475569 !important;
    font-size: 10px !important;       /* Wie von Ihnen gewünscht */
    font-weight: 400 !important;     /* Sehr dünne Schriftstärke */
    line-height: 1.2 !important;     /* Verhindert Aufblähen durch 25px line-height */
    text-decoration: none !important;
}

/* 5. Hover-Effekt im Footer */
footer a:hover,
.container-footer a:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}