*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	margin: 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.4em;
}

h1,
h2 {
	line-height: normal;
}

a {
	color: inherit;
	display: inline-block;
	text-decoration: none;
}

p {
	margin: 0;
}

.default-padding {
	padding: 14px 34px;
}

.default-padding-halfed {
	padding: 7px 17px;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-50 {
	flex-basis: 50%;
}

.advertisement {
	background-color: #ffffff;
	border: 3px solid #8d023c;
	max-width: 990px;
	margin: 0 auto;
	padding-top: 15px;
}

img {
	display: block;
}

.logo img {
	height: 26px;
}

.heading {
	padding: 15px 0 73px 34px;
	position: relative;
	color: white;
}

.heading>img.back {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	width: 100%;
}

.heading>img.front {
	position: absolute;
	top: 46px;
	right: 0;
	width: 83%;
}

.heading .spacer {
	clear: left;
	float: left;
}

.heading .textbox {
	position: absolute;
	right: 20px;
	text-align: right;
	top: 80px;
}

.textbox p {
	text-align: justify;
}

h1 {
	color: #8d023c;
	font-size: 2.375em;
	margin: 0;
}

.list-container {
	padding: 0 17px;
}

.list {
	padding: 14px 17px;
}

.list ul {
	list-style-type: none;
	padding: 0;
}

.list ul>li {
	background-image: url("pfeil.png");
	background-repeat: no-repeat;
	background-size: 15px auto;
	background-position: 0 5px;
	padding-left: 40px;
}

.grey-box {
	background-color: #e5e5e5;
	padding: 14px 17px;
}

.grey-box>b {
	padding: 0 17px;
}

.grey-box .benefits {
	justify-content: center;
}

.grey-box .benefits input[type="radio"] {
	display: none;
}

.grey-box .benefit label {
	cursor: pointer;
}

.grey-box .benefit img {
	height: 48px;
	margin: 0 auto;
}

.grey-box input[type="radio"]:checked+.benefit::after {
	content: "\25B2";
	color: #8d023c;
	display: block;
	font-size: 24px;
	height: 0;
	line-height: 24px;
	text-align: center;
}

.grey-box .benefit-info {
	width: 100%;
	display: block;
}

.grey-box .benefit-info p {
	background-color: #ffffff;
	border: 1px solid #8d023c;
	display: none;
	padding: 15px 20px;
	margin: 0 17px;
}


.grey-box .benefits input[type="radio"]#flexibility:checked~.benefit-info p.flexibility,
.grey-box .benefits input[type="radio"]#money:checked~.benefit-info p.money,
.grey-box .benefits input[type="radio"]#development:checked~.benefit-info p.development,
.grey-box .benefits input[type="radio"]#fitness:checked~.benefit-info p.fitness,
.grey-box .benefits input[type="radio"]#security:checked~.benefit-info p.security {
	display: block;
}

.grey-box .benefits input[type="radio"]:checked+.benefit strong {
	color: #8d023c;
}

.contact p {
	margin: 10px 0;
}

.contact a:hover {
	color: #8d023c;
}

.red-box {
	background-color: #8d023c;
	color: white;
	padding: 20px 34px;
	position: relative;
}

.red-box a {
	background-color: #e5e5e5;
	color: #8d023c;
	font-weight: bold;
	border-radius: 5px;
	padding: 10px 15px;
}

.red-box img {
	width: 130px;
	right: 34px;
	bottom: 20px;
	position: absolute;
}

.company-information {
	background-color: #e5e5e5;
	padding-bottom: 14px;
}

.company-information a,
.company-information .video {
	width: 100%;
}

.three-sixty-images img {
	width: 100%;
}

@media screen and (max-width: 990px) {
	body {
		margin: 0;
	}

	.advertisement {
		border: none;
	}
}

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}


	.default-padding {
		padding: 7px 17px;
	}

	.default-padding-halfed {
		padding: 3.5px 8.5px;
	}

	.heading {
		padding: 7px 0 66px 17px;
	}

	.heading h2 {
		margin-top: 25%;
	}

	.heading p {
		display: none;
	}

	.list-container {
		display: block;
		padding: 0 8.5px;
	}

	.list {
		padding: 7px 8.5px;
	}

	.list ul>li {
		padding-left: 20px;
	}

	.grey-box {
		padding: 7px 8.5px;
	}

	.grey-box b {
		padding: 0 8.5px;
	}

	.grey-box input[type="radio"]:checked+.benefit::after {
		display: none;
	}

	.grey-box .benefit-info p {
		margin: 0 8.5px;
	}

	.red-box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.red-box img {
		position: static;
	}

	.three-sixty-images {
		display: block;
	}
}

@media screen and (max-width: 500px) {
	.heading h2 {
		font-size: 14px;
	}
}