.test--style,
.sj--style {
	line-height: 1.6;
	margin: 0 auto;
	max-width: 1100px;
}

.test--style div,
.sj--style div {
	margin: 20px;
}

.test--style h2,
.sj--style h2 {
	text-transform: uppercase;
	font-size: 2.2em;
}

.test--style img,
.sj--style img {
	border-radius: 7px;
	box-shadow: 3px 3px 10px gray;
	text-align: center;
	align-self: center;
	margin-top: 20px;
	max-width: 100%;
}

.test--style .row,
.sj--style .row {
	--bs-gutter-x: 40px;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
}

.test--style .container-vertical,
.sj--style .container-vertical,
.test--style .container-horizontal,
.sj--style .container-horizontal,
.test--style .container-horizontal-reverse,
.sj--style .container-horizontal-reverse {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0px;
}

.test--style .container-horizontal,
.sj--style .container-horizontal,
.test--style .container-horizontal-reverse,
.sj--style .container-horizontal-reverse {
	border: 1px solid #eee;
	border-radius: 7px;
	margin-bottom: 40px;
	box-shadow: 3px 3px 10px gray;
}

.test--style .container-horizontal .bild,
.sj--style .container-horizontal .bild,
.test--style .container-horizontal-reverse .bild,
.sj--style .container-horizontal-reverse .bild,
.test--style .container-horizontal .text,
.sj--style .container-horizontal .text,
.test--style .container-horizontal-reverse .text,
.sj--style .container-horizontal-reverse .text {
	flex: 1 0 0px;
	min-width: 300px;
}

.test--style .container-horizontal .bild,
.sj--style .container-horizontal .bild,
.test--style .container-horizontal-reverse .bild,
.sj--style .container-horizontal-reverse .bild {
	text-align: center;
	padding: 15px;
}

.test--style .container-horizontal .bild img,
.sj--style .container-horizontal .bild img,
.test--style .container-horizontal-reverse .bild img,
.sj--style .container-horizontal-reverse .bild img {
	width: 100%;
	max-width: 400px;
	height: auto;
}

.test--style .container-horizontal .text,
.sj--style .container-horizontal .text,
.test--style .container-horizontal-reverse .text,
.sj--style .container-horizontal-reverse .text {
	padding: 30px;
}

.test--style .container-horizontal .text h4,
.sj--style .container-horizontal .text h4,
.test--style .container-horizontal-reverse .text h4,
.sj--style .container-horizontal-reverse .text h4 {
	font-size: 1.4em;
	color: #333;
	margin-bottom: 15px;
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 3px solid;
	padding-bottom: 5px;
}

.test--style .container-horizontal .text p,
.sj--style .container-horizontal .text p,
.test--style .container-horizontal-reverse .text p,
.sj--style .container-horizontal-reverse .text p {
	font-size: 1.1em;
}

.test--style .container-vertical,
.sj--style .container-vertical {
	flex-direction: column;
	align-self: flex-start;
}

.test--style .container-horizontal,
.sj--style .container-horizontal {
	flex-direction: row;
}

.test--style .container-horizontal-reverse,
.sj--style .container-horizontal-reverse {
	flex-direction: row-reverse;
}

.test--style .container-horizontal>.description,
.sj--style .container-horizontal>.description,
.test--style .container-horizontal-reverse>.description,
.sj--style .container-horizontal-reverse>.description {
	width: 50%;
}

.test--style .title-box,
.sj--style .title-box,
.test--style .highlights-box,
.sj--style .highlights-box {
	margin-bottom: 40px;
	border-radius: 7px;
	box-shadow: 3px 3px 10px gray;
}

.test--style .title-box,
.sj--style .title-box {
	text-align: center;
	padding: 50px 20px;
}

.test--style .banner,
.sj--style .banner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.test--style .banner img,
.sj--style .banner img {
	width: 100%;
	max-width: 900px;
	height: auto;
}

.test--style .kurzbeschreibung,
.sj--style .kurzbeschreibung {
	max-width: 850px;
	margin: 0 auto 60px;
	text-align: center;
	border-left: 4px solid;
	padding: 0 25px;
	font-size: 1.3em;
}

.test--style .highlights-box h4,
.sj--style .highlights-box h4 {
	text-align: center;
	font-size: 1.8em;
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 30px;
	padding-top: 40px;
}

.test--style .highlights-box .highlights,
.sj--style .highlights-box .highlights {
	--bs-gutter-x: 40px;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
}

