.wrapper {
    --typo-topbar-height: 4rem;
}
@media screen and (min-width:40em){
    .wrapper {
        --typo-topbar-height: 5rem;
    }
}

/****************************************************************************
 * Topbar Container
 ****************************************************************************/
.wrapper { padding-top: var(--typo-topbar-height); } 
.topbar {
    position: fixed; left: 0; right: 0; top: 0; bottom: auto;
    height: var(--typo-topbar-height); width: 100%; margin: 0 auto;
    padding: 0; z-index: 1000;
    transition: all .25s ease;
}



.navigation_wrapper {
    background-color: var(--typo-color-blue);
}

@media screen and (min-width:75em){
    .xlarge_no_hamburger .navigation_toggle_wrapper {
        display: none;
    }

    .xlarge_no_hamburger .navigation_wrapper,
    .nav_opened .xlarge_no_hamburger  .navigation_wrapper{
        position: relative; left: auto; right: auto; top: auto; bottom: auto;
        background-color: transparent; height: auto;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
    .topbar .xlarge_no_hamburger  .navigation_wrapper {
        padding: 0 1rem;
    }

    .xlarge_no_hamburger .navigation_wrapper .menu_wrapper{
        padding: 0; overflow: visible;
    }

    .xlarge_no_hamburger .navigation_wrapper .menu {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

/****************************************************************************
 * Logo
 ****************************************************************************/
.topbar .logo_wrapper picture.data_ratio {
    height: 4rem;
	width: 10rem;
	transition: all .25s ease;
}


@media screen and (min-width:40em){
	.topbar .logo_wrapper picture.data_ratio {
		height: 5rem;
		/*width: 10rem;*/
		width: 15rem;
	}
}

/*
.topbar.scrolled .logo_wrapper picture.data_ratio {
    height: 3rem;
    width: 7rem;
}
*/

/****************************************************************************
 * Submenu
 ****************************************************************************/
.navigation_wrapper .menu > li {
    position: relative;
}

 .navigation_wrapper .menu > li > ul {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}
.navigation_wrapper .menu > li > ul li {
    list-style: none;
    display: block;
    border: none;
}

.navigation_wrapper .menu > li > ul li a {
    line-height: 2;
    font-size: 1rem;
}

.navigation_wrapper .menu > li > ul li a:after  {
    content: none;
}


@media screen and (max-width:74.9375em){
    .navigation_wrapper .menu > li {
        width: 100%;
    }
}


@media screen and (min-width:75em){
    .navigation_wrapper .menu.align-center li {
        display: block;
    }
    .navigation_wrapper .menu > li {
        position: relative;
    }
    .navigation_wrapper .menu  li  a {
        line-height: 1.2;
        display: inline-block;
    }
    .navigation_wrapper .menu > li > ul {
        position: absolute; top: calc(100% + 0.0625rem);
        opacity: 0; pointer-events: none;
        visibility: hidden; left: 0;
        margin: 0; color: inherit;
        padding: 1rem;
        text-align: left;
        width:max-content;
        min-width: 12rem;
    }
    .navigation_wrapper .menu > li > ul:after {
        content: ''; position: absolute;
        bottom: 0; left: 0; right: 0; top: 0;
        height: auto; width: auto;
        background-color: var(--typo-color-blue);
    }

    .navigation_wrapper .menu > li > ul > * {
        position: relative;
        z-index: 20;
    }
    .navigation_wrapper .menu > li > ul li {
        padding: 0.25rem 0;
		width:100%;
    }
	
	.navigation_wrapper .menu > li > ul li a {
		padding: 0;
        text-transform: none;
        line-height: 1.2;
	}

    .navigation_wrapper .menu>li>a:hover+span+ul,
    .navigation_wrapper .menu>li:hover>a+span+ul,
    .navigation_wrapper .menu>li>a+span+ul:hover,
	.navigation_wrapper .menu>li>a:focus-visible+span+ul,
    .navigation_wrapper .menu>li:focus-within>a+span+ul,
    .navigation_wrapper .menu>li>a+span+ul:focus-visible{
        opacity: 1; pointer-events: all;
        visibility: visible;
    }
}

.sub-menu-toggle {
    display: inline-block; width: 3rem; height: 3rem;
    margin-left: 0.5rem; position: absolute;
    cursor: pointer; top: 0; right: 4rem;
    vertical-align: middle;
}
.sub-menu-toggle:after {
    content: ''; position: absolute;
    top: 45%; left: 50%; width: 0.625rem; height: 0.625rem;
    background: url(../img/menu_toggle.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%,-50%) rotate(0deg);
    transition: all 0.25s ease;
}
.sub-menu-toggle.active:after {
    transform: translate(-50%,-50%) rotate(90deg);
}

@media screen and (max-width:74.9375em){
    .sub-menu-toggle + .sub-menu {
        display: none;
    }
}
.sub-menu-toggle.active + .sub-menu {
    display: block;
}


@media screen and (min-width:75em){
    .sub-menu-toggle {
        display: inline-block;
        position: relative;
        width: 1em; height: 1em;
        right: 1em;
    }
}


/****************************************************************************
 * Search + Login
 ****************************************************************************/
.topbar_search_wrapper,
.topbar_login_wrapper {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    height: var(--typo-topbar-height);
}
.search_toggle {
    width: 2em; height: 2em;
    background-image: url(../img/search.svg);
    background-position: 50% 50%;
    background-size: 60% auto;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
    cursor: pointer;
}

.topbar_search_wrapper .search_form {
    display: none;
    position: fixed; top: var(--typo-topbar-height);
    right: 0; width: 100%;
    /*background-color: var(--typo-color-grey);*/
    background-color: var(--typo-color-blue);
    padding: 0.5em;
}
.topbar_search_wrapper.active .search_form {
    display: block;
}
.topbar:has(.typo_language_switch_wrapper:hover) .topbar_search_wrapper.active .search_form,
.topbar:has(.typo_language_switch_nav:hover) .topbar_search_wrapper.active .search_form,
.topbar:has(li.menu-item-has-children:hover) .topbar_search_wrapper.active .search_form {
    display: none;
}


@media screen and (min-width:40em){
    .topbar_search_wrapper .search_form {
        position: absolute;
        top: 100%; right: 0;
        width: 25em;
        border-bottom-left-radius: 0.375em;
        border-bottom-right-radius: 0.375em;
    }
}


.login {
    width: 2em; height: 2em;
    background-image: url(../img/user.svg);
    background-position: 50% 50%;
    background-size: 60% auto;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
    cursor: pointer;
}


@media screen and (max-width:39.9375em){
	
	.icon_column {padding:0;}
	
	.login,
	.search_toggle{
    	width: 1.5em; height: 1.5em;
	}
}


/***************************************************************************
* Searchform
****************************************************************************/
.searchform .columns:not(.shrink) {
    flex: 1 1 0;
}
.searchform .button {
    padding: 0 1em; margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 2em;
    font-size: 1em;
    border-radius: 3rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--typo-color-blue);
    border: solid 1px #ffffff;
    color: #FFFFFF;
}

.wrapper .searchform input {height: 2em;}

.wrapper .searchform [type="search"] {
    margin: 0;
    /*border-top-left-radius: 0.375em;
    border-bottom-left-radius: 0.375em;*/
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
    border: none;
    padding: 0 1em;

}

.screen-reader-text {border: 0; clip: rect(1px,1px,1px,1px);  clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal!important}
.screen-reader-text:focus {background-color: #ddd;clip: auto!important;clip-path: none;color: #444;display: block;font-size: 1em;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000}