/*
	2018-04-25, tdogan

	v1.0.1

	Mobile Menü als JS Treeview Overlay

	Vereinfachte Treeviewversion. Öffnen Button und Menü jetzt abgekoppelt für vereinfachte Positionierung und unabhängiges Styling.
	Der opener Button kann jetzt losgelöst im head stehen und das Menü ist ein kompletter Overlay über die Seite und muss den header nicht mehr überlagern.
*/


.c4-mm-cc, .c4-mm-cc *{
	box-sizing:border-box;
}

/*Oberster Container, der der Positionierung und Sichtbarkeit dient*/
.c4-mm-cc{
	font-family:rc-lt, sans-serif;
	font-size:16px;
	line-height:normal;
	color:rgb(51,51,51);

	position:fixed;
	top:0;
	left:0;
	width:90%;
	max-width:300px;
	height:100%;

	/*Ist nach links um seine eigene Breite aus dem Viewport verschoben.
	Die Ein- und Ausblendanimtion erfolgt über transition, berücksichtigt also immer den aktuellen Offset egal zu welchem Zeitpunkt ein Wechsel stattfindet.
	Dies geht in allen Browsern weich bis auf FF ,der ggf. beim Einblenden zu Beginn etwas ruckelt.*/
	transform:translateX(-100%);
	/*BEACHTE: hier wird die transition explizit auf transform eingeschränkt. Andere sich ändernde Regeln (Standard: all) werden also nicht animiert. dito bei .show
	Übrigens ist dies hier so zu verstehen, dass diese transition hier für das Ausblenden de Menüs verwendet wird - also aus dem viewport schieben.
	Zum Einblenden hingegen wird die transition in show verwendet. Die gewünschte Geschwindigkeit ist also demnach dort zu setzen, wo der Zielzustand notiert wird.*/
	/*AUSBLENDEN*/
	transition:transform 0.4s ease-out;

	border-right:1px solid rgb(153,153,153);
	background-color:white;

	z-index:20000;
}
	/*Die Zusatzklasse auf dem obersten container wird per JS vom Control getoggelt*/
	.c4-mm-cc.show{
		/*EINBLENDEN*/
		transform:translateX(0%);
		transition:transform 0.4s ease-out;
		/*Schatten nur wenn sichtbar.*/
		box-shadow:5px 0 10px rgba(0,0,0,0.3);
	}

	/*flex container*/
	.c4-mm-sc,
	.c4-mm-hc,
	.c4-mm-fc{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}

	/*enthält die dynamischen Inhalte*/
	.c4-mm-sc{
		width:100%;
		height:100%;
		position:relative;

		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		-ms-flex-direction:column;
		flex-direction:column;
	}
		/*header und footer container sind ihrerseits flex und haben jeweils zwei untercontainer für optionalen Text und Icon.
		Das Icon für den header ist reserviert für den Schließen-Button (click). Sein Inhalt kann aber gestyled weerden.*/
		.c4-mm-hc,
		.c4-mm-fc,
		.c4-mm-hcico,
		.c4-mm-fcico{
			-webkit-box-flex:0;
			-ms-flex:none;
			flex:none;
			position:relative;
		}
		.c4-mm-bc,
		.c4-mm-hctxt,
		.c4-mm-fctxt{
			-webkit-box-flex:1;
			-ms-flex:1;
			flex:1;
			position:relative;
		}
			/*Scroller, enthält die UL/LI*/
			.c4-mm-bco{
				position:absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
				overflow:auto;
				/*iOS momentum scroll*/
				-webkit-overflow-scrolling:touch;
			}

	/*header*/
	.c4-mm-hc{
		color:white;
		background-color:rgb(153,153,153);
	}
	.c4-mm-hctxt{
		padding:0.5em;
	}
	/*Standard Schließen-Button im header. BEACHTE: der container selbst ist eingefärbt, so dass er immer so hoch ist,
	wie ggf. der optionale hctxt den gesamten header auseinanderdrückt. Dies sieht i.d.R. besser aus, als wenn unterhalb
	des Buttons noch einbeliebiges Stück Hintergrundfarbe des header containers sichtbar wird.*/
	.c4-mm-hcico{
		cursor:pointer;
		font-size:2em;
		line-height:1em;
		padding:0.25em;
		min-width:1.5em;
		text-align:center;
		color:white;
		background-color:rgb(204,0,0);
	}
		.c4-mm-hcico:before{
			/*far fa-times*/
			content:'\f00d';
			font-family:'Font Awesome 5 Pro';
			font-weight:400;
			display:block;
		}




/*========= Treeview =========*/
.c4-mm{
	cursor:default;
}

