@charset "utf-8";
/* ***************************************** */
/* DESKTOP- und MOBILE-NAVIGATION Variante 6 */
/*       Top-Navigation, Desktop First       */
/* ***************************************** */

/* ***************************************** */
/*    Allgemeine Basis (für beide gültig)    */
/* ***************************************** */

/* Nav6-Variable & Farbkonzept Variante "rot/grau" */
:root {
	--toMobMode:	595px;	/* funktioniert nicht als Variable! */
	--nav6Text:		#ffffff;	/* Standard-Textfarbe */
	--nav6NavDesk:	#cb3a3a;	/* Farbe des Nav-Balkens & Desktop-Wrapper */
	--nav6MobLo:	#444;		/*Level odd (1,3,5, etc.) */
	--nav6MobLe:	#666;		/*Level even (2,4,6, etc.) */
/*... oder Farben der nicht aktiven Mobile-Levels */
	--nav6MobL1:	#444;		/*Level 1 */
	--nav6MobL2:	#666;		/*Level 2 */
	--nav6MobL3:	#888;		/*Level 3 */
	--nav6MobL4:	#aaa;		/*Level 4 */
	--nav6MobL5:	#cccccc;	/*Level 5 */

/*	--nav6a:				40, 100, 155, 0.7; */
/* Hintergrund- & Textfarben je nach Status*/
	--nav6aktiv:		#880000;
	--nav6hover:		#f56040;
	--nav6hoverT:		#fbfb8f;

/* Nav6-Farbkonzept für PCI */
	--nav6Text:		#ffffff;	/* Standard-Textfarbe */
	--nav6NavDesk:	#336698;	/* Nav-Balkens & Desktop-Wrapper */
	--nav6NavDesk:	#2A5D8F;	/* Nav-Balkens & Desktop-Wrapper */
	--nav6MobLo:	#444;		/*Level odd (1,3,5, etc.) */
	--nav6MobLe:	#666;		/*Level even (2,4,6, etc.) */
/*... oder Farben der nicht aktiven Mobile-Levels */
	--nav6MobL1:	#444;		/*Level 1 dunkel */
	--nav6MobL2:	#666;		/*Level 2 heller */
	--nav6MobL3:	#888;		/*Level 3 noch heller */
	--nav6MobL4:	#aaa;		/*Level 4 vielheller */
	--nav6MobL5:	#cccccc;	/*Level 5 sehr hell*/

/*	--nav6a:				40, 100, 155, 0.7; */
/* Hintergrund- & Textfarben je nach Status*/
	--nav6aktiv:		#5392BD;
	--nav6hover:		#304D6A;
	--nav6hoverT:		#fbfb8f;

}

/* OverNavleiste */
#xxxoTopNavM6
     /* geht auch ohne Over-Bereich! */
     /* ist entweder in o... oder r... (wenn ohne o...) */
     /* Over macht nur mit Farbe Sinn - sonst braucht es keinen Over */
	{
	position:sticky;
	top:0px;
	z-index:2000;
/*	background-color: #f56040; */
/*	background-color: #cccccc;	 "Over-Balken" */
	}
/*
*/

#rTopNavM6
	{
	border: 1px solid #888888;
	border: 1px solid #e2e2e2;
	}
/*
	background-color: #cccccc;
	background-color: rgba(51, 102, 152, 1);
*/

/* NavWrapper / Navleiste */
#TopNavM6wrapper {	/* nur nötig, wenn .TopNavM6 nicht 100% ist (und mit float:right) */
  width: 100%;
  background: #336698;
  background: #f56040;
  background: var(--nav6NavDesk);	/* Hintergrund gesamter Nav-Bereich (Ebene 1) ... hier !!! */
  /* evtl. paddings oben/unten für Abstand zu den Buttons, müsste aber bei Mobile entfernt werden */
}

/* ist immer ausgeblendet */
input#responsive-nav,
label.responsive-nav-label {	
  display: none;
}

/* *************************************** */
/*   D E S K T O P - N A V I G A T I O N 6 */
/* *************************************** */

