/*
 * Heidesee FAQ-Accordion widget — numbered <details> rows with a +/− toggle.
 */

/* Same horizontal inset as hero/header/intro (--gutter) at every width —
   the section container must not add its own left/right padding. */
.hd-faq {
	color: var(--c-text);
	padding-inline: var(--gutter);
}

/* Big lead statement (Figma H2 regular) */
.hd-faq__statement {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-family: var(--font-base);
	font-weight: var(--fw-normal);
	font-size: clamp(30px, 4vw, 50px);
	line-height: 1.14;
}

/* Intro paragraph between the statement and the FAQ block */
.hd-faq__intro {
	margin: 0 0 clamp(48px, 6vw, 90px);
	max-width: 75ch;
	font-size: var(--fs-body);
	line-height: 1.6;
}

.hd-faq__intro p {
	margin: 0 0 1em;
}

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

.hd-faq__title {
	margin: 0 0 clamp(18px, 1.7vw, 24px);
	font-family: var(--font-base);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h4);
	line-height: 1.1;
}

.hd-faq__list {
	counter-reset: hd-faq;
	border-bottom: 2px solid rgba( 30, 32, 33, 0.85 );
}

.hd-faq__item {
	counter-increment: hd-faq;
	border-top: 2px solid rgba( 30, 32, 33, 0.85 );
}

/* Tight rows per Figma: ~64px divider to divider */
.hd-faq__q {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 48px);
	padding: clamp(14px, 1.2vw, 17px) 0;
	cursor: pointer;
	list-style: none;
}

.hd-faq__q::-webkit-details-marker {
	display: none;
}

.hd-faq__num {
	flex: 0 0 auto;
	min-width: 2.5em;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

.hd-faq__num::before {
	content: counter( hd-faq, decimal-leading-zero ) ".";
}

/* Mixed case (customer request 2026-08: caps were hard to read).
   Semibold, not bold — questions should read as heavy as the "Häufig gestellte
   Fragen" title, not heavier (customer request 2026-08). */
.hd-faq__text {
	flex: 1 1 auto;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

/* Round +/- toggle */
.hd-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--c-graphit);
}

.hd-faq__icon::before,
.hd-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--c-kalkstein);
}

.hd-faq__icon::before {
	width: 13px;
	height: 1.5px;
}

.hd-faq__icon::after {
	width: 1.5px;
	height: 13px;
	transition: opacity 0.2s ease;
}

/* Open state → minus */
.hd-faq__item[open] .hd-faq__icon::after {
	opacity: 0;
}

/* Answers run the full row width (customer request 2026-08) */
.hd-faq__a {
	padding: 0 0 clamp(20px, 2.5vw, 32px) calc(2.5em + clamp(16px, 3vw, 48px));
}

.hd-faq__a p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* Figma mobile frame (390px): statement 35/40, intro 16/26, title 24/29,
   30px between the text blocks; rows with 16px bold labels (0.32px tracking)
   beside a 25px number column and a 30px toggle with an 11px glyph. */
@media (max-width: 600px) {
	.hd-faq__statement {
		margin-bottom: 30px;
		font-size: 35px;
		line-height: 40px;
	}
	.hd-faq__intro {
		margin-bottom: 30px;
		font-size: 16px;
		line-height: 26px;
	}
	.hd-faq__title {
		margin-bottom: 30px;
		font-size: 24px;
		line-height: 29px;
	}
	.hd-faq__q {
		gap: 12px;
		padding: 17px 0;
	}
	.hd-faq__num {
		min-width: 25px;
		font-size: 16px;
	}
	.hd-faq__text {
		font-size: 16px;
	}
	.hd-faq__icon {
		width: 30px;
		height: 30px;
	}
	.hd-faq__icon::before {
		width: 11px;
	}
	.hd-faq__icon::after {
		height: 11px;
	}
	.hd-faq__a {
		padding-left: 0;
	}
	/* One text size for intro, questions AND answers on mobile (customer
	   note 2026-08: too many sizes) — all at the 16/26 intro measure. */
	.hd-faq__a p {
		font-size: 16px;
		line-height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-faq__icon::after {
		transition: none;
	}
}