.c4-mm ul, .c4-mm li{
	list-style:none;
	padding:0;
	margin:0;
}
/*oberste UL unten etwas Luft, damit der letzte Menüpunkt des Treeview nicht dirket untem am Viewport klebt.*/
.c4-mm ul.lvl0{
	padding-bottom:1.5em;
}
	/*--- Layout ---*/
	/*oberster Labelcontainer und Icon-/Textcontainer sind flex container*/
	.c4-mm .lbl,
	.c4-mm .itc{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
		/*Icon-/Textcontainer links: ist entweder ein DIV oder A. Füllt immer den restlichen freien Raum komplett aus, den .tgl übrig lässt.
		Liegt die Klasse auf einem Hyperlink, so dehnt er sich der Link smoit auch automatisch block aus.
		Für das Seitenicon und die Beschriftung innerhalb von .itc gilt dieses Layout genau umgekehrt.*/
		.c4-mm .itc,
		.c4-mm .txt{
			-webkit-box-flex:1;
			-ms-flex:1;
			flex:1;
		}
		/*Toggle button rechts. Nimmt nur so viel Raum ein wie für sich selbst benötigt.
		Sind keine childNodes vorhanden, sso ist kein :before Icon sichtbar, so fällt er komplett in sich zusammen.*/
		.c4-mm .tgl,
		.c4-mm .ic{
			-webkit-box-flex:0;
			-ms-flex:none;
			flex:none;
		}
	/*zu / auf*/
	.c4-mm li > ul{
		display:none;
	}
	.c4-mm li.open > ul{
		display:block;
	}


	/*--- Design ---*/
	/*Trenner*/
	.c4-mm li{
		border-top:1px solid rgb(204,204,204);
	}
		.c4-mm li.lvl0:first-child{
			border-top-style:hidden;
		}
	/*Abstände zwischen clickbaren Bereichen*/
	.c4-mm .lbl{
		/*padding:0.25em 0;*/
	}

	/*Die Icons werden immer in I-Elementen gerendert, so dass hier der Webfont nur ein Mal notiert werden muss.*/
	.c4-mm .lbl i{
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	.c4-mm .lbl i:before{
		font-style:normal;
		font-family:'Font Awesome 5 Pro';
		/*Outlineversion des Icons, erfordert PRO*/
		font-weight:300;
		display:block;
	}

	/*
	- Hat ein Menüpunk eine eigene Inhaltsseiten (.lbl.owhref), so wird zur Beschriftung link noch ein Seitenicon gerendert.
	- Hat ein Menüpunkt noch childNodes (.lbl.hascn), so wird rechts in .tgl ein +/- Icon gerendert. Der Zustand hängt davon ab, ob
	der Menüpunkt geöffnet ist oder nicht (übergeordnetes li.open)*/
	.c4-mm .itc{
		padding-left:0.5em;
		padding-right:0.5em;
	}
	.c4-mm .ic{
		display:none;
	}
		.c4-mm .ic:before{
			/*fal fa-file-alt*/
			content:'\f15c';
			font-weight:300;
			padding:0.75em 0.25em 0.75em 0;
			min-width:1em;
		}
		/*Hat eigene Seite/Hyperlink*/
		.c4-mm .ic.owhref{
			display:block;
		}

	/*Menübeschriftung*/
	.c4-mm .txt{
		padding:0.75em 0;
		cursor:pointer;
	}

	/*open, close Toggle*/
	.c4-mm .tgl{
		/*deutlichen Abstand zum Icon/Text links*/
		margin-left:0.5em;
		display:none;
		cursor:pointer;
	}
		.c4-mm .tgl:before{
			/*fas fa-caret-right*/
			content:'\f0da';
			text-align:center;
			/*Sollte mindestes 40x40px groß sein für touch*/
			padding:0.75em 0.75em;
			min-width:1em;
		}
			/*hat childNodes*/
			.c4-mm .tgl.hascn{
				display:block;
			}
			/*geöffnet: beachte, wird über die Klasse auf dem gruppierenden LI ausgewertet. So muss nur auf dem LI vom JS Control die Klasse verwaltet werden.*/
			.c4-mm li.open > .lbl.hascn .tgl:before{
				/*fas fa-caret-down*/
				content:'\f0d7';
				/*solid*/
				font-weight:900;
			}

		/*Der zuletzt zum Öfffnen oder Schließen geklickte toggle button wird optisch hervorgehoben, um nach der Animation anzuzeigen,
		auf welchem Menüpunkt die letzte Interaktion war. Wird nämlich weit nach oben animiert, weiß man nicht mehr genau, woruf man zuletzt gelickt hatte.
		Dito bei :hover, um dem Benutzer anzuzeigen, dass da rechts etwas anklickbar ist.*/
		/*hover und on*/
		.c4-mm .lbl:hover .tgl{
			background-color:rgb(255,230,180);
		}
		.c4-mm .lbl.lastclick .tgl{
			background-color:rgb(255,204,102);
		}


	/*--- Home ---*/
	.c4-mm .ic.ishome:before{
		/*fal fa-home*/
		content:'\f015';
		/*Das Icon ist sehr breit -> optisch nach links ausrücken.*/
		margin-left:-0.125em;
		margin-right:0.125em;
	}

	/*--- act ---*/
	.c4-mm .lbl.act{
		background-color:rgb(245,245,245);
	}
		.c4-mm .ic.act{
			color:rgb(204,0,0)
		}
		.c4-mm .txt.act{
			font-family:rc, sans-serif;
		}

	/*--- on ---*/
	.c4-mm .lbl.owhref .ic.on:before{
		/*icon solid*/
		font-weight:900;
	}
	.c4-mm .lbl.on{
		background-color:rgb(230,230,230);
	}
		.c4-mm .ic.on{
			color:rgb(204,0,0)
		}
		.c4-mm .txt.on{
			font-family:rc, sans-serif;
			color:black;
		}


	/*--- Einrückungen ---
	Initial 0.5em. Ab Level 1 + 1.5em*/
	.c4-mm .itc.lvl1{padding-left:1.5em;}
	.c4-mm .itc.lvl2{padding-left:2.5em;}
	.c4-mm .itc.lvl3{padding-left:3.5em;}
	.c4-mm .itc.lvl4{padding-left:4.5em;}
	.c4-mm .itc.lvl5{padding-left:5.5em;}
	.c4-mm .itc.lvl6{padding-left:6.5em;}
	.c4-mm .itc.lvl7{padding-left:7.5em;}
	.c4-mm .itc.lvl8{padding-left:8.5em;}









/*========== Öffnen/Schließen Button Standard ============*/
/*Auf dem opener Button müssen auch die standard flexbox Klassen liegen, die die veschachtelten flex items DIV _btn und _lbl horizontal und vertikal zentrieren.
ACHTUNG: deshalb kann der button selbst nicht mit display unsichtbar/sichtbar geschaltet werden.
Stattdessen muss das Buttonkonstrukt selbst nochmals in einen Container verschachtelt werden, der dann mit display:none|block gesteuert wird.

Beispiel:
	...
		<div class="mm0-op-c c4-mm-op-c" data-mm-id="mm0" onclick="c4d.MM.Show(this.getAttribute('data-mm-id'));">
			<div class="c4-x c4-x-ahvc c4-mm-op">
				<div class="c4-mm-op-btn"><span></span></div>
				<div class="c4-mm-op-lbl">Menü</div>
			</div>
		</div>
	...


Die Positionierung des Containers erfolgt projektspezifisch im dortigen Layout CSS*/
.c4-mm-op-c{
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}
	.c4-mm-op{
		cursor:pointer;
		font-family:rc, sans-serif;
		font-size:22px;
		line-height:normal;
		color:rgb(51,51,51);
	}
		/*burger-button über borders auf verschachteltem Element statt webfont*/
		.c4-mm-op-btn{
			width:32px;
			height:32px;
			background-color:white;
			border:1px solid rgb(153,153,153);
			border-radius:5px;
			padding:8px 6px;
			position:relative;
		}
			/*oben und unten*/
			.c4-mm-op-btn span{
				display:block;
				width:100%;
				height:100%;
				border:2px solid rgb(102,102,102);
				border-right-style:hidden;
				border-left-style:hidden;
				position:relative;
			}
				/*mitte*/
				.c4-mm-op-btn span:before,
				.c4-mm-op-btn span:after{
					content:'';
					display:block;
					border-top:2px solid black;
					border-color:inherit;
					width:100%;
					position:absolute;
					top:50%;
					transform:translateY(-50%);
				}
				.c4-mm-op-btn span:after{
					/*far fa-times*/
					content:'\f00d';
					font-family:'Font Awesome 5 Pro';
					font-weight:400;
					width:100%;
					text-align:center;
					font-size:1em;
					line-height:0.01em;
					margin-top:-0.02em;
					/*Textfarbe wie Linienfarbe Burger*/
					color:rgb(102,102,102);
					/*zunächst unsichtbar*/
					display:none;
				}
				
		/*Beschriftung, wird für sehr klene Viewports später ausgeblendet*/
		.c4-mm-op-lbl{
			padding-right:5px;
		}

	/*Das JS control versucht auch auf dem Öffnen Button die Zusatzklasse show zu setzen, wenn das Menü sichtbar geschaltet wird.
	Hier wird dann ein X-Icon gesetzt.*/
	.c4-mm-op-c.show .c4-mm-op-btn span{
		border-color:transparent;
	}
	.c4-mm-op-c.show .c4-mm-op-btn span:before{
		display:none;
	}
	.c4-mm-op-c.show .c4-mm-op-btn span:after{
		display:block;
	}