/* Desktop-Button-Hintergrund */
.TopNavM6 {
  width: 100%;	/* 100% oder auto für ...*/
  float: right;	/* links oder rechtsbündig */
  float: left;	/* links oder rechtsbündig */
  font-size: 16px;
  background: #f56040;
  background: #336698;	/* Hintergrund nur für den "Button-Bereich" (eher keiner) */
  background: none;	/* Hintergrund nur für den "Button-Bereich" (eher keiner) */
  /* evtl. paddings oben/unten für Abstand zu den Buttons */
  /* ... falls Desktop-Nav zentriert sein soll (kann aber so bleiben, wird im Code via center geregelt) */
  width: auto;
  float: none;
  display: inline-block;
  display: table;	/* ist besser als inline-block */
}

.TopNavM6 ul {
  margin: 0;
  padding: 0;
}
/*
*/

/* Desktop-NavSchrift*/
.TopNavM6 a {
  display: block;
  color: var(--nav6Text);
  font-weight: bold;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #000000;
}
/*
*/

/* Desktop-ButtonAktiv ab Level 1 */
.TopNavM6 ul li .aktiv {
  background: #4096ee;
  background: #cb3a3a;
  background: #cf5c5c;	
  background: yellow;
  background: var(--nav6aktiv);
  color: var(--nav6hoverT);	/* Schriftfarbe bei hover (gilt so bei allen Levels) */
}

/* Desktop-ButtonActive ab Level 1 - ist nur wie "MouseDown" und bleibt nicht! */
.TopNavM6 ul li a:active {
  background: #4096ee;
  background: green;
  background: #cb3a3a;
  background: #cf5c5c;	
  background: var(--nav6aktiv);
  color: var(--nav6hoverT);	/* Schriftfarbe bei hover (gilt so bei allen Levels) */
}

/* Desktop-SchriftHover Level 1 */
.TopNavM6 ul a:hover {
  color: var(--nav6hoverT);	/* Schriftfarbe bei hover (gilt so bei allen Levels) */
}
/*
*/

/* Desktop-SchriftHover ab Level 2 */
.TopNavM6 ul ul a:hover {
  color: var(--nav6hoverT);	/* Schriftfarbe bei hover aller Sub-Levels */
}
/*
*/

/* Desktop-Button Level 1 */
.TopNavM6 ul li {
  position: relative;
  float: left;
  list-style: none;
  transition: 0.5s;
  margin: 0 5px 0 5px;	/* Abstand zwischen den "Buttons" bei Level 1 und evtl. oben/unten*/
/* ... keine "Buttons" wenn ohne background */
}
/*
  background-color: #006600;
*/

.TopNavM6 ul li a {
  padding: 20px;	/* innerhalb der "Buttons" */
  padding: 8px 12px;	/* ... besser separat */
}
/*
*/

