/* ==========================================================================
   Variable Menüs (KSM)
   FINAL VERSION — unified mobile/tablet drilldown + desktop hover
   ========================================================================== */


/* ==========================================================================
   1. RESET & BASE STRUCTURE
   ========================================================================== */

.ksm-wrapper { 
    position: relative;
    width: 100%;
    box-sizing: border-box;
    z-index: 1002;
}

.ksm-variable-menu,
.ksm-variable-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ksm-variable-menu a {
    display: block;
	transition: all .3s ease-out;
}

.ksm-burger-toggle {
    display: none;
}

/* Desktop-Pfeile */
ul.ksm-variable-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 8px;
    vertical-align: middle;
	transition: all .3s ease-out;
}

ul.ksm-variable-menu > li > ul li.menu-item-has-children a {
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: all .3s ease-out;
}

ul.ksm-variable-menu > li > ul li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 5px solid currentColor;
    margin-left: 8px;
    vertical-align: middle;
	transition: all .3s ease-out;
}


/* ==========================================================================
   2. DESKTOP GLOBAL STYLING (immer gültig ab >981px)
   ========================================================================== */

body .ksm-variable-menu {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: var(--ksm-desktop-menu-bg, transparent);

    margin: var(--ksm-desktop-menu-margin-top)
            var(--ksm-desktop-menu-margin-right)
            var(--ksm-desktop-menu-margin-bottom)
            var(--ksm-desktop-menu-margin-left) !important;

    padding: var(--ksm-desktop-menu-padding-top)
             var(--ksm-desktop-menu-padding-right)
             var(--ksm-desktop-menu-padding-bottom)
             var(--ksm-desktop-menu-padding-left) !important;
}

body .ksm-variable-menu > li {
    position: relative;
    background: var(--ksm-desktop-li-bg);

    margin: var(--ksm-desktop-li-margin-top)
            var(--ksm-desktop-li-margin-right)
            var(--ksm-desktop-li-margin-bottom)
            var(--ksm-desktop-li-margin-left) !important;

    padding: var(--ksm-desktop-li-padding-top)
             var(--ksm-desktop-li-padding-right)
             var(--ksm-desktop-li-padding-bottom)
             var(--ksm-desktop-li-padding-left) !important;
}

body .ksm-variable-menu > li > a {
    background: var(--ksm-desktop-link-bg) !important;
    color: var(--ksm-desktop-link-color) !important;
    white-space: nowrap;

    margin: var(--ksm-desktop-link-margin-top)
            var(--ksm-desktop-link-margin-right)
            var(--ksm-desktop-link-margin-bottom)
            var(--ksm-desktop-link-margin-left) !important;

    padding: var(--ksm-desktop-link-padding-top)
             var(--ksm-desktop-link-padding-right)
             var(--ksm-desktop-link-padding-bottom)
             var(--ksm-desktop-link-padding-left) !important;

    font-size: var(--ksm-desktop-font-size);
    font-weight: var(--ksm-desktop-font-weight);
    letter-spacing: var(--ksm-desktop-letter-spacing);
    font-style: var(--ksm-desktop-font-style);
    text-decoration: var(--ksm-desktop-text-decoration);
    text-transform: var(--ksm-desktop-text-transforms);
	transition: all .3s ease-out;
}

body .ksm-variable-menu > li > a:hover {
    background: var(--ksm-desktop-link-bg-hover) !important;
    color: var(--ksm-desktop-link-color-hover) !important;
	transition: all .3s ease-out;
}

/* Hover Bridge */
.ksm-variable-menu > li::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
    transform: translateY(100%);
    pointer-events: auto;
}


/* ==========================================================================
   3. DESKTOP SUBMENÜ (alle Ebenen)
   ========================================================================== */

