/*
	v1.0.11

	2018-05-01, tdogan

	s.a.	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
			https://autoprefixer.github.io/
*/

/*=== parent container ===*/
/*standard, items horizontal*/
.c4-x,
.c4-xv,
.c4-x-gr,
.c4-x-f2r,
.c4-x-f2l,
.c4-x-fit{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
/*items vertikal, column*/
.c4-xv{
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
}

/*wrap*/
.c4-x-w,
.c4-xv-w,
.c4-x-gr,
.c4-x-fit{
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}


/*=== item Ausrichtung ===
.c4-x-ahv... bezieht sich auf eine gleichzetige horizontale undd vertikale Ausrichtung mit nur einer Klasse.
typisch: .c4-x-ahvc für eine Zentrierung eines Items h und v in der flex Containermitte.
*/
/*horizontal*/
.c4-x-ahc,
.c4-x-ahvc{
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
}
.c4-x-ahfs{
	-webkit-box-pack:start;
	-ms-flex-pack:start;
	justify-content:flex-start;
}
.c4-x-ahfe{
	-webkit-box-pack:end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}
.c4-x-ahspb{
	/*wie Blocksatz über die volle Breite des felx containers verteilt*/
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}
.c4-x-ahspa{
	/*verteilt die items so über die parent Breite, dass die Zwischenräume gleich gesetzt werden.
	Dabei sind die Anstände zwischen den Items zweifach, die links und rechts nur einfach. Wozu auch immer das gut sein soll...*/
	-ms-flex-pack:distribute;
	justify-content:space-around;
}
/*wie space around, aber hier werden tatsächlich ALLE Abstände zwischen den Items (also auch links und rechts) gleich aufgeteilt. Macht mehr Sinn.
ACHTUNG: wird vom W3C validator als ungültiges CSS bemängelt! und deshalb hier ausgelassen.*/
/*
.c4-x-ahspe{
	-webkit-box-pack:space-evenly;
	-ms-flex-pack:space-evenly;
	justify-content:space-evenly;
}
*/


/*vertikal*/
.c4-x-avc,
.c4-x-ahvc{
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.c4-x-avfs{
	-webkit-box-align:start;
	-ms-flex-align:start;
	align-items:flex-start;
}
.c4-x-avfe{
	-webkit-box-align:end;
	-ms-flex-align:end;
	align-items:flex-end;
}
.c4-x-avb{
	-webkit-box-align:baseline;
	-ms-flex-align:baseline;
	align-items:baseline;
}
.c4-x-avst{
	/*default*/
	-webkit-box-align:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
}



/*=== flex items ===*/
/*Flex Verhalten. Die shorthand Notationen spliten sich auf in: grow | schrink | flex-basis.
Der Standard für ein flex item ohne extra Regel ist: 0 | 1 | auto*/
.c4-x-f-none{
	/*nicht schrumpfen oder wachsen: wird aufgelöst nach: flex-grow:0 | flex-schrink:0 | flex-basis:auto */
	-webkit-box-flex:0;
	-ms-flex:none;
	flex:none;
}
.c4-x-f-0{
	/*0 | 1 | 0%*/
	-webkit-box-flex:0;
	-ms-flex:0;
	flex:0;
}
.c4-x-f-1{
	/*1 | 1 | 0%*/
	-webkit-box-flex:1;
	-ms-flex:1;
	flex:1;
}
.c4-x-f-1-0-auto{
	/*1 | 0 | auto
	wg. IE11. Sieser würde bei flex:1 seinen Inhalt abschneiden, wenn das flex item kleiner wird als sein container und damit er selbst.
	shrink=0 verhindert das Unterschreiten der Minimalhöhe des Inhalts.
	Typisch für Fälle, in denen sich das item zwar ausdehen, aber nie kleiner als sein Inhalt werden darf.
	z.B. sticky footer. Der Hauptinhaltsbereich dehnt sich wenn möglich voll in der Höhe aus und drückt den footer so lange wie möglich an die untere Viewportkante.
	Er wird aber niemals niedriger als sein Inhalt, so dass für niedrigere Viewports der footer dann im overflow der Seite verschwindet.*/
	-webkit-box-flex:1;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
}





/*Anordnung direkt auf Item notiert*/
.c4-x-asc{
	-ms-flex-item-align:center;
	-ms-grid-row-align:center;
	align-self:center;
}
.c4-x-asfs{
	-ms-flex-item-align:start;
	align-self:flex-start;
}
.c4-x-asfe{
	-ms-flex-item-align:end;
	align-self:flex-end;
}
.c4-x-asb{
	-ms-flex-item-align:baseline;
	align-self:baseline;
}
.c4-x-asa{
	-ms-flex-item-align:auto;
	-ms-grid-row-align:auto;
	align-self:auto;
}
.c4-x-ass{
	/*default*/
	-ms-flex-item-align:stretch;
	-ms-grid-row-align:stretch;
	align-self:stretch;
}


/*order*/
.c4-x-o10{
	-webkit-box-ordinal-group:11;
	-ms-flex-order:10;
	order:10;
}
.c4-x-o20{
	-webkit-box-ordinal-group:21;
	-ms-flex-order:20;
	order:20;
}
.c4-x-o30{
	-webkit-box-ordinal-group:31;
	-ms-flex-order:30;
	order:30;
}
.c4-x-o40{
	-webkit-box-ordinal-group:41;
	-ms-flex-order:40;
	order:40;
}
.c4-x-o50{
	-webkit-box-ordinal-group:51;
	-ms-flex-order:50;
	order:50;
}
.c4-x-o60{
	-webkit-box-ordinal-group:61;
	-ms-flex-order:60;
	order:60;
}
.c4-x-o70{
	-webkit-box-ordinal-group:71;
	-ms-flex-order:70;
	order:70;
}
.c4-x-o80{
	-webkit-box-ordinal-group:81;
	-ms-flex-order:80;
	order:80;
}
.c4-x-o90{
	-webkit-box-ordinal-group:91;
	-ms-flex-order:90;
	order:90;
}






/*2 Spalten rechts oder linksbündig, so dass das erste bzw. letzte Element nur so breit ist wie sein Inhalt es erfordert.
Die jeweils andere Spalte füllt dann den verbelibenden Rest auf. Typisch Bild/Text Kombination (c4-x-fit).*/
.c4-x-f2r > *,
.c4-x-f2l > *,
.c4-x-fit > *{
	-webkit-box-flex:1;
	-ms-flex:1;
	flex:1;
}
	.c4-x-f2r > *:first-child,
	.c4-x-f2l > *:last-child,
	.c4-x-fit > *:first-child{
		-webkit-box-flex:0;
		-ms-flex:none;
		flex:none;
	}




/*=== Grid ===*/
/*grid Container, beschneidet immer overflow der Reihe .c4-x-gr*/
.c4-x-g{
	position:relative;
	/*W I C H T I G : horizontalen overflow des Reihencontainers abschneiden. Da rechts so viel Reserveraum freigehalten wird,
	würde dies bei kleinen Spaltenbreiten/Randabständen typischerweise bei Mobilgeräten zu horizontalem Scrollen führen.

	BUG: IE11 erzeugt im Druckbild @print vertikale scrollbars, wenn nur overflow-x angegeben ist.
	Zudem schneidet IE11 beim Drucken die Inhalte von verschachtelten .c4-x-g einfach ab.
	Also muss der overflow für @print sichtbar geschaltet werden!
	Nicht desto trotz verschluckt IE11 gelegentlich Textinhalte in verschachtelten flexbox items / subgrids, wenn diese genau durch einen Seitenumbruch im Druckbild zerschnitten werden.
	Hierfür noch keine Lösung. Chrome und Firefox diesbezüglich OK.
	s.u. @media print
	*/
	overflow-x:hidden;
}
	/*grid row, flex container*/
	.c4-x-gr{
		/*Innenraum um 1 Spaltenabstand nach links UND rechts erweitern.
		Das Problem:
		1) IE11 kann zwar mit calc() die exakte Spaltenbreite berechnen. Ist aber für flex wrap erlaubt, bricht IE11 bei Teilungen durch 3 und 6
		immer dann ungewünscht um, wenn die Parentbreite eines Spalten-Items nicht ganzzahlig durch 2 teilbare Breite annimmt. Deshalb braucht der IE11
		min. 1 pixel Reservefreiraum rechts, um das letzte Item einer Reihe bei Rundungsdifferenzen rechts aus dem flex parent ragen zu lassen ohne Umbruch zu erzeugen.
		Die Spaltenbreiten werden in CSS nicht mehr mit literalen Prozentwerten angegeben, sondern mit calc((100% - rightBufferSpace) / columnsPerRow)
		2) Firefox rechnet zwar prinzipiell genau und erzeugt auch keinen unnnötigen Umbruch. Allerdings reicht es ihm mit 1 Pixel Reserve rechts nicht
		aus, um die korrekten geradzahligen Werte zu ermitteln.
		Firefox rechnet nämlich anders. Statt z.B. (100% - 12px) / 4 rechnet FF (100% / 4) - (12px / 4) = (25% - 30px)
		Auf jeden Fall braucht der FF wie IE11 auch noch einen Spaltenabstand Freiraum rechts, um auf die gleichen (und rechnerisch eigentlich zu erwartenden) Spaltenbreiten zu kommen.*/
		/*Ausgleich links 1 Spaltenabstand für die Spaltenitems*/
		margin-left:-40px;
		/*rechter Pufferbereich, um ungewünschten Umbruch zu verhindern. Optimal wären 12px, da sich dann für 1,2,3,4,5,6,8,10 Spalten ganzzahlige Reste ergeben würden.
		Allerdings brechen dann sehr schmale Spalten (untypisch) nicht mehr wie erwartet um, sondern bleiben rechts unsichtbar im paddingd hängen.
		Deshalb wird hier 12px verewndet, was außer bei 5,8,10 Spalten zumindest sehr viele ganzzahlige Teilungen ergibt.*/
		margin-right:-12px;
	}
		/*grid col, flex item*/
		.c4-x-gr > *{
			position:relative;
			/*Spaltenabstand links. Der Spaltenabstand nach unten wird hier NICHT festgelegt. Dies ermöglicht einen sich automatisch ergebenden Blockabstand nach unten,
			wenn Spalten mit Text umgebrochen werden. Der Inhalt der Spalten bestimmt also deren Abstand. Ist in den meisten Fällen die gewünschte Variante.
			Z.B. für Bildergalerien kann mit der Zusatzklasse .c4-x-g-full auch die untere border eingeschaltet werden, was zu einem gleichmäßigen Bildraster führt.*/
			border:40px hidden transparent;
			border-left-style:solid;
/*border-color:red;*/
		}


/*typische Spaltenbreiten
BEACHTE: der IE11 rundet stark anders, wenn die Prozentbreiten literal mit Nachkommastellen angegeben werden.
Selbst wenn sich mathematisch nur runde Spaltenbreiten ergeben würden (/3, /6, ...) errechnet IE dann Nachkommastellen.
Wird hingegen calc() verwendet, kommt IE dann wie die anderen Browser auf gerade Zahlen.
Für ungerade Teilungen wird also immer calc(100% / x) verwendet*/
/*IE11 fix: beim Schrumpfen und ungeraden viewportbreiten bricht der IE unkontrolliert die letzte Spalte pro Reihe um,
da die Summe der Spaltenrbeiten rechnerisch dann wohl 1px zu breit wird, um alle 3 Spalten in einer Reihe auszugeben.
Die anderen Browser zeigen diesen Umbruch nicht, da sie wohl eher abrunden.
Um diesen Bug auszugleichen, wird speziell für die ungeraden Teilungen der Reihencontainer c4-x-gr rechts um ein Pixel erweitert.
Die Spaltenbreiten müssen dann immer mit 1px Abzug von 100% parent Breite berechnet werden.
So entsteht recht 1px Freiraum als Reserve, der das unbeabsichtigte Umbrechen auch bein IE11 behebt.
Leider muss dann beim Breitenwechsel, z.B. von 3 zu 2 auch rechts die negative margin wieder auf 0 gestezt werden.*/

/* 1) global für alle items im container auf dem container gesetzt.
Hier wird der einem Gridcontainer untergeordnete Reihencontainer nicht explizit notiert, sondern nur die child selectoren auf * gesetezt.
Die hält die Wichtung der Regel so niedrig, dass sowohl Einzelfestlegungen über .c4-x-g-cwXXX, als auch Regeln über benutzerdefinierte Klassen
auf einen Spaltencontainer ohne extra Wichtung die Breite des Items überschreiben können.
*/
.c4-x-g-cc1 > * > *{
	width:calc((100% - 12px) / 1);
}
.c4-x-g-cc2 > * > *{
	width:calc((100% - 12px) / 2);
}
.c4-x-g-cc3 > * > *{
	width:calc((100% - 12px) / 3);
}
.c4-x-g-cc4 > * > *{
	width:calc((100% - 12px) / 4);
}
.c4-x-g-cc5 > * > *{
	width:calc((100% - 12px) / 5);
}
.c4-x-g-cc6 > * > *{
	width:calc((100% - 12px) / 6);
}
.c4-x-g-cc8 > * > *{
	width:calc((100% - 12px) / 8);
}
.c4-x-g-cc10 > * > *{
	width:calc((100% - 12px) / 10);
}
/* 2) für jedes item individuell direkt auf dem item gesetzt.
Die Wichtung der Regel direkt auf dem Spaltencontainer ist min. so hoch wie die der allgemeinen Spaltenzahlen auf dem gesamten Grid.*/
.c4-x-g-cw100{
	width:calc((100% - 12px) / 1);
}
.c4-x-g-cw90{
	width:calc((100% - 12px) * 0.9);
}
.c4-x-g-cw85{
	width:calc((100% - 12px) * 0.85);
}
.c4-x-g-cw80{
	width:calc((100% - 12px) * 0.8);
}
.c4-x-g-cw75{
	width:calc((100% - 12px) * 0.75);
}
.c4-x-g-cw70{
	width:calc((100% - 12px) * 0.7);
}
.c4-x-g-cw66{
	width:calc(((100% - 12px) / 3) * 2);
}
.c4-x-g-cw65{
	width:calc((100% - 12px) * 0.65);
}
.c4-x-g-cw60{
	width:calc((100% - 12px) * 0.6);
}
.c4-x-g-cw50{
	width:calc((100% - 12px) * 0.5);
}
.c4-x-g-cw40{
	width:calc((100% - 12px) * 0.4);
}
.c4-x-g-cw35{
	width:calc((100% - 12px) * 0.35);
}
.c4-x-g-cw33{
	width:calc((100% - 12px) / 3);
}
.c4-x-g-cw30{
	width:calc((100% - 12px) * 0.3);
}
.c4-x-g-cw25{
	width:calc((100% - 12px) * 0.25);
}
.c4-x-g-cw20{
	width:calc((100% - 12px) * 0.2);
}
.c4-x-g-cw15{
	width:calc((100% - 12px) * 0.15);
}
.c4-x-g-cw10{
	width:calc((100% - 12px) * 0.1);
}



/*=== vertikale Spaltenabstände pauschal aktivieren. z.B. für Bildergaleri Raster ===*/
.c4-x-g-full > .c4-x-gr > *{
	border-bottom-style:solid;
}



/*=== Allgemeine Bild/Text Zusammenstellung ===*/
/*--- Standard: Bild links, Text rechts horizontal. vergl. .c4-x-f2r ---*/
.c4-x-fit{
	border-bottom:30px solid transparent;
}
.c4-x-fit > *{
	/*Abstand nach links, typisch 1/2 Standardspaltenbeite*/
	border:20px hidden transparent;
	border-left-style:solid;
}
	/*Bild links*/
	.c4-x-fit > *:first-child{
		border-left-style:hidden;
	}

	/*Im Gegensatz zum c4-x-g wird hier der Abstand der Zeilen nach unten explizit gesteuert und ist unabhängig vom Inhalt.
	Dies ergibt ein homogeneres Bild, da weder für die Bilder noch die Textblöcke ein gezielter Abstand einzeln gesetzt werden muss.
	Der Item Abstand soll gezielt aus der Liste kommen*/
	.c4-x-fit > * > *:last-child{
		/*Letztes Element in Textspalte ohne margin-bottom (typisch P).*/
		margin-bottom:0;
	}

	/*Teilung so, dass das Bild links zunächst die typische exakte Breite von 1/6 Spalte bei Layoutgrid 1280/40 erhält.
	Schrumpft erst etwas später als der übergeordnete Container*/
	.c4-x-fit > *:first-child{
		width:33.333333%;
		max-width:180px;
	}


/*========== Templates =========*/
/*Mehrspaltiges Textlayout mit typischem Umbruch. Könnte man so auch mit multicolum abbilden.
Allerdings garantiert diese Grid hier, dass kein Inhalt ungewollt in die nächste Spalte rutscht.
Dies ist leider bei columns nicht konsistent steuerbar.*/
.c4-x-g-t3 > .c4-x-gr > *{
	width:calc((100% - 12px) / 3);
}
.c4-x-g-t2 > .c4-x-gr > *{
	width:calc((100% - 12px) / 2);
}
@media screen and (max-width:1020px){
	/*3 zu einer Spalte*/
	.c4-x-g-t3 > .c4-x-gr > *{
		width:calc((100% - 12px) / 1);
	}
}
@media screen and (max-width:760px){
	/*alle verbleibenden mehrspaltigen Textlayouts einspaltig*/
	.c4-x-g-t2 > .c4-x-gr > *{
		width:calc((100% - 12px) / 1);
	}
}




@media print{
	/*--- IE11 print fix ---*/
	/*vertikale Scrollbars in verschachtelten Grid verhindern.*/
	.c4-x-g{
		overflow:visible;
	}
		/*Funktioniert leider nur sporadisch je nach Seitenumbruch :-|
		Abschneiden von verschachtelten Grids bei Seitenumbruch möglichst verhindern.
		Durch dieses :after Pseudoelement wird scheinbar grafisch relevanter Inhalt erzeugt, der den IE veranlasst,
		dieses Element auf möglichst zu drucken. Hierbei muss display:table sein und eine min. 1px breite border vorhanden sein.
		Wird im Druckbild nur durch den Raum relevant, den es einnimmt. Ist aber nicht sichtbar da transparent.*/
		.c4-x-g .c4-x-g .c4-x-gr:after{
			content:'';
			width:100%;
			display:table;
			border-collapse:collapse;
			border:1px solid transparent;
		}
}