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

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

.nav { position: absolute; bottom:0; right: 0; padding-right: 6vw; z-index: 8000; transition: top 0.4s ease-in-out; }
a.nav-link { display: none; }

.nav.scroll { position: fixed; top:-3vw; left:0; bottom: auto; right: 0; height: 3vw; padding-right: 0; z-index: 9999; transition: top 0.2s ease-in-out; }
.nav.scroll.nav-down { top: -3vw; }
.nav.scroll.nav-down.visible { top: 0; }

/* Hauptnavigation Hauptebene */

nav > ul { position: relative; background: var(--white); padding: 0 calc(1.5vw - 15px); }
nav > ul > li { position: relative; line-height: 1em; display: inline-block; height: 3vw; border-left: 1px solid var(--purple); }
nav > ul > li > a { 
  color: var(--black); 
  font-size: 16px;
  font-weight: 400; 
  line-height: 16px; 
  padding: calc(1.5vw - 8px) 20px calc(1.5vw - 8px) 16px; 
  border: 0;
  display: inline-block; 
  text-transform: uppercase;
  border-left: 4px solid transparent;
}
nav > ul > li > a:visited { color: var(--black); }
nav > ul > li:hover { border-left: 1px solid transparent; }
nav > ul > li:hover > a { color: var(--blue); border-left: 4px solid var(--purple); }
nav > ul > li.current-menu-item > a, nav > ul > li.current-menu-parent > a { color: var(--blue); }
nav > ul > li > a:focus-visible { background: var(--black); color: var(--white); border: 0; border-left: 4px solid var(--purple); outline: 0; }

.nav.scroll nav > ul { padding: 0 35px 0 0; }

/* Hauptnavigation Unterebene 1 */

nav > ul ul.sub-menu {
  z-index: 9999;
  position: absolute;
  width: 16em;
  margin-top: 20px;
  left: 0;
  text-align: left; 
  visibility: hidden;
  opacity: 0;
  border-left: 4px solid var(--purple);
  -webkit-transition:  visibility .25s, opacity .25s, margin-top .25s ease-out;
  -moz-transition:  visibility .25s, opacity .25s, margin-top .25s ease-out;
  -ms-transition:  visibility .25s, opacity .25s, margin-top .25s ease-out;
  transition: visibility .25s, opacity .25s, margin-top .25s ease-out;
}


nav > ul li.aktiv ul,
nav > ul li:hover ul { visibility: visible; opacity: 1; margin-top: 0px; }
nav > ul ul.sub-menu > li > a { 
  display: block; 
  padding: 12px 15px; 
  color: var(--white); 
  background: rgb(56 78 84 / 85%); 
  font-size: 1rem;
  line-height: 1.2em;
  text-transform: none;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}
nav > ul ul.sub-menu > li > a:hover { cursor: pointer; background: var(--blue); }
nav > ul ul.sub-menu > li:last-child > a { border-bottom: none; }
nav > ul ul.sub-menu > li.current-menu-item > a { background: var(--purple); }
nav > ul ul.sub-menu > li > a:focus-visible { outline: 0; color: var(--black); background: var(--white); }


/* -----------------------------  Header / Footer  -------------------------------- */

footer ul { margin: 0 !important; }
footer ul li { position: relative; display: block; margin-right: 15px; border-right: 1px solid var(--purple); padding: 1vw 15px 1vw 0; }
footer ul li a { color: var(--black); text-decoration: none !important; font-size: .9rem; line-height: .9rem; text-transform: uppercase; }
footer ul li a:hover { color: var(--blue); }

