.custom-fields {
	.banner {
		display: flex;
		min-height: 200px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 15px;

		@media (min-width: 769px) {
			min-height: 350px;
			padding: 0 20px;
		}

		@media (min-width: 1025px) {
			min-height: 400px;
		}

		@media (min-width: 1441px) {
			min-height: 500px;
		}

		.container {
			flex-grow: 1;
		}

		h1 {
			margin: 0;
			padding: 0 10px;
			color: #b1b2b3;

			@media (min-width: 769px) {
				padding: 0 15px;
			}

			span {
				box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
				-webkit-box-decoration-break: clone;
				box-decoration-break: clone;
				background: #fff;

				@media (min-width: 769px) {
					box-shadow: 15px 0 0 #fff, -15px 0 0 #fff;
					padding-top: 5px;
					padding-bottom: 5px;
				}
			}
		}
	}

	.swiper-button-wrapper {
		position: relative;
		--swiper-navigation-size: 30px;

		@media (min-width: 1025px) {
			--swiper-navigation-size: 40px;
		}

		.swiper-button-next,
		.swiper-button-prev {
			top: auto;
			bottom: 0;
			margin-top: 0;

			@media (min-width: 1025px) {
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.swiper-button-prev {
			left: 0;

			@media (min-width: 1025px) {
				left: -30px;
			}

			@media (min-width: 1441px) {
				left: -40px;
			}
		}

		.swiper-button-next {
			right: 0;

			@media (min-width: 1025px) {
				right: -30px;
			}

			@media (min-width: 1441px) {
				right: -40px;
			}
		}
	}

	.swiper:not(.single-slide) {
		padding-bottom: 40px;

		.swiper-pagination {
			bottom: 0;
		}

		.swiper-pagination-bullet-active {
			background: #0078bb;
		}
	}

	.ratio {
		position: relative;
		padding-bottom: 66.67%;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.gallery-wrapper {
		@media (min-width: 769px) {
			width: 33.33%;
		}

		.swiper-slide {
			position: relative;
			height: 0;
			padding-bottom: 66.67%;
		}

		a {
			position: absolute;
			width: 100%;
			height: 100%;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.columns,
	.rows {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;

		@media (min-width: 1025px) {
			gap: 30px;
		}
	}

	.columns {
		.bereich {
			width: 100%;
			border: 1px solid #d4d4d4;

			@media (min-width: 769px) {
				width: calc(50% - 10px);
			}

			@media (min-width: 1025px) {
				width: calc(50% - 15px);
			}

			h3 {
				margin: 0;
				background: #2f377f;
				padding: 12px 15px;
				color: #fff;

				@media (min-width: 1025px) {
					padding: 15px 20px;
				}
			}

			.text {
				padding: 20px 15px;

				@media (min-width: 1025px) {
					padding: 30px 20px;
				}
			}
		}
	}

	.rows {
		.service,
		.bereich,
		.engineering {
			display: flex;
			flex-direction: column;
			width: 100%;

			@media (min-width: 769px) {
				flex-direction: row;
			}

			.image {
				@media (min-width: 769px) {
					width: 33.33%;
				}
			}

			.content {
				padding: 30px 0 20px;

				@media (min-width: 769px) {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 66.67%;
					padding: 0 0 20px 20px;
				}

				@media (min-width: 1025px) {
					padding: 0 0 30px 30px;
				}
			}

			.more {
				margin-top: 20px;

				button {
					appearance: none;
					border: none;
					background: none;
					padding: 0;
					color: #0078bb;

					&:hover,
					&:focus {
						text-decoration: underline;
					}
				}

				& > div {
					overflow: hidden;
					max-height: 500px;
					transition: max-height 0.2s ease-in-out;

					&.hide {
						max-height: 0;
					}
				}
			}
		}
	}

	.references {
		.swiper {
			@media (min-width: 1025px) {
				padding-bottom: 0;
			}

			.swiper-wrapper {
				align-items: stretch;
			}

			.swiper-slide {
				height: auto;
			}
		}

		.reference {
			display: flex;
			flex-direction: column-reverse;

			@media (min-width: 769px) {
				flex-direction: row;
			}

			.content {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				justify-content: space-between;
				gap: 20px;
				background: #2f377f;
				padding: 30px 15px 15px;
				color: #fff;

				@media (min-width: 1025px) {
					padding: 40px 20px 20px;
				}

				@media (min-width: 1441px) {
					padding: 40px 30px 30px;
				}

				p {
					@media (min-width: 1025px) {
						font-size: 16px;
					}
				}

				.btn {
					margin-right: auto;
					background: #fff;
					color: #2f377f;
				}
			}

			img {
				display: block;
				width: 100%;
				height: auto;

				@media (min-width: 769px) {
					max-width: 33.33%;
					object-fit: cover;
				}
			}
		}
	}

	.related-posts {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20px;

		@media (min-width: 769px) {
			flex-direction: row;
			flex-wrap: wrap;
		}

		@media (min-width: 1025px) {
			gap: 30px;
		}

		a {
			background: #2f377f;

			@media (min-width: 769px) {
				width: calc(50% - 10px);
			}

			@media (min-width: 1025px) {
				width: calc(33.33% - 20px);
			}

			h3 {
				margin: 0;
				padding: 12px 15px;
				color: #fff;
			}
		}
	}
}

.single-reference {
	h1 {
		padding: 0;
	}

	.content {
		.container {
			display: flex;
			flex-direction: column;
			gap: 20px;

			@media (min-width: 1025px) {
				flex-direction: row;
				gap: 30px;
			}
		}

		.description {
			@media (min-width: 1025px) {
				width: 66.67%;
			}
		}

		.timeframe {
			@media (min-width: 1025px) {
				width: 33.33%;
			}

			& > div {
				border: 1px solid #d4d4d4;
				background: #f2f2f2;
				padding: 15px;

				@media (min-width: 1025px) {
					padding: 30px;
				}
			}
		}
	}

	.gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		br {
			display: none;
		}

		.gallery-item {
			margin: 0 !important;
			width: auto !important;

			img {
				display: block;
				border: 1px solid #d4d4d4 !important;
				width: 120px;
				height: auto;
			}
		}

		.gallery-caption {
			display: none;
		}
	}
}

.custom-fields,
.suche,
.search {
	details.faq-item {
		&::details-content {
			width: 100%;
		}

		& + details.faq-item {
			margin-top: 10px;
		}

		summary {
			display: flex;
			position: relative;
			width: 100%;
			background: #f2f2f2;
			padding: 15px 0;
			list-style: none;
			font-family: 'Helvetica Neue LT Bold';
			color: #545453;
			cursor: pointer;
			transition: background 0.2s ease-in-out, color 0.2s ease-in-out;

			.banner {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -15px;
				margin-bottom: -15px;
				padding: 0 15px;
				background: #2f377f;
				color: #fff;

				@media (min-width: 769px) {
					width: 50%;
					padding: 0;
				}

				@media (min-width: 1025px) {
					width: 33.33%;
				}
			}

			.question {
				padding: 0 40px 0 15px;

				@media (min-width: 769px) {
					padding: 0 40px 0 20px;
				}

				@media (min-width: 1025px) {
					padding: 0 45px 0 30px;
				}
			}

			&:after {
				content: '\e80d';
				font-family: 'ROBUR Iconfont';
				position: absolute;
				top: 12px;
				right: 15px;
				font-size: 18px;
				transform: rotate(0deg);
				transition: transform 0.2s ease-in-out;

				@media (min-width: 1025px) {
					top: 13px;
					font-size: 20px;
				}
			}

			&:hover,
			&:focus {
				background: #0078bb;
				color: #fff;
			}
		}

		.answer {
			width: 100%;
			overflow: clip;
			transition: height 0.3s ease-in-out;

			& > div {
				padding: 20px 15px 30px;

				@media (min-width: 769px) {
					padding: 20px 20px 30px;
				}

				@media (min-width: 1025px) {
					padding: 20px 30px 30px;
				}
			}
		}

		&[open] summary {
			background: #2f377f;
			color: #fff;

			&:after {
				transform: rotate(90deg);
			}
		}
	}
}

/* Text Align Justify */
.custom-fields .intro p,
.custom-fields .columns .text p,
.custom-fields .rows .text p,
.custom-fields .rows .more p,
.references .content p,
.faq .answer p {
	@media (max-width: 768px) {
		text-align: justify;
	}
}