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

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

/* Scrollbalken immer einblenden und Schrift auf 10px festlegen */
html {
  scroll-padding-top: 60px;
	font-size: 100%; /* angepasst von 62,5% weil Schriften von externen Diensten zu klein wurden */
	overflow-y: scroll;
}

/* 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 Small ]======================== */

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

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


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



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

	.grid {
		grid-gap: 30px;
	}

  /* 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;
	}

	/* die "extremen" Gridspalten werden zu 4/8 bzw. 8/4 reduziert */
  .grid[cols="7-5"] > :nth-child(odd),
	.grid[cols="5-7"] > :nth-child(even),
	.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="7-5"] > :nth-child(even),
	.grid[cols="5-7"] > :nth-child(odd),
	.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-System ab Large ]======================== */

@media all and (min-width: 1100px) {
	.grid {
		grid-gap: 60px;
	}

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

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

  .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;
	}

}