/* ============================================================
   BASIS (Desktop & Allgemein)
   ============================================================ */

.accordion-faq {
	max-width: 900px;
	margin: 0 auto;
	font-family: sans-serif;
}

.accordion-faq .acc-title {
	width: 100%;
	text-align: left;
	padding: 12px 48px 12px 16px;
	/* mehr Platz rechts für Symbol */
	font-size: 17px;
	font-weight: 600;
	background: #f5f5f5;
	border: none;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
}

.accordion-faq .acc-title::after {
	content: "+";
	position: absolute;
	right: 20px;
	/* Abstand zum rechten Rand */
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	transition: color 0.2s ease;
}

.accordion-faq .acc-title.active {
	background: #dfe4ea;
}

.accordion-faq .acc-title.active::after {
	content: "–";
	font-size: 24px;
	color: #444;
}

.cc-pagemode-default .accordion-faq .acc-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	background: #ffffff;
	border-bottom: 1px solid #ddd;
}

.accordion-faq .acc-content p {
	padding: 14px 16px;
	margin: 0;
	color: #333;
	font-size: 16px;
}



/* ============================================================
   MOBILE (bis 767px)
   ============================================================ */

@media (max-width: 767px) {

	.accordion-faq .acc-title {
		padding: 10px 52px 10px 14px;
		/* 52px rechts = sauberer Abstand zw. Text & Symbol */
		font-size: 16px;
		line-height: 1.5em;
	}

	.accordion-faq .acc-title::after {
		right: 18px;
		/* Mobil weiter nach rechts */
		font-size: 18px;
	}

	.accordion-faq .acc-title.active::after {
		font-size: 22px;
	}

	.accordion-faq .acc-content p {
		padding: 12px 14px;
		font-size: 15px;
		line-height: 1.5;
	}
}



/* ============================================================
   OPTIONAL: ULTRA-COMPACT (bis 360px)
   — Für sehr schmale Smartphones oder wenn extrem wenig Platz ist
   ============================================================ */


@media (max-width: 360px) {

	.accordion-faq .acc-title {
		padding: 10px 46px 10px 12px;
		font-size: 15px;
	}

	.accordion-faq .acc-title::after {
		right: 14px;
		font-size: 17px;
	}

	.accordion-faq .acc-title.active::after {
		font-size: 20px;
	}

	.accordion-faq .acc-content p {
		padding: 10px 12px;
		font-size: 14px;
	}
}