/*	###########################################################
	GRID SYSTEM
	12-column responsive CSS Grid
	Breakpoints:
	- default: mobile
	- sm: 768px
	- md: 1024px
	- lg: 1280px
	- xl: 1600px
	- full: 1920px
	########################################################### */


/* Variablen definieren */
:root {
	--gap: 10px;
}
@media (min-width: 992px) {
	:root {
		--gap: 17px;
	}
}


/*	###########################################################
	GRID CONTAINER
	########################################################### */

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 var(--gap);
	width: 100%;
}

.grid > * {
	position: relative;
	min-width: 0;
}


/*	###########################################################
	GRID CONTAINER ALIGNMENT
	########################################################### */

.grid.items-start  { align-items: start; }
.grid.items-center { align-items: center; }
.grid.items-end    { align-items: end; }


/*	###########################################################
	ITEM ALIGNMENT
	########################################################### */

.grid .align-start  { align-self: start; }
.grid .align-center { align-self: center; }
.grid .align-end    { align-self: end; }


/*	###########################################################
	MOBILE DEFAULT
	########################################################### */

/* columns */
.grid .col-1  { grid-column-end: span 1; }
.grid .col-2  { grid-column-end: span 2; }
.grid .col-3  { grid-column-end: span 3; }
.grid .col-4  { grid-column-end: span 4; }
.grid .col-5  { grid-column-end: span 5; }
.grid .col-6  { grid-column-end: span 6; }
.grid .col-7  { grid-column-end: span 7; }
.grid .col-8  { grid-column-end: span 8; }
.grid .col-9  { grid-column-end: span 9; }
.grid .col-10 { grid-column-end: span 10; }
.grid .col-11 { grid-column-end: span 11; }
.grid .col-12 { grid-column-end: span 12; }
.grid .col-auto { grid-column: auto; }

/* offsets */
.grid .offset-0  { grid-column-start: auto; }
.grid .offset-1  { grid-column-start: 2; }
.grid .offset-2  { grid-column-start: 3; }
.grid .offset-3  { grid-column-start: 4; }
.grid .offset-4  { grid-column-start: 5; }
.grid .offset-5  { grid-column-start: 6; }
.grid .offset-6  { grid-column-start: 7; }
.grid .offset-7  { grid-column-start: 8; }
.grid .offset-8  { grid-column-start: 9; }
.grid .offset-9  { grid-column-start: 10; }
.grid .offset-10 { grid-column-start: 11; }
.grid .offset-11 { grid-column-start: 12; }

/* order */
.grid .order-0  { order: 0; }
.grid .order-1  { order: 1; }
.grid .order-2  { order: 2; }
.grid .order-3  { order: 3; }
.grid .order-4  { order: 4; }
.grid .order-5  { order: 5; }
.grid .order-6  { order: 6; }
.grid .order-7  { order: 7; }
.grid .order-8  { order: 8; }
.grid .order-9  { order: 9; }
.grid .order-10 { order: 10; }
.grid .order-11 { order: 11; }
.grid .order-12 { order: 12; }

/* rows */
.grid .row-1 { grid-row: 1; }
.grid .row-2 { grid-row: 2; }
.grid .row-3 { grid-row: 3; }
.grid .row-4 { grid-row: 4; }
.grid .row-5 { grid-row: 5; }
.grid .row-6 { grid-row: 6; }
.grid .row-auto { grid-row: auto; }

/* visibility */
.hide-sm { display: none !important; }
.show-md { display: none !important; }

/* Text-Ausrichtungen */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* CMS: Standard Modulabstand */
.abstand-module-cms {
	margin-top: 160px;
}


/*	###########################################################
	SMALL >= 768px
	########################################################### */