.test--style .highlights-box .highlight,
.sj--style .highlights-box .highlight {
	width: 33.33333333%;
	flex: 1 0 250px;
}

.test--style .highlights-box .highlight h5,
.sj--style .highlights-box .highlight h5 {
	font-size: 1.2em;
	text-transform: uppercase;
	margin-bottom: 10px;
	border-left: 3px solid;
	padding-left: 7px;
}

.test--style .highlights-box .highlight ul,
.sj--style .highlights-box .highlight ul {
	display: inline-block;
	list-style: inside;
	padding: 0;
	line-height: 1.8;
	text-align: left;
}

.test--style .fragen-box,
.sj--style .fragen-box {
	margin-top: 60px;
}

.test--style .fragen-box h3,
.sj--style .fragen-box h3 {
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
	text-transform: uppercase;
	margin-bottom: 60px;
}

.test--style .fragen-box details,
.sj--style .fragen-box details {
	padding: 15px;
	border-bottom: 1px solid #eee;
}

.test--style .fragen-box details summary,
.sj--style .fragen-box details summary {
	font-weight: 700;
	font-size: 1.1em;
	color: #333;
}

.test--style .fragen-box details p,
.sj--style .fragen-box details p {
	padding-top: 10px;
	color: #666;
}

.test--style .fragen-box summary,
.sj--style .fragen-box summary {
	font-weight: 700;
	font-size: 1.1em;
}

.test--style .call-to-action-box,
.sj--style .call-to-action-box {
	text-align: center;
	padding: 60px 20px;
	margin-top: 40px;
	border: 1px solid #eee;
	border-radius: 7px;
}

.test--style .call-to-action-box h3,
.sj--style .call-to-action-box h3 {
	font-size: 2.2em;
	color: #000;
	margin-bottom: 15px;
	font-weight: 800;
}

.test--style .call-to-action-box a,
.sj--style .call-to-action-box a {
	padding: 20px 55px;
	text-decoration: none;
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 7px;
}

.test--style .call-to-action-box .untertitel,
.sj--style .call-to-action-box .untertitel {
	font-size: 1.3em;
	color: #555;
	margin-bottom: 35px;
}

.test--style .call-to-action-box .gtin,
.sj--style .call-to-action-box .gtin {
	margin-top: 30px;
	color: #999;
	font-size: 0.9em;
	letter-spacing: 1px;
}

.test--style .container-horizontal,
.sj--style .container-horizontal,
.test--style .container-horizontal-reverse,
.sj--style .container-horizontal-reverse {
	background-color: #f8f9fa;
}

.test--style .container-horizontal .text h4,
.sj--style .container-horizontal .text h4,
.test--style .container-horizontal-reverse .text h4,
.sj--style .container-horizontal-reverse .text h4 {
	border-color: #f00;
}

.test--style .title-box,
.sj--style .title-box,
.test--style .highlights-box,
.sj--style .highlights-box {
	background: #333;
	color: #fff;
}

.test--style .title-box h2,
.sj--style .title-box h2 {
	color: #fff;
}

.test--style .title-box h3,
.sj--style .title-box h3 {
	color: #f00;
}

.test--style .kurzbeschreibung,
.sj--style .kurzbeschreibung {
	border-color: #f00;
}

.test--style .highlights-box h4,
.sj--style .highlights-box h4 {
	color: #fff;
}

.test--style .highlights-box .highlight h5,
.sj--style .highlights-box .highlight h5 {
	color: #f00;
	border-color: #f00;
}

.test--style .call-to-action-box,
.sj--style .call-to-action-box {
	background-color: #f8f9fa;
}

.test--style .call-to-action-box a,
.sj--style .call-to-action-box a {
	background-color: #f00;
	color: #fff;
}

.test--style.blau .container-horizontal,
.sj--style.blau .container-horizontal,
.test--style.blau .container-horizontal-reverse,
.sj--style.blau .container-horizontal-reverse {
	background-color: #f4feff;
}

.test--style.blau .container-horizontal .text h4,
.sj--style.blau .container-horizontal .text h4,
.test--style.blau .container-horizontal-reverse .text h4,
.sj--style.blau .container-horizontal-reverse .text h4 {
	border-color: #03045e;
}

.test--style.blau .title-box,
.sj--style.blau .title-box,
.test--style.blau .highlights-box,
.sj--style.blau .highlights-box {
	background: #03045e;
	color: #fff;
}

