html{ font-size: 16px; }

.clear{ clear:both; }
.left{float:left;}
.right{float:right;}
.textleft{text-align:left;}
.textright{text-align:right;}
.textcenter{text-align:center;}
img{ vertical-align:bottom; }

.nomargin{ margin:0; }
.nomargin-top{ margin-top:0; }
.nomargin-bottom{ margin-bottom:0; }

.nopadding{ padding:0; }
.nopadding-top{ padding-top:0; }
.nopadding-bottom{ padding-bottom:0; }



.fullheight{ min-height:100vh; }
.fullheight-90{ min-height:90vh; }
.fullheight-80{ min-height:80vh; }
.fullheight-70{ min-height:70vh; }
.fullheight-60{ min-height:60vh; }
.fullheight-50{ min-height:50vh; }
.fullheight-40{ min-height:40vh; }
.fullheight-30{ min-height:30vh; }
.fullheight-20{ min-height:20vh; }


.uppercase{ text-transform:uppercase; }
.normalcase{ text-transform:none; }



@media (max-width: 1400px) {

}
@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

/* --- Standard-Paddings --------------------------------------------------------------------------------------------- */
.padding-top{
	padding-top: var(--standard-padding-top);
}
.padding-top-half{
	padding-top: calc( var(--standard-padding-top) / 2 );
}
.padding-top-quarter{
	padding-top: calc( var(--standard-padding-top) / 4 );
}
.padding-top-double{
	padding-top: calc( var(--standard-padding-top) * 2 );
}
.padding-top-triple{
	padding-top: calc( var(--standard-padding-top) * 3 );
}
.padding-bottom{
	padding-bottom: var(--standard-padding-bottom);
}
.padding-bottom-half{
	padding-bottom: calc( var(--standard-padding-bottom) / 2 );
}
.padding-bottom-quarter{
	padding-bottom: calc( var(--standard-padding-bottom) / 4 );
}
.padding-bottom-double{
	padding-bottom: calc( var(--standard-padding-bottom) * 2 );
}
.padding-bottom-triple{
	padding-bottom: calc( var(--standard-padding-bottom) * 3 );
}
/* --- Standard-Margins --------------------------------------------------------------------------------------------- */
.margin-top{
	margin-top: var(--standard-margin-top);
}
.margin-top-half{
	margin-top: calc( var(--standard-margin-top) / 2 );
}
.margin-top-quarter{
	margin-top: calc( var(--standard-margin-top) / 4 );
}
.margin-top-double{
	margin-top: calc( var(--standard-margin-top) * 2 );
}
.margin-top-triple{
	margin-top: calc( var(--standard-margin-top) * 3 );
}
.margin-bottom{
	margin-bottom: var(--standard-margin-bottom);
}
.margin-bottom-half{
	margin-bottom: calc( var(--standard-margin-bottom) / 2 );
}
.margin-bottom-quarter{
	margin-bottom: calc( var(--standard-margin-bottom) / 4 );
}
.margin-bottom-double{
	margin-bottom: calc( var(--standard-margin-bottom) * 2 );
}
.margin-bottom-triple{
	margin-bottom: calc( var(--standard-margin-bottom) * 3 );
}
@media (max-width: 992px) {
	.margin-top-992{
		margin-top: var(--standard-margin-top);
	}
	.margin-top-half-992{
		margin-top: calc( var(--standard-margin-top) / 2 );
	}
	.margin-top-quarter-992{
		margin-top: calc( var(--standard-margin-top) / 4 );
	}
	.margin-top-double-992{
		margin-top: calc( var(--standard-margin-top) * 2 );
	}
	.margin-top-triple-992{
		margin-top: calc( var(--standard-margin-top) * 3 );
	}
	.margin-bottom-992{
		margin-bottom: var(--standard-margin-bottom);
	}
	.margin-bottom-half-992{
		margin-bottom: calc( var(--standard-margin-bottom) / 2 );
	}
	.margin-bottom-quarter-992{
		margin-bottom: calc( var(--standard-margin-bottom) / 4 );
	}
	.margin-bottom-double-992{
		margin-bottom: calc( var(--standard-margin-bottom) * 2 );
	}
	.margin-bottom-triple-992{
		margin-bottom: calc( var(--standard-margin-bottom) * 3 );
	}
	.nomargin-992{
		margin-top:0;
		margin-bottom:0;
	}
	.nomargin-top-992{
		margin-top:0;
	}
	.nomargin-bottom-992{
		margin-bottom:0;
	}
}
@media (max-width: 768px) {
	.margin-top-768{
		margin-top: var(--standard-margin-top);
	}
	.margin-top-half-768{
		margin-top: calc( var(--standard-margin-top) / 2 );
	}
	.margin-top-quarter-768{
		margin-top: calc( var(--standard-margin-top) / 4 );
	}
	.margin-top-double-768{
		margin-top: calc( var(--standard-margin-top) * 2 );
	}
	.margin-top-triple-768{
		margin-top: calc( var(--standard-margin-top) * 3 );
	}
	.margin-bottom-768{
		margin-bottom: var(--standard-margin-bottom);
	}
	.margin-bottom-half-768{
		margin-bottom: calc( var(--standard-margin-bottom) / 2 );
	}
	.margin-bottom-quarter-768{
		margin-bottom: calc( var(--standard-margin-bottom) / 4 );
	}
	.margin-bottom-double-768{
		margin-bottom: calc( var(--standard-margin-bottom) * 2 );
	}
	.margin-bottom-triple-768{
		margin-bottom: calc( var(--standard-margin-bottom) * 3 );
	}
}
@media (max-width: 576px) {
	.margin-top-576{
		margin-top: var(--standard-margin-top);
	}
	.margin-top-half-576{
		margin-top: calc( var(--standard-margin-top) / 2 );
	}
	.margin-top-quarter-576{
		margin-top: calc( var(--standard-margin-top) / 4 );
	}
	.margin-top-double-576{
		margin-top: calc( var(--standard-margin-top) * 2 );
	}
	.margin-top-triple-576{
		margin-top: calc( var(--standard-margin-top) * 3 );
	}
	.margin-bottom-576{
		margin-bottom: var(--standard-margin-bottom);
	}
	.margin-bottom-half-576{
		margin-bottom: calc( var(--standard-margin-bottom) / 2 );
	}
	.margin-bottom-quarter-576{
		margin-bottom: calc( var(--standard-margin-bottom) / 4 );
	}
	.margin-bottom-double-576{
		margin-bottom: calc( var(--standard-margin-bottom) * 2 );
	}
	.margin-bottom-triple-576{
		margin-bottom: calc( var(--standard-margin-bottom) * 3 );
	}
}

/* Reihenfolge der Spalten im 2er-Grid ändern. Spalten benötigen Klassen .first, .second*/
@media (max-width: 992px) {
	.reverse-grid-992{ display:flex; flex-direction:column; }
	.reverse-grid-992 .first{ order:2; }
	.reverse-grid-992 .second{ order:1; }
}