@media (min-width: 768px) {
	.grid .col-sm-1  { grid-column-end: span 1; }
	.grid .col-sm-2  { grid-column-end: span 2; }
	.grid .col-sm-3  { grid-column-end: span 3; }
	.grid .col-sm-4  { grid-column-end: span 4; }
	.grid .col-sm-5  { grid-column-end: span 5; }
	.grid .col-sm-6  { grid-column-end: span 6; }
	.grid .col-sm-7  { grid-column-end: span 7; }
	.grid .col-sm-8  { grid-column-end: span 8; }
	.grid .col-sm-9  { grid-column-end: span 9; }
	.grid .col-sm-10 { grid-column-end: span 10; }
	.grid .col-sm-11 { grid-column-end: span 11; }
	.grid .col-sm-12 { grid-column-end: span 12; }
	.grid .col-sm-auto { grid-column: auto; }

	.grid .offset-sm-0  { grid-column-start: auto; }
	.grid .offset-sm-1  { grid-column-start: 2; }
	.grid .offset-sm-2  { grid-column-start: 3; }
	.grid .offset-sm-3  { grid-column-start: 4; }
	.grid .offset-sm-4  { grid-column-start: 5; }
	.grid .offset-sm-5  { grid-column-start: 6; }
	.grid .offset-sm-6  { grid-column-start: 7; }
	.grid .offset-sm-7  { grid-column-start: 8; }
	.grid .offset-sm-8  { grid-column-start: 9; }
	.grid .offset-sm-9  { grid-column-start: 10; }
	.grid .offset-sm-10 { grid-column-start: 11; }
	.grid .offset-sm-11 { grid-column-start: 12; }

	.grid .order-sm-0  { order: 0; }
	.grid .order-sm-1  { order: 1; }
	.grid .order-sm-2  { order: 2; }
	.grid .order-sm-3  { order: 3; }
	.grid .order-sm-4  { order: 4; }
	.grid .order-sm-5  { order: 5; }
	.grid .order-sm-6  { order: 6; }
	.grid .order-sm-7  { order: 7; }
	.grid .order-sm-8  { order: 8; }
	.grid .order-sm-9  { order: 9; }
	.grid .order-sm-10 { order: 10; }
	.grid .order-sm-11 { order: 11; }
	.grid .order-sm-12 { order: 12; }

	.grid .row-sm-1 { grid-row: 1; }
	.grid .row-sm-2 { grid-row: 2; }
	.grid .row-sm-3 { grid-row: 3; }
	.grid .row-sm-4 { grid-row: 4; }
	.grid .row-sm-5 { grid-row: 5; }
	.grid .row-sm-6 { grid-row: 6; }
	.grid .row-sm-auto { grid-row: auto; }

	.hide-sm { display: block !important; }

	.text-left-sm { text-align: left; }
	.text-center-sm { text-align: center; }
	.text-right-sm { text-align: right; }
	.text-justify-sm { text-align: justify; }
}


/*	###########################################################
	MEDIUM >= 1024px
	########################################################### */

@media (min-width: 1024px) {
	.grid .col-md-1  { grid-column-end: span 1; }
	.grid .col-md-2  { grid-column-end: span 2; }
	.grid .col-md-3  { grid-column-end: span 3; }
	.grid .col-md-4  { grid-column-end: span 4; }
	.grid .col-md-5  { grid-column-end: span 5; }
	.grid .col-md-6  { grid-column-end: span 6; }
	.grid .col-md-7  { grid-column-end: span 7; }
	.grid .col-md-8  { grid-column-end: span 8; }
	.grid .col-md-9  { grid-column-end: span 9; }
	.grid .col-md-10 { grid-column-end: span 10; }
	.grid .col-md-11 { grid-column-end: span 11; }
	.grid .col-md-12 { grid-column-end: span 12; }
	.grid .col-md-auto { grid-column: auto; }

	.grid .offset-md-0  { grid-column-start: auto; }
	.grid .offset-md-1  { grid-column-start: 2; }
	.grid .offset-md-2  { grid-column-start: 3; }
	.grid .offset-md-3  { grid-column-start: 4; }
	.grid .offset-md-4  { grid-column-start: 5; }
	.grid .offset-md-5  { grid-column-start: 6; }
	.grid .offset-md-6  { grid-column-start: 7; }
	.grid .offset-md-7  { grid-column-start: 8; }
	.grid .offset-md-8  { grid-column-start: 9; }
	.grid .offset-md-9  { grid-column-start: 10; }
	.grid .offset-md-10 { grid-column-start: 11; }
	.grid .offset-md-11 { grid-column-start: 12; }

	.grid .order-md-0  { order: 0; }
	.grid .order-md-1  { order: 1; }
	.grid .order-md-2  { order: 2; }
	.grid .order-md-3  { order: 3; }
	.grid .order-md-4  { order: 4; }
	.grid .order-md-5  { order: 5; }
	.grid .order-md-6  { order: 6; }
	.grid .order-md-7  { order: 7; }
	.grid .order-md-8  { order: 8; }
	.grid .order-md-9  { order: 9; }
	.grid .order-md-10 { order: 10; }
	.grid .order-md-11 { order: 11; }
	.grid .order-md-12 { order: 12; }

	.grid .row-md-1 { grid-row: 1; }
	.grid .row-md-2 { grid-row: 2; }
	.grid .row-md-3 { grid-row: 3; }
	.grid .row-md-4 { grid-row: 4; }
	.grid .row-md-5 { grid-row: 5; }
	.grid .row-md-6 { grid-row: 6; }
	.grid .row-md-auto { grid-row: auto; }

	.show-md { display: block !important; }

	.text-left-md { text-align: left; }
	.text-center-md { text-align: center; }
	.text-right-md { text-align: right; }
	.text-justify-md { text-align: justify; }
}


