/*!
HEADER.CSS for header styles
*/

@media only screen and (min-width: 767px) {
    .home .falke-hader-nav-container{
        margin-top: -100px;
        transition: 1s;
        animation-timing-function: ease-in-out;
    }
}
.home .falke-hader-nav-container.active, .falkeScrolled .home .falke-hader-nav-container{
    margin-top: 0px;
}


/* Toggle button */
body:not(.home) .falke-toggle, .falkeScrolled .home .falke-toggle{
    display: none;
}
@media only screen and (max-width: 768px) {
    .falke-toggle{
        display: none !important;
    }
}
.falke-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
}
.falke-toggle .button{
    width: 60px;
    height: 34px;
    /*background-color: #d2d2d2;*/
    border-radius: 200px;
    border: 2px solid white;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    margin-top: 20px;
}
.falkeScrolled .falke-toggle .button{
    border-color: var(--green);
}
.falkeScrolled .falke-toggle .button::before{
    background-color: var(--green);
}
.falke-toggle .button::before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 200px;
    margin: 5px;
    transition: 0.2s;
}
.falke-toggle input:checked + .button{
    /*background-color: var(--green);*/
}
.falke-toggle input{
    display: none;
}
.falke-toggle input:checked + .button::before{
    transform: translateX(26px);
}
.falkeScrolled .falke-header-hide{
    display: none;
}
body:not(.home) .falke-header-hide p{
    color: var(--darkgrey) !important;
}
body:not(.home) .falke-header-hide img{
    filter: invert(1);
    opacity: .7;
}
@media only screen and (max-width: 767px) {
    .falke-header-hide{
        display: none;
    }
}
@media only screen and (min-width: 767px) and (max-width: 1023px) {
    .falke-hader-nav-container .elementor-nav-menu--dropdown{
        position: relative !important;
        width: 100% !important;
        left: unset !important;
        right: unset !important;
        top: unset !important;
    }
}


/* Startseite Navigation */
/* neu */
.falke-header-nav a{
    color: white;
}
.falke-header-nav .falke-footer-container > ul > li{
    width: auto;
}
.falke-header-nav .falke-footer-container > ul{
    justify-content: space-between;
}
.falke-header-nav .sub-menu{
    visibility: hidden;
    height: 0px;
    transition: height 0.6s;
}
.falke-header-nav:hover .sub-menu{
    visibility: visible;
    height: auto;
}
.falke-hader-nav-container{
    height: 100% !important;
}
/* elemeentor */
.falke-elementor-nav .elementor-nav-menu--dropdown{
    border-radius: 0px 0px 20px 20px !important;
    padding: 10px 0px;
}
.falke-elementor-nav ul.elementor-nav-menu--dropdown a{
    border-inline-start-width: 2px !important;
}
.falke-elementor-nav ul.elementor-nav-menu--dropdown li:last-child a{
    border-radius: 0px 0px 20px 20px !important;
}
.falke-elementor-nav .sub-arrow{
    display: none !important;
}

.falke-elementor-nav .elementor-nav-menu--dropdown li.current-menu-parent > a,
.falke-elementor-nav .elementor-nav-menu--dropdown li.current-menu-item > a{
    color: white;
}

/* alt*/
.falke-main-container,
#falke-glaskugel .falke-nav-container .row > div {
    display: none;
}
/*#falke-glaskugel:hover .falke-main-container{
    display: block;
}*/
/* mobile kein hover menu */
@media only screen and (min-width: 767px)  {
    #falke-glaskugel.falke-hovering-elements .falke-main-container, .falke-nav-container:hover .falke-main-container,
    #falke-glaskugel.falke-hovering-elements .falke-nav-container .row > div {
        /* display: block; */
        display: flex; /* new@v2 */
    }
}
@media only screen and (max-width: 1250px)  {
    .falke-nav-container.second-level{
        font-size: .8em;
    }
    .falke-main-nav > li > a{
        font-size: 1em;
    }
    .falke-nav-container .falke-col-right li{
        margin-top: 30px!important;
        margin-bottom: 30px!important;
    }
}
@media only screen and (max-width: 1250px) and (max-height: 850px) {
    /* smaller screens */
    .falke-nav-container a {
        font-size: 1rem!important;
    }

    .falke-nav-container .falke-col-right li {
        margin-top: 25px!important;
        margin-bottom: 25px!important;
    }
}
.falke-main-container ul{
    list-style-type: none;
}
.falke-nav-container a{
    text-decoration: none !important;
    color: white;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 500;
    pointer-events: all;
    padding: 10px;
    display: block;
}
.falke-nav-container a:hover{
    opacity: .8;
}
.falke-main-nav li:not(.clicked) .sub-menu, .second-level .falke-main-nav > li > a{
    display: none;
}
.falke-nav-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none; /* to avoid opening menu on normal scrolling */
    min-height: 60%;
    display: flex;
}
.falke-hovering-elements .falke-nav-container {
    /* pointer-events: all; */
}
.falke-nav-container .row {
    display: flex;
    flex-grow: 1;
}
.falke-nav-container .falke-col-left li{
    display: none;
}
.second-level .falke-col-left li{
    display: block;
}
.falke-main-nav li:nth-child(2),
.falke-main-nav li:nth-last-child(2){
    margin-left: -40px;
}
.falke-main-nav li:nth-child(1),
.falke-main-nav li:last-child{
    margin-left: -80px;
}
.falke-nav-container .falke-col-center, .falke-nav-container .falke-col-left{
    text-align: center;

    /* new@v2 */
    /* margin: auto; */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.falke-nav-container .falke-col-right{
    margin: auto;
}
.falke-nav-container.second-level .falke-col-right{
    padding-left: 100px;
}

.falke-nav-container .falke-col-right li{
    margin-top: 40px;
    margin-bottom: 40px;
}
/* when only hovering the elements in three js */
/* #falke-glaskugel.falke-hovering-elements canvas, */
#falke-glaskugel.falke-highlight-glaskugel canvas {
    filter: brightness(1.2);/* 1.1*/
}
/* when hovering the whole canvas
/*#falke-glaskugel.isActive canvas, #falke-glaskugel:hover canvas{
    filter: brightness(1.1); /* brightness(0.8); */
/*} */
#falke-glaskugel canvas{
    transition: .6s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* number animation */
/* see https://css-tricks.com/animating-number-counters/ */

@property --number-animation-percent {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --number-animation-temp {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --number-animation-v1 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

@property --number-animation-v2 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.falke_animate_number {
    transition: --number-animation-percent 5s;
    --number-animation-temp: calc(var(--number-animation-percent) * 100);
    --number-animation-v1: max(var(--number-animation-temp) - 0.4999, 0);
    --number-animation-v2: max(((var(--number-animation-temp) - var(--number-animation-v1)) * 10 - 0.4999), 0);
    counter-reset: number-animation-v1 var(--number-animation-v1) number-animation-v2 var(--number-animation-v2);
}

.falke_animate_number.two_decimals {
    --number-animation-v2: max(((var(--number-animation-temp) - var(--number-animation-v1)) * 100 - 0.4999), 0);
}

.falke_animate_number::before {
    content: counter(number-animation-v1) attr(data-separator) counter(number-animation-v2); /* , decimal-leading-zero); */
}
.falke_animate_number.no_decimals::before {
    content: counter(number-animation-v1);
}

/* end number animation */
