/* NAVIGATION JOOMLA Hauptlinks (s. template.css > ca. 2890)*/
.nav > li > a:hover,
.nav > li > a:focus {
	text-decoration: none;
    background-color:rgba(200,250,250,0); /* BG-Farbe */

}

/* ================================= */

/* CSS VARIABLES */
/* ACHTUNG: css var funktioniert noch nicht mit allen Browsern */
:root{
  --abstand-der-links: 20px; /* hauptlinks hmenu */
  --menu-hoehe:100px; /* hoehe hmenu */
  --menu-poistion:middle;/* float: links, mitte oder rechts*/
}

/* ================================= */


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/* MENU (hmenu) */

/* ======= LEVEL 1 ========*/
#hmenu,
#hmenu ul,
#hmenu ul li,
#hmenu ul li a,
#hmenu #menu-button {

	margin: 0;
	padding: 0px;
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



/* ?

#hmenu:after,
#hmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
*/



#hmenu {
  /*sticky */
    position:fixed;
  	z-index:2000;
    margin-top: 0px;
	width: 100%;
    height:70px; /* für gleiche Untermeun y-position s.#hmenu ul ul (top:60px) */
    /*height:var(--menu-hoehe);*/
  	
	font-family: 'Open Sans', sans-serif;
	font-size:120%;
	line-height: 1;
    /* BG */
	background-color:rgba(255,255,255,1);
	border-radius: 0px;
	border-bottom:1px solid rgba(0,0,0,0.2);
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
}


/*
#menu-line { 
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	background: #009ae1;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
*/





/*==== LEVEL 1 CONTAINER =====  */

/* Horizontale Darstellung der Links */
#hmenu > ul > li { 
	display: inline-block;
   /*background-color:green;*/ /* BG Container */
}



/* Positionieren (Level 1 Container)*/
#hmenu > ul { /* (ohne > wären alle ul betroffen) */
  
  float:right;/* left, middle, right */
  /* float mit css variablen:*/
  /*float:var(--menu-poistion);/* left, middle, right */
  padding-right:14%;/* -14%, abstnd-x von Rechts */
 
  
}




/* BG (Level 1 Container)*/
#hmenu > ul > li{
  /* background-color:lightblue;*/
   border-left: 1px solid rgba(120, 120, 120, 0.15);
 
}




/* LINKS (level 1 Container) */
#hmenu > ul > li > a {
    font-size:100%;
  /* Padding */
	padding-top: 20px;
  	padding-bottom:24px;
  
    /* falls css-var nicht eingesetzt werden: */
	padding-right:20px;
  	padding-left:20px;
  
    /*padding-right: var(--abstand-der-links);*/
    /*padding-left: var(--abstand-der-links);*/

 
	text-decoration: none;
	text-transform: uppercase;
	color:rgba(70,19,2,1); /* farbe */
  
     /* Animation */
  	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
  

}




/* Linkfarben status hover und aktiv */
#hmenu > ul > li:hover > a,
#hmenu > ul > li.active > a {
	color: rgba(145,39,4,1);
  
    /* Link BG-Farbe*/
    /*background:lightblue;*/
}




/* Level 1, Abstand vom Link zum Pfeilchen */
#hmenu > ul > li.parent > a {
  position:relative;
  /*falls keine css-var verwendet werden, Wert fix eigenben */
  padding-right:34px; /* 20px (padding 10px auf 2 seiten + 14px abstand vom Link zum Pfeilchen)*/
  
 /* padding-right: calc(var(--abstand-der-links) + 14px); /* 14px=Abstand vom link zum Pfeilchen */

}




/* PFEILCHEN (Hinweis auf Unterlinks)*/

/* Pfeilchen generieren und Anzeigen im Falle von vorhandenen Unterlinks */
#hmenu > ul > li.parent > a::after {
	position: absolute;
	top: 24px;
    /* abstand pfeilchen zum rechten Aussenrand des Links (selber Wert wie padding-x der Links) */
	right: 20px;

    /*right:var(--abstand-der-links);*/
   
    /* Pfeilchen zeichnen: Quadrat bzw. dessen Umrandung auf zwei Seiten und eine Drehung um 45 Grad */
	width: 4px;
	height: 4px;
	border-bottom: 1px solid rgba(145,39,4,1);
	border-right: 1px solid rgba(145,39,4,1);
	content: "";
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}



/* Pfeilchen - hover-status (level 1)*/
#hmenu > ul > li.parent:hover > a::after {
	border-color: rgba(145,39,4,1);
	color:rgba(145,39,4,1);
}

/* ENDE PFEILCHEN */


/*======================================*/


/* === LEVEL 2 CONTAINER ====*/

/* (level 2) */
#hmenu ul ul {
    z-index:2005; /* Ueber Level 1 platzieren */
	position: absolute;
	left: -9999px;
    top:59px;/*Unterkant von Level 1 platzieren, dessen Hoehe 60px beträgt */
	background-color:rgba(255,255,255,1); /* bg */
	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
}





/* Positionierung-x (Level 2) relativ zum Hauptlink */
#hmenu li:hover > ul {
	left:auto;
		
}


/* Weite, Hoehe plus die Animation (Level 2) */
#hmenu ul ul li {
    
	height: 0px;
	width:200px;
	/*border-bottom: 1px solid rgba(0,0,0,0.2);*/
	border-top: 1px solid rgba(120, 120, 120, 0.15); 
  
  /* Animation y (Level 2)*/
  	-webkit-transition: height .2s ease;
	-moz-transition: height .2s ease;
	-ms-transition: height .2s ease;
	-o-transition: height .2s ease;
	transition: height .2s ease;	
}



/* Hoehe Links (level 2)  */
#hmenu ul li:hover > ul > li {
	height: 40px;
}




/* Links (Level 2) a */
#hmenu ul ul li a {
    font-size:140%;
	padding: 10px 20px;
    text-align:left;
	text-decoration: none;	
	/* Link farbe status normal (level 2)*/
	color:rgba(70,19,2,1); /* farbe */
	background-color:rgba(200,200,200,0);

	/* fade-animatiion farbe (level 2)*/
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}




/* Link farbe status hover (Level 2)*/
#hmenu ul ul li:hover > a,
#hmenu ul ul li a:hover {
    color: rgba(145,39,4,1);
	/*background-color:rgba(200,200,200,1);*/
	
}



/* pfeilchen status normal (level 2) */
#hmenu ul ul li.parent > a::after {
	position: absolute;
	top: 13px;
	right: 10px;
	width: 4px;
	height: 4px;
	border-bottom: 1px solid rgba(145,39,4,1);
	border-right: 1px solid rgba(145,39,4,1);
	content: "";
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}



#hmenu.align-right ul ul li.parent > a::after {
	right: auto;
	left: 10px;
	border-right: 0;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
}




/* pfeilchenfarbe status hover after (level 2)*/
#hmenu ul ul li.parent:hover > a::after {
	border-color:rgba(145,39,4,1);
}


/*======================================*/

/* === LEVEL 3 CONTAINER ====*/

#hmenu ul ul ul {
	margin-left: 100%;
	top:0;
	background-color:rgba(255,255,255,1); /* bg */
	
}


#hmenu.align-right ul ul ul {
	margin-left: 0;
	margin-right: 100%;
	
	
}


/*======================================*/



/* ::::::::::| @MEDIA |::::::::::::::*/

@media only screen and (max-width: 1000px) {
  
  /* hmenu deaktivieren s. custom.css*/
  /* Logo-container ersetzt (in der Mobile-Ansicht) das hmenu-balken s.custum.css */
  
}