/* ==================================================================================================== */
/* Basis Klassen für Flexboxen */
/* ==================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- */
/* Flexbox (allgemein)																					*/
/* ---------------------------------------------------------------------------------------------------- */
.CFlexBase, .CFlexContainerHorizontal, .CFlexContainerVertical, .CFlexContainerHorizontalWrap, .CFlexContainerVerticalWrap
{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Flexbox Container																					*/
/* ---------------------------------------------------------------------------------------------------- */
/* Item bei Anordnung innerhalb des Containers nicht umbrechen */
.CFlexContainerNoWrapBase, .CFlexContainerHorizontal, .CFlexContainerVertical
{
	-ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/* Item bei Anordnung innerhalb des Containers umbrechen */
.CFlexContainerWrapBase, .CFlexContainerHorizontalWrap, .CFlexContainerVerticalWrap
{
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* Item innerhalb des Containers nebeneinander anordnen */
.CFlexContainerHorizontalBase, .CFlexContainerHorizontal, .CFlexContainerHorizontalWrap
{
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}

/* Item innerhalb des Containers untereinander anordnen */
.CFlexContainerVerticalBase, .CFlexContainerVertical, .CFlexContainerVerticalWrap
{
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

/* Ausrichtung der Item in der Hauptachse: Anfang */
.CFlexContainerJustifyContentStart
{
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

/* Ausrichtung der Item in der Hauptachse: Ende */
.CFlexContainerJustifyContentEnd
{
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

/* Ausrichtung der Item in der Nebenachse des Containers: zentriert */
.CFlexContainerCrossCenter
{
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

/* Ausrichtung der Item in der Nebenachse des Containers: Anfang/oben */
.CFlexContainerCrossStart
{
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

/* Ausrichtung der Item in der Nebenachse des Containers: Ende/unten */
.CFlexContainerCrossEnd
{
	-ms-flex-align: end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

/* Ausrichtung der Item in der Nebenachse des Containers: Schrift-Baseline */
.CFlexContainerCrossBaseLine
{
	-ms-flex-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}

/* Ausrichtung der Item in der Nebenachse des Containers: Ausdehnen */
.CFlexContainerCrossStretch
{
	-ms-flex-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Flexbox Item																							*/
/* ---------------------------------------------------------------------------------------------------- */
/* Das Item nimmt genau soviel Platz wie es braucht und auch nicht weniger */
/* Muss unbedingt immer verwendet werden, da die Browser unterschiedliche Defaults für flex:0 verwenden! */
.CFlexItemFitSize, .CFlexContainerItemFitSize > *
{
	-ms-flex-positive: 0;
	-ms-flex-negative: 0;
	-ms-flex-preferred-size: auto;
	
	-webkit-flex-grow: 0;
	-webkit-flex-shrink: 0;						
	-webkit-flex-basis: auto;

	flex-grow: 0;
	flex-shrink: 0;						/* Wir wollen auf keinen Fall shrink */
	flex-basis: auto;
}

/* Das Item nimmt den gesamten verfügbare Restraum ein; Jedes Item bekommt die gleiche Menge an Zusatzgröße */
/* Achtung: Kurzschreibweise flex:1 NICHT verwenden da die Browser unterschiedliche Defaults für flex:1 verwenden! */
.CFlexItemFillSpace, .CFlexContainerItemFillSpace > *
{
	-ms-flex-positive: 1;
	-ms-flex-negative: 0;
	-ms-flex-preferred-size: auto;
	
	-webkit-flex-grow: 1;
	-webkit-flex-shrink: 0;						
	-webkit-flex-basis: auto;

	flex-grow: 1;
	flex-shrink: 0;						/* Wir wollen auf keinen Fall shrink */
	flex-basis: auto;
}

/* Das Item nimmt den gesamten verfügbare Restraum ein; Die Items versuchen dabei gleich groß zu sein */
/* Achtung: Kurzschreibweise flex:1 NICHT verwenden da die Browser unterschiedliche Defaults für flex:1 verwenden! */
.CFlexItemFillSpaceUniform, .CFlexContainerItemFillSpaceUniform > *
{
	-ms-flex-positive: 1;
	-ms-flex-negative: 0;
	-ms-flex-preferred-size: 0px;
	
	-webkit-flex-grow: 1;
	-webkit-flex-shrink: 0;						
	-webkit-flex-basis: 0;

	flex-grow: 1;
	flex-shrink: 0;						/* Wir wollen auf keinen Fall shrink */
	flex-basis: 0;
}

/* Das Item nimmt den verfügbaren Restraum ein. Wenn der Platz nicht ausreicht, wird es kleiner. */
.CFlexItemFillSpaceShrink, .CFlexContainerItemFillSpaceShrink > *
{
	-ms-flex-positive: 1;
	-ms-flex-negative: 1;
	-ms-flex-preferred-size: auto;
	
	-webkit-flex-grow: 1;
	-webkit-flex-shrink: 1;						
	-webkit-flex-basis: auto;

	flex-grow: 1;
	flex-shrink: 1;						
	flex-basis: auto;
}

/* Ausrichtung des Items in der Nebenachse des Containers: Zentrum */
.CFlexItemCrossCenter
{
	-ms-flex-item-align: center;
	-webkit-align-self: center;
	align-self: center;
}

/* Ausrichtung des Items in der Nebenachse des Containers: Anfang */
.CFlexItemCrossStart
{
	-ms-flex-item-align: start;
	-webkit-align-self: flex-start;
	align-self: flex-start;
}

/* Ausrichtung des Items in der Nebenachse des Containers: Ende */
.CFlexItemCrossEnd
{
	-ms-flex-item-align: end;
	-webkit-align-self: flex-end;
	align-self: flex-end;
}

/* Ausrichtung des Items in der Nebenachse des Containers: Ausdehnen */
.CFlexItemCrossStretch
{
	-ms-flex-item-align: stretch;
	-webkit-align-self: stretch;
	align-self: stretch;
}