.test--style.blau .title-box h2,
.sj--style.blau .title-box h2 {
	color: #fff;
}

.test--style.blau .title-box h3,
.sj--style.blau .title-box h3 {
	color: #fff;
}

.test--style.blau .kurzbeschreibung,
.sj--style.blau .kurzbeschreibung {
	border-color: #03045e;
}

.test--style.blau .highlights-box h4,
.sj--style.blau .highlights-box h4 {
	color: #fff;
}

.test--style.blau .highlights-box .highlight h5,
.sj--style.blau .highlights-box .highlight h5 {
	color: #fff;
	border-color: #fff;
}

.test--style.blau .call-to-action-box,
.sj--style.blau .call-to-action-box {
	background-color: #f4feff;
}

.test--style.blau .call-to-action-box a,
.sj--style.blau .call-to-action-box a {
	background-color: #03045e;
	color: #fff;
}

.test--style.grün .container-horizontal,
.sj--style.grün .container-horizontal,
.test--style.grün .container-horizontal-reverse,
.sj--style.grün .container-horizontal-reverse {
	background-color: #f1fffe;
}

.test--style.grün .container-horizontal .text h4,
.sj--style.grün .container-horizontal .text h4,
.test--style.grün .container-horizontal-reverse .text h4,
.sj--style.grün .container-horizontal-reverse .text h4 {
	border-color: #3b413c;
}

.test--style.grün .title-box,
.sj--style.grün .title-box,
.test--style.grün .highlights-box,
.sj--style.grün .highlights-box {
	background: #2d6a4f;
	color: #fff;
}

.test--style.grün .title-box h2,
.sj--style.grün .title-box h2 {
	color: #fff;
}

.test--style.grün .title-box h3,
.sj--style.grün .title-box h3 {
	color: #fff;
}

.test--style.grün .kurzbeschreibung,
.sj--style.grün .kurzbeschreibung {
	border-color: #3b413c;
}

.test--style.grün .highlights-box h4,
.sj--style.grün .highlights-box h4 {
	color: #fff;
}

.test--style.grün .highlights-box .highlight h5,
.sj--style.grün .highlights-box .highlight h5 {
	color: #fff;
	border-color: #fff;
}

.test--style.grün .call-to-action-box,
.sj--style.grün .call-to-action-box {
	background-color: #f1fffe;
}

.test--style.grün .call-to-action-box a,
.sj--style.grün .call-to-action-box a {
	background-color: #3b413c;
	color: #fff;
}

.test--style.pink .container-horizontal,
.sj--style.pink .container-horizontal,
.test--style.pink .container-horizontal-reverse,
.sj--style.pink .container-horizontal-reverse {
	background-color: #f8f9fa;
}

.test--style.pink .container-horizontal .text h4,
.sj--style.pink .container-horizontal .text h4,
.test--style.pink .container-horizontal-reverse .text h4,
.sj--style.pink .container-horizontal-reverse .text h4 {
	border-color: #a4133c;
}

.test--style.pink .title-box,
.sj--style.pink .title-box,
.test--style.pink .highlights-box,
.sj--style.pink .highlights-box {
	background: #a4133c;
	color: #fff;
}

.test--style.pink .title-box h2,
.sj--style.pink .title-box h2 {
	color: #fff;
}

.test--style.pink .title-box h3,
.sj--style.pink .title-box h3 {
	color: #fff;
}

.test--style.pink .kurzbeschreibung,
.sj--style.pink .kurzbeschreibung {
	border-color: #a4133c;
}

.test--style.pink .highlights-box h4,
.sj--style.pink .highlights-box h4 {
	color: #fff;
}

.test--style.pink .highlights-box .highlight h5,
.sj--style.pink .highlights-box .highlight h5 {
	color: #fff;
	border-color: #fff;
}

.test--style.pink .call-to-action-box,
.sj--style.pink .call-to-action-box {
	background-color: #f8f9fa;
}

.test--style.pink .call-to-action-box a,
.sj--style.pink .call-to-action-box a {
	background-color: #a4133c;
	color: #fff;
}

.test--style.gelb .container-horizontal,
.sj--style.gelb .container-horizontal,
.test--style.gelb .container-horizontal-reverse,
.sj--style.gelb .container-horizontal-reverse {
	background-color: #fcfaf3;
}

