/* =========================
   FAQ
   ========================= */

.faq {
	width: 100%;

	padding-block:
		var(--content-block-padding-y, 4rem);

	box-sizing:
		border-box;
}


/* =========================
   ÜBERSCHRIFT
   ========================= */

.faq__headline {
	margin-top: 0;
	margin-bottom: 0.5rem;
}


.faq__subheadline {
	margin-bottom: 2rem;

	font-size: 1.1rem;
	line-height: 1.5;
}

/* =========================
   EINLEITUNGSTEXT
   ========================= */

.faq__intro {
	margin-bottom: 2rem;

	line-height: 1.6;
}


.faq__intro > :first-child {
	margin-top: 0;
}


.faq__intro > :last-child {
	margin-bottom: 0;
}


/* =========================
   FAQ LISTE
   ========================= */

.faq__items {
	display: flex;
	flex-direction: column;

	gap: 0;
}


.faq__headline + .faq__items {
	margin-top: 1.5rem;
}


/* =========================
   EINZELNER FAQ BLOCK
   ========================= */

.faq-item {
	overflow: hidden;

	background:
		#ffffff;

	border:
		1px solid
		rgba(0, 0, 0, 0.08);

	border-radius:
		var(--card-border-radius);

	box-shadow:
		0 4px 18px
		rgba(0, 0, 0, 0.04);

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


.faq-item:hover {
	border-color:
		var(--logo-color-1-light);

	box-shadow:
		0 6px 22px
		rgba(0, 0, 0, 0.07);
}


/* =========================
   FRAGE
   ========================= */

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 2rem;

	padding:
		1.25rem
		1.5rem;

	cursor: pointer;

	font-weight: 600;
	line-height: 1.4;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;

	list-style: none;
}


.faq-item__question::-webkit-details-marker {
	display: none;
}


.faq-item__question::marker {
	content: "";
}


.faq-item__question:hover {
	background:
		var(--logo-color-1-light);

	color:
		#ffffff;
}


.faq-item[open] .faq-item__question {
	background:
		var(--logo-color-1-light);

	color:
		#ffffff;
}


/* =========================
   PLUS / MINUS
   ========================= */

.faq-item__icon {
	position: relative;

	display: block;

	width: 1.25rem;
	height: 1.25rem;

	flex:
		0 0 1.25rem;

	color:
		var(--logo-color-1);
}


.faq-item__icon::before,
.faq-item__icon::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 100%;
	height: 2px;

	background:
		currentColor;

	border-radius:
		var(--border-radius-small);

	transform:
		translate(-50%, -50%);

	transition:
		transform 0.25s ease;
}


.faq-item__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}


.faq-item[open] .faq-item__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* =========================
   ANTWORT
   ========================= */

.faq-item__answer {
	padding:
		1.5rem;

	border-top:
		1px solid
		rgba(0, 0, 0, 0.06);

	line-height:
		1.65;
}


/* =========================
   TEXT
   ========================= */

.faq-item__text {
	min-width: 0;
}


.faq-item__text > :first-child {
	margin-top: 0;
}


.faq-item__text > :last-child {
	margin-bottom: 0;
}


/* =========================
   BILDER
   ========================= */

.faq-item__images {
	min-width: 0;
}


.faq-item__image-wrapper {
	min-width: 0;
}


.faq-item__image {
	display: block;

	width: 100%;
	height: auto;

	max-width: 100%;

	margin: 0 auto;

	border-radius:
		var(--image-border-radius);
}


/* =========================================================
   BILDER LINKS
   ========================================================= */

.faq-item__answer-inner--left {
	display: grid;

	grid-template-columns:
		minmax(250px, 34%)
		minmax(0, 1fr);

	align-items:
		center;

	gap:
		2.5rem;
}


.faq-item__answer-inner--left .faq-item__images {
	display: flex;
	flex-direction: column;

	justify-content: center;

	gap: 1rem;

	grid-column: 1;
	grid-row: 1;
}


.faq-item__answer-inner--left .faq-item__text {
	grid-column: 2;
	grid-row: 1;
}


/* =========================================================
   BILDER RECHTS
   ========================================================= */

.faq-item__answer-inner--right {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(250px, 34%);

	align-items:
		center;

	gap:
		2.5rem;
}


.faq-item__answer-inner--right .faq-item__text {
	grid-column: 1;
	grid-row: 1;
}


.faq-item__answer-inner--right .faq-item__images {
	display: flex;
	flex-direction: column;

	justify-content: center;

	gap: 1rem;

	grid-column: 2;
	grid-row: 1;
}


/* =========================================================
   BILDER OBEN
   ========================================================= */

.faq-item__answer-inner--above {
	display: flex;
	flex-direction: column;

	gap:
		1.75rem;
}


.faq-item__answer-inner--above .faq-item__images {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(220px, 1fr)
		);

	gap:
		1rem;

	width: 100%;
}


/* =========================================================
   BILDER UNTEN
   ========================================================= */

.faq-item__answer-inner--below {
	display: flex;
	flex-direction: column;

	gap:
		1.75rem;
}


.faq-item__answer-inner--below .faq-item__text {
	order: 1;
}


.faq-item__answer-inner--below .faq-item__images {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(220px, 1fr)
		);

	gap:
		1rem;

	width: 100%;

	order: 2;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

	.faq-item__answer-inner--left,
	.faq-item__answer-inner--right {
		grid-template-columns:
			minmax(220px, 38%)
			minmax(0, 1fr);

		gap:
			2rem;
	}


	.faq-item__answer-inner--right {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(220px, 38%);
	}


	.faq-item__answer-inner--above .faq-item__images,
	.faq-item__answer-inner--below .faq-item__images {
		grid-template-columns:
			repeat(
				auto-fit,
				minmax(180px, 1fr)
			);
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.faq-item__question {
		gap: 1rem;

		padding:
			1rem
			1.1rem;
	}


	.faq-item__answer {
		padding:
			1rem
			1.1rem
			1.25rem;
	}


	.faq__subheadline {
		margin-bottom:
			1.5rem;
	}


	.faq-item__answer-inner--left,
	.faq-item__answer-inner--right {
		display: flex;
		flex-direction: column;

		gap:
			1.25rem;
	}


	.faq-item__answer-inner--left .faq-item__images,
	.faq-item__answer-inner--right .faq-item__images {
		display: flex;
		flex-direction: column;

		width: 100%;

		order: 1;
	}


	.faq-item__answer-inner--left .faq-item__text,
	.faq-item__answer-inner--right .faq-item__text {
		width: 100%;

		order: 2;
	}


	.faq-item__answer-inner--above .faq-item__images,
	.faq-item__answer-inner--below .faq-item__images {
		grid-template-columns:
			1fr;

		width: 100%;
	}

}