/* erster Button nach Level 1 
.TopNavM6  ul li.submenu:first-child
*/
/* ... oder besser so! ...*/
.TopNavM6 li li:first-child
{
  border-top: 1px solid #e2e2e2;
}
/* wird nicht mehr benötigt (via fa gelöst) */
.xTopNavM6 ul > li.submenu > a:after {		/* für die Dropdown-Pfeile down */
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}
/*
*/
/* wird nicht mehr benötigt (via fa gelöst) */
.xTopNavM6 ul ul li.submenu > a:after {	/* für die Dropdown-Pfeile right */
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/*
*/

/* Desktop-ButtonFocus ab Level 1 - deaktivieren? */
.TopNavM6 ul li a:focus {
  background: #4096ee;
  background: #cf5c5c;
  background: #cb3a3a;
  background: var(--nav6aktiv);
}

/* Desktop-ButtonHover Level 1 */
.TopNavM6 ul li:hover {	/* gilt so für alle Ebenen - wenn ohne Übersteuerung */
  background: #4096ee;
  background: var(--nav6hover);
}
/*
*/

/* Desktop-ButtonHover ab Level 2 */
.TopNavM6 ul ul li:hover {	/* gilt so für alle Sub-Ebenen - wenn ohne Übersteuerung */
  background: #4096ee;
  background: var(--nav6hover);
}
/*
*/

.TopNavM6 ul ul {	/* gilt für alle Sub-Ebenen - wenn ohne Übersteuerung */
  position: absolute;
  top: -9999px;	/* ginge auch mit display:none; - einschalten bei*/
  left: -9999px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
  text-align: left;
}
/*
  background: #333;
*/

/* Desktop-Button ab Level 2 */
.TopNavM6 ul ul li {	/* gilt für alle Sub-Ebenen - wenn ohne Übersteuerung */
  float: none;
  width: 200px;	/* abhängig von Textlänge */
  width: 160px;
/* Übersteuerung der Ebene 1*/
  background: var(--nav6NavDesk);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e2e2e2;
}
/*
text-align: left;
  border-bottom: 1px solid #555;
*/

.TopNavM6 ul ul li:hover > ul { /* Desktop SubNav */
  top: 0;
  left: 200px;	/* abhängig von Textlänge */
  left: 156px;
}
/*
*/

.TopNavM6 ul ul li a {	/* gilt für alle Sub-Ebenen - wenn ohne Übersteuerung */
  padding: 10px 20px;
  padding: 8px 15px 8px 25px;
}
/*
*/

.TopNavM6 ul ul li:last-child {
  border-bottom: none;
}
/*
*/

.TopNavM6 ul li:hover > ul {
  top: 100%;
  left: 0;
/* ... falls die Sub's mit display:none; ausgeschaltet waren
  display:block !important;
*/
}
/*
*/

/* ************************************* */
/*   M O B I L E - N A V I G A T I O N 6 */
/* ************************************* */
@media screen and (max-width: 595px)	/* Wechsel zum Mobile-Modus */
/* @media screen and (max-width: var(--toMobMode))	funktioniert nicht mit einer Variable! */
{

#rTopNavM6 {
  }
/*
  border: none !important;	/* ... border könnte bleiben */
*/

/* Mobile-NavWrapper / Mobile-Navleiste / Hamburgerleiste */
#TopNavM6wrapper {
  padding:0;
}
/* Hintergrund gesamter Nav-Bereich (Ebene 1) ... hier!!! - ist schon bei Desktop gesetzt
  background: #336698;
  background: #f56040;
*/

label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 6px 0px 8px 1%;	/* Hamburgerzeile */
  padding: 2px 0px 2px 1%;	/* Hamburgerzeile */
  background: #222;	/* ganzer Nav-Balken */
  background: var(--nav6NavDesk);	/* ganzer Nav-Balken */
  cursor: pointer;
  color: var(--nav6Text);
  font-weight: bold;
  text-shadow: 1px 1px 0px #000000;
  text-align: left;	/* falls Desktop-Variante zentriert war */
}
  
label.responsive-nav-label span {
  margin-right: 10px;  
  vertical-align: text-bottom;	/* Label an Hamburger-Mitte ausrichten */
}

input#responsive-nav[type=checkbox]:checked ~ .TopNavM6 {
  position: relative;
  top: 0;
}

/* Mobile-Button-Hintergrund / Mobile-Button Level 1 / Gruppenfarbe */
.TopNavM6 {
  position: absolute;
  top: -9999px;
  padding: 10px 0px 5px 1.5%;	/* ... kein Abstand - ust bei ul li geregelt*/
  padding: 0px 0px 5px 0px;	/* ... keine anderen Abstände - ist bei ul li a geregelt*/
  background: var(--nav6MobL1) !important;	/* gesamter Nav-Hintergrund */
  text-align: left;	/* falls Desktop-Variante zentriert war */
  width: 100%;	/* falls Desktop-Variante via auto zentriert war */
}
/*
*/

.TopNavM6 a:after {
/*  display: none;  ??? war wahrscheinlich für alte 'submenu' Variante */ 
}

/* alle Gruppenfarben sind bei ul (und ul ul, ul ul ul, ... etc.)*/
/* Mobile-Button Level 1 / Gruppenfarbe */
.TopNavM6 ul {	/* Gruppenfarben 1. Ebene */
    background: var(--nav6MobL1);	/* sollte hier am besten die gleiche Farbe wie für Gesamt-Nav sein*/
}
  