/*	###########################################################
	LARGE >= 1280px
	########################################################### */

@media (min-width: 1280px) {
	.grid .col-lg-1  { grid-column-end: span 1; }
	.grid .col-lg-2  { grid-column-end: span 2; }
	.grid .col-lg-3  { grid-column-end: span 3; }
	.grid .col-lg-4  { grid-column-end: span 4; }
	.grid .col-lg-5  { grid-column-end: span 5; }
	.grid .col-lg-6  { grid-column-end: span 6; }
	.grid .col-lg-7  { grid-column-end: span 7; }
	.grid .col-lg-8  { grid-column-end: span 8; }
	.grid .col-lg-9  { grid-column-end: span 9; }
	.grid .col-lg-10 { grid-column-end: span 10; }
	.grid .col-lg-11 { grid-column-end: span 11; }
	.grid .col-lg-12 { grid-column-end: span 12; }
	.grid .col-lg-auto { grid-column: auto; }

	.grid .offset-lg-0  { grid-column-start: auto; }
	.grid .offset-lg-1  { grid-column-start: 2; }
	.grid .offset-lg-2  { grid-column-start: 3; }
	.grid .offset-lg-3  { grid-column-start: 4; }
	.grid .offset-lg-4  { grid-column-start: 5; }
	.grid .offset-lg-5  { grid-column-start: 6; }
	.grid .offset-lg-6  { grid-column-start: 7; }
	.grid .offset-lg-7  { grid-column-start: 8; }
	.grid .offset-lg-8  { grid-column-start: 9; }
	.grid .offset-lg-9  { grid-column-start: 10; }
	.grid .offset-lg-10 { grid-column-start: 11; }
	.grid .offset-lg-11 { grid-column-start: 12; }

	.grid .order-lg-0  { order: 0; }
	.grid .order-lg-1  { order: 1; }
	.grid .order-lg-2  { order: 2; }
	.grid .order-lg-3  { order: 3; }
	.grid .order-lg-4  { order: 4; }
	.grid .order-lg-5  { order: 5; }
	.grid .order-lg-6  { order: 6; }
	.grid .order-lg-7  { order: 7; }
	.grid .order-lg-8  { order: 8; }
	.grid .order-lg-9  { order: 9; }
	.grid .order-lg-10 { order: 10; }
	.grid .order-lg-11 { order: 11; }
	.grid .order-lg-12 { order: 12; }

	.grid .row-lg-1 { grid-row: 1; }
	.grid .row-lg-2 { grid-row: 2; }
	.grid .row-lg-3 { grid-row: 3; }
	.grid .row-lg-4 { grid-row: 4; }
	.grid .row-lg-5 { grid-row: 5; }
	.grid .row-lg-6 { grid-row: 6; }
	.grid .row-lg-auto { grid-row: auto; }

	.text-left-lg { text-align: left; }
	.text-center-lg { text-align: center; }
	.text-right-lg { text-align: right; }
	.text-justify-lg { text-align: justify; }
}


/*	###########################################################
	XL >= 1600px
	########################################################### */

