/*
 * Q&A-Accordion – Fassung 2, freigegeben 04.10.2026 (designsystem.md Abschnitt 21).
 * Grundlage: Q&A-Sektion aus dem finalen PDF (dunkle Fläche, Rubrik „Q&A“ in Gold, feine Trennlinien #fafafa 1 px).
 * Fassung 2 (Vorgabe 04.10.2026): einspaltige Liste, Fragen in Weiß Regular, Antwort direkt darunter auf derselben
 * linken Textkante, kompaktere Zeilen. Gold nur für die Rubrik und das aktive Plus/Minus.
 * Alle Q&A-Werte als eigene Tokens hier; übrige Website-Typografie unverändert.
 *
 * Aufbau je Eintrag: <details class="s-qa__item"> mit <summary> (Frage + Plus/Minus) und der Antwort.
 * - Antworten stehen vollständig im HTML (indexierbar), zugeklappt per <details>.
 * - Ohne JavaScript: natives Auf-/Zuklappen; „name“-Attribut hält nur einen Eintrag offen.
 * - Mit JavaScript: weiche Höhenanimation (assets/js/qa-accordion.js); „Bewegung reduzieren“: ohne Animation.
 */
:root {
	--qa-fs-frage: max(18px, calc(29.3333 * var(--u)));   /* Frage: 22 px bei 1440 · Tablet 18 · Smartphone 17 */
	--qa-lh-frage: 1.45;
	--qa-fs-antwort: max(17px, calc(26.6667 * var(--u))); /* Antwort: 20 px bei 1440 · Tablet 17 · Smartphone 16 */
	--qa-lh-antwort: var(--lh-body-md);                   /* 1,65 */
	--qa-zeile: max(16px, calc(28 * var(--u)));           /* Innenabstand oben/unten je Fragezeile: 21 px bei 1440 */
	--qa-messe: 46em;                                     /* maximale Zeilenlänge der Antwort */
	--qa-dauer: 520ms;                                    /* Aufklappen: ruhig, aber nicht träge */
	--qa-kurve: cubic-bezier(0.33, 0, 0.15, 1);           /* Kurve der Editorial Motion (Kacheln) */
	--qa-icon: max(14px, calc(21 * var(--u)));            /* Plus/Minus: ca. 16 px bei 1440 */
	--qa-icon-strich: 1.5px;
}

/* Liste: eine Spalte, jede Frage eine eigene Zeile über die volle Inhaltsbreite */
.s-qa--accordion .s-qa__item {
	display: block;
	min-height: 0;
	padding-block: 0;
	border-bottom: 1px solid var(--s-offwhite);
}
.s-qa--accordion .s-qa__summary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--grid-gap);
	padding-block: var(--qa-zeile);
	list-style: none;
	cursor: pointer;
}
.s-qa--accordion .s-qa__summary::-webkit-details-marker { display: none; }
.s-qa--accordion .s-qa__summary::marker { content: ""; }
.s-qa--accordion .s-qa__q {
	margin: 0;
	padding-right: 0;
	font-size: var(--qa-fs-frage);
	line-height: var(--qa-lh-frage);
	font-weight: var(--w-regular);
	letter-spacing: var(--ls-body);
	color: var(--s-white);
}

/* Plus/Minus: zwei feine Linien rechts außen, Offwhite; Hover/Fokus/geöffnet in Gold */
.s-qa__icon {
	position: relative;
	width: var(--qa-icon); height: var(--qa-icon);
	color: var(--s-offwhite);
	transition: color var(--dauer-hover) ease;
}
.s-qa__icon::before, .s-qa__icon::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	height: var(--qa-icon-strich); margin-top: calc(var(--qa-icon-strich) / -2);
	background: currentColor;
	transition: transform var(--qa-dauer) var(--qa-kurve);
}
.s-qa__icon::after { transform: rotate(90deg); }
.s-qa__item[open] .s-qa__icon::after { transform: rotate(90deg) scaleX(0); }
.s-qa__item[open] .s-qa__icon { color: var(--s-gold); }
@media (hover: hover) and (pointer: fine) {
	.s-qa__summary:hover .s-qa__icon { color: var(--s-gold); }
}
.s-qa__summary:focus-visible .s-qa__icon { color: var(--s-gold); }

/* Antwort: direkt unter der Frage, gleiche linke Textkante, eigene Zeilenlänge */
.s-qa--accordion .s-qa__a {
	margin-left: 0;
	max-width: var(--qa-messe);
	padding-bottom: calc(var(--qa-zeile) * 1.6);
	font-size: var(--qa-fs-antwort);
	line-height: var(--qa-lh-antwort);
	font-weight: var(--w-light);
	letter-spacing: var(--ls-body);
	overflow: hidden;
}
.s-qa--accordion .s-qa__a p + p { margin-top: 0.75em; }
/* Links im Antworttext: globale Linkgestaltung; zusätzlich Medium zur Erkennbarkeit ohne Unterstreichung (wie Fließtext-Links) */
.s-qa--accordion .s-qa__a a:not([class]) { font-weight: var(--w-medium); }

/* Tablet und Smartphone: Schriftgrößen proportional abgestuft */
@media (min-width: 768px) and (max-width: 1023px) {
	:root { --qa-fs-frage: 18px; --qa-fs-antwort: 17px; }
}
@media (max-width: 767px) {
	:root { --qa-fs-frage: 17px; --qa-fs-antwort: 16px; --qa-zeile: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.s-qa__icon::before, .s-qa__icon::after { transition: none; }
}

/* Helle Variante (Leistungen – Dienstvertragsrecht, 12.10.2026): gleiche Systematik, Farben für hellen Grund.
   Rubrik Gold (--s-gold-text über .s-section--light), Fragen und Antworten dunkel, feine Linien, Plus/Minus dunkel → Gold. */
.s-qa--hell .s-qa__list { border-top-color: var(--s-linie-hell); }
.s-qa--hell.s-qa--accordion .s-qa__item { border-bottom-color: var(--s-linie-hell); }
.s-qa--hell.s-qa--accordion .s-qa__q { color: var(--s-black); }
.s-qa--hell .s-qa__icon { color: var(--s-black); }
.s-qa--hell .s-qa__item[open] .s-qa__icon { color: var(--s-gold-text); }
@media (hover: hover) and (pointer: fine) {
	.s-qa--hell .s-qa__summary:hover .s-qa__icon { color: var(--s-gold-text); }
}
.s-qa--hell .s-qa__summary:focus-visible .s-qa__icon { color: var(--s-gold-text); }
.s-qa--hell .s-qa__unterzeile { color: var(--s-black); }