/* NavLeft Toggle Styles */
.main-layout {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100% !important;
}

.main-layout > * {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

#navLeftColumn {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* Mobile Menu Styles */
@media (max-width: 991.98px) {
    #navLeftColumn.navleft-mobile-hidden {
        display: block !important;
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3);
        transition: left 0.3s ease-in-out;
        padding: 1rem !important;
    }
    
    #navLeftColumn.navleft-mobile-hidden.mobile-menu-open {
        left: 0;
    }
    
    /* Mobile Close Button als Fixed Overlay */
    .navLeft-mobile-close {
        position: fixed;
        top: 1rem;
        left: calc(80vw - 3rem);
        max-width: 284px;
        z-index: 10001;
        margin: 0;
        padding: 0;
        transition: left 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
    }
    
    #navLeftColumn.mobile-menu-open .navLeft-mobile-close {
        left: calc(min(80vw, 300px) - 3rem);
        opacity: 1;
        pointer-events: auto;
    }
    
    .navLeft-mobile-close button,
    button.navLeft-mobile-close {
        color: #333;
        transition: color 0.2s ease;
        background: transparent !important;
    }
    
    .navLeft-mobile-close button:hover,
    button.navLeft-mobile-close:hover {
        color: #007bff;
    }
    
    #column_left {
        position: relative;
    }
    
    body.mobile-menu-active {
        overflow: hidden;
    }
    
    body.mobile-menu-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        animation: fadeIn 0.3s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Desktop Styles */
@media (min-width: 992px) {
    #navLeftColumn.navleft-collapsed {
        flex: 0 0 0% !important;
        max-width: 0% !important;
        width: 0% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #navLeftColumn.navleft-collapsed #column_left {
        display: none;
    }

    #navLeftColumn.navleft-expanded {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* ContentColumn bei expanded NavLeft */
    #navLeftColumn.navleft-expanded ~ #contentColumn {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
    
    /* ContentColumn bei collapsed NavLeft */
    #navLeftColumn.navleft-collapsed ~ #contentColumn {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #navLeftColumn.navleft-collapsed ~ #contentColumn .angebote-grid > * {
        flex: 0 0 auto;
        width: 25%;
        max-width: 25%;
    }

    #navLeftColumn.navleft-expanded ~ #contentColumn .angebote-grid > * {
        flex: 0 0 auto;
        width: 33.33333333%;
        max-width: 33.33333333%;
    }

    #navLeftColumn.navleft-collapsed ~ #contentColumn #product_items_box > * {
        flex: 0 0 auto;
        width: 25%;
        max-width: 25%;
    }

    #navLeftColumn.navleft-expanded ~ #contentColumn #product_items_box > * {
        flex: 0 0 auto;
        width: 33.33333333%;
        max-width: 33.33333333%;
    }
}

#contentColumn {
    transition: all 0.3s ease-in-out;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 3rem !important;
}

#contentColumn .row {
    min-height: 0 !important;
}

#column_center {
    min-height: 0 !important;
}

/* Toggle Button Styles */
#navLeftToggleBtn {
    background: transparent;
    border: none;
    transition: transform 0.3s ease-in-out;
}

#navLeftToggleBtn i {
    transition: all 0.3s ease-in-out;
}

/* obsolete, programmatisch gelöst */


/*
div#navLeft_werbebanner {
	background-color: #ACC90A;
}

div#navLeft_praesentationswaende {
	margin-top: 13px;
	background-color: #FFC000;
}

div#navLeft_outdoor-equipment {
	margin-top: 13px;
	background-color: #00B0F0;
}

div#navLeft_promotion-event-equipment {
	margin-top: 13px;
	background-color: #22CCCC;
}

div#navLeft_messestand_mobil {
	margin-top: 13px;
	background-color: #EA650D;
}

div#navLeft_messestand_modular {
	margin-top: 13px;
	background-color: #cf1212;
}

div#navLeft_zubehoer {
	margin-top: 13px;
	background-color: #8064A2;
}

div#navLeft_specialOffers {
	margin-top: 13px;
	background-color: #cf1212;
}
*/
h3.navLeft {
	background-color: #f4f4f4;
	color: #006; 
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px 0px 0px 5px;
	padding: 4px 4px 4px 6px;
}

h3.navLeft_current{
	/*background-color: #ACC90A;*/
    color: #fff;
}

/*
h3.navLeft_werbebanner, h3.navLeft_praesentationswaende, h3.navLeft_outdoor-equipment, h3.navLeft_promotion-event-equipment, h3.navLeft_messestand_mobil, h3.navLeft_messestand_modular, h3.navLeft_zubehoer, h3.navLeft_specialOffers {
	background-color: #f4f4f4;
	color: #006; 
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px 0px 0px 5px;
	padding: 4px 4px 4px 6px;
}
*/

