/* ============================================================================================================================================================================== */
/*                                                                                 Horizontales Menu Grundlagen                                                                   */
/* ============================================================================================================================================================================== */
.horizontal-menu *{
    padding:0;
    margin:0;
    font-size: 100%;
    box-sizing: border-box;
    list-style:none;
}

_.horizontal-menu > div{
    width: 100%;
}
/* mittiges ausrichten des horizontalen Menüs */
.horizontal-menu ul.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* horizontaler + vertikaler Abstand Menü */
.horizontal-menu ul li {
    position: relative;
    margin-right: 4px;
    margin-top: 4px;
}
/* ab Level 2 Menu */
.horizontal-menu ul ul{
    position: absolute;
    z-index: 1;
}
/* Level 2 Menu Items breiter damit keine Lücken entstehen wenn Maus nach rechts rückt */
.horizontal-menu ul ul li{
    width: 154px;
}
.horizontal-menu ul ul{
    background-color: white;
    opacity: 0;
    visibility: hidden;
}
.horizontal-menu.fade ul ul,
.horizontal-menu.zoom ul ul{
    transition:opacity .25s linear, visibility .1s linear .1s;
}
/* ab Level 3 menu */
.horizontal-menu  ul ul ul{
    position: absolute;
    margin-left: 154px;
    margin-top: -24px;
}
.horizontal-menu  ul li a {
    display: block;
    width:150px;
    height:20px;
    line-height: 20px;
    background-color: #DDDDDD;
    text-decoration: none;
    text-align: center;
}
/* ab Level 2 Menü Höhe = 0 */
.horizontal-menu.zoom ul ul li a {
    overflow: hidden;
    height:0px;
    transition:height .15s ease 0.1s, width .15s ease 0.1s, margin-top .15s ease 0.1s;
}
/* ab Level 3 Menü auch Breite = 0 */
.horizontal-menu.zoom ul ul ul li a {
    width: 0px;
}
.horizontal-menu  ul li a:hover {
    background-color: gray;
    transition:background-color 0.25s 0.0s;
}
/* aktives Menü-Element */
.horizontal-menu ul li.current-menu-item > a{
    color: red;
}
/* Submenu einblenden bei Mouse-Over */
.horizontal-menu ul li:hover > ul { 
    z-index:1;
    opacity: 1;
    visibility: visible;
}
.horizontal-menu.zoom ul li:hover > ul > li > a{ 
    height: 20px;
    width: 150px;
    transition:height .15s ease 0.1s, width .15s ease 0.1s, margin-top .15s ease 0.1s;
}
/* ============================================================================================================================================================================== */