/* ========================[ Resets und Basics ]======================== */

/* Box-Size-Model (Elementbreite ist width MINUS margin und border) */
*, *:before, *:after {
  box-sizing: border-box;
  hyphens: auto; 
}

/* Scrollbalken immer einblenden und Schrift auf 10px festlegen */
html {
	font-size: 62.5%;
	overflow-y: scroll;
}

/* Clearfix als SCSS-Mixin. Einbinden in Styles über @include clearfix; */
@mixin clearfix() {
	&:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
	}
}

/* Silbentrennung */
article section > div {
	hyphens: auto
}

/* Sichtbarkeits-Hilfsklassen – was ist in S, M, L, XL (nicht) sichtbar */
/* Das einzelne Sichtbarmachen erfolgt in den jeweiligen Stylesheets */
.only-s, .only-m, .only-l, .only-xl {
	display: none !important;
}

/* Entwicklungshilfe zeigt im Browser rechts oben die aktuellen Breiten s,m,l,xl */
/* Zum Launch auf display: none setzen (siehe letzte Zeile) */
body:after {
	position: fixed;
	top: 0;
	right: 0;
	background: grey;
	opacity: 1;
	font-size: 14px;
	color: #fff;
	padding: 5px 10px;
	z-index: 99999999;
	display: none;
}


/* ========================[ Grid-System ab Middle ]======================== */

.grid {
	display: grid;
	grid-gap: 3.89610vw;
	word-break: break-word;
	grid-template-columns: repeat(12, 1fr); /* Grid mit 12 Spalten */
}

/* ab break-xl gilt statt gridgap ein festes max-gridgap wie in main.scss definiert */
@media all and (min-width: 1280px) {
	.grid {
		grid-gap: 42px;
	}
}

.grid > * {
	grid-column: span 12;
}

@media all and (max-width: 680px) {

  footer .grid[cols="4-4-4"] > div {
    grid-column: span 12;
  }
}



/* mehrspaltiges Grid ab min-width $break-m und aufwärts aktivieren */
@media all and (min-width: 680px) {
	/* 3-3-3-3 wird unterhalb von break-m zweispaltig mit zwei Zeilen */
	.grid[cols="6-6"] > *,
  .grid[cols="3-3-3-3"] > * {
		grid-column: auto / span 6;
	}

  .grid.break-early[cols="6-6"] > *{
    grid-column: auto / span 12;
  }

  footer .grid[cols="4-4-4"] > div {
    grid-column: auto / span 6;
  }

	/* die "extremen" Gridspalten werden zu 4/8 bzw. 8/4 reduziert */
	.grid[cols="9-3"] > :nth-child(odd),
	.grid[cols="3-9"] > :nth-child(even),
	.grid[cols="10-2"] > :nth-child(odd),
	.grid[cols="2-10"] > :nth-child(even) {
		grid-column: auto / span 8;
	}

	.grid[cols="9-3"] > :nth-child(even),
	.grid[cols="3-9"] > :nth-child(odd),
	.grid[cols="10-2"] > :nth-child(even),
	.grid[cols="2-10"] > :nth-child(odd) {
		grid-column: auto / span 4;
	}


/* ------------[ Grid für Internet Explorer 10/11 ab Middle ]------------ */

  .grid {
		display: -ms-grid;
		-ms-grid-columns: 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr 3.89610vw 1fr;
	}

	.grid > :nth-child(odd) {
		-ms-grid-column:1;
	}

	.grid > :nth-child(even) {
		-ms-grid-column:13;
	}

	.grid[cols="12"] > * {
		-ms-grid-column-span: 23;
	}

	.grid[cols="6-6"] > * {
		-ms-grid-column-span: 11;
	}

	.grid[cols="3-3-3-3"] {
		-ms-grid-column-span: 11;
		-ms-grid-rows: 1fr 3.89610vw 1fr;
	}

	.grid[cols="3-3-3-3"] > :nth-child(3),
	.grid[cols="3-3-3-3"] > :nth-child(4) {
		-ms-grid-row: 3;
	}

	/* grid-rows for IE10/11
	// unquote nur dazu da, dass sass das lesen kann. Ohne unquote wird ein Fehler ausgeworfen
	// mehrzeiliges Grid wird es innerhalb des hier verwendeten Grids eigentlich nicht geben */
	/*
	.grid[rows="1"] {-ms-grid-rows:auto;}
	.grid[rows="2"] {-ms-grid-rows:auto unquote("(40px auto)[1]");}
	.grid[rows="3"] {-ms-grid-rows:auto unquote("(40px auto)[2]");}
	.grid[rows="4"] {-ms-grid-rows:auto unquote("(40px auto)[3]");}
	.grid[rows="5"] {-ms-grid-rows:auto unquote("(40px auto)[4]");}
	.grid[rows="6"] {-ms-grid-rows:auto unquote("(40px auto)[5]");}
	.grid[rows="7"] {-ms-grid-rows:auto unquote("(40px auto)[6]");}
	.grid[rows="8"] {-ms-grid-rows:auto unquote("(40px auto)[7]");}
	.grid[rows="9"] {-ms-grid-rows:auto unquote("(40px auto)[8]");}
	*/
	/* Ende Grid für IE10/11 Small */
}


/* ========================[ Grid-System ab Large ]======================== */