/*


h3.navLeft_praesentationswaende_current{
	background-color: #FFC000;
	color: #fff;
}

h3.navLeft_outdoor-equipment_current{
	background-color: #00B0F0;
	color: #fff;
}

h3.navLeft_promotion-event-equipment_current{
	background-color: #22CCCC;
	color: #fff;
}

h3.navLeft_messestand_mobil_current{
	background-color: #EA650D;
	color: #fff;
}

h3.navLeft_messestand_modular_current{
	background-color: #cf1212;
	color: #fff;
}

h3.navLeft_zubehoer_current{
	background-color: #8064A2;
	color: #fff;
}

ul.navLeft {
	margin: 2px 0px 0px 5px;
	padding-left: 0px;
}
*/
ul.navLeft li {
	list-style-type: none;
	/*background-color: #f4f4f4;	//default fallback */ 
}

ul.navLeft {
	margin: 2px 0px 0px 5px;
	padding-left: 0px;
}

ul.navLeft li {
	list-style-type: none;
	background-color: #f4f4f4;
    margin-left: 0;
}

ul.navLeft[class*="color-hover-bg-"] li.current,
ul.navLeft[class*="color-hover-bg-"] li:hover {
    background-color: #f4f4f4;
}

/*

*/

/*

*/


/*
ul.navLeft_praesentationswaende li:hover, ul.navLeft_praesentationswaende li.current {
	background-color: #FFC000;
}

ul.navLeft_outdoor-equipment li:hover, ul.navLeft_outdoor-equipment li.current {
	background-color: #00B0F0;
}

ul.navLeft_promotion-event-equipment li:hover, ul.navLeft_promotion-event-equipment li.current {
	background-color: #22CCCC;
}

ul.navLeft_messestand_mobil li:hover, ul.navLeft_messestand_mobil li.current {
	background-color: #EA650D;
}

ul.navLeft_messestand_modular li:hover, ul.navLeft_messestand_modular li.current {
	background-color: #cf1212;
}
 
 ul.navLeft_zubehoer li:hover, ul.navLeft_zubehoer li.current {
	background-color: #8064A2;
 }
*/

ul.navLeft li a {
	text-decoration: none;
	color: #006;
	font-weight: normal;
	display: block;
	font-size: 1em;
	padding: 5px 0px 5px 6px;
}



/*
ul.navLeft_werbebanner li a, ul.navLeft_praesentationswaende li a, ul.navLeft_outdoor-equipment li a, ul.navLeft_promotion-event-equipment li a, ul.navLeft_messestand_mobil li a, ul.navLeft_messestand_modular li a, ul.navLeft_zubehoer li a {
	text-decoration: none;
	color: #006;
	font-weight: normal;
	display: block;
	font-size: 1em;
	padding: 5px 0px 5px 6px;
}
*/


/*


a.navLeftCategoryGroup:hover h3.navLeft_praesentationswaende {
	background-color: #FFC000;	
}

a.navLeftCategoryGroup:hover h3.navLeft_outdoor-equipment {
	background-color: #00B0F0;
}

a.navLeftCategoryGroup:hover h3.navLeft_promotion-event-equipment {
	background-color: #22CCCC;
}

a.navLeftCategoryGroup:hover h3.navLeft_messestand_mobil {
	background-color: #EA650D;
}

a.navLeftCategoryGroup:hover h3.navLeft_messestand_modular {
	background-color: #cf1212;
}

a.navLeftCategoryGroup:hover h3.navLeft_zubehoer {
	background-color: #8064A2;
}

a.navLeftCategoryGroup:hover h3.navLeft_zubehoer {
	background-color: #8064A2;
}
*/

/*
a:hover h3.navLeft_specialOffers {
	background-color: #cf1212;
}


*/
ul.navLeft li a:hover, ul.navLeft li.current a {
    color: #006;	
}

a:hover h3.navLeft, a.navLeftCategoryGroup:hover h3 {
    color: #fff;
}


span.navLeft_heading_hotline {
	color: #006;
	font-size: 13px;
	font-weight: bold;
	float: left;
	width: 100%;
	padding: 24px 0 8px 7px;
}

div.navLeft_hotlineRow {
	width: 200px;
	float: left;
	padding-bottom: 5px;
}

span.navLeft_icon_mail, span.navLeft_icon_tel{
	height: 16px;
	display: block;
	float: left;
	margin-left: 0;
	background-repeat: no-repeat;
}

span.navLeft_icon_tel {
	background-image: url(../images/system/icon_phone.png);	
	width: 16px;
}

span.navLeft_icon_mail {
	background-image: url(../images/system/icon_mail.png);	
	width: 24px;
}

span.navRight_icon_wa {
	background-image: url(../images/system/icon_whatsapp.png);	
	width: 24px;
}

span.navLeft_tel_txt, span.navLeft_mail_txt {
	float: right;
	color: #006;
	font-family: Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

span.navLeft_mail_txt a {
	color: #006;
	font-family: Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

div.navLeft_waRow {
	width: 180px;
	float: left;
	padding-bottom: 5px;
}