.elementor-1061 .elementor-element.elementor-element-3749bdf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-3749bdf:not(.elementor-motion-effects-element-type-background), .elementor-1061 .elementor-element.elementor-element-3749bdf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1E3A8A;}.elementor-1061 .elementor-element.elementor-element-1dd148b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:1rem;--padding-bottom:1rem;--padding-left:0rem;--padding-right:6rem;}.elementor-1061 .elementor-element.elementor-element-30389f0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-30389f0.e-con{--align-self:center;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1061 .elementor-element.elementor-element-1381507 > .elementor-widget-container{margin:0rem -1rem 0rem 0rem;padding:0px 0px 0px 0px;}.elementor-1061 .elementor-element.elementor-element-e550ab8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:3% 3%;--row-gap:3%;--column-gap:3%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;--z-index:20;}.elementor-1061 .elementor-element.elementor-element-a78c9ee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-container{height:80px;border-radius:0px 0px 0px 0px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a{color:#000000;padding:0px 15px 0px 15px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li.current-menu-item > a{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger{float:right;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-close{color:rgba(51, 51, 51, 1);}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.elementor-1061 .elementor-element.elementor-element-7be8753{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:5;}.elementor-1061 .elementor-element.elementor-element-7be8753.e-con{--align-self:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main .elementor-item:hover,
.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main .elementor-item:focus{color:#61CE70;fill:#61CE70;}.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-1061 .elementor-element.elementor-element-17c44b7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#61CE7000;}.elementor-1061 .elementor-element.elementor-element-17c44b7 .e--pointer-framed .elementor-item:before,
.elementor-1061 .elementor-element.elementor-element-17c44b7 .e--pointer-framed .elementor-item:after{border-color:#61CE7000;}.elementor-1061 .elementor-element.elementor-element-3248ab8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-2df727c{--display:flex;}.elementor-1061 .elementor-element.elementor-element-d73e841{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1061 .elementor-element.elementor-element-d73e841:not(.elementor-motion-effects-element-type-background), .elementor-1061 .elementor-element.elementor-element-d73e841 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1E3A8A;}.elementor-1061 .elementor-element.elementor-element-6ea8601{--display:flex;}.elementor-1061 .elementor-element.elementor-element-a529d78{--display:flex;}.elementor-1061 .elementor-element.elementor-element-186cc31{--display:flex;}.elementor-1061 .elementor-element.elementor-element-faf500c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-29e85df{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1061 .elementor-element.elementor-element-29e85df:not(.elementor-motion-effects-element-type-background), .elementor-1061 .elementor-element.elementor-element-29e85df > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1E3A8A;}.elementor-1061 .elementor-element.elementor-element-c60b2b3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--gap:0rem 0rem;--row-gap:0rem;--column-gap:0rem;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-46c9455{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-46c9455.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-380b901{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-380b901.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-786049a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:1rem 1rem;--row-gap:1rem;--column-gap:1rem;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-786049a.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-f64b603{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:2rem 2rem;--row-gap:2rem;--column-gap:2rem;}.elementor-1061 .elementor-element.elementor-element-f64b603.e-con{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1061 .elementor-element.elementor-element-57e87fb.elementor-element{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-082cbf5.elementor-element{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-be3519c{--display:flex;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:2rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-be3519c.e-con{--align-self:flex-start;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-1061 .elementor-element.elementor-element-30389f0{--width:7%;}.elementor-1061 .elementor-element.elementor-element-e550ab8{--width:100%;}.elementor-1061 .elementor-element.elementor-element-a78c9ee{--width:100%;}.elementor-1061 .elementor-element.elementor-element-7be8753{--width:100%;}.elementor-1061 .elementor-element.elementor-element-3248ab8{--width:25%;}.elementor-1061 .elementor-element.elementor-element-faf500c{--width:25%;}.elementor-1061 .elementor-element.elementor-element-46c9455{--width:17%;}.elementor-1061 .elementor-element.elementor-element-380b901{--width:20%;}.elementor-1061 .elementor-element.elementor-element-786049a{--width:28%;}.elementor-1061 .elementor-element.elementor-element-f64b603{--width:60%;}.elementor-1061 .elementor-element.elementor-element-be3519c{--width:33%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1061 .elementor-element.elementor-element-a529d78{--width:31%;}.elementor-1061 .elementor-element.elementor-element-186cc31{--width:33%;}.elementor-1061 .elementor-element.elementor-element-faf500c{--width:33%;}}@media(max-width:1024px){.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}.elementor-1061 .elementor-element.elementor-element-d73e841{--justify-content:space-evenly;}.elementor-1061 .elementor-element.elementor-element-6ea8601{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1061 .elementor-element.elementor-element-a529d78{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-a529d78.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-186cc31{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-4ce5827 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1061 .elementor-element.elementor-element-faf500c{--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1061 .elementor-element.elementor-element-faf500c.e-con{--align-self:center;}}@media(max-width:767px){.elementor-1061 .elementor-element.elementor-element-3749bdf{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-1dd148b{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-1061 .elementor-element.elementor-element-30389f0{--width:2.1rem;}.elementor-1061 .elementor-element.elementor-element-e550ab8{--width:3.8rem;}.elementor-1061 .elementor-element.elementor-element-f72c0ee .elementskit-nav-logo > img{max-width:120px;max-height:50px;}.elementor-1061 .elementor-element.elementor-element-7be8753{--width:10rem;--z-index:0;}.elementor-1061 .elementor-element.elementor-element-2df727c{--margin-top:-2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-1061 .elementor-element.elementor-element-d73e841{--min-height:83px;}.elementor-1061 .elementor-element.elementor-element-6ea8601{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1061 .elementor-element.elementor-element-a529d78{--width:32%;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:8000000;}.elementor-1061 .elementor-element.elementor-element-a529d78.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-186cc31{--width:32%;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1061 .elementor-element.elementor-element-186cc31.e-con{--align-self:center;}.elementor-1061 .elementor-element.elementor-element-faf500c{--width:32%;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1061 .elementor-element.elementor-element-faf500c.e-con{--align-self:center;}}/* Start custom CSS for container, class: .elementor-element-a78c9ee *//* =========================================
KS x Elementskit – Mega-Menü (kompakt + funktionssicher)
Ziel: #ekit-megamenu-keysupply-shopmenue
========================================= */
/* ---------- Tokens ---------- */
:root{
--ks-mm-bg:#0E1724;
--ks-mm-panel:#101B2B;
--ks-mm-border:rgba(255,255,255,.08);
--ks-mm-text:#F9FAFB;
--ks-mm-dim:#D1D5DB;
--ks-mm-hover:#FFFFFF;
--ks-mm-blue:#3B82F6;
--ks-mm-orange:#FF7A1A;
--ks-mm-tools:#9CA3AF;
--ks-mm-bundle:#3B82F6;
--ks-mm-sep:rgba(255,255,255,.06);
}
/* ---------- Header-Umfeld: nichts darf Panels clippen ---------- */
header, .header, .elementor-section, .elementor-container,
.elementor-widget-wrap, .elementskit-menu-container,
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
overflow: visible !important;
}
/* ---------- Z-Reihenfolge: Utility klickbar, Panels darüber ---------- */
.ks-utility{ position:relative; z-index:1002 !important; }
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{ position:relative; z-index:1001 !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-megamenu-panel{ z-index:1005 !important; }
/* ---------- Topbar / Container ---------- */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
background:var(--ks-mm-bg);
border:1px solid var(--ks-mm-border);
border-radius:12px;
padding:6px 10px;
box-shadow:0 6px 18px rgba(0,0,0,.28);
max-width:100%;
}
/* ---------- Top-Navigation (eine Zeile, kompakt, shrink statt wrap) ---------- */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important; /* nie umbrechen */
white-space:nowrap !important;
min-width:0 !important; /* echtes Shrinking */
gap:clamp(6px,.7vw,12px) !important; /* kompakter Grundabstand */
overflow:visible !important; /* keine interne Abschneidung */
}
/* Gleichmäßige Links (mit/ohne Dropdown) */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li{
position:relative !important; /* Anker für sein Panel */
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
display:inline-flex !important;
align-items:center !important;
padding-inline:clamp(8px,.9vw,12px) !important;
line-height:1.2 !important;
font-size:clamp(14px,1.00vw,16px) !important; /* moderat groß */
font-weight:700;
color:var(--ks-mm-text);
border-radius:10px;
transition:background .18s,color .18s,transform .18s;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover{
background:rgba(255,255,255,.06);
color:var(--ks-mm-hover);
transform:translateY(-1px);
}
/* Pfeil + Platzhalter (gleich breite Links) */
#ekit-megamenu-keysupply-shopmenue .elementskit-submenu-indicator{
margin-left:6px; font-size:.9em; color:var(--ks-mm-blue);
}
#ekit-megamenu-keysupply-shopmenue li:hover > a .elementskit-submenu-indicator,
#ekit-megamenu-keysupply-shopmenue li.ks-open > a .elementskit-submenu-indicator{
color:var(--ks-mm-orange);
}
#ekit-megamenu-keysupply-shopmenue
.elementskit-navbar-nav > li:not(.menu-item-has-children)
> a.ekit-menu-nav-link::after{
content:""; display:inline-block; width:14px; /* Breite ≈ Pfeil */
}
/* Hover-Brücke (gegen Abriss) */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li::after{
content:""; position:absolute; left:0; right:0; top:100%; height:12px; pointer-events:none;
}
/* ---------- Dropdown-Panel (wie früher: am jeweiligen ) ---------- */
#ekit-megamenu-keysupply-shopmenue .elementskit-megamenu-panel{
position:absolute !important; /* relativ zum */
left:0 !important;
right:auto !important;
top:calc(100% + 10px) !important;
transform:none !important;
visibility:hidden; opacity:0; pointer-events:none;
transition:opacity .16s, transform .16s, visibility 0s linear .16s;
width:max-content !important; /* inhaltssensitiv */
max-width:min(96vw,1360px) !important; /* viewportsicher */
min-width:520px !important; /* angenehme Basis */
box-sizing:border-box !important;
overflow:visible !important;
background:var(--ks-mm-panel) !important;
border:1px solid var(--ks-mm-border) !important;
border-radius:14px !important;
box-shadow:0 18px 40px rgba(0,0,0,.45) !important;
padding:16px !important;
display:flex !important; gap:12px !important; align-items:stretch !important;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel,
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li.ks-open > .elementskit-megamenu-panel,
#ekit-megamenu-keysupply-shopmenue .elementskit-megamenu-panel:hover{
visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
}
/* Panel-Inhalt clippt nie */
#ekit-megamenu-keysupply-shopmenue .elementskit-megamenu-panel *{
box-sizing:border-box !important; max-width:100% !important;
}
/* ---------- Karten im Panel + Farbkonzept ---------- */
#ekit-megamenu-keysupply-shopmenue .e-con.e-child{
flex:0 0 300px;
min-width:280px; max-width:340px;
display:flex; flex-direction:column;
background:rgba(255,255,255,.03);
border:1px solid var(--ks-mm-border);
border-radius:12px;
padding:12px 14px;
position:relative;
}
/* obere Linie in --col-accent */
#ekit-megamenu-keysupply-shopmenue .e-con.e-child::after{
content:""; position:absolute; left:10px; right:10px; top:6px;
height:3px; border-radius:3px;
background:var(--col-accent,#FF7A1A); opacity:.9;
}
/* Office – abgestuftes Orange */
.e-con.e-child[data-version="2024"]{ --col-accent:#FF7A1A !important; }
.e-con.e-child[data-version="2021"]{ --col-accent:#FF8D3A !important; }
.e-con.e-child[data-version="2019"]{ --col-accent:#FFA55F !important; }
.e-con.e-child[data-version="2016"]{ --col-accent:#FFBE86 !important; }
/* Windows & Bundles – blau */
.e-con.e-child.ks-mm-windows{ --col-accent:var(--ks-mm-blue) !important; }
.e-con.e-child.ks-mm-bundles{ --col-accent:var(--ks-mm-bundle, var(--ks-mm-blue)) !important; }
/* Tools & Hilfe – neutral grau + eigener Hintergrund */
.e-con.e-child.ks-mm-tools{
--col-accent:var(--ks-mm-tools) !important;
background:rgba(255,255,255,.035) !important;
border-color:rgba(255,255,255,.10) !important;
}
/* ---------- Typografie in Karten ---------- */
#ekit-megamenu-keysupply-shopmenue h4,
#ekit-megamenu-keysupply-shopmenue h5{
color:var(--col-accent);
font-weight:800; font-size:16px;
margin:6px 0 8px; padding-bottom:4px;
border-bottom:1px solid var(--ks-mm-sep);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ks-mm-tools h4{ color:var(--ks-mm-tools) !important; }
.ks-mm-windows h4{ color:var(--ks-mm-blue) !important; }
.ks-mm-bundles h4{ color:var(--ks-mm-bundle, var(--ks-mm-blue)) !important; }
#ekit-megamenu-keysupply-shopmenue h6.elementor-heading-title{
margin:6px 0;
font-size:15px; font-weight:700;
line-height:1.35; color:var(--ks-mm-text);
}
#ekit-megamenu-keysupply-shopmenue h6 a{
display:inline-flex; align-items:center;
max-width:100%; padding:6px 10px;
border-radius:8px; color:var(--ks-mm-dim, #D1D5DB);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
transition:background .16s,color .16s,transform .16s;
}
#ekit-megamenu-keysupply-shopmenue h6 a:hover{
background:rgba(255,255,255,.08);
color:var(--ks-mm-hover);
}
/* ---------- Responsive Tuning (Laptops / MacBook Air) ---------- */
@media (max-width:1440px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{ gap:6px !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
padding-inline:8px !important; font-size:14px !important;
}
}
@media (max-width:1366px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{ gap:5px !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
padding-inline:6px !important; font-size:13.5px !important; letter-spacing:.05px;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-megamenu-panel{ min-width:500px !important; }
}
/* === KS Mega-Menü – nur auf sehr großen Screens leicht strecken === */
/* greift NICHT auf MacBook-Breiten; erst ab 1700px und 1920px+ */
@media (min-width: 1700px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
justify-content: center !important; /* Gruppe bleibt kompakt */
gap: clamp(14px, 1.2vw, 28px) !important; /* sanft mehr Luft */
padding-inline: clamp(10px, 1.2vw, 22px) !important;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
padding-inline: clamp(10px, 0.9vw, 16px) !important;/* nur minimal größer */
}
}
/* 2. Stufe für 1920px+ (noch subtiler) */
@media (min-width: 1920px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
gap: clamp(18px, 1.4vw, 32px) !important;
}
}
/* === KS Mega-Menü: Hover nur Schrift, keine graue Pille === */
/* Basis: Hintergrund-Hover abschalten */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
background: transparent !important; /* keine Pille */
transition: color .18s ease; /* sanfter Farbwechsel */
}
/* Hover-Effekt nur auf die Schrift */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover {
color: var(--ks-mm-hover, #ffffff) !important; /* leicht heller als normal */
transform: none !important; /* kein Hochspringen */
}
/* === Mega-Menü: Items sauber im Container "liegen" === */
/* 1) Inset links/rechts: Abstand entsteht am UL, nicht an den */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
padding-inline: clamp(14px, 2vw, 28px) !important; /* rückt ersten/letzten Link von der Rundung weg */
gap: clamp(10px, .9vw, 18px) !important; /* etwas mehr, aber kompakt */
align-items: center !important;
}
/* 2) Container minimal luftiger, ohne die Höhe aufzublasen */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
padding-block: 8px !important; /* oben/unten etwas Luft */
padding-inline: clamp(10px, 1.4vw, 18px) !important; /* bleibt schlank */
border-radius: 12px !important;
}
/* 3) Links vertikal perfekt mittig & gleich hoch */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
padding-block: 10px !important; /* gleiche „Hit Area“ oben/unten */
line-height: 1.25 !important;
}
/* 4) Pfeil bekommt eigenen kleinen Abstand, damit nichts anstößt */
#ekit-megamenu-keysupply-shopmenue .elementskit-submenu-indicator{
margin-left: 6px !important;
}
/* 5) Laptop-Feintuning: etwas enger */
@media (max-width: 1366px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
padding-inline: clamp(10px, 1.2vw, 18px) !important;
gap: 8px !important;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
padding-block: 8px !important;
}
}
/* === KS Mega-Menü: kein Zeilenumbruch bei langen Labels === */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
white-space: nowrap !important; /* kein Umbruch */
text-overflow: ellipsis !important; /* falls Platz zu knapp: „...“ */
overflow: hidden !important; /* verhindert Überlauf */
max-width: clamp(120px, 12vw, 200px) !important; /* flexible Breite */
}
/* Gleichmäßiger Abstand zwischen Items bleibt */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav {
flex-wrap: nowrap !important; /* keine zweite Zeile */
justify-content: center !important;
}
/* Optional: Schrift minimal verkleinern auf kleineren Screens */
@media (max-width: 1366px) {
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
font-size: 13.5px !important;
letter-spacing: .05px;
max-width: clamp(100px, 11vw, 160px) !important;
}
}
/* === KS Mega-Menü: kompaktere Abstände, kein Überlaufen === */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav {
gap: clamp(6px, 0.7vw, 10px) !important; /* enger zusammenrücken */
justify-content: center !important;
flex-wrap: nowrap !important;
padding-inline: clamp(10px, 1.4vw, 16px) !important;
}
/* Schriftgröße leicht angepasst für Balance */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
font-size: clamp(13.5px, 0.9vw, 15px) !important;
white-space: nowrap !important; /* kein Umbruch */
}
/* Extra kompakt auf MacBook-Displays */
@media (max-width: 1440px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
gap: 6px !important;
padding-inline: 10px !important;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
font-size: 13.2px !important;
padding-inline: 6px !important;
}
}
/* === KS Mega-Menü – sichtbarer, subtiler Farbwechsel === */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
color: #F9FAFB !important; /* Basisfarbe */
transition: color .25s ease, text-shadow .25s ease;
}
/* Hover: leicht hellere Schrift + sanfter Glow */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover {
color: #FFFFFF !important;
text-shadow: 0 0 6px rgba(59,130,246,0.25); /* ganz zarter blauer Glow */
}
/* Aktive Seite: leicht blau */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link {
color: #3B82F6 !important;
text-shadow: none !important;
}
/* === KS Mega-Menü – dezent grau, hellweiß beim Hover === */
/* Basis: leicht graue Schrift */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
color: #D1D5DB !important; /* dezentes Grau als Grundton */
transition: color .25s ease, transform .16s ease;
will-change: color, transform;
}
/* Hover oder geöffnet: hellweiß & leicht angehoben */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li:hover > a.ekit-menu-nav-link,
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li.menu-item-has-children:hover > a.ekit-menu-nav-link,
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li.ks-open > a.ekit-menu-nav-link,
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus-visible {
color: #FFFFFF !important;
transform: translateY(-1px) !important;
}
/* Aktive Seite: hellweiß + subtiler Glanz */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li.current-menu-item > a.ekit-menu-nav-link {
color: #FFFFFF !important;
transform: translateY(-1px) !important;
text-shadow: 0 0 6px rgba(255,255,255,.08);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7be8753 *//* =========================================
KS Utility Menu (rechts oben)
========================================= */
.ks-utility {
display: flex;
flex-direction: row; /* immer nebeneinander */
align-items: center;
justify-content: flex-end; /* nach rechts */
flex-wrap: nowrap !important; /* nie umbrechen */
white-space: nowrap;
gap: clamp(12px, 1vw, 18px); /* flexibler Abstand */
margin-left: auto;
/* Container-Styling aus Farbkonzept */
background: #1F2937; /* mittel-dunkel */
border: 1px solid rgba(255,255,255,.08);
border-top: 3px solid #10B981; /* grüner Trust-Border */
border-radius: 10px;
padding: 6px clamp(12px, 1.2vw, 18px);
/* Platz: verhindert „zu schmal“ */
min-width: 320px; /* feste Mindestbreite */
max-width: 100%;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
z-index: 1002;
}
/* Links */
.ks-utility a {
flex: 0 1 auto; /* darf schrumpfen */
min-width: 0; /* erlaubt Ellipsis */
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(13px, 0.95vw, 14px);
font-weight: 600;
color: #F9FAFB;
text-decoration: none;
transition: color .2s, transform .2s;
}
.ks-utility a:hover {
color: #3B82F6; /* Marken-Blau Hover */
transform: translateY(-1px);
}
/* Bullet-Akzent */
.ks-utility a::before {
content: "•";
color: #FF7A00; /* Orange */
margin-right: 6px;
font-size: 11px;
}
.ks-utility a:first-child::before { content: ""; }
/* ---------- Responsive Feintuning ---------- */
@media (max-width:1440px){
.ks-utility{ gap: 10px; padding-inline: 10px; min-width: 280px; }
.ks-utility a{ font-size: 13px; }
}
@media (max-width:1366px){
.ks-utility{ gap: 8px; padding-inline: 8px; min-width: 260px; }
.ks-utility a{ font-size: 12.5px; }
.ks-utility a::before{ content: none; } /* Punkte weg, falls eng */
}
@media (max-width:1280px){
.ks-utility{ gap: 6px; min-width: 240px; }
.ks-utility a{ font-size: 12px; letter-spacing: .1px; }
}
/* =========================================
KS Utility Menu (rechts oben, kompakt)
========================================= */
.ks-utility {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap !important;
white-space: nowrap;
gap: clamp(6px, 0.6vw, 10px); /* engerer Abstand */
margin-left: auto;
background: #1F2937;
border: 1px solid rgba(255,255,255,.08);
border-top: 3px solid #10B981;
border-radius: 10px;
padding: 6px clamp(8px, 0.9vw, 12px);
min-width: 280px; /* etwas schmaler */
max-width: 100%;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
z-index: 1002;
}
.ks-utility a {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(12.5px, 0.9vw, 13.5px); /* leicht kleiner */
font-weight: 600;
color: #F9FAFB;
text-decoration: none;
transition: color .2s, transform .2s;
}
.ks-utility a:hover {
color: #3B82F6;
transform: translateY(-1px);
}
/* Bullet enger + dezenter */
.ks-utility a::before {
content: "•";
color: #FF7A00;
margin-right: 4px;
font-size: 10px;
}
.ks-utility a:first-child::before { content: ""; }
/* ---------- Responsive Feintuning ---------- */
@media (max-width:1440px){
.ks-utility{ gap: 8px; padding-inline: 8px; min-width: 260px; }
.ks-utility a{ font-size: 12.5px; }
}
@media (max-width:1366px){
.ks-utility{ gap: 6px; padding-inline: 6px; min-width: 240px; }
.ks-utility a{ font-size: 12px; }
.ks-utility a::before{ content: none; }
}
/* === KS Utility – fix: nur so breit wie Inhalt, ohne links „Luft“ === */
.ks-utility{
display: inline-flex !important; /* verhindert Stretching */
flex: 0 0 auto !important; /* wächst nicht */
width: max-content !important; /* hug content */
justify-content: flex-start !important; /* Items links im Container */
margin-left: auto !important; /* bleibt rechts im Header */
gap: clamp(6px, .6vw, 12px) !important; /* kompakter Abstand */
padding: 6px clamp(8px, .9vw, 12px) !important;
}
/* Schrift etwas kompakter, bleibt einzeilig */
.ks-utility a{
font-size: clamp(12.5px, .9vw, 13.5px) !important;
white-space: nowrap !important;
}
/* sehr große Screens: minimal enger */
@media (min-width: 1600px){
.ks-utility{ gap: clamp(6px, .5vw, 10px) !important; }
}
/* === KS Header-Wrapper (Mega + Utility) === */
.ks-header {
display: flex;
align-items: center;
justify-content: space-between; /* verteilt Menüs links/rechts */
gap: 24px; /* Grundabstand zwischen den Menüs */
width: 100%;
max-width: 1600px; /* optional: Layoutbreite deckeln */
margin: 0 auto; /* mittig im Viewport */
padding-inline: 16px;
box-sizing: border-box;
}
/* Mega-Menü links */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container {
flex: 1 1 auto; /* darf wachsen, aber auch schrumpfen */
min-width: 0;
}
/* Utility rechts */
.ks-utility {
flex: 0 0 auto; /* bleibt kompakt rechts */
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
gap: clamp(8px, 0.8vw, 16px);
margin-left: auto; /* drückt Utility nach rechts */
background: #1F2937;
border: 1px solid rgba(255,255,255,.08);
border-top: 3px solid #10B981;
border-radius: 8px;
padding: 4px 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
/* Links im Utility */
.ks-utility a {
display: inline-flex;
align-items: center;
font-size: clamp(12px, 0.95vw, 14px);
font-weight: 600;
color: #F9FAFB;
text-decoration: none;
transition: color .2s, transform .2s;
}
.ks-utility a:hover {
color: #3B82F6;
transform: translateY(-1px);
}
.ks-utility a::before {
content: "•";
margin-right: 4px;
color: #FF7A00;
font-size: 11px;
}
.ks-utility a:first-child::before { content: ""; }
/* ================================
KS Utility – MacBook Compact (append only)
================================ */
/* Nie umbrechen + nur so breit wie Inhalt (kein Stretching) */
.ks-utility{
display: inline-flex !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
flex-wrap: nowrap !important;
width: max-content !important;
margin-left: auto !important; /* rechts bleiben */
}
/* Global etwas kompakter (ohne die großen-Screen-Optik zu ändern) */
.ks-utility{
gap: clamp(6px, 0.6vw, 12px) !important;
padding: 4px clamp(8px, 0.9vw, 12px) !important;
}
.ks-utility a{
display:inline-flex !important;
align-items:center !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size: clamp(12.5px, 0.9vw, 13.5px) !important;
line-height: 1.2 !important;
}
/* MacBook-Breiten (≤1366px): noch enger & Bullets ausblenden */
@media (max-width: 1366px){
.ks-utility{ gap: 6px !important; padding-inline: 8px !important; }
.ks-utility a{ font-size: 12px !important; letter-spacing: .05px; }
.ks-utility a::before{ content: none !important; } /* Platz gewinnen */
}
/* Optional: leicht enger bei 1280px (Air 13") */
@media (max-width: 1280px){
.ks-utility{ gap: 5px !important; }
.ks-utility a{ font-size: 11.8px !important; }
}
/* Safety: Container darf nichts clippen */
.header, .elementor-section, .elementor-container, .elementor-widget-wrap{
overflow: visible !important;
}
/* Haupt-/Mega-Menü VORNE */
.site-header,
.ks-header,
#ekit-megamenu-keysupply-shopmenue,
.elementskit-menu-container,
.elementskit-navbar,
.elementskit-megamenu-panel,
.elementskit-dropdown,
.elementskit-megamenu-wrapper {
position: relative !important;
z-index: 10010 !important; /* Menü + Panels ganz nach vorn */
}
/* Sticky-Header (falls aktiv) ebenfalls vorne */
.elementor-sticky--effects,
.is-stuck,
.sticky-header {
position: relative !important;
z-index: 10020 !important;
}
/* Utility-Menü HINTER das Hauptmenü */
.ks-utility {
position: relative !important;
z-index: 5 !important; /* vorher hattest du 1002 → runtersetzen */
}
/* Sicherheit: nichts clippen */
.header,
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
overflow: visible !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3c58373 *//* ===========================
KS Header – Account & Cart (Icons immer grün)
=========================== */
:root{
--ks-header-fg: #E8EEF7; /* Standard-Text */
--ks-header-fg-dim: #CFE0F6; /* Text gedimmt */
--ks-header-hover: #FFFFFF; /* Text Hover */
--ks-accent: #1E3A8A; /* Fokus */
--ks-green: #10B981; /* Icons grün */
--ks-orange: #FF7A1A; /* Badge */
--ks-orange-200: #ff9f59; /* Badge Hover */
}
/* Container */
.ks-header-actions{
display:inline-flex;
align-items:center;
gap:18px;
overflow:visible; /* nichts clippen */
}
/* Links (nur Textfarbe steuern) */
.ks-header-actions a{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--ks-header-fg-dim);
text-decoration:none;
font-weight:700;
line-height:1;
transition:color .18s ease, opacity .18s ease, transform .18s ease;
}
.ks-header-actions a:hover,
.ks-header-actions a:active{
color:var(--ks-header-hover);
}
/* Fokus sichtbar */
.ks-header-actions a:focus-visible{
outline:2px solid var(--ks-accent);
outline-offset:3px;
border-radius:10px;
}
/* === SVG-Icons – eine Quelle der Wahrheit ===
Icons nutzen stroke="currentColor"; wir färben über 'color' grün. */
.ks-header-actions svg.ks-account-icon,
.ks-header-actions svg.ks-cart-icon{
display:inline-block;
width:22px; height:22px;
min-width:22px; min-height:22px;
vertical-align:middle;
color:var(--ks-green); /* -> immer grün */
stroke:currentColor;
fill:none; /* falls Theme fill setzt */
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
transition:transform .18s ease, opacity .18s ease;
}
.ks-header-actions a:hover svg.ks-account-icon,
.ks-header-actions a:hover svg.ks-cart-icon{
transform:translateY(-1px);
}
/* Text neben den Icons */
.ks-header-actions a > span{
font-size:14px;
letter-spacing:.2px;
white-space:nowrap;
}
/* Warenkorb: Link/Wrap dürfen Badge nicht abschneiden */
.ks-cart-link{ display:inline-flex; align-items:center; overflow:visible; }
.ks-cart-wrap{ position:relative; display:inline-block; line-height:0; overflow:visible; }
/* Badge (nur hier, kein globales .badge!) */
.ks-cart-badge{
position:absolute;
top:-6px; right:-8px;
min-width:18px; height:18px; padding:0 6px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--ks-orange); color:#fff;
font-size:11px; font-weight:800; border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,.30);
transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
z-index:6;
}
.ks-cart-badge:empty{ display:none !important; }
.ks-cart-link:hover .ks-cart-badge{
background:var(--ks-orange-200);
transform:translateY(-1px);
box-shadow:0 3px 8px rgba(0,0,0,.35);
}
/* Compact Mode */
.ks-header-actions.is-compact{ gap:12px; }
.ks-header-actions.is-compact a > span{ display:none; }
/* Responsive */
@media (max-width:780px){
.ks-header-actions{ gap:14px; }
.ks-header-actions svg.ks-account-icon,
.ks-header-actions svg.ks-cart-icon{ width:20px; height:20px; min-width:20px; min-height:20px; }
.ks-cart-badge{ top:-5px; right:-6px; min-width:16px; height:16px; font-size:10px; }
}
@media (max-width:560px){
.ks-header-actions{ gap:12px; }
.ks-header-actions a > span{ display:none; }
}
/* Editor-Failsafe: niemals fremde .badge-Styles überschreiben */
.elementor-editor-active .badge{ all: unset; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3749bdf *//* === KS Header row: prevent clipping & allow proper shrink === */
.ks-header{ /* use your header row/wrapper class */
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(10px,1vw,18px);
padding-right:clamp(10px,1.2vw,20px);
min-width:0; /* allow children to shrink */
}
/* Mega menu should take leftover space and be allowed to shrink */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
flex:1 1 auto;
min-width:0; /* critical: prevents pushing out the right side */
}
/* Utility stays compact, never grows */
.ks-utility{
flex:0 0 auto;
}
/* Right cluster (account + cart) — adjust .elementor-1061 .elementor-element.elementor-element-3749bdf to your wrapper if needed */
.ks-header-right{
display:flex;
align-items:center;
flex:0 0 auto; /* fixed-size cluster on the right */
gap:clamp(8px,0.8vw,14px);
min-width:0;
}
/* Make sure NOTHING in the header clips the far-right content */
header, .header, .elementor-section, .elementor-container, .elementor-widget-wrap{
overflow:visible !important;
}
/* Tighten spacing & labels on MacBook widths so the cart fits comfortably */
@media (max-width:1366px){
.ks-header{ gap:clamp(8px,.8vw,12px); padding-right:12px; }
.ks-utility{ gap:6px; padding:4px 8px; }
.ks-header-right{ gap:10px; }
.ks-header-right *{ font-size:13px; line-height:1.2; } /* generic label shrink */
}
/* If your account/cart texts still push the edge, hide long labels at tight widths */
@media (max-width:1366px){
.ks-header-right .ks-label--long{ display:none; } /* optional helper class for long text */
}
/* ===================== KS HEADER – Overflow Kill & Shrink ===================== */
/* Header-Zeile darf nie breiter als der Viewport werden */
.ks-header{
box-sizing: border-box;
width: 100%;
max-width: 100vw;
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
overflow: visible; /* Dropdowns dürfen nach unten, nicht seitlich */
}
/* Alle direkten Flex-Kinder dürfen schrumpfen (kritisch!) */
.ks-header > *{ min-width: 0; }
/* Megamenu-Container: keine negativen Ränder/breitenfixen Werte */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden; /* verhindert, dass breite ULs nach außen drücken */
flex: 1 1 auto;
min-width: 0;
}
/* UL der Hauptnavigation: Zeilenumbruch erlauben statt nowrap */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
display: flex;
flex-wrap: wrap; /* darf umbrechen */
gap: clamp(6px, .8vw, 12px);
white-space: normal !important; /* überschreibt evtl. nowrap */
max-width: 100%;
}
/* Menü-Links: kompaktere Innenabstände auf schmalen Viewports */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a{
padding-inline: clamp(8px, 1.2vw, 14px) !important;
}
/* Rechte Headergruppe (Account/Cart) darf nie „aus dem Rand“ drücken */
.ks-header-right{ min-width: 0; flex: 0 0 auto; }
.ks-header-right *{ max-width: 100%; }
/* Logos/Icons im Header: nie größer als Spalte */
.ks-header img,
.ks-header svg{ max-width: 100%; height: auto; }
/* Elementor-Hüllen: verhindern, dass Innenleben > 100vw wird */
header,
.header,
.elementor-section .elementor-container,
.elementor-section .elementor-container .elementor-column,
.elementor-widget-wrap{
box-sizing: border-box;
max-width: 100vw;
overflow-x: clip; /* nur X klippen, Y bleibt frei */
}
/* ------------------ Breakpoints (nur wenn’s eng wird) ------------------ */
@media (max-width: 1200px){
/* etwas engere Abstände in der Zeile */
.ks-header{ gap: clamp(6px, .8vw, 12px); }
}
/* Tablet/Phone: Menü bricht sauber um, Labels kürzen */
@media (max-width: 992px){
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
gap: 8px 10px;
}
/* Sehr lange Labels optional kürzen (falls vorhanden) */
.ks-header-right .ks-label--long{ display:none; }
}
/* iOS/Notch-Phones: absolut sicher gegen seitlichen Drift */
@media (max-width: 820px){
.ks-header,
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
/* ===== Mobile Header Layout (≤ 992px) – CLEAN & FIXED ===== */
@media (max-width: 992px){
/* Header-Grundlayout */
.ks-header{
display:grid;
grid-template-columns: 1fr auto auto; /* [Logo/Leer] [UTILITY] [HAMBURGER] */
align-items:center;
gap:10px;
padding-inline:max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
box-sizing:border-box;
max-width:100vw;
}
.ks-header *{ max-width:100%; }
/* Utility mittig */
.ks-utility{
grid-column:2;
justify-self:center;
flex:0 0 auto;
min-width:0;
}
/* Hamburger-Button (KS/ElementsKit) */
.ks-hamburger,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle,
.elementskit-menu-toggler,
.elementskit-menu-hamburger{
grid-column:3;
justify-self:end;
display:inline-flex !important;
width:44px; height:44px;
align-items:center; justify-content:center;
border-radius:10px;
background:rgba(17,24,39,.7);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 6px 16px rgba(0,0,0,.25);
color:#ff6a00;
line-height:1; padding:0;
}
/* Desktop-Menü im Header ausblenden */
#ekit-megamenu-keysupply-shopmenue .elementskit-nav-menu--desktop,
#ekit-megamenu-keysupply-shopmenue nav > ul{
display:none !important;
}
/* Logo/Left-Cluster */
.ks-header-left, .site-logo{
grid-column:1; justify-self:start;
}
/* Keine horizontale Scrollbar vom Header her */
header, .header, .elementor-section, .elementor-container{ overflow-x:clip; }
}
/* ===== Burger-Button Optik (≤768px) ===== */
@media (max-width: 768px){
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{
width:44px; height:44px;
display:grid; place-items:center;
border-radius:10px;
background:#0f1722;
border:1px solid rgba(255,255,255,.12);
padding:0; line-height:1;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle > *{
font-size:22px; width:22px; height:22px;
color:#e5e7eb; fill:#e5e7eb;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle::before,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle::after{
content:none !important;
}
}
/* ===== Off-Canvas & Overlay — SCOPED & SAFE (nur ≤ 992px) ===== */
@media (max-width: 992px){
/* Overlay: standardmäßig AUS */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay{
position:fixed !important; inset:0 !important;
background:rgba(0,0,0,.55) !important;
z-index:10010 !important;
opacity:0 !important; visibility:hidden !important;
pointer-events:none !important;
transition:opacity .25s ease !important;
display:block !important; /* vorhanden, aber unsichtbar */
}
/* Overlay AN nur wenn offen */
body.ekit-offcanvas-open #ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle[aria-expanded="true"] ~ .elementskit-menu-overlay{
opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}
/* Panel geschlossen per Default */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements{
position:fixed !important; top:0; right:0; bottom:0; left:auto;
width:min(88vw, 360px); max-width:100%;
background:#0f1722;
border-left:1px solid rgba(255,255,255,.08);
z-index:10020 !important;
transform:translateX(100%) !important;
transition:transform .25s ease !important;
overflow-y:auto !important; overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
}
/* Panel offen */
body.ekit-offcanvas-open #ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle[aria-expanded="true"] + .elementskit-menu-offcanvas-elements{
transform:translateX(0) !important;
}
/* MENÜLISTE: nur im offenen Panel sichtbar */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav{
display:none !important; visibility:hidden !important; opacity:0 !important;
}
body.ekit-offcanvas-open #ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav{
display:block !important; visibility:visible !important; opacity:1 !important;
}
/* Vertikaler Stack + kompakte Typo */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav{
list-style:none; margin:0; padding:6px 0;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li{
display:block; width:100%;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a{
display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:12px 16px;
color:#e5e7eb !important; text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.06);
font-size:15px; line-height:1.25;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a:hover{
color:#10B981 !important; background:rgba(255,255,255,.04);
}
/* Dropdown-Indikator kompakt */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li .elementskit-submenu-indicator{
margin-left:auto; transform:rotate(0deg); transition: transform .2s ease;
filter:brightness(0) invert(1); opacity:.75;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements li.elementskit-dropdown-open > a .elementskit-submenu-indicator{
transform:rotate(180deg);
}
/* Submenüs einklappbar (unterstützt class & aria-expanded) */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown{
display:block !important; max-height:0; overflow:hidden;
transition:max-height .25s ease; background:transparent; padding:0;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements li.elementskit-dropdown-open > .elementskit-dropdown,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements a[aria-expanded="true"] + .elementskit-dropdown{
max-height:600px;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown li a{
display:block; padding:10px 16px 10px 28px;
color:#cfd6e3 !important; border-bottom:1px solid rgba(255,255,255,.06);
font-size:14px;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown li a:hover{
color:#ff6a00 !important; background:rgba(255,255,255,.03);
}
/* horizontales Scrollen unterbinden */
html, body{ overflow-x:hidden !important; }
}
/* Z-Index-Hierarchie schlank & korrekt */
header, .header, .elementor-section, .elementor-container{ position:relative; z-index:10; }
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements{ z-index:10020; }
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay{ z-index:10010; }
/* =========================
ElementsKit Mega-Menü – Mobile Fix (≤ 992px)
========================= */
@media (max-width: 992px){
/* A) Im Header: Desktop-Navi zuverlässig verstecken
(nur innerhalb DEINES Menü-Containers) */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container
:is(nav, .elementskit-navbar-nav, .elementskit-nav-menu--desktop){
display: none !important;
visibility: hidden !important;
}
/* Burger-Button darf sichtbar bleiben (Optik aus deinen Styles) */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{
display: inline-flex !important;
}
/* B) Off-Canvas: nur DORT die Liste sichtbar machen & vertikal stapeln */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements{
position: fixed !important;
top: 0; right: 0; bottom: 0; left: auto;
width: min(88vw, 360px);
max-width: 100%;
background: #0f1722;
border-left: 1px solid rgba(255,255,255,.08);
z-index: 10020 !important;
transform: translateX(100%) !important;
transition: transform .25s ease !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
/* Panel auf, wenn Burger aktiv/Body gelockt */
body.ekit-offcanvas-open #ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle[aria-expanded="true"] + .elementskit-menu-offcanvas-elements{
transform: translateX(0) !important;
}
/* Overlay sauber steuern (nur sichtbar wenn offen) */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay{
position: fixed !important; inset: 0 !important;
background: rgba(0,0,0,.55) !important;
z-index: 10010 !important;
opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
transition: opacity .25s ease !important;
display: block !important;
}
body.ekit-offcanvas-open #ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle[aria-expanded="true"] ~ .elementskit-menu-overlay{
opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
/* C) Listen im Off-Canvas: vertikal, kompakt, gut klickbar */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav{
display: block !important; /* nur im Panel sichtbar */
visibility: visible !important;
opacity: 1 !important;
list-style: none; margin: 0; padding: 8px 0;
max-width: 100%;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li{
display: block; width: 100%;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a{
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 12px 16px;
color: #e5e7eb !important; text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 15px; line-height: 1.25;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a:hover{
color: #10B981 !important; background: rgba(255,255,255,.04);
}
/* D) Mega-Menü/Dropdowns: mobil kompakt & einklappbar */
/* Positionierung resetten – keine riesigen, absolut positionierten Panels */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements
:is(.elementskit-megamenu-panel, .elementskit-dropdown){
position: static !important; inset: auto !important;
width: 100% !important; max-width: 100% !important;
transform: none !important; box-shadow: none !important;
background: transparent !important; border: 0 !important; padding: 0 !important;
}
/* Einklappen per max-height (ElementsKit setzt oft .elementskit-dropdown-open) */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown{
display: block !important;
max-height: 0; overflow: hidden;
transition: max-height .25s ease;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements
li.elementskit-dropdown-open > .elementskit-dropdown,
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements
a[aria-expanded="true"] + .elementskit-dropdown{
max-height: 600px; /* ausreichend für mehrere Einträge */
}
/* Sub-Links innen etwas eingerückt */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown li a{
display: block; padding: 10px 16px 10px 28px;
color: #cfd6e3 !important; border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 14px;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements .elementskit-dropdown li a:hover{
color: #ff6a00 !important; background: rgba(255,255,255,.03);
}
/* Chevron kleiner + drehen bei „open“ */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements
.elementskit-navbar-nav > li .elementskit-submenu-indicator{
margin-left: auto; transform: rotate(0deg); transition: transform .2s ease;
filter: brightness(0) invert(1); opacity: .75;
}
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements
li.elementskit-dropdown-open > a .elementskit-submenu-indicator{
transform: rotate(180deg);
}
/* Sicherheit: keine horizontale Scrollbar */
html, body{ overflow-x: hidden !important; }
}
/* Z-Index schlank & korrekt */
header, .header, .elementor-section, .elementor-container{ position:relative; z-index:10; }
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-offcanvas-elements{ z-index:10020; }
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-overlay{ z-index:10010; }
/* ===== Default (Desktop & große Breiten): Desktop an, Mobile aus ===== */
.ks-header-desktop{ display:block !important; }
.ks-header-mobile{ display:none !important; }
/* ===== Tablet QUERFORMAT → Mobile-Menü verwenden ===== */
/* iPad/Android Landscape: 820–1180px */
@media (orientation: landscape) and (min-width:820px) and (max-width:1180px){
.ks-header-desktop{ display:none !important; }
.ks-header-mobile{ display:block !important; }
/* Burger & Offcanvas im Landscape sicher sichtbar */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{ display:inline-flex !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-nav-menu--desktop,
#ekit-megamenu-keysupply-shopmenue nav > ul{ display:none !important; }
}
/* Optional: iPad Pro 12.9" (1366px) auch als Tablet-Quer behandeln */
@media (orientation: landscape) and (min-width:1181px) and (max-width:1366px){
.ks-header-desktop{ display:none !important; }
.ks-header-mobile{ display:block !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{ display:inline-flex !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-nav-menu--desktop,
#ekit-megamenu-keysupply-shopmenue nav > ul{ display:none !important; }
}
/* ===== Bereits vorhandene Mobile-Logik (≤992px) bleibt wie gehabt ===== */
@media (max-width:992px){
.ks-header-desktop{ display:none !important; }
.ks-header-mobile{ display:block !important; }
}
/* ===== Default: Desktop an, Mobile aus ===== */
.ks-header-desktop{ display:block !important; }
.ks-header-mobile{ display:none !important; }
/* ===== Tablet QUERFORMAT → Mobile-Menü NUR 820–1180px ===== */
@media (orientation:landscape) and (min-width:820px) and (max-width:1180px){
.ks-header-desktop{ display:none !important; }
.ks-header-mobile{ display:block !important; }
/* Burger sichtbar, Desktopliste weg */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{ display:inline-flex !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-nav-menu--desktop,
#ekit-megamenu-keysupply-shopmenue nav > ul{ display:none !important; }
}
/* ===== Mobile (≤992px) wie gehabt ===== */
@media (max-width:992px){
.ks-header-desktop{ display:none !important; }
.ks-header-mobile{ display:block !important; }
}
/* ===== HARTE SICHERUNG: ab 1200px IMMER Desktop ===== */
@media (min-width:1200px){
.ks-header-desktop{ display:block !important; }
.ks-header-mobile{ display:none !important; }
/* Desktop-Menü wieder an, Burger aus */
#ekit-megamenu-keysupply-shopmenue .elementskit-menu-toggle{ display:none !important; }
#ekit-megamenu-keysupply-shopmenue .elementskit-nav-menu--desktop,
#ekit-megamenu-keysupply-shopmenue nav > ul{
display:flex !important;
}
}
/* === Desktop-Layout: Menü zentrieren auf großen Bildschirmen === */
@media (min-width:1200px){
/* Haupt-Menücontainer */
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
padding-inline: clamp(20px, 3vw, 60px) !important; /* mehr Luft links/rechts */
box-sizing: border-box !important;
}
/* UL der Navigation mittig halten */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
justify-content: center !important;
margin-inline: auto !important;
width: auto !important;
}
/* Optional: erster Menüpunkt minimal Abstand zum Rand */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li:first-child{
margin-left: clamp(12px, 2vw, 32px) !important;
}
/* Letzter Menüpunkt nicht ganz am rechten Rand kleben */
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li:last-child{
margin-right: clamp(12px, 2vw, 32px) !important;
}
}
/* === TV/Large (>=1600px) — exakt wie Laptop, mittig im Container === */
@media (min-width:1600px){
/* 1) Dunkler Container: mittig + Innenabstand wieder einschalten */
body .ks-header-desktop
#ekit-megamenu-keysupply-shopmenue.elementskit-menu-container{
max-width:1320px !important; /* Laptop-Breite */
margin:0 auto !important; /* Container mittig */
padding:0 18px !important; /* gleiche Luft links/rechts (wichtig!) */
box-sizing:border-box !important;
text-align:center !important; /* für inline-flex-Zentrierung */
}
/* 2) Wrapper neutralisieren (kein space-between/stretch) */
body .ks-header-desktop
#ekit-megamenu-keysupply-shopmenue :is(nav,.elementskit-nav-menu--desktop){
display:block !important;
width:100% !important;
margin:0 auto !important;
padding:0 !important;
}
/* 3) UL: shrink-to-fit + mittig + kleinere Abstände */
body .ks-header-desktop
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav{
display:inline-flex !important; /* zentrierbar via text-align */
width:max-content !important; /* nur so breit wie nötig */
margin:0 auto !important;
padding:0 !important;
gap:12px !important; /* enger wie am Laptop */
justify-content:center !important;
}
/* 4) Items/Links kompakt, keine Außenränder */
body .ks-header-desktop
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li{
margin:0 !important; flex:0 0 auto !important;
}
body .ks-header-desktop
#ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav > li > a{
padding-inline:10px !important;
}
}
/* === KS Menü – leichte Rechtsverschiebung, überall === */
.ks-header-desktop #ekit-megamenu-keysupply-shopmenue .elementskit-navbar-nav {
position: relative !important;
left: 8px !important; /* 8–20px feinjustieren */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a529d78 *//* ===============================
KS Offcanvas – Clean Final
=============================== */
.ks-offcanvas{
--bg:#0f1722;
--fg:#e5e7eb;
--accent:#ff6a00; /* Orange */
--accent-ok:#18b572; /* Grün */
--panel-w:min(88vw,360px);
position:relative;
z-index:1000;
}
/* ---------- Burger ---------- */
.ks-menu-toggle{
display:inline-grid; place-items:center;
width:44px; height:44px; line-height:1; padding:0;
border-radius:10px;
background:rgba(17,24,39,.7);
border:1px solid rgba(255,255,255,.08);
color:var(--accent);
box-shadow:0 6px 16px rgba(0,0,0,.25);
-webkit-tap-highlight-color:transparent;
outline:0;
}
.ks-burger{
position:relative; width:22px; height:2px;
background:currentColor; border-radius:2px;
}
.ks-burger::before,
.ks-burger::after{
content:""; position:absolute; left:0; right:0; height:2px;
background:currentColor; border-radius:2px;
}
.ks-burger::before{ top:-4px; }
.ks-burger::after { top: 4px; }
/* States Burger (kein Rot) */
.ks-menu-toggle:hover{ color:var(--accent-ok); border-color:rgba(255,255,255,.12); }
.ks-menu-toggle,
.ks-menu-toggle:link,
.ks-menu-toggle:visited,
.ks-menu-toggle:focus,
.ks-menu-toggle:active{
color:var(--accent);
background:rgba(17,24,39,.7);
border-color:rgba(255,255,255,.08);
}
body.ks-menu-open .ks-menu-toggle{
color:var(--accent-ok) !important;
background:rgba(17,24,39,.85) !important;
border-color:rgba(255,255,255,.12) !important;
}
/* ---------- Overlay & Panel ---------- */
.ks-offcanvas__overlay{
position:fixed; inset:0; background:rgba(0,0,0,.55);
z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.ks-offcanvas__panel{
position:fixed; top:0; right:0; bottom:0; left:auto;
width:var(--panel-w); max-width:100%;
background:rgba(15,23,34,.96);
color:var(--fg);
border-left:1px solid rgba(255,255,255,.08);
transform:translateZ(0) translateX(100%);
transition:transform .3s cubic-bezier(.25,1,.3,1);
overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
z-index:1001;
}
@supports (padding:max(0px)){
.ks-offcanvas__panel{ padding-top:max(0px, env(safe-area-inset-top)); }
}
/* ---------- Panel-Header & Close ---------- */
.ks-panel-head{
display:flex; align-items:center; justify-content:space-between;
padding:16px clamp(14px,3.5vw,18px);
font-weight:800;
border-bottom:1px solid rgba(255,255,255,.08);
}
.ks-menu-close{
display:flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:10px;
background:rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.08) !important;
color:var(--fg) !important;
line-height:1; padding:0; font-size:0 !important;
-webkit-tap-highlight-color:transparent; outline:0; position:relative; overflow:hidden;
}
.ks-menu-close > *{ display:none !important; } /* evtl. Theme-Icons verstecken */
.ks-menu-close::before{
content:""; display:block; width:18px; height:18px; background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ks-menu-close:hover{ color:var(--accent) !important; border-color:rgba(255,255,255,.12) !important; }
.ks-menu-close:active{ color:var(--accent-ok) !important; }
/* ---------- Navigation: Capsules ---------- */
:root{
--ks-pill-bg: rgba(255,255,255,.06);
--ks-pill-bg-hover: rgba(255,255,255,.10);
--ks-pill-border: rgba(255,255,255,.12);
}
.ks-nav{ list-style:none; margin:10px 0 32px; padding:0 10px; }
.ks-nav > li{ padding:7px 0; }
.ks-nav > li > a,
.ks-sub-toggle{
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:14px 16px;
background:var(--ks-pill-bg);
border:1px solid var(--ks-pill-border);
border-radius:999px;
color:#e5e7eb !important; text-decoration:none;
font-size:16px; line-height:1.25;
box-shadow:0 2px 10px rgba(0,0,0,.18);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .06s;
-webkit-tap-highlight-color:transparent;
}
.ks-nav > li > a:hover,
.ks-sub-toggle:hover{
background:var(--ks-pill-bg-hover);
border-color:rgba(255,255,255,.18);
box-shadow:0 6px 14px rgba(0,0,0,.32);
color:#fff !important;
}
.ks-nav > li > a:active,
.ks-sub-toggle:active{ transform:translateY(1px); }
/* Fokus-Ring (Tastatur) */
.ks-nav > li > a:focus-visible,
.ks-sub-toggle:focus-visible,
.ks-menu-close:focus-visible,
.ks-menu-toggle:focus-visible{
outline:2px solid rgba(24,181,114,.7);
outline-offset:2px;
}
@supports .elementor-1061 .elementor-element.elementor-element-a529d78(:focus-visible){ .ks-nav a:focus{ outline:none; } }
/* ---------- Submenu Level 1 ---------- */
.ks-sub{
list-style:none; margin:0; padding:6px 0 0;
max-height:0; overflow:hidden;
transition:max-height .35s cubic-bezier(.3,.7,.3,1);
position:static !important; display:block !important; clear:both !important;
}
.ks-sub li{ padding:6px 10px 6px 22px; }
.ks-sub li a{
display:flex; align-items:center; gap:8px;
padding:12px 14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
color:#cfd6e3 !important; text-decoration:none;
font-size:14.5px;
transition:background .2s, border-color .2s, color .2s;
}
.ks-sub li a:hover{
background:rgba(255,255,255,.09);
border-color:rgba(255,255,255,.18);
color:#fff !important;
}
/* Chevron (L1) – Orange → Grün */
.ks-sub-toggle{ position:relative; align-items:center; min-height:48px; }
.ks-sub-toggle::after{
content:""; flex:0 0 auto; width:16px; height:16px; margin-left:10px; translate:0 -1px;
background:var(--accent); opacity:.95;
transition:transform .2s, background-color .2s, opacity .2s;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ks-sub-toggle:hover::after{ background:var(--accent-ok); }
.ks-sub-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); background:var(--accent-ok); }
/* ---------- Submenu Level 2 (Subgroups) ---------- */
.ks-sub > .has-sub-2{ margin:8px 0; }
.ks-subgroup-toggle{
display:flex; align-items:center; justify-content:space-between;
gap:12px; width:100%; padding:13px 16px;
background:var(--ks-pill-bg);
border:1px solid var(--ks-pill-border);
border-radius:999px;
color:#e5e7eb; text-align:left;
font-size:15.5px; line-height:1.25;
box-shadow:0 2px 10px rgba(0,0,0,.18);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .06s;
}
.ks-subgroup-toggle:hover{
background:var(--ks-pill-bg-hover);
border-color:rgba(255,255,255,.18);
color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.32);
}
.ks-subgroup-toggle:active{ transform:translateY(1px); }
.ks-subgroup-toggle{ position:relative; }
.ks-subgroup-toggle::after{
content:""; flex:0 0 auto; width:14px; height:14px; margin-left:8px;
background:var(--accent); opacity:.95; transition:transform .2s, background-color .2s, opacity .2s;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ks-subgroup-toggle:hover::after{ background:var(--accent-ok); }
.ks-subgroup-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); background:var(--accent-ok); }
.ks-sub-2{
list-style:none; margin:6px 0 2px 0; padding:0 0 0 12px;
max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.3,.7,.3,1);
position:static !important; display:block !important; clear:both !important;
}
.ks-sub-2 li{ padding:6px 10px; }
.ks-sub-2 li a{
display:flex; align-items:center; gap:10px;
padding:12px 14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
color:#cfd6e3 !important; text-decoration:none;
font-size:14.5px;
transition:background .2s, border-color .2s, color .2s;
}
.ks-sub-2 li a:hover{
background:rgba(255,255,255,.09);
border-color:rgba(255,255,255,.18);
color:#fff !important;
}
/* ---------- Utility-Links: grüner Rand (kein Orange-Glow) ---------- */
.ks-utility-link{
background:var(--ks-pill-bg) !important;
border:1px solid rgba(24,181,114,.55) !important;
color:#e5f9ef !important;
box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
}
.ks-utility-link:hover,
.ks-utility-link:focus-visible{
background:rgba(24,181,114,.10) !important;
border-color:rgba(24,181,114,.75) !important;
color:#fff !important;
box-shadow:0 6px 14px rgba(0,0,0,.28) !important;
}
/* ---------- Open States & Scrollbar ---------- */
body.ks-menu-open .ks-offcanvas__overlay{ opacity:1; pointer-events:auto; }
body.ks-menu-open .ks-offcanvas__panel{ transform:translateX(0); }
body.ks-menu-open{ overflow:hidden; }
.ks-offcanvas__panel::-webkit-scrollbar{ width:8px; }
.ks-offcanvas__panel::-webkit-scrollbar-thumb{ background:#1f2937; border-radius:8px; }
/* ---------- Responsive / Desktop Hide ---------- */
@media (max-width:380px){
.ks-nav > li > a, .ks-sub-toggle{ padding:13px 14px; }
.ks-sub li a{ padding:11px 12px; }
.ks-sub-toggle::after{ width:13px; height:13px; }
}
@media (min-width:993px){ .ks-offcanvas{ display:none; } }
/* Page no horizontal scroll */
html,body{ overflow-x:clip; }
/* ===== KS Offcanvas Sichtbarkeit – angepasst ===== */
/* Mobile + Tablet (Portrait & Landscape): sichtbar */
.ks-offcanvas {
display: block !important;
}
/* Desktop (ab 1200px): ausgeblendet */
@media (min-width: 1200px) {
.ks-offcanvas {
display: none !important;
}
}/* End custom CSS */
/* Start custom CSS for theme-site-logo, class: .elementor-element-4ce5827 *//* =========================
KS Header – Tablet Logo Scaling
========================= */
/* Basis: immer responsive & mittig */
.tablet-logo img {
width: auto;
height: auto;
max-width: 100%;
object-fit: contain;
transition: all 0.25s ease;
}
/* === Tablet Hochformat (z. B. iPad Portrait) === */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.tablet-logo img {
max-width: 120px !important;
}
}
/* === Tablet Querformat (z. B. iPad Landscape, Galaxy Tab) === */
@media (min-width: 820px) and (max-width: 1180px) and (orientation: landscape) {
.tablet-logo img {
max-width: 140px !important;
}
}
/* === Optional: iPad Pro 12.9" Querformat === */
@media (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) {
.tablet-logo img {
max-width: 160px !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6c79da4 *//* ===========================
KS Header – Account & Cart (nur Icons grün)
=========================== */
:root{
--ks-header-fg: #E8EEF7; /* Standard-Text */
--ks-header-fg-dim: #CFE0F6; /* Text gedimmt */
--ks-header-hover: #FFFFFF; /* Text Hover */
--ks-accent: #1E3A8A; /* Fokus */
--ks-green: #10B981; /* Icons grün */
--ks-orange: #FF7A1A; /* Badge */
--ks-orange-200: #ff9f59; /* Badge Hover */
}
/* Container */
.ks-header-actions{
display: inline-flex;
align-items: center;
gap: 18px;
}
/* Links (nur Textfarbe beibehalten) */
.ks-header-actions a{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ks-header-fg-dim);
text-decoration: none;
font-weight: 700;
line-height: 1;
transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.ks-header-actions a:hover,
.ks-header-actions a:active{
color: var(--ks-header-hover);
}
/* Fokus */
.ks-header-actions a:focus-visible{
outline: 2px solid var(--ks-accent);
outline-offset: 3px;
border-radius: 10px;
}
/* SVG-Icons – unabhängig grün */
.ks-account-icon,
.ks-cart-icon{
width: 22px;
height: 22px;
stroke: var(--ks-green); /* fix: grün */
flex: 0 0 auto;
transition: transform .18s ease, opacity .18s ease;
}
.ks-header-actions a:hover .ks-account-icon,
.ks-header-actions a:hover .ks-cart-icon{
transform: translateY(-1px);
}
/* Text neben den Icons */
.ks-header-actions a > span{
font-size: 14px;
letter-spacing: .2px;
white-space: nowrap;
}
/* Warenkorb Wrap */
.ks-cart-wrap{ position: relative; display: inline-block; line-height: 0; }
/* Badge – Orange */
.ks-cart-badge{
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ks-orange);
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0,0,0,.30);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ks-cart-link:hover .ks-cart-badge{
background: var(--ks-orange-200);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
/* Compact Mode */
.ks-header-actions.is-compact{ gap: 12px; }
.ks-header-actions.is-compact a > span{ display: none; }
/* Responsive */
@media (max-width: 780px){
.ks-header-actions{ gap: 14px; }
.ks-account-icon, .ks-cart-icon{ width: 20px; height: 20px; }
.ks-cart-badge{ top: -5px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
}
@media (max-width: 560px){
.ks-header-actions a > span{ display: none; }
.ks-header-actions{ gap: 12px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf500c *//* ===========================
KS Header – Account & Cart (nur Icons grün)
=========================== */
:root{
--ks-header-fg: #E8EEF7; /* Standard-Text */
--ks-header-fg-dim: #CFE0F6; /* Text gedimmt */
--ks-header-hover: #FFFFFF; /* Text Hover */
--ks-accent: #1E3A8A; /* Fokus */
--ks-green: #10B981; /* Icons grün */
--ks-orange: #FF7A1A; /* Badge */
--ks-orange-200: #ff9f59; /* Badge Hover */
}
/* Container */
.ks-header-actions{
display: inline-flex;
align-items: center;
gap: 18px;
}
/* Links (nur Textfarbe beibehalten) */
.ks-header-actions a{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ks-header-fg-dim);
text-decoration: none;
font-weight: 700;
line-height: 1;
transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.ks-header-actions a:hover,
.ks-header-actions a:active{
color: var(--ks-header-hover);
}
/* Fokus */
.ks-header-actions a:focus-visible{
outline: 2px solid var(--ks-accent);
outline-offset: 3px;
border-radius: 10px;
}
/* SVG-Icons – unabhängig grün */
.ks-account-icon,
.ks-cart-icon{
width: 22px;
height: 22px;
stroke: var(--ks-green); /* fix: grün */
flex: 0 0 auto;
transition: transform .18s ease, opacity .18s ease;
}
.ks-header-actions a:hover .ks-account-icon,
.ks-header-actions a:hover .ks-cart-icon{
transform: translateY(-1px);
}
/* Text neben den Icons */
.ks-header-actions a > span{
font-size: 14px;
letter-spacing: .2px;
white-space: nowrap;
}
/* Warenkorb Wrap */
.ks-cart-wrap{ position: relative; display: inline-block; line-height: 0; }
/* Badge – Orange */
.ks-cart-badge{
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ks-orange);
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0,0,0,.30);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ks-cart-link:hover .ks-cart-badge{
background: var(--ks-orange-200);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
/* Compact Mode */
.ks-header-actions.is-compact{ gap: 12px; }
.ks-header-actions.is-compact a > span{ display: none; }
/* Responsive */
@media (max-width: 780px){
.ks-header-actions{ gap: 14px; }
.ks-account-icon, .ks-cart-icon{ width: 20px; height: 20px; }
.ks-cart-badge{ top: -5px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
}
@media (max-width: 560px){
.ks-header-actions a > span{ display: none; }
.ks-header-actions{ gap: 12px; }
}
/* Icons wirklich grün: SVG nutzt stroke="currentColor" */
.ks-account-icon,
.ks-cart-icon{
width: 22px;
height: 22px;
color: var(--ks-green); /* <— NEU: currentColor = grün */
stroke: currentColor; /* Fallback-Klarheit */
flex: 0 0 auto;
transition: transform .18s ease, opacity .18s ease;
}
/* Link & Wrap dürfen das Badge nicht abschneiden */
.ks-cart-link{ display:inline-flex; align-items:center; overflow: visible; }
.ks-cart-wrap{ position: relative; display: inline-block; line-height: 0; overflow: visible; }
/* Badge-Layout + Auto-hide wenn leer (zusätzlich zum JS) */
.ks-cart-badge{
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ks-orange);
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0,0,0,.30);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
z-index: 2; /* <— über dem Icon */
}
.ks-cart-badge:empty{ display: none !important; } /* <— auto-hide ohne Inline-Style */
.ks-cart-link:hover .ks-cart-badge{
background: var(--ks-orange-200);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
/* Pop-Animation wenn Zahl aktualisiert wurde (optional) */
.ks-cart-badge.updated { animation: ksPop .35s ease; }
@keyframes ksPop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
/* Responsive Feinschliff wie gehabt */
@media (max-width: 780px){
.ks-account-icon, .ks-cart-icon{ width: 20px; height: 20px; }
.ks-cart-badge{ top: -5px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
}
/* === KS Header Icons – Hard Fix (am Ende der CSS einfügen) === */
/* SVGs sichtbar & in der richtigen Größe */
.ks-header-actions svg.ks-account-icon,
.ks-header-actions svg.ks-cart-icon{
display: inline-block !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
vertical-align: middle !important;
}
/* Linie wirklich grün – unabhängig von Elternfarben */
.ks-header-actions svg.ks-account-icon,
.ks-header-actions svg.ks-cart-icon{
color: #10B981 !important; /* currentColor -> grün */
stroke: currentColor !important;
fill: none !important; /* falls irgendwo fill gesetzt wurde */
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
opacity: 1 !important;
}
/* Nichts clippen/abschneiden */
.ks-header-actions,
.ks-header-actions a,
.ks-cart-link,
.ks-cart-wrap{
overflow: visible !important;
}
/* Badge-Layering (falls genutzt) */
.ks-cart-wrap{ position: relative !important; z-index: 5; }
.ks-cart-badge{ z-index: 6; }
/* Optional: visuelles Debug (kurz aktivieren, um zu sehen ob das SVG da ist) */
/*
.ks-header-actions svg.ks-cart-icon{ outline: 1px dashed magenta; }
*//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d73e841 *//* ===============================
KS Header Mobile – Tablet QUERFORMAT (funktionierende stabile Version)
=============================== */
@media (min-width:820px) and (max-width:1180px) and (orientation:landscape){
/* Header-Zeile sicher als Flex, kein Wrap */
.ks-header-mobile{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:6px !important;
padding-left:10px !important;
padding-right:10px !important;
box-sizing:border-box !important;
width:100% !important;
max-width:100vw !important;
overflow:visible !important;
}
/* Alle Unter-Wrapper neutralisieren (Elementor Columns, e-cons etc.) */
.ks-header-mobile > *,
.ks-header-mobile .elementor-column,
.ks-header-mobile .e-con,
.ks-header-mobile .elementor-container,
.ks-header-mobile .e-con-inner{
flex:0 0 auto !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
display:contents !important;
}
/* Reihenfolge */
.ks-header-mobile .ks-offcanvas{ order:1 !important; margin-right:6px !important; }
.ks-header-mobile .tablet-logo{ order:2 !important; margin:0 auto !important; }
.ks-header-mobile .ks-header-right,
.ks-header-mobile .ks-header-actions{ order:3 !important; }
/* Logo mittig + kleiner */
.ks-header-mobile .tablet-logo{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
max-width:150px !important;
}
.ks-header-mobile .tablet-logo img{
max-width:140px !important;
height:auto !important;
}
/* Rechte Gruppe enger + leicht nach links ziehen, damit sie sichtbar bleibt */
.ks-header-mobile .ks-header-right,
.ks-header-mobile .ks-header-actions{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap !important;
margin-left:auto !important;
transform:translateX(-16px) !important; /* zieht den Block sichtbar rein */
}
/* Labels aus, Icons kleiner */
.ks-header-mobile .ks-header-right .ks-label,
.ks-header-mobile .ks-header-right .ks-label--long{
display:none !important;
}
.ks-header-mobile .ks-account-icon,
.ks-header-mobile .ks-cart-icon{
width:20px !important;
height:20px !important;
}
/* Sicherheit: keine Auto-Margins/Paddings */
.ks-header-mobile .ks-header-right > *,
.ks-header-mobile .ks-header-actions > *{
margin:0 !important;
padding:0 !important;
}
}
/* ===============================
Tablet HOCHFORMAT – Logo kleiner
=============================== */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
.ks-header-mobile .tablet-logo img{
max-width:120px !important;
height:auto !important;
}
}
/* === Tablet Querformat: Logo mittig + mehr Luft === */
@media (min-width:820px) and (max-width:1180px) and (orientation:landscape){
.ks-header-mobile{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
/* Mehr Luft */
padding-block: clamp(12px, 1.8vw, 18px) !important; /* oben/unten */
padding-inline: clamp(16px, 2.4vw, 32px) !important; /* links/rechts */
gap: 10px !important;
}
/* Logo exakt zentriert */
.ks-header-mobile .tablet-logo{
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
z-index:5 !important;
pointer-events:none;
}
.ks-header-mobile .tablet-logo img{
max-width:140px !important;
height:auto !important;
}
/* Burger links */
.ks-header-mobile .ks-offcanvas{ margin:0 !important; }
/* Rechte Gruppe rechts – ohne Überstand */
.ks-header-mobile .ks-header-right,
.ks-header-mobile .ks-header-actions{
margin-left:auto !important;
gap:8px !important;
transform:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-740cbbe *//* KS24 – Garantie-Badge (rechts neben Trustpilot) */
.ks-header-climate .ks-header-climate__guarantee{
display:inline-flex; align-items:center; gap:8px;
padding:6px 10px; border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#18b572; /* Marken-Grün für Icon & Text */
line-height:1; font-weight:600; font-size:12px;
white-space:nowrap; margin-left:12px;
}
.ks-header-climate .ks-header-climate__guarantee .ks-guarantee__icon{
width:18px; height:18px; display:block;
}
/* dunkle UIs: Text dezenter, Icon bleibt grün */
@media (max-width: 768px){
.ks-header-climate .ks-header-climate__guarantee{ font-size:11px; padding:5px 8px; }
.ks-header-climate .ks-header-climate__guarantee .ks-guarantee__icon{ width:16px; height:16px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-97c761b *//* Grundpositionierung in der Trust-Bar */
.ks-header-climate .ks-ssl-badge{
display:inline-block;
vertical-align:middle;
height:40px; /* entspricht dem viewBox-Height */
width:auto;
}
/* Hover: dezenter Lift/Glow (nur die Rand-Wahrnehmung) */
.ks-header-climate .ks-ssl-badge:hover {
filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
/* Spacing neben anderen Elementen */
.ks-header-climate .ks-ssl-badge { margin-left: 14px; }
/* Responsive: kleineren Text & Höhe leicht reduzieren */
@media (max-width:1024px){
.ks-header-climate .ks-ssl-badge{ height:36px; }
}
@media (max-width:768px){
.ks-header-climate .ks-ssl-badge{ height:34px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c60b2b3 *//* ===== KS24 – Header Climate / Trust-Bar ===== */
.ks-header-climate {
background: #1F2937; /* Hauptcontainer (Dark) */
border-bottom: 1px solid rgba(255,255,255,.08);
padding: 8px 20px;
color: #F9FAFB;
font-size: 12px;
}
.ks-header-climate .ks-header-climate__inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* LEFT: Stripe Climate Badge */
.ks-header-climate .ks-header-climate__left {
display: flex;
align-items: center;
}
.ks-header-climate .ks-header-climate__badge {
display: block;
width: 340px; /* genug Platz → keine Scrollbar */
height: 38px;
border: 0;
overflow: hidden;
}
/* CENTER: Claim + Payment Icons */
.ks-header-climate .ks-header-climate__center {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 auto;
justify-content: center;
}
.ks-header-climate .ks-header-climate__claim {
white-space: nowrap;
color: #D1D5DB; /* Sekundärfarbe */
font-weight: 500;
}
/* Payment Icons */
.ks-header-climate .ks-header-climate__center li {
list-style: none;
display: flex;
align-items: center;
}
/* Visa */
.ks-header-climate svg.icon-visa rect { fill: #1A1F71; } /* Visa Blau */
.ks-header-climate svg.icon-visa text { fill: #ffffff; }
/* Mastercard */
.ks-header-climate svg.icon-mastercard rect { fill: #000000; }
.ks-header-climate svg.icon-mastercard circle:first-of-type { fill: #EB001B; } /* Rot */
.ks-header-climate svg.icon-mastercard circle:last-of-type { fill: #F79E1B; } /* Gelb */
.ks-header-climate svg.icon-mastercard path { fill: #FF5F00; } /* Orange */
/* Apple Pay */
.ks-header-climate svg.icon-applepay rect { fill: #000000; } /* Schwarz BG */
.ks-header-climate svg.icon-applepay text { fill: #ffffff; } /* Weißer "Pay"-Text */
.ks-header-climate svg.icon-applepay path { fill: #ffffff; } /* Weißes Apple-Logo */
/* Stripe */
.ks-header-climate svg.icon-stripe path { fill: #635BFF; } /* Stripe Blau (#635BFF) */
/* Einheitliche Skalierung der SVGs */
.ks-header-climate .ks-header-climate__center svg {
width: 50px;
height: auto;
display: block;
}
/* RIGHT: Partner Logos */
.ks-header-climate .ks-header-climate__right {
display: flex;
align-items: center;
gap: 12px;
}
.ks-header-climate .ks-header-climate__right img {
height: 18px;
width: auto;
object-fit: contain;
opacity: .9;
transition: opacity .2s;
}
.ks-header-climate .ks-header-climate__right img:hover {
opacity: 1;
}
/* Responsive */
@media (max-width: 1024px) {
.ks-header-climate { padding: 8px 14px; }
.ks-header-climate .ks-header-climate__badge { width: 300px; height: 32px; }
.ks-header-climate .ks-header-climate__center svg { width: 40px; }
.ks-header-climate .ks-header-climate__right img { height: 16px; }
}
@media (max-width: 768px) {
.ks-header-climate .ks-header-climate__inner {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.ks-header-climate .ks-header-climate__badge { width: 280px; height: 30px; }
.ks-header-climate .ks-header-climate__claim { font-size: 11px; }
.ks-header-climate .ks-header-climate__center svg { width: 36px; }
.ks-header-climate .ks-header-climate__right img { height: 14px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-29e85df *//* ===== KS24 – Trust-Bar Höhe reduzieren ===== */
.ks-header-climate {
padding-top: 6px !important;
padding-bottom: 6px !important;
min-height: 38px !important; /* Sicherheitsnetz */
max-height: 48px !important; /* fixiert die maximale Höhe */
overflow: hidden !important; /* Content bleibt sauber eingepasst */
}
.ks-header-climate .ks-header-climate__inner {
align-items: center !important;
}
/* ===== KS24 – Trust-Bar Mobile Optimierung ===== */
@media (max-width: 768px) {
.ks-header-climate {
padding: 4px 10px !important; /* kompakter */
}
.ks-header-climate__inner {
flex-wrap: wrap !important; /* Umbruch erlauben */
justify-content: center !important;
gap: 10px !important; /* etwas Abstand zwischen Zeilen */
}
/* LEFT: Climate Badge */
.ks-header-climate__left {
flex: 1 1 100% !important;
display: flex !important;
justify-content: center !important;
order: 1 !important;
}
.ks-header-climate__badge {
width: 260px !important;
height: 32px !important;
}
/* CENTER: Claim + Payment Icons */
.ks-header-climate__center {
flex: 1 1 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 6px !important;
order: 2 !important;
}
.ks-header-climate__claim {
font-size: 12px !important;
}
.ks-header-climate__payments {
justify-content: center !important;
gap: 12px !important;
}
.ks-header-climate__payments img,
.ks-header-climate__payments svg {
height: 16px !important;
}
/* RIGHT: Partner Logos & SSL Badge */
.ks-header-climate__right {
flex: 1 1 100% !important;
justify-content: center !important;
order: 3 !important;
gap: 14px !important;
}
.ks-header-climate__logo {
height: 14px !important;
}
/* SSL Badge */
.ks-ssl-badge {
height: 34px !important;
padding: 0 12px !important;
}
.ks-ssl-badge .ks-ssl-sub {
display: none !important; /* nur Haupttitel zeigen */
}
}/* End custom CSS */