@charset "UTF-8";
/* CSS Document */

/* -----------------------------  Haupt  -------------------------------- */

.container_menu { display: none; }
nav.desktop { position: fixed; top:0; left:0; right: 0; height: 50px; z-index: 9999; transition: top 0.5s ease-in-out; }
a.nav-link { display: none; }

nav.desktop.nav-up { top: -50px; }

/* hauptnavigation Hauptebene */

nav.desktop > ul { position: relative; max-width: 1100px; margin: 0 auto; }
nav.desktop > ul > li { position: relative; line-height: 1em; display: inline-block; padding: 18px 15px 0; }
nav.desktop > ul > li:hover { cursor: pointer; color:#bb9759; }
nav.desktop > ul > li, nav > ul > li a { color: #ffffff; text-transform: uppercase; font-size: .9rem; line-height: .9rem; }
nav.desktop > ul > li a:visited { color: #ffffff; }
nav.desktop > ul > li:hover, nav > ul > li a:hover, nav > ul > li.active, nav > ul > li a:active { color:#f5efe3; }
nav.desktop > ul > li.active > a { color:#f5efe3; }
nav.desktop > ul > li.active > a:hover { color:#f5efe3; }
nav.desktop > ul > li.active { color:#f5efe3; }


/* hauptnavigation Unterebene 1 */

nav.desktop > ul ul {
    z-index: 9999;
    position: absolute;
    top: 100%;
    width: 20em;
    padding-top: 18px;
    margin-top: 10px;
    left: 0;
    text-align: left; 
    background: #bb9759;
    visibility: hidden;
    opacity: 0;
    -webkit-transition:  visibility 0.25s, opacity 0.25s, margin-top 0.25s ease-out;
    -moz-transition:  visibility 0.25s, opacity 0.25s, margin-top 0.25s ease-out;
    -ms-transition:  visibility 0.25s, opacity 0.25s, margin-top 0.25s ease-out;
    transition: visibility 0.25s, opacity 0.25s, margin-top 0.25s ease-out;
}

nav.desktop > ul li:hover ul { visibility: visible; opacity: 1; margin-top: 0px; }
nav.desktop > ul ul > li a { display: block; padding: 12px 15px; font-size: 0.85em; text-decoration: none; border-bottom: 1px dotted #f5efe3; }
nav.desktop > ul ul > li:last-child a { border-bottom: 0; }
nav.desktop > ul ul > li a:visited { color: #ffffff; }
nav.desktop > ul ul > li a:hover { color:#f5efe3; cursor: pointer; }
nav.desktop > ul > li.active > ul > li a.active { color:#f5efe3; }
nav.desktop > ul ul > li.active > a:hover { color:#f5efe3; }
nav.desktop > ul > li.active > ul > li.active a { color:#f5efe3; }

/* --------------------------------  Mobile  ---------------------------------- */

@media all and (max-width: 768px) {

.container_menu { position: absolute; display: block; top:0; left:0; z-index: 9999; width: 100%; }
.container_menubutton { padding: 7px 15px; }
a.menubutton { font-size: 2rem; display: block; color: #ffffff; }
nav.desktop { display: none; }
nav.mobile { position: relative; }

/* hauptnavigationigation Hauptebene */

nav.mobile, nav.mobile > ul ul {
  overflow: hidden; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease; 
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  visibility: hidden;
  max-height:0; 
}
nav.mobile > ul ul { position: relative; }
nav.mobile.active, nav.mobile > ul ul.active { max-height: 55em; visibility: visible; }
nav.mobile > ul { position: relative; width: 100%; color: #ffffff; padding: 0; }
nav.mobile > ul > li { position: relative; line-height: 1em; display: block; border-top: 1px dotted #f5efe3; }
nav.mobile > ul > li a { color: #ffffff; padding: 15px 30px; text-transform: uppercase; font-size: 1.15rem; line-height: 1em; display: block; }
nav.mobile > ul > li a:visited { color: #ffffff; }
nav.mobile > ul > li.highlight > a { color: #f5efe3; }
nav.mobile li.parent > a.active:after { content: "-"; }
nav.mobile li.parent > a:after { content: '+'; position: absolute; top: 15px; right: 30px; display: block; font-size: 1.3rem; padding: 0; }

/* hauptnavigationigation Unterebene 1 */

nav.mobile > ul ul > li a { display: block; padding: 10px 30px; font-size: 0.9em; text-decoration: none; }
nav.mobile > ul ul > li a:before { content: '– '; padding-right: 8px; } 
nav.mobile > ul ul > li.active a { color: #f5efe3; }

}

@media all and (max-width: 500px) {

nav.mobile > ul > li a { padding: 15px; }
nav.mobile li.parent > a:after { right: 15px; }
nav.mobile > ul ul > li a { padding: 10px 15px; font-size: 1em; }

}