/* ============================================================
   stadtguide-faq.css
   FAQ-Accordion für Stadtguide-/Blog-Einzelartikel.

   Rendert die im Artikeltext eingebettete FAQ (h2 „Häufige Fragen"
   + h3/p-Paare) im IDENTISCHEN Accordion-Design der FAQ-Seite
   (siehe faq.css → „Accordion — subtle, editorial"). Der Transform
   ins Accordion-Markup passiert in inc/shortcodes/stadtguide-single.php
   (the_content, Prio 99). Das JS-Toggle (.is-open) teilt sich mit
   der FAQ-Seite: assets/js/footer-init.js → [data-mc-faq-toggle].

   WICHTIG: NICHT die volle faq.css auf Stadtguide-Singles laden —
   die enthält konkurrierende .ed-hero/.ed-cross/.ed-specs-Regeln,
   die das Editorial-Design der Artikel (zimmer-detail.css) brechen
   würden. Hier liegt nur das Accordion-Subset — 1:1 aus faq.css
   kopiert — plus die Section-Hülle, alles unter `.stadtguide-faq`
   gescoped, damit es die `.stadtguide-article-body`-Basisregeln
   (a/p/strong) sicher überstimmt (höhere Spezifität, load-order-
   unabhängig). Tokens (--c-purple, --f-sans …) kommen aus brand.css.
   ============================================================ */

/* ===== Section-Hülle ===== */
.stadtguide-faq {
	margin-top: clamp(48px, 6vh, 80px);
	padding-top: clamp(40px, 5vh, 56px);
	border-top: 1px solid var(--c-grey-15);
}

/* Titel „Häufige Fragen" — editorial, wie die FAQ-Seiten-Section-Heads.
   Überstimmt die .stadtguide-article-body h2 Basis (border-top, Größe). */
.stadtguide-faq .stadtguide-faq__title {
	font-family: var(--f-sans);
	font-weight: 200;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--c-dark);
	margin: 0 0 clamp(24px, 3vh, 34px);
	padding: 0;
	border: 0;
	max-width: 22ch;
}
.stadtguide-faq .stadtguide-faq__title .it {
	font-family: var(--f-serif);
	font-style: italic;
	color: var(--c-purple);
	font-weight: 300;
}

/* ===== Accordion — 1:1 aus faq.css (subtle, editorial) ===== */
.stadtguide-faq .faq-accordion {
	border-top: 1px solid var(--c-grey-15);
}
.stadtguide-faq .faq-acc-item {
	border-bottom: 1px solid var(--c-grey-15);
}
.stadtguide-faq .faq-q {
	display: grid;
	grid-template-columns: 1fr 32px;
	gap: 24px;
	align-items: center;
	padding: 26px 0;
	cursor: pointer;
	background: transparent;
	border: none;
	text-align: left;
	width: 100%;
	font-family: var(--f-sans);
	font-size: clamp(15.5px, 1.4vw, 18px);
	font-weight: 500;
	color: var(--c-dark);
	letter-spacing: -0.005em;
	line-height: 1.4;
	transition: color .2s;
}
.stadtguide-faq .faq-q:hover { color: var(--c-purple); }
/* Runder +/×-Toggle — identisch zu Zimmer-/Startseiten-Accordion (.plus) */
.stadtguide-faq .faq-q .ico {
	position: relative;
	width: 30px; height: 30px;
	flex-shrink: 0;
	border: 1px solid var(--c-grey-15);
	border-radius: 50%;
	background: var(--c-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, border-color .25s, transform .3s;
}
.stadtguide-faq .faq-q:hover .ico { border-color: var(--c-purple); }
.stadtguide-faq .faq-q .ico::before,
.stadtguide-faq .faq-q .ico::after {
	content: '';
	position: absolute;
	background: var(--c-purple);
	border-radius: 2px;
	transition: background .25s;
}
.stadtguide-faq .faq-q .ico::before { width: 11px; height: 1.6px; }
.stadtguide-faq .faq-q .ico::after  { width: 1.6px; height: 11px; }
.stadtguide-faq .faq-acc-item.is-open .faq-q .ico {
	background: var(--c-purple);
	border-color: var(--c-purple);
	transform: rotate(45deg);
}
.stadtguide-faq .faq-acc-item.is-open .faq-q .ico::before,
.stadtguide-faq .faq-acc-item.is-open .faq-q .ico::after { background: var(--c-white); }
.stadtguide-faq .faq-acc-item.is-open .faq-q { color: var(--c-purple); }

/* Auf-/Zuklappen exakt wie die FAQ-Seite (faq.css): max-height 0 → Cap,
   overflow:hidden, .4s ease. Die generische `.faq-a { max-height:0;
   opacity:.78; max-width:64ch }` aus zimmer-detail.css (Frontpage-FAQ)
   wird über die höhere Spezifität hier überschrieben/neutralisiert. */
.stadtguide-faq .faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height .4s ease;
	opacity: 1;
	max-width: none;
}
/* Cap großzügiger als die FAQ-Seite (700px): Blog-Antworten sind nicht
   kuratiert-kurz und können mehrere Absätze haben — sonst würde langer
   Text beim Aufklappen abgeschnitten. */
.stadtguide-faq .faq-acc-item.is-open .faq-a { max-height: 1500px; }
.stadtguide-faq .faq-a-inner {
	padding: 4px 56px 28px 0;
	font-family: var(--f-sans);
	font-size: 15px;
	line-height: 1.78;
	color: var(--c-dark);
	opacity: 0.8;
	max-width: 76ch;
}
.stadtguide-faq .faq-a-inner p { margin: 0 0 14px; }
.stadtguide-faq .faq-a-inner p:last-child { margin-bottom: 0; }
.stadtguide-faq .faq-a-inner a {
	color: var(--c-purple);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.stadtguide-faq .faq-a-inner a:hover { color: var(--c-dark); border-bottom-color: var(--c-dark); }
.stadtguide-faq .faq-a-inner strong {
	color: var(--c-dark);
	opacity: 1;
	font-weight: 600;
}
.stadtguide-faq .faq-a-inner em { font-style: italic; color: var(--c-purple); }
.stadtguide-faq .faq-a-inner ul,
.stadtguide-faq .faq-a-inner ol { margin: 0 0 14px; padding-left: 1.3em; }
.stadtguide-faq .faq-a-inner li { margin-block-end: 0.4em; }
.stadtguide-faq .faq-a-inner li::marker { color: var(--c-purple); }
.stadtguide-faq .faq-a-inner .acc-meta {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--c-grey-15);
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 13.5px;
	color: var(--c-purple);
	opacity: 1;
}

/* ===== Mobile-Feintuning Accordion (1:1 aus faq.css) ===== */
@media (max-width: 700px) {
	.stadtguide-faq .faq-q {
		grid-template-columns: 1fr 28px;
		gap: 16px;
		padding: 20px 0;
		font-size: 15.5px;
	}
	.stadtguide-faq .faq-q .ico { width: 27px; height: 27px; }
	.stadtguide-faq .faq-a-inner { padding: 4px 0 22px; font-size: 14.5px; }
}