body .ksm-sub-menu {
    position: absolute;
    top: 100%; left: 0;
    width: var(--ksm-desktop-sub-width, 280px);
    background: var(--ksm-desktop-sub-bg, #fff);

    margin: var(--ksm-desktop-sub-ul-margin-top)
            var(--ksm-desktop-sub-ul-margin-right)
            var(--ksm-desktop-sub-ul-margin-bottom)
            var(--ksm-desktop-sub-ul-margin-left) !important;

    padding: var(--ksm-desktop-sub-ul-padding-top)
             var(--ksm-desktop-sub-ul-padding-right)
             var(--ksm-desktop-sub-ul-padding-bottom)
             var(--ksm-desktop-sub-ul-padding-left) !important;

    opacity: 0; 
    visibility: hidden;
    transition: all .3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1003;
}

/* Submenü-Einträge */
body .ksm-sub-menu li {
    background: var(--ksm-desktop-sub-li-bg);
}
body .ksm-sub-menu li:not(.ksm-sub-menu-title) {
    margin: var(--ksm-desktop-sub-li-margin-top)
            var(--ksm-desktop-sub-li-margin-right)
            var(--ksm-desktop-sub-li-margin-bottom)
            var(--ksm-desktop-sub-li-margin-left) !important;

    padding: var(--ksm-desktop-sub-li-padding-top)
             var(--ksm-desktop-sub-li-padding-right)
             var(--ksm-desktop-sub-li-padding-bottom)
             var(--ksm-desktop-sub-li-padding-left) !important;
}

body .ksm-sub-menu li a {
    background-color: var(--ksm-desktop-sub-link-bg) !important;
    color: var(--ksm-desktop-sub-link-color) !important;
    font-size: var(--ksm-desktop-sub-link-font-size);
    font-weight: var(--ksm-desktop-sub-link-font-weight);
    letter-spacing: var(--ksm-desktop-sub-link-letter-spacing);
    font-style: var(--ksm-desktop-sub-link-font-style);
    text-decoration: var(--ksm-desktop-sub-link-text-decoration);

    margin: var(--ksm-desktop-sub-link-margin-top)
            var(--ksm-desktop-sub-link-margin-right)
            var(--ksm-desktop-sub-link-margin-bottom)
            var(--ksm-desktop-sub-link-margin-left) !important;

    padding: var(--ksm-desktop-sub-link-padding-top)
             var(--ksm-desktop-sub-link-padding-right)
             var(--ksm-desktop-sub-link-padding-bottom)
             var(--ksm-desktop-sub-link-padding-left) !important;
	transition: all .3s ease-out;
}

body .ksm-sub-menu li a:hover {
    background-color: var(--ksm-desktop-sub-link-bg-hover) !important;
    color: var(--ksm-desktop-sub-link-color-hover) !important;
	transition: all .3s ease-out;
}

/* Sub-Sub-Menüs öffnen rechts */
.ksm-sub-menu .ksm-sub-menu {
    top: 0;
    left: 100%;
    margin-top: 0 !important;
}


/* ==========================================================================
   4. Einstellungen AUSSCHLIESSLICH für Desktop
   ========================================================================== */

@media (min-width: 981px) {
	
	/* Ausrichtung Responsive Menü */
	body nav.ksm-type-responsive .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-responsive-flex-direction, row);
		justify-content: var(--ksm-desktop-responsive-justify-content, flex-start);
		align-content: var(--ksm-desktop-responsive-align-content, center);
		align-items: var(--ksm-desktop-responsive-align-items, center);
	}

	/* Ausrichtung Static Menü */
	body nav.ksm-type-static .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-static-flex-direction, row);
		justify-content: var(--ksm-desktop-static-justify-content, flex-start);
		align-content: var(--ksm-desktop-static-align-content, center);
		align-items: var(--ksm-desktop-static-align-items, center);
	}

	/* Ausrichtung Burger Menü */
	body nav.ksm-type-burger .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-vertical-flex-direction, row);
		justify-content: var(--ksm-desktop-vertical-justify-content, flex-start);
		align-content: var(--ksm-desktop-vertical-align-content, center);
		align-items: var(--ksm-desktop-vertical-align-items, center);
	}

	/* Ausrichtung Vertical Menü */
	body nav.ksm-type-vertical .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-vertical-flex-direction, column);
		justify-content: var(--ksm-desktop-vertical-justify-content, center);
		align-content: var(--ksm-desktop-vertical-align-content, flex-start);
		align-items: var(--ksm-desktop-vertical-align-items, flex-start);
	}

    /* Alle Submenus initial verstecken */
    .ksm-sub-menu {
        display: none !important;
        opacity: 0;
        visibility: hidden;
    }

    /* Ebene 1 sichtbar machen */
    .ksm-variable-menu > li:hover > .ksm-sub-menu,
    .ksm-variable-menu > li.ksm-hover-active > .ksm-sub-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }

    /* Ebene 2+ sichtbar machen */
    .ksm-sub-menu li:hover > .ksm-sub-menu,
    .ksm-sub-menu li.ksm-hover-active > .ksm-sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Multi-Level Positionierung */
    .ksm-sub-menu .ksm-sub-menu {
        left: 100% !important;
        top: 0 !important;
    }

    /* Title nur Mobile anzeigen */
    .ksm-sub-menu-title {
        display: none !important;
    }
	
	/* Desktop-Hover sichtbar */
	.ksm-variable-menu > li:hover > .ksm-sub-menu,
	.ksm-variable-menu > li.ksm-hover-active > .ksm-sub-menu {
		opacity: 1;
		visibility: visible;
	}

	/* Sichtbarkeit für Sub-Level 2+ aktivieren */
	.ksm-sub-menu li:hover > .ksm-sub-menu,
	.ksm-sub-menu li.ksm-hover-active > .ksm-sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
	}
	
    /* Parent in Ebene 1 hervorheben, wenn Submenü aktiv ist */
    .ksm-variable-menu > li.menu-item-has-children.ksm-hover-active > a {
        background: var(--ksm-desktop-link-bg-hover) !important;
        color: var(--ksm-desktop-link-color-hover) !important;
    }

    /* Parent in Submenüs hervorheben, wenn deren eigenes Submenü aktiv ist */
    .ksm-sub-menu li.menu-item-has-children.ksm-hover-active > a {
        background: var(--ksm-desktop-sub-link-bg-hover) !important;
        color: var(--ksm-desktop-sub-link-color-hover) !important;
    }

}