#contact ul { margin: 0 !important; line-height: .85rem; }
#contact ul li { position: relative; display: block; line-height: .85em; margin: 10px 0; }
#contact ul li a { color: var(--black); text-decoration: none !important; font-size: 1.1rem; line-height: 1.1rem; text-transform: uppercase; }
#contact ul li a:hover { color: var(--blue); }
#contact ul li:before { 
  font-family: 'simple-line-icons';
  font-size: .75em !important;
  content: "\e606";
  margin-right: .5em;
  color: var(--black);
 }

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

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

  .nav.scroll { top:-46px; height: 46px; }
  .nav.scroll.nav-down { top: -46px; }
  nav > ul > li { height: 46px; }
  nav > ul > li > a { padding: 15px 15px 15px 11px; }
  header .nav.scroll img.logo { margin: 8px 0 0 3vw; height: 30px; }
  
}

@media all and (max-width: 1200px) {
  .nav.scroll { display: none !important; visibility: hidden; opacity: none; }
}

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

a.nav-link, a:visited.nav-link, a.nav-link.aktiv { position: absolute; top: calc(3.4rem + 40px); right: 0; color: var(--white); background: var(--black); text-decoration: none; display: block;  text-align: center; font-size: 40px; padding: 10px 0; margin: 0; width: 60px; z-index: 9999; }
a.nav-link:hover { background: var(--purple); }
a.nav-link i { margin: 0; }

.nav { position: relative; z-index: 8000; transition: top 0.4s ease-in-out; padding: 0; width: 100%; z-index: 8000; }
.nav.pad0_6vw { padding: 0; }
.nav.row { display: block; width: 100%; }
.nav.bg-purple { background: rgb(91 197 242 / 15%); }

nav, nav > ul ul.sub-menu { 
  overflow: hidden; 
  max-height: 0; 
  -webkit-transition: all .5s ease-in-out; 
  -moz-transition: all .5s ease-in-out; 
  -ms-transition: all .5s ease-in-out; 
  transition: all .5s ease-in-out;
}
nav > li > ul.sub-menu { padding: 0px; border: none; }

nav ul.row.right { display: block; text-align: left; }
nav.aktiv, nav > ul ul.aktiv { max-height: 55em; visibility: visible; }
nav > ul { width: 100%; padding: 0; background: transparent; }
nav > ul > li { width: 100%; height: auto; margin-right: 0; border-left: 0; border-bottom: 1px solid rgb(0 0 0 / 20%); }
nav > ul > li > a { padding: 15px 3vw 15px calc(3vw - 5px); font-size: 18px; line-height: 1em; display: block; border-left: 5px solid transparent; }
nav > ul > li:hover { border-left: 0; }
nav > ul > li:hover > a, nav > ul > li > a.aktiv { color: var(--blue); border-left: 5px solid var(--purple); }
nav > ul > li.current-menu-item > a, nav > ul > li.current-menu-parent > a { color: var(--blue); border-left: 5px solid var(--purple); }
nav li.menu-item-has-children > a:after { content: '+'; position: absolute; top: 13px; right:3vw; font-size: 1.5em; padding: 0 0 0 10px; }
nav li.menu-item-has-children > a.aktiv:after { content: "-"; }

/* hauptnavigationigation Unterebene 1 */

nav > ul ul.sub-menu {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100% ;
  visibility: visible;
  opacity: 1;
  border-left: 15px solid var(--purple);
}

nav > ul ul.sub-menu > li > a { 
  padding: 13px 6vw;
  padding-left: calc(4vw + 5px);
  background: rgb(56 78 84 / 100%);
  font-size: 1.1rem; 
}

}

@media all and (max-width: 550px) {
  a.nav-link, a:visited.nav-link, a.nav-link.aktiv { top: 60px; }
  nav > ul > li > a { padding: 15px 15px 15px 15px; border-left: 15px solid transparent; }
  nav > ul > li:hover > a, nav > ul > li > a.aktiv { border-left: 15px solid var(--purple); }
  nav > ul > li.current-menu-item > a, nav > ul > li.current-menu-parent > a { border-left: 15px solid var(--purple); }
  nav > ul ul.sub-menu > li > a { padding: 13px 15px; padding-left: 30px; font-size: 1.1rem; }
}