@media all and (min-width: 1024px) {
/*	.grid[cols="3-3-3-3"] > * {
		grid-column: auto / span 3;
	}
*/
	.grid[cols="4-4-4"] > *,
  footer .grid[cols="4-4-4"] > div {
		grid-column: auto / span 4;
	}

  .grid.break-early[cols="6-6"] > *{
    grid-column: auto / span 6;
  }

  .grid[cols="7-5"] > :nth-child(odd),
  .grid[cols="5-7"] > :nth-child(even) {
    grid-column: auto / span 7;
  }

  .grid[cols="7-5"] > :nth-child(even),
  .grid[cols="5-7"] > :nth-child(odd) {
    grid-column: auto / span 5;
  }

	.grid[cols="8-4"] > :nth-child(odd),
	.grid[cols="4-8"] > :nth-child(even) {
		grid-column: auto / span 8;
	}

	.grid[cols="8-4"] > :nth-child(even),
	.grid[cols="4-8"] > :nth-child(odd) {
		grid-column: auto / span 4;
	}

	.grid[cols="9-3"] > :nth-child(odd),
	.grid[cols="3-9"] > :nth-child(even) {
		grid-column: auto / span 9;
	}

	.grid[cols="9-3"] > :nth-child(even),
	.grid[cols="3-9"] > :nth-child(odd) {
		grid-column: auto / span 3;
	}

	.grid[cols="10-2"] > :nth-child(odd),
	.grid[cols="2-10"] > :nth-child(even) {
		grid-column: auto / span 10;
	}

	.grid[cols="10-2"] > :nth-child(even),
	.grid[cols="2-10"] > :nth-child(odd) {
		grid-column: auto / span 2;
	}


/* ------------[ Grid für Internet Explorer 10/11 ab Large ]------------ */

	.grid[cols="4-4-4"] > * {
		-ms-grid-column-span: 7;
	}

	.grid[cols="4-4-4"] > :nth-child(2) {-ms-grid-column:9;}
	.grid[cols="4-4-4"] > :nth-child(3) {-ms-grid-column:17;}

	/* grid-row auf einzeilig überschreiben, da unterhalb von break-m zweizeiliges grid */
	/*.grid[cols="3-3-3-3"] {-ms-grid-rows: 1fr;}

  .grid[cols="3-3-3-3"] > :nth-child(3),
	.grid[cols="3-3-3-3"] > :nth-child(4) {-ms-grid-row:1;}

	.grid[cols="3-3-3-3"] > * {-ms-grid-column-span: 5;}

	.grid[cols="3-3-3-3"] > :nth-child(2) {-ms-grid-column:7;}
	.grid[cols="3-3-3-3"] > :nth-child(3) {-ms-grid-column:13;}
	.grid[cols="3-3-3-3"] > :nth-child(4) {-ms-grid-column:19;}
*/
  .grid[cols="5-7"] > :first-child {-ms-grid-column-span: 7;}
  .grid[cols="5-7"] > :last-child  {-ms-grid-column-span: 15;-ms-grid-column:9;}

  .grid[cols="7-5"] > :first-child {-ms-grid-column-span: 15;}
  .grid[cols="7-5"] > :last-child  {-ms-grid-column-span: 7;-ms-grid-column:17;}

	.grid[cols="4-8"] > :first-child {-ms-grid-column-span: 7;}
	.grid[cols="4-8"] > :last-child  {-ms-grid-column-span: 15;-ms-grid-column:9;}

	.grid[cols="8-4"] > :first-child {-ms-grid-column-span: 15;}
	.grid[cols="8-4"] > :last-child {-ms-grid-column-span: 7;-ms-grid-column:17;}

	.grid[cols="3-9"] > :first-child {-ms-grid-column-span: 5;}
	.grid[cols="3-9"] > :last-child {-ms-grid-column-span: 17;-ms-grid-column:7;}

	.grid[cols="9-3"] > :first-child {-ms-grid-column-span: 17;}
	.grid[cols="9-3"] > :last-child {-ms-grid-column-span: 5;-ms-grid-column:19;}

	.grid[cols="2-10"] > :first-child {-ms-grid-column-span: 3;}
	.grid[cols="2-10"] > :last-child {-ms-grid-column-span: 19;-ms-grid-column:5;}

	.grid[cols="10-2"] > :first-child {-ms-grid-column-span: 19;}
	.grid[cols="10-2"] > :last-child {-ms-grid-column-span: 3;-ms-grid-column:21;}

/* Ende Grid für IE10/11 Large */
}

@media all and (min-width: 1280px) {

	.grid[cols="3-3-3-3"] > * {
		grid-column: auto / span 3;
	}

  /* grid-row auf einzeilig überschreiben, da unterhalb von break-m zweizeiliges grid */
	.grid[cols="3-3-3-3"] {-ms-grid-rows: 1fr;}

  .grid[cols="3-3-3-3"] > :nth-child(3),
	.grid[cols="3-3-3-3"] > :nth-child(4) {-ms-grid-row:1;}

	.grid[cols="3-3-3-3"] > * {-ms-grid-column-span: 5;}

	.grid[cols="3-3-3-3"] > :nth-child(2) {-ms-grid-column:7;}
	.grid[cols="3-3-3-3"] > :nth-child(3) {-ms-grid-column:13;}
	.grid[cols="3-3-3-3"] > :nth-child(4) {-ms-grid-column:19;}

}