/* ==========================================================================
   5. MOBILE & TABLET (≤ 980px) — Accordion / SlideDown Version
   ========================================================================== */

@media (max-width: 980px) {
	
	body nav.ksm-type-responsive .ksm-variable-menu,	/* Ausrichtung Responsive Menü */
	body nav.ksm-type-burger .ksm-variable-menu	{		/* Ausrichtung Burger Menü */
		flex-direction: column;
		justify-content: flex-start;
	}

	/* Ausrichtung Static Menü */
	body nav.ksm-type-static .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-static-flex-direction, row);
		justify-content: var(--ksm-desktop-static-justify-content, flex-start);
		align-content: var(--ksm-desktop-static-align-content, center);
		align-items: var(--ksm-desktop-static-align-items, center);
	}

	/* Ausrichtung Vertical Menü */
	body nav.ksm-type-vertical .ksm-variable-menu {
		flex-direction: var(--ksm-desktop-vertical-flex-direction, column);
		justify-content: var(--ksm-desktop-vertical-justify-content, center);
		align-content: var(--ksm-desktop-vertical-align-content, flex-start);
		align-items: var(--ksm-desktop-vertical-align-items, flex-start);
	}

    .ksm-variable-menu-container {
        position: relative;
        width: 100%;
    }

    /* ============================
       BURGER BUTTON (unchanged)
       ============================ */
    .ksm-burger-toggle {
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .ksm-burger-toggle span {
        border-radius: 5px;
        display: block;
        width: 28px;
        height: 4px;
        margin: 3px 0;
        background: var(--ksm-mobile-burger-color-open, #333);
        transition: transform .3s ease, opacity .3s ease;
    }
	
	/* Burger-Button absolut zentrieren, solange geschlossen */
    .ksm-variable-menu-container.ksm-type-responsive {
        position: relative;
        padding: 12px 0;      /* gleicher Abstand oben & unten */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* oder center, wenn du ihn mittig horizontal willst */
    }

    /* Burger sitzt im Flow, bekommt keine eigenen Margins mehr */
    .ksm-variable-menu-container.ksm-type-responsive .ksm-burger-toggle {
        margin: 0;
		padding: 0 15px;
    }
    
    /* Burger → X Transformation */
    .ksm-burger-toggle.ksm-burger-open span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .ksm-burger-toggle.ksm-burger-open span:nth-child(2) {
        opacity: 0;
    }

    .ksm-burger-toggle.ksm-burger-open span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }


    /* ============================
       WRAPPER
       ============================ */
    .ksm-wrapper {
        position: relative;
        width: 100%;
        margin-top: 12px;
        display: none;
    }

    .ksm-wrapper.ksm-open {
        display: block;
    }


    /* ============================
       MOBILE MENU LISTS — SIMPLE!
       ============================ */
    .ksm-wrapper ul {
        background: var(--ksm-tablet-menu-bg, #fff);
		border-bottom: 1px solid #ccc;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
	
	body .ksm-variable-menu > li {
		border-bottom: 1px solid #eee;
	}
	
	body .ksm-sub-menu li {
		background: var(--ksm-mobile-sub-li-bg, transparent);
		border-bottom: 1px solid #fff;
	}

    .ksm-wrapper ul li:not(.ksm-sub-menu-title) {
        margin: var(--ksm-mobile-sub-li-margin-top) var(--ksm-mobile-sub-li-margin-right) var(--ksm-mobile-sub-li-margin-bottom) var(--ksm-mobile-sub-li-margin-left) !important;
		padding: var(--ksm-mobile-sub-li-padding-top) var(--ksm-mobile-sub-li-padding-right) var(--ksm-mobile-sub-li-padding-bottom) var(--ksm-mobile-sub-li-padding-left) !important;
    }
	
    .ksm-wrapper ul li.ksm-sub-menu-title {
		border-top: 1px solid #ccc;
		padding: 15px 0 10px;
	}
	
    .ksm-wrapper ul li.ksm-sub-menu-title a {
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

    .ksm-wrapper ul li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--ksm-mobile-link-color) !important;
        background: var(--ksm-mobile-sub-link-bg, transparent) !important;
    }

    .ksm-wrapper ul li a:hover {
        color: var(--ksm-mobile-link-color-hover) !important;
        background: var(--ksm-mobile-sub-link-bg-hover, transparent) !important;
    }
	
	/* Submenüs im Mobile als normale Listen */
    .ksm-sub-menu {
        background: var(--ksm-mobile-sub-bg, #fff);
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        box-shadow: none !important;
    }
	
	/* Submenü Links einrücken */
	body .ksm-sub-menu li a {
		margin: var(--ksm-mobile-sub-link-margin-top) var(--ksm-mobile-sub-link-margin-right) var(--ksm-mobile-sub-link-margin-bottom) var(--ksm-mobile-sub-link-margin-left) !important;
		padding: var(--ksm-mobile-sub-link-padding-top) var(--ksm-mobile-sub-link-padding-right) var(--ksm-mobile-sub-link-padding-bottom) var(--ksm-mobile-sub-link-padding-left) !important;
	}
	
	body .ksm-sub-menu.ksm-depth-1 li a {
		padding-left: calc(var(--ksm-mobile-sub-link-padding-left) + var(--ksm-mobile-sub-link-padding-left)) !important;
	}
	
	body .ksm-sub-menu.ksm-depth-2 li a {
		padding-left: calc(var(--ksm-mobile-sub-link-padding-left) + var(--ksm-mobile-sub-link-padding-left) + var(--ksm-mobile-sub-link-padding-left)) !important;
	}
	
	body .ksm-sub-menu.ksm-depth-3 li a {
		padding-left: calc(var(--ksm-mobile-sub-link-padding-left) + var(--ksm-mobile-sub-link-padding-left) + var(--ksm-mobile-sub-link-padding-left)) !important;
	}


    /* ============================
       ACCORDION HANDLING
       ============================ */

    /* Pfeil für Menüs mit Children */
    .ksm-wrapper ul li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 0; height: 0;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-left: 5px solid currentColor;
        margin-left: 8px;
        vertical-align: middle;
    }

    /* Alle Sub-Menüs standardmäßig verstecken */
    .ksm-wrapper ul ul {
        display: none;
        padding-left: 0;
        background: var(--ksm-mobile-sub-bg, #fff);
        transition: all .3s ease;
    }

    /* Sichtbares Sub-Menü */
    .ksm-wrapper ul ul.ksm-open-sub {
        display: block;
		opacity: 1;
		visibility: visible;
    }

}

/* ==========================================================================
   6. ANIMATIONEN (Media-query-frei)
   ========================================================================== */

.ksm-anim-next { animation: ksmSlideInRight .3s forwards; }
.ksm-anim-back { animation: ksmSlideInLeft .3s forwards; }

@keyframes ksmSlideInRight {
    from { transform: translateX(30%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes ksmSlideInLeft {
    from { transform: translateX(-20%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}


/* ==========================================================================
   7. DEBUG OVERLAY (optional)
   ========================================================================== */

body.debug-ksm * {
    outline: 1px dashed rgba(255,0,0,0.25);
}

body.debug-ksm .ksm-wrapper {
    background: rgba(0,128,255,0.06) !important;
}

body.debug-ksm ul.ksm-active-menu {
    background: rgba(0,255,128,0.12) !important;
}

body.debug-ksm li.menu-item-has-children {
    background: rgba(255,255,0,0.1);
}

body.debug-ksm .ksm-sub-menu-title {
    background: rgba(128,0,255,0.15) !important;
}

body.debug-ksm .ksm-menu-back {
    background: rgba(255,0,128,0.15) !important;
}