.test--style.gelb .container-horizontal .text h4,
.sj--style.gelb .container-horizontal .text h4,
.test--style.gelb .container-horizontal-reverse .text h4,
.sj--style.gelb .container-horizontal-reverse .text h4 {
	border-color: #ffd400;
}

.test--style.gelb .title-box,
.sj--style.gelb .title-box,
.test--style.gelb .highlights-box,
.sj--style.gelb .highlights-box {
	background: #ffd400;
	color: #000;
}

.test--style.gelb .title-box h2,
.sj--style.gelb .title-box h2 {
	color: #000;
}

.test--style.gelb .title-box h3,
.sj--style.gelb .title-box h3 {
	color: #000;
}

.test--style.gelb .kurzbeschreibung,
.sj--style.gelb .kurzbeschreibung {
	border-color: #ffd400;
}

.test--style.gelb .highlights-box h4,
.sj--style.gelb .highlights-box h4 {
	color: #000;
}

.test--style.gelb .highlights-box .highlight h5,
.sj--style.gelb .highlights-box .highlight h5 {
	color: #000;
	border-color: #000;
}

.test--style.gelb .call-to-action-box,
.sj--style.gelb .call-to-action-box {
	background-color: #fcfaf3;
}

.test--style.gelb .call-to-action-box a,
.sj--style.gelb .call-to-action-box a {
	background-color: #ffd400;
	color: #000;
}

@media (max-width: 992px) {

	.test--style .highlights-box .highlight,
	.sj--style .highlights-box .highlight {
		width: 50%;
	}
}

@media (max-width: 768px) {

	.test--style .kurzbeschreibung,
	.sj--style .kurzbeschreibung {
		margin: 0 50px 60px;
		font-size: 1.2em;
	}

	.test--style .container-horizontal,
	.sj--style .container-horizontal {
		flex-direction: column;
	}

	.test--style .container-horizontal-reverse,
	.sj--style .container-horizontal-reverse {
		flex-direction: column;
	}

	.test--style .container-horizontal .bild,
	.sj--style .container-horizontal .bild,
	.test--style .container-horizontal-reverse .bild,
	.sj--style .container-horizontal-reverse .bild,
	.test--style .container-horizontal .description,
	.sj--style .container-horizontal .description,
	.test--style .container-horizontal-reverse .description,
	.sj--style .container-horizontal-reverse .description,
	.test--style .container-horizontal .text,
	.sj--style .container-horizontal .text,
	.test--style .container-horizontal-reverse .text,
	.sj--style .container-horizontal-reverse .text {
		width: 100%;
	}

	.test--style .container-horizontal .bild,
	.sj--style .container-horizontal .bild,
	.test--style .container-horizontal-reverse .bild,
	.sj--style .container-horizontal-reverse .bild {
		display: flex;
		justify-content: center;
	}

	.test--style .fragen-box details summary,
	.sj--style .fragen-box details summary {
		font-size: 1em;
	}

	.test--style .call-to-action-box h3,
	.sj--style .call-to-action-box h3 {
		font-size: 1.8em;
	}

	.test--style .call-to-action-box .untertitel,
	.sj--style .call-to-action-box .untertitel {
		font-size: 1.2em;
	}

	.test--style .call-to-action-box a,
	.sj--style .call-to-action-box a {
		padding: 20px 10px;
		font-size: 1.2em;
	}
}

@media (max-width: 576px) {

	.test--style .kurzbeschreibung,
	.sj--style .kurzbeschreibung {
		margin: 0 30px 60px;
		font-size: 1em;
	}

	.test--style .call-to-action-box a,
	.sj--style .call-to-action-box a {
		font-size: 1em;
	}

	.test--style .container-horizontal .bild,
	.sj--style .container-horizontal .bild,
	.test--style .container-horizontal-reverse .bild,
	.sj--style .container-horizontal-reverse .bild,
	.test--style .container-horizontal .description,
	.sj--style .container-horizontal .description,
	.test--style .container-horizontal-reverse .description,
	.sj--style .container-horizontal-reverse .description,
	.test--style .container-horizontal .text,
	.sj--style .container-horizontal .text,
	.test--style .container-horizontal-reverse .text,
	.sj--style .container-horizontal-reverse .text {
		width: 100%;
		max-width: 300px;
	}

	.test--style .highlights-box .highlight,
	.sj--style .highlights-box .highlight {
		width: 100%;
		flex: 1 0 0px;
	}
}