/* ==========================================================================
   1. HEADER & DER OPTISCHE SCHATTEN NACH UNTEN
   ========================================================================== */
#sp-header, 
#sp-header.sticky {
    background-color: #036588 !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 999 !important; /* Zwingt den Header über die weiße Fläche */
    
    /* Ein deutlich sichtbarer, knackiger Schatten nach unten */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; 
}

/* Entfernt ungewollte weiße Abstände, die das Helix-Template generiert */
.body-innerwrapper { 
    padding-top: 0 !important; 
}

.logo img {
    max-height: 80px !important;
    width: auto !important;
}

/* ==========================================================================
   2. DESKTOP HAUPTMENÜ (Kräftiger Kontrast)
   ========================================================================== */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    transition: color 0.2s ease-in-out !important;
}

/* Edles Hellblau beim Hovern NUR auf dem Desktop */
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
    color: #bce6f7 !important;
}

/* ==========================================================================
   3. DESKTOP DROPDOWNS (Barrierefrei)
   ========================================================================== */
.sp-megamenu-parent .sp-dropdown {
    background-color: #ffffff !important; 
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #036588 !important;
    padding: 5px 0 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item a {
    color: #1a1a1a !important; /* Knackiges Anthrazit für idealen Kontrast */
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    display: block !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item a:hover {
    background-color: #036588 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   4. SMARTPHONE (Header & Toggler)
   ========================================================================== */
@media (max-width: 991px) {
    #sp-header { 
        height: 80px !important; 
    }
    .logo img { 
        max-height: 55px !important; 
    }
    #offcanvas-toggler { 
        color: #ffffff !important; 
        font-size: 28px !important; 
    }
}

/* ==========================================================================
   5. HAMBURGER / OFF-CANVAS MENÜ (Mobiles Menü optimiert)
   ========================================================================== */
.offcanvas-menu { 
    background-color: #036588 !important;
}

/* Schließbutton oben links */
.close-offcanvas, 
.offcanvas-menu .btn-close,
.offcanvas-menu .close-menu {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 24px !important;
    float: left !important;
    margin: 20px 0 20px 15px !important;
}

/* Flexbox-Zeilen für das Handy-Menü */
.offcanvas-menu .offcanvas-inner ul.menu li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background-color: transparent !important;
}

/* Styling der mobilen Links im Normalzustand */
.offcanvas-menu .offcanvas-inner ul.menu li a,
.offcanvas-menu .offcanvas-inner ul.menu li span {
    color: #ffffff !important; /* Weißer Text auf blauem Grund */
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 14px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-grow: 1 !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

/* BESSERER HOVER-EFFEKT MOBIL: Dunklerer Hintergrund & gelb-weißes Highlight */
.offcanvas-menu .offcanvas-inner ul.menu li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu li span:hover {
    background-color: #024a64 !important; /* Deutlich dunkleres Blau als Kontrast */
    color: #fffbdf !important;            /* Ein sehr helles, warmes Creme-Weiß */
    padding-left: 20px !important;         /* Kleiner visueller Einschub-Effekt */
}

/* PFEILE / TOGGLER: Werden nach rechts gezwungen und in Weiß dargestellt */
.offcanvas-menu .offcanvas-inner ul.menu li.menu-item-has-children .menu-toggler {
    margin-left: auto !important; 
    padding: 14px 20px !important;
    color: #ffffff !important;            /* Pfeile erstrahlen in klarem Weiß */
    font-size: 18px !important;
    display: inline-block !important;
}

/* Hover-Effekt speziell für die Pfeile */
.offcanvas-menu .offcanvas-inner ul.menu li.menu-item-has-children .menu-toggler:hover {
    color: #fffbdf !important;
}

/* Einrückung für geöffnete Untermenüs mobil */
.offcanvas-menu .offcanvas-inner ul.menu li ul {
    width: 100% !important;
    padding-left: 15px !important;
    margin-left: 0 !important;
    background-color: rgba(0, 0, 0, 0.1) !important; /* Leicht abgedunkeltes Untermenü */
}

.offcanvas-menu .offcanvas-inner .sp-module-title,
.offcanvas-menu .offcanvas-inner h3 {
    color: #ffffff !important;
    text-align: left !important;
    margin-top: 30px !important;
    padding-left: 15px !important;
}

/* ==========================================================================
   6. FOOTER MENÜ & BURGER ICON
   ========================================================================== */
#sp-footer ul.menu,
#sp-bottom ul.menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#sp-footer ul.menu li,
#sp-bottom ul.menu li {
    margin-right: 25px !important;
}

#sp-footer ul.menu li a,
#sp-bottom ul.menu li a {
    color: #036588 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#sp-footer ul.menu li a:hover,
#sp-bottom ul.menu li a:hover {
    color: #024a64 !important;
    text-decoration: underline !important;
}

.burger-icon > span {
    background-color: white !important;
}

/* ==========================================================================
   7. UNIVERSELLE STICKY FOOTER STRUKTUR & OPTISCHE TRENNUNG
   ========================================================================== */
html {
    height: 100% !important;
}

/* 1. Haupt-Body setzt das Minimum auf den vollen Viewport */
body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Der Innere Helix-Wrapper spannt sich über die gesamte Höhe auf */
.body-innerwrapper,
#sp-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;
    width: 100% !important;
}

/* 3. Der Hauptinhalts-Bereich wird dynamisch expandiert */
#sp-main-body,
#sp-main-body .container,
#sp-main-body .container-fluid {
    flex: 1 0 auto !important;
}

/* 4. Der Footer: Fest verankert + Knackige optische Trennung analog zum Header */
#sp-footer,
footer#sp-footer {
    background-color: #036588 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    
    /* Helle Akzentlinie oben für klare Definition */
    border-top: 3px solid #bce6f7 !important; 
    
    /* Schatten nach OBEN (Gegenstück zum Header-Schatten) */
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25) !important; 
}

/* Falls du den sp-bottom Bereich (Module über dem Footer) nutzt, bekommt dieser ebenfalls einen Schatten */
#sp-bottom {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   8. FARBPICKER OPTIMIERUNG (Visforms & Pickr)
   ========================================================================== */
.farbauswahl .visforms-colorpicker-btn,
.visforms-colorpicker-btn {
    display: inline-block !important;
    vertical-align: middle !important;
}

.farbauswahl .pickr,
.visforms-colorpicker-btn + .pickr {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
}

/* ==========================================================================
   8. FARBPICKER OPTIMIERUNG (Visforms & Pickr)
   ========================================================================== */
.farbauswahl .visforms-colorpicker-btn,
.visforms-colorpicker-btn {
    display: inline-block !important;
    vertical-align: middle !important;
}

.farbauswahl .pickr,
.visforms-colorpicker-btn + .pickr {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
}

.pickr .pcr-button {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 2.5em !important;
    height: 2.5em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
    /* Neu hinzugefügt: */
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.pickr .pcr-button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.pickr .pcr-button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}