@charset "utf-8";
/* 
A usefull flexbox model for modern sites 
by Frank Schattle @schattle.de
*/
.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2.777777777%; 
	/*
	padding:0 5%;
	*/
}
.flex > * {
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	margin-bottom: 2.777777777%; 
	/*
	padding: 1%; 
	*/
	min-width:250px; /* define a fix pix default */
}
.flex.smallwrap > *{
	min-width: 60px; /* define a small-column-wrap (not too large) */
}

.flex .flex1{
	min-width:5.7870375%;
}
.flex .flex2{
	min-width:14.351852%;
}
.flex .flex3{
	min-width:22.91666%;
}
.flex .flex4{
	min-width: 31.48148%; 
}
.flex .flex5{
	min-width: 40.04629%;
}
.flex .flex6{
	min-width: 48.61111%;
}
.flex .flex7{
	min-width: 57.17592%;
}
.flex .flex8{
	min-width: 65.74074%;
}
.flex .flex9{
	min-width: 74.30555%;
}
.flex .flex10{
	min-width: 82.87037%;
}
.flex .flex11{
	min-width: 91.43518%; 
}
.flex .flex12{
	min-width: 100%;
}

/*
Berechnung:

B : Breite der Box in %
C : Gesamtbreite des Containers in px (hier 1080px)
A : Gesamtanzahl Boxen im Grid (hier 12)
G : Gesamtanzahl Gaps (hier 11) = A-1
g : Gap-Breite in px (hier 30px)
span : Anzahl Boxen zu umspannen
a : Anzahl Gaps dazwischen = span-1

B = ((((C - g*G)/A)*span + g*a)/C)*100

oder in prozent:
g ist in dann in prozent anzugeben (hier 2,777777)
B = ((100-g*(A-1))/A)*span + g*(span-1)
Vereinfacht:
B = ((100+g)/A)*span - g

*/