#search {
	border: 1px solid #d4d4d4;
	background: #f2f2f2;
	padding: 15px;

	.search {
		position: relative;

		label {
			margin-bottom: 10px;
			font-family: 'Helvetica Neue LT Bold', sans-serif;
			font-size: 16px;
		}

		&:after {
			content: '\e817';
			font-family: 'ROBUR Iconfont';
			position: absolute;
			right: 0;
			bottom: 0;
			width: 60px;
			height: 40px;
			background: #2f377f;
			padding: 7px 21px;
			font-size: 18px;
			color: #fff;
		}
	}

	.filter {
		display: flex;
		flex-direction: column;
		gap: 8px;

		@media (min-width: 769px) {
			flex-direction: row;
			justify-content: space-between;
			gap: 20px;
		}

		.radios {
			display: flex;
			flex-direction: column;
			gap: 8px;

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

		.radio {
			display: flex;
			align-items: center;
			gap: 10px;

			input[type='radio'] {
				width: 20px;
				height: 20px;
				cursor: pointer;

				&:checked {
					accent-color: #2f377f;
				}
			}

			label {
				font-size: 14px;
				cursor: pointer;
			}
		}

		#remove-filter {
			appearance: none;
			border: none;
			text-align: right;
			text-decoration: underline;
			font-size: 14px;
			color: #2f377f;
		}
	}
}

.search-results {
	margin-top: 20px;

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

	p {
		font-size: 16px;

		&.search-error {
			color: #f00;
		}
	}
}

#search-results {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

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

	&.loading {
		padding-top: 40px;

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

		&:before {
			content: '\e804';
			font-family: 'ROBUR Iconfont';
			position: absolute;
			top: 20px;
			left: calc(50% - 12px);
			font-size: 24px;
			animation: rotateIcon 4s linear infinite;
		}
	}

	.search-result {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
		cursor: pointer;

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

		&:hover {
			background: #f2f2f2;
		}

		.image-container {
			position: relative;
			width: 100%;

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

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

			.image {
				position: relative;
				padding-bottom: 66.67%;
			}

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

		.content {
			width: 100%;
			padding: 15px;

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

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

			h3 {
				margin-bottom: 10px;
			}

			.breadcrumb {
				font-family: 'Helvetica Neue LT Bold', sans-serif;

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

			.excerpt {
				margin-top: 20px;
			}
		}

		&.faq-item {
			&::details-content {
				width: 100%;
			}
		}
	}
}

.suche,
.search {
	details.faq-item {
		summary {
			.question {
				@media (min-width: 769px) {
					width: 50%;
				}
				@media (min-width: 1025px) {
					width: 66.67%;
				}
			}
		}
		.answer {
			display: flex;
			justify-content: flex-end;

			div {
				@media (min-width: 769px) {
					width: 50%;
				}
				@media (min-width: 1025px) {
					width: 66.67%;
				}
			}
		}
	}
}