/* ═══ Bauteil Fragen ═════════════════════════════════════════
   Aus partials/components/fragen.php und kr_aufklapper() in
   inc/bauteile.php. Eine Fassung fuer jede Frage auf der Seite:
   Startseite, Fachseiten, Veranstaltungen, /haeufige-fragen/, die
   Fragenspalte in Gut zu wissen. Seit 15. Oktober.

   Jede Frage ist eine ruhige Karte: Papierweiss auf Papier, eine
   Haarlinie rundherum, eckig wie jede andere Flaeche im Theme.
   Offen nimmt sie einen Hauch Dunkelblau an, die Frage steht dann
   in --dk. Das Plus traegt den Akzent; es ist Bedienelement wie der
   Fokusring, nicht Schmuck.
   ═════════════════════════════════════════════════════════════ */

.fragen__karte {
	--fragen-grund: var(--we);
	--fragen-offen: color-mix(in srgb, var(--dk) 6%, var(--we));
	background: var(--fragen-grund);
	border: 1px solid var(--ln);
	transition: background-color .3s var(--e), border-color .3s var(--e);
}
.fragen__karte[open] {
	background: var(--fragen-offen);
	border-color: color-mix(in srgb, var(--dk) 22%, transparent);
}

/* Eine Rahmenbreite fuer die Liste. Am Rechner nicht gestreckt: die
   Zeile der Antwort bleibt unter 70 Zeichen. */
.fragen__rahmen {
	max-width: var(--breit-fragen);
	margin-inline: auto;
}

/* Der Titel traegt --s3 nach unten. Zwischen den Karten traegt die
   Fuge, sonst nichts. */
.fragen__liste {
	display: grid;
	gap: var(--s2);
}

/* ── Frage ──────────────────────────────────────────────── */
.fragen__frage {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	min-height: var(--s6);
	padding: var(--s3) var(--s4);
	font-size: 1.0625rem;
	font-weight: var(--gw-normal);
	line-height: 1.35;
	letter-spacing: var(--lw-text);
	color: var(--tx);
	transition: color .3s var(--e);
}
.fragen__frage::-webkit-details-marker { display: none; }
.fragen__karte[open] > .fragen__frage { color: var(--dk); }
.fragen__frage:hover > span:first-child {
	text-decoration: underline;
	text-decoration-color: var(--ln);
	text-underline-offset: .2em;
}

/* Der Fokusring liegt innen: aussen schnitte ihn die Nachbarkarte. */
.fragen__frage:focus-visible { outline-offset: -2px; }

/* Plus aus zwei Strichen, offen um 45 Grad gedreht: ein Kreuz. */
.fragen__zeichen {
	position: relative;
	flex: none;
	width: var(--s3);
	height: var(--s3);
	color: var(--ak);
	transition: transform .3s var(--e);
}
.fragen__zeichen::before,
.fragen__zeichen::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
}
.fragen__zeichen::after { transform: rotate(90deg); }
.fragen__karte[open] .fragen__zeichen { transform: rotate(45deg); }

/* ── Antwort ────────────────────────────────────────────── */
.fragen__antwort {
	padding: 0 var(--s4) var(--s4);
}
.fragen__antwort p {
	margin: 0;
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--tx);
	text-wrap: pretty;
}

/* Weich auf und zu, wo der Browser die Hoehe des Inhalts kennt.
   Sonst steht die Antwort sofort da, und das ist kein Fehler. */
@supports (interpolate-size: allow-keywords) {
	.fragen__karte {
		interpolate-size: allow-keywords;
	}
	.fragen__karte::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size .35s var(--e), content-visibility .35s var(--e) allow-discrete;
	}
	.fragen__karte[open]::details-content { block-size: auto; }
}

/* ── Reiter ─────────────────────────────────────────────── */
/* Nur ab neun Fragen. Radioknoepfe, keine Skripte: die Pfeiltasten
   wandern von selbst durch die Gruppe. Ohne :has() bleiben alle
   Gruppen stehen, die Reiter waeren dann ohne Wirkung und fallen
   weg. */
.fragen__reiter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	margin-bottom: var(--s5);
}
.fragen__wahl {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.fragen__reiter label {
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
	padding-inline: var(--s3);
	border: 1px solid var(--ln);
	background: var(--we);
	font-size: var(--t-basis);
	font-weight: var(--gw-halb);
	color: var(--tx);
	cursor: pointer;
	transition: background-color .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.fragen__reiter label:hover { border-color: var(--dk); }
.fragen__wahl:checked + label {
	background: var(--dk);
	border-color: var(--dk);
	color: var(--pa);
}
.fragen__wahl:focus-visible + label {
	outline: 2px solid var(--ak);
	outline-offset: 3px;
}

@supports not selector(:has(*)) {
	.fragen__reiter { display: none; }
}

.fragen__gruppe + .fragen__gruppe { margin-top: var(--s6); }
.fragen__gruppentitel {
	margin: 0 0 var(--s3);
	font-size: var(--t-kick);
	font-weight: var(--gw-halb);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mu-papier);
}

/* Ein Reiter zeigt seine Gruppe. Reiter 1 ist "Alle". Fuenf Themen
   gibt es heute, Platz ist fuer acht. */
.fragen__rahmen:has(.fragen__wahl:nth-of-type(n+2):checked) .fragen__gruppe { display: none; }
.fragen__rahmen:has(.fragen__wahl:nth-of-type(n+2):checked) .fragen__gruppentitel { display: none; }
.fragen__rahmen:has(.fragen__wahl:nth-of-type(2):checked) .fragen__gruppe:nth-child(1 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(3):checked) .fragen__gruppe:nth-child(2 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(4):checked) .fragen__gruppe:nth-child(3 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(5):checked) .fragen__gruppe:nth-child(4 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(6):checked) .fragen__gruppe:nth-child(5 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(7):checked) .fragen__gruppe:nth-child(6 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(8):checked) .fragen__gruppe:nth-child(7 of .fragen__gruppe),
.fragen__rahmen:has(.fragen__wahl:nth-of-type(9):checked) .fragen__gruppe:nth-child(8 of .fragen__gruppe) {
	display: block;
	margin-top: 0;
}

/* ── Verweis darunter ───────────────────────────────────── */
.fragen__weiter { margin: var(--s5) 0 0; }

/* ── Gut zu wissen als Tafel ────────────────────────────── */
/* Dieselbe Flaeche wie die Karten, aber nichts zum Aufklappen: eine
   Tafel, die Zeilen darin trennt die Haarlinie wie bisher. */
.fragen__tafel {
	background: var(--we);
	border: 1px solid var(--ln);
	padding-inline: var(--s4);
	font-size: 1rem;
}
.fragen__tafel > div:last-child { border-bottom: 0; }
.liste.fragen__tafel dd { font-size: 1rem; }

@media (max-width: 47.5rem) {
	.fragen__frage { padding: var(--s3); }
	.fragen__antwort { padding: 0 var(--s3) var(--s3); }
	.fragen__tafel { padding-inline: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
	.fragen__karte,
	.fragen__karte::details-content,
	.fragen__frage,
	.fragen__zeichen,
	.fragen__reiter label {
		transition: none;
	}
}