/* Grid-System (float-basiert, wie im Original-Theme) */

.container {
	float: left;
	width: 100%;
	clear: both;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}

.container.space-top {
	padding-top: 100px;
}

.container.space-bottom {
	padding-bottom: 100px;
}

.col {
	float: left;
	position: relative;
}

.col-33 {
	width: 33.3%;
}

.col-100 {
	width: 100%;
}

/* Mosaic-Kacheln (Startseite): fasst die frueheren pro-Element-Ketten aus
   col-lg-, col-sd-, col-md-, col-xs- und right zu je einer Klasse pro Kachel zusammen.
   Breakpoint-Ueberschreibungen dazu stehen in responsive.css. */

.mosaic-text,
.mosaic-text-right,
.mosaic-photo-a,
.mosaic-photo-b,
.mosaic-photo-c,
.mosaic-photo-d {
	float: left;
	position: relative;
}

.mosaic-photo-e,
.mosaic-photo-f {
	float: right;
	position: relative;
}

.mosaic-text,
.mosaic-text-right,
.mosaic-photo-a,
.mosaic-photo-d {
	width: 20%;
}

.mosaic-photo-b,
.mosaic-photo-c,
.mosaic-photo-e,
.mosaic-photo-f {
	width: 40%;
}

/* Farb- & Text-Helferklassen */

.tx-black {
	color: var(--color-dark);
}

.bg-grey-dark {
	background: var(--color-dark);
	color: var(--color-text-muted);
}

.bg-grey-dark a {
	color: var(--color-text-muted);
}

.bg-blue {
	background: var(--color-primary);
}

.bg-blue a:hover {
	color: var(--color-primary-dark);
}

.tx-blue {
	color: var(--color-primary);
}

.bg-white {
	background: var(--color-white);
}

.tx-white {
	color: var(--color-white);
}

.tx-center {
	text-align: center;
}

.tx-small {
	font-size: 0.875rem;
	line-height: 1.125rem;
	letter-spacing: 0.05em;
}

.tx-large {
	font-size: 1.125rem;
	line-height: 1.5rem;
}

.list-alpha {
	list-style-type: lower-alpha;
}