@media (min-width: 1600px) {
	.grid .col-xl-1  { grid-column-end: span 1; }
	.grid .col-xl-2  { grid-column-end: span 2; }
	.grid .col-xl-3  { grid-column-end: span 3; }
	.grid .col-xl-4  { grid-column-end: span 4; }
	.grid .col-xl-5  { grid-column-end: span 5; }
	.grid .col-xl-6  { grid-column-end: span 6; }
	.grid .col-xl-7  { grid-column-end: span 7; }
	.grid .col-xl-8  { grid-column-end: span 8; }
	.grid .col-xl-9  { grid-column-end: span 9; }
	.grid .col-xl-10 { grid-column-end: span 10; }
	.grid .col-xl-11 { grid-column-end: span 11; }
	.grid .col-xl-12 { grid-column-end: span 12; }
	.grid .col-xl-auto { grid-column: auto; }

	.grid .offset-xl-0  { grid-column-start: auto; }
	.grid .offset-xl-1  { grid-column-start: 2; }
	.grid .offset-xl-2  { grid-column-start: 3; }
	.grid .offset-xl-3  { grid-column-start: 4; }
	.grid .offset-xl-4  { grid-column-start: 5; }
	.grid .offset-xl-5  { grid-column-start: 6; }
	.grid .offset-xl-6  { grid-column-start: 7; }
	.grid .offset-xl-7  { grid-column-start: 8; }
	.grid .offset-xl-8  { grid-column-start: 9; }
	.grid .offset-xl-9  { grid-column-start: 10; }
	.grid .offset-xl-10 { grid-column-start: 11; }
	.grid .offset-xl-11 { grid-column-start: 12; }

	.grid .order-xl-0  { order: 0; }
	.grid .order-xl-1  { order: 1; }
	.grid .order-xl-2  { order: 2; }
	.grid .order-xl-3  { order: 3; }
	.grid .order-xl-4  { order: 4; }
	.grid .order-xl-5  { order: 5; }
	.grid .order-xl-6  { order: 6; }
	.grid .order-xl-7  { order: 7; }
	.grid .order-xl-8  { order: 8; }
	.grid .order-xl-9  { order: 9; }
	.grid .order-xl-10 { order: 10; }
	.grid .order-xl-11 { order: 11; }
	.grid .order-xl-12 { order: 12; }

	.grid .row-xl-1 { grid-row: 1; }
	.grid .row-xl-2 { grid-row: 2; }
	.grid .row-xl-3 { grid-row: 3; }
	.grid .row-xl-4 { grid-row: 4; }
	.grid .row-xl-5 { grid-row: 5; }
	.grid .row-xl-6 { grid-row: 6; }
	.grid .row-xl-auto { grid-row: auto; }

	.text-left-xl { text-align: left; }
	.text-center-xl { text-align: center; }
	.text-right-xl { text-align: right; }
	.text-justify-xl { text-align: justify; }
}


/*	###########################################################
	FULL >= 1920px
	########################################################### */

@media (min-width: 1920px) {
	.grid .col-full-1  { grid-column-end: span 1; }
	.grid .col-full-2  { grid-column-end: span 2; }
	.grid .col-full-3  { grid-column-end: span 3; }
	.grid .col-full-4  { grid-column-end: span 4; }
	.grid .col-full-5  { grid-column-end: span 5; }
	.grid .col-full-6  { grid-column-end: span 6; }
	.grid .col-full-7  { grid-column-end: span 7; }
	.grid .col-full-8  { grid-column-end: span 8; }
	.grid .col-full-9  { grid-column-end: span 9; }
	.grid .col-full-10 { grid-column-end: span 10; }
	.grid .col-full-11 { grid-column-end: span 11; }
	.grid .col-full-12 { grid-column-end: span 12; }
	.grid .col-full-auto { grid-column: auto; }

	.grid .offset-full-0  { grid-column-start: auto; }
	.grid .offset-full-1  { grid-column-start: 2; }
	.grid .offset-full-2  { grid-column-start: 3; }
	.grid .offset-full-3  { grid-column-start: 4; }
	.grid .offset-full-4  { grid-column-start: 5; }
	.grid .offset-full-5  { grid-column-start: 6; }
	.grid .offset-full-6  { grid-column-start: 7; }
	.grid .offset-full-7  { grid-column-start: 8; }
	.grid .offset-full-8  { grid-column-start: 9; }
	.grid .offset-full-9  { grid-column-start: 10; }
	.grid .offset-full-10 { grid-column-start: 11; }
	.grid .offset-full-11 { grid-column-start: 12; }

	.grid .order-full-0  { order: 0; }
	.grid .order-full-1  { order: 1; }
	.grid .order-full-2  { order: 2; }
	.grid .order-full-3  { order: 3; }
	.grid .order-full-4  { order: 4; }
	.grid .order-full-5  { order: 5; }
	.grid .order-full-6  { order: 6; }
	.grid .order-full-7  { order: 7; }
	.grid .order-full-8  { order: 8; }
	.grid .order-full-9  { order: 9; }
	.grid .order-full-10 { order: 10; }
	.grid .order-full-11 { order: 11; }
	.grid .order-full-12 { order: 12; }

	.grid .row-full-1 { grid-row: 1; }
	.grid .row-full-2 { grid-row: 2; }
	.grid .row-full-3 { grid-row: 3; }
	.grid .row-full-4 { grid-row: 4; }
	.grid .row-full-5 { grid-row: 5; }
	.grid .row-full-6 { grid-row: 6; }

	.text-left-full { text-align: left; }
	.text-center-full { text-align: center; }
	.text-right-full { text-align: right; }
	.text-justify-full { text-align: justify; }
}