/**
 * FAQ-Akkordeon im Design der Hotel-Website.
 * Nutzt die CI-Variablen des Child-Themes, falls vorhanden, sonst eigene Standardwerte.
 */

.sbj-faq {
	--sbj-faq-green: var(--sbj-green, #1c3826);
	--sbj-faq-gold: var(--sbj-gold, #be9a59);
	--sbj-faq-text: var(--sbj-text, #666);
	--sbj-faq-light: var(--sbj-light, #f5f5f5);
	margin: 0 0 2em;
	border-top: 1px solid rgba(190, 154, 89, .35);
}

.sbj-faq__item {
	border-bottom: 1px solid rgba(190, 154, 89, .35);
}

.sbj-faq__question {
	position: relative;
	display: block;
	padding: 22px 56px 22px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--sbj-sans, inherit);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sbj-faq-green);
	transition: color .2s ease;
}

.sbj-faq__question::-webkit-details-marker {
	display: none;
}

/* Plus/Minus-Symbol in Gold */
.sbj-faq__question::before,
.sbj-faq__question::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	background: var(--sbj-faq-gold);
	transition: transform .25s ease, opacity .25s ease;
}

.sbj-faq__question::after {
	transform: rotate(90deg);
}

.sbj-faq__item[open] > .sbj-faq__question::after {
	transform: rotate(0deg);
	opacity: 0;
}

.sbj-faq__question:hover {
	color: var(--sbj-faq-gold);
}

.sbj-faq__question:focus {
	outline: none;
}

.sbj-faq__question:focus-visible {
	outline: 2px solid var(--sbj-faq-gold);
	outline-offset: 4px;
}

.sbj-faq__answer {
	padding: 0 56px 22px 0;
	color: var(--sbj-faq-text);
	line-height: 1.8;
}

.sbj-faq__item[open] > .sbj-faq__answer {
	animation: sbj-faq-open .25s ease;
}

.sbj-faq__answer p {
	margin: 0 0 .8em;
}

.sbj-faq__answer p:last-child {
	margin-bottom: 0;
}

.sbj-faq__answer a {
	color: var(--sbj-faq-green);
	text-decoration: underline;
	text-decoration-color: var(--sbj-faq-gold);
	text-underline-offset: 3px;
}

@keyframes sbj-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sbj-faq__item[open] > .sbj-faq__answer,
	.sbj-faq__question::before,
	.sbj-faq__question::after {
		animation: none;
		transition: none;
	}
}

@media (max-width: 544px) {
	.sbj-faq__question {
		padding-right: 44px;
		font-size: 16px;
	}

	.sbj-faq__answer {
		padding-right: 0;
	}
}