.spiess-ui-boxgrid {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	grid-gap: 30px;
	margin-top: 30px;
}

	@media screen and (max-width: 1024px) {
		.spiess-ui-boxgrid {
			grid-template-columns: minmax(0,1fr);

		}
	}

.spiess-ui-boxgrid > * {
	color: #FFFFFF;
}

.spiess-ui-boxgrid--item {
	background-color: #333333;
}

.spiess-ui-boxgrid--title {
	position: relative;
	padding: 30px 80px 30px 30px;

	cursor: pointer;
}

.spiess-ui-boxgrid--title:before {
	content: '';
	display: block;
	position: absolute;
	top: 30px;
	right: 20px;
	height: 35px;
	width: 35px;
	background-image: url("/project/spiess/ui/boxgrid/pub/img/arrow-right.svg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 0.5s ease 0s;
	opacity: 0.5;
}

.spiess-ui-boxgrid--item.is-open .spiess-ui-boxgrid--title:before {
	rotate: 90deg;
}

/* Offen-Status
----------------*/

	.spiess-ui-boxgrid--item:hover {
		background-color: #f35022;
	}

	.spiess-ui-boxgrid > div h2 {
		color: #FFFFFF;
		font-size: 30px;
		font-family: "Montserrat", sans-serif;
		margin-top: 0;
	}

/* Inhalt
----------*/

	.spiess-ui-boxgrid--content {
		display: none;
		padding: 0 30px 30px 30px;
	}

/* Buttons
------------*/

	.spiess-ui-boxgrid--item .spiess-ui-btn {
		background-color: #FFFFFF !important;
		color: #333333 !important;
		padding: 5px 30px;
		margin-top: 10px;
	}

	.spiess-ui-boxgrid--item .spiess-ui-btn:hover {
		opacity: 1 !important;
		color: #f35022 !important;
	}