/* Mobile-Button ab Level 2 / 3 / 4 / 5 */
.TopNavM6 ul ul {	/* 2. Ebene */
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  background-color: transparent;	/* übernimmt Hintergrund vom vorherigem Level */
  background-color: var(--nav6MobL2);	/* eigene Farbe für Sub-Elemente ab Level 2 - wenn nicht übersteuert */
  box-shadow: none;	/* für alle Ebenen*/
/*  display:none; funktioniert prinzipiell, ist aber nicht optimal */
}


.TopNavM6 ul ul ul  {	/* 3. Ebene */
  background-color: var(--nav6MobL3);	/* eigene Farbe für diesen Level */
/*  display:none; funktioniert prinzipiell, ist aber nicht optimal */
}
  
.TopNavM6 ul ul ul ul  {	/* 4. Ebene */
  background-color: var(--nav6MobL4);	/* eigene Farbe für diesen Level */
/*  display:none; funktioniert prinzipiell, ist aber nicht optimal */
}

.TopNavM6 ul ul ul ul ul  {	/* 5. Ebene */
  background-color: var(--nav6MobL5);	/* eigene Farbe für diesen Level */
/*  display:none; funktioniert prinzipiell, ist aber nicht optimal */
}

/* funktioniert prinzipiell, ist aber nicht optimal */
.TopNavM6 ul li:hover > ul {
  display:block;
}


.TopNavM6 li {
  float: none !important;
  width: 100% !important;
  margin-left:0px;
}

.TopNavM6 ul li {	/* Gruppenabstand 1. Ebene */
  position: relative;
  color: var(--nav6Text);
  font-weight: bold;
  text-shadow: 1px 1px 0px #000000;
  transition: 0.5s;
  background-color: transparent !important;	/* übernimmt Hintergrund von ul*/
  margin: 0px 0px 0px 0px;	/* muss so bleiben */
}

/* Gruppenabstand ab 2. Ebene - gilt auch für alle weiteren Ebenen - ist ok */
/* ... sonst müsste/könnte für jede Gruppe ein anderer Abstand definiert werden: */
/* ul ul ul li, ul ul ul ul li, etc. */
.TopNavM6 ul ul li  {
  padding: 0px 0px 0px 30px;	/* andere paddings wg. hover bei ... li a*/
  border-bottom: none;
}
/*
*/
  
.TopNavM6 ul li a {	/* gilt hier für alle! (darum besser pro Level? -> ist ok hier!) */
  border-bottom:1px solid white;
  padding: 15px 0px 0px 10px;	/* gilt für alle Ebenen - wenn nicht übersteuert */
}

.TopNavM6 ul ul li a {
  padding: 15px 10px 0px 10px;	/* gilt für alle Ebenen ab Level 2 - wenn nicht übersteuert */
}
/*
*/

/* Mobile-ButtonAktiv */
.TopNavM6 ul li .aktiv {
  background: #4096ee;
  background: #cb3a3a;
  background: #cf5c5c;	
  background: var(--nav6aktiv);
}

/* Mobile-ButtonFocus ab Level 1 - deaktivieren? */
.TopNavM6 ul li a:focus {
  background: #4096ee;
  background: #cf5c5c;
  background: #cb3a3a;
  background: var(--nav6aktiv);
}

/* Mobile-ButtonHover ab Level 1 */
.TopNavM6 ul li a:hover {
  background: #4096ee;
  background: #cf5c5c;	/* eigene Farbe für (alle) Elemente*/
  background: var(--nav6hover);	/* eigene Farbe für (alle) Elemente*/
}

/* Mobile-ButtonActive ab Level 1 - ist nur wie "MouseDown" und bleibt nicht! */
.TopNavM6 ul li a:active {
  background: #4096ee;
  background: green;
  background: #cb3a3a;
  background: #cf5c5c;	
  background: var(--nav6aktiv);
}

}