/*------------------------------------------------------------------------------------

MOBILES MENUE  /  HAMBURGER MENU

-------------------------------------------------------------------------------------*/


 
 /* ==========  EIN UND AUSBLENDEN  ================================== */

 .standardnav_hide  { content: ""; display: table; display:block; margin:0 auto; width:1000px; max-width:92%; }

@media all and (max-width: 720px) {
	.standardnav_hide { display: none; } 
}


 /* ==========  NAVIGATIONSLEISTE  ================================== */

 .navi {position: fixed; top:0px; left:0; width:100%; display: block; background-color: var(--navbar); }
 .navi ul { margin: 0; padding: 0;  max-width: 98%; height:40px; text-align: right;}
 .navi ul li {text-align: left; position: relative; padding-left:5px; display:inline-block; list-style: none; transition: 0.5s; -webkit-transition: 0.5s; }
 
 .navi ul li a, /*schriftfarbe menue  */
 .navi ul li p { display: block; line-height:45px; font-size:1em; }
 
 .navi ul li a:hover, /*schriftfarbe menue  */
 .navi ul li p:hover { color:var(--haupttext_links-hover);}

  /*  submenueleiste hintergrund  */
 .navi  ul ul  { position: absolute; top: -9999px; left: -9999px; z-index: 100; }
 .navi ul ul li { text-align: left; float: none; width: 200px; border-bottom: 1px solid var(--haupttext); }
 
 /*  schriftgröße submenueleiste */
 .navi ul ul li a { display: block; margin:0; padding:0; line-height:45px; font-size:1em; }
 .navi ul ul li:last-child { border-bottom: none; }
 
 .navi ul li:hover > ul,
 .navi ul li:active > ul { top: 100%; right:auto; left:0; -webkit-touch-callout: none; }


 @media (prefers-color-scheme: dark) {
		.navi  ul ul  { background-color:var(--hintergrund);  }
}

@media (prefers-color-scheme: light) {
	.navi  ul ul li { background-color:var(--hintergrund); }
}

/* == SUBMENUE-ICON ============================================= */
.icon-bars_standard-nav:before {content: "\e90f";  font-size: 0.813em !important; margin:-22px 0 -20px 0; }
.navi ul li:hover  .icon-bars_standard-nav:before { content: "\e90f"; transition: 0.5s; -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.icon-bars_standard-nav_sub:before { content: "\e90f"; font-size: 0.813em !important; margin:-20px 0 -20px 0; }
.navi ul li ul li:hover  .icon-bars_standard-nav_sub:before { content: "\e90f"; transition: 0.5s; -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }




/*------------------------------------------------------------------------------------

MOBILES MENUE  /  HAMBURGER MENU

-------------------------------------------------------------------------------------*/


 /* ==========  EIN UND AUSBLENDEN  ================================== */
 .nav_mobilmenue  { display: block; }

 @media all and (min-width: 720px) {
	 .nav_mobilmenue { display: none; } 
 }
 

/* -----------  TOPLLEISE MENU -----------  */
	
.hamburger-menu,
.navbar_top { position: fixed; top: 0; background: var(--navbar); z-index: 998; -webkit-tap-highlight-color: #ffffff00; }
.hamburger-menu { padding-top: 7px; left: 0; width: 60px; height: 20px; cursor: pointer; color: var(--haupttext); }
.navbar_top { right: 0; width: 1000px; max-width:100%; height: 40px; z-index: 997; }
.navbar_top a { float:right; padding-right:10px; line-height:40px; text-decoration:none; color: var(--haupttext_links); }
.navbar_top a:hover { color: var(--haupttext_links-hover); }

/* -----------  ÖFFNFN/SCHLIESSEN BAR -----------  */
.bar,
.bar:after,
.bar:before { width: 30px; height: 3px; }

.bar { margin-left: 10px; position: relative; transform: translateY(10px); background: var(--haupttext_links); transition: all 0ms 300ms; height:3px; border-radius:5px; }
.bar.animate { background: rgba(0, 0, 0, 0.0); }
.bar:before { z-index: 998; content:""; position: absolute; left: 0; bottom: 10px; height:3px; border-radius:2px; background: var(--haupttext_links); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.bar:after { content:""; position: absolute; left: 0; top: 10px; height:3px; border-radius:5px; background: var(--haupttext_links); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.bar.animate:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.bar.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }

/*-----------------------------------------------------------------
		Mobiles Menu - LINKGESTALTUNG
-----------------------------------------------------------------*/
	
.aktiver_link {color: var(--haupttext_links-hover)!important}

/*-----------------------------------------------------------------
		Mobiles Menu - SLIDE IN & BLENDE 
-----------------------------------------------------------------*/

.mobil-menue { display: flex; justify-content: center; width:800px; max-width: 100%; background-color: var(--menu-hintergrund); transition: all 0.5s ease; position: fixed; top: 0; cursor: pointer; z-index: 995; font-weight: 200; }

/*  Animation Hintergrund Menü  */
.mobil-menue.hg_mobil-menue {position:fixed; top: -400px; left: 0px; }
.mobil-menue.hg_mobil-menue.move_1 {transform: translate(0, 400px);}

.mobil-menue a {font-size:1em; color:var(--haupttext_links); line-height: 1.5;}
.mobil-menue a:hover {color:var(--haupttext_links-hover);}
.mobil-menue li {list-style: none; width: 1000px;text-align: center;}
.mobil-menue li:first-child {padding-top: 20px;}
.mobil-menue ul li:first-child {padding-top:60px;}
.mobil-menue li:last-child {padding-bottom: 30px;}

@media all and (max-width: 500px) {
	.mobil-menue a {font-size:0.75em; line-height: 1.2;}
}



/*  Abdunklung  */
.blende { position: fixed; top: 0; width: 100%; max-width: 100%; height: 100%; top: -100%; transition: all 0.5s ease; z-index: 991; background-color: #000; opacity: var(--opacity); overflow-y: auto; }

/*  Animation Abdunklung  */
.blende.hg_alles { top: -100%; left: 0px; }
.blende.hg_alles.move_2 { transform: translate(0, 100%); }