/* Häufige Fragen (Entwurf, 23.10.2026). Jonah: „unten so ein paar Fragen klären, auch für SEO“. Dezent (ab 07 keine neue Szene): Titel links,
   rechts die Fragen, zugeklappt, je eine offen. Die Antworten stehen als echter Text im Quelltext, ohne Skript alle offen; dazu FAQPage als JSON-LD.
   Sonne nur für den einen Zustand: die offene Frage bekommt ein Stück Linie in Sonne. Farben über die Kanäle, Tag und Nacht ohne Zusatz.
   Skript: quelle/fragen.js. */
.fragen { padding-bottom: 0; }   /* unten nichts extra, der Abstand zum Erstgespräch ist dessen --abstand-oben (23.10. spät) */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 0; align-items: start; }
.fragen-kopf .abschnitt-titel { margin: 0; padding-right: 28px; }
.fragen-kopf p { margin: 20px 0 0; max-width: 30ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; text-wrap: pretty; }
.fragen-liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--zl); }
.fragen-eintrag { position: relative; border-top: 1px solid var(--zl); }
.fragen-eintrag::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sonne); transform-origin: left;
                 scale: 0 1; transition: scale var(--raus); }
.fragen-eintrag.offen::before { scale: .22 1; transition: scale .9s var(--sanft); }
.fragen-eintrag h3 { margin: 0; font: inherit; }
.fragen-knopf { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%;
               padding: clamp(22px, 1.4vw + 12px, 32px) 0; cursor: pointer; color: rgb(var(--vg-k) / .86);
               font: 400 clamp(19px, 15px + .6vw, 26px)/1.2 var(--schrift); letter-spacing: -.02em; text-wrap: balance;
               transition: color .3s var(--aus); }
.fragen-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 2px; }
.fragen-eintrag.offen .fragen-knopf { color: var(--sand); }
@media (hover: hover) and (pointer: fine) { .fragen-knopf:hover { color: var(--sand); } }
/* Plus wird Minus: die senkrechte Linie dreht sich flach. Leicht in Sonne (Jonah: „die Plus- und Minus-Dinger dann noch irgendwie leicht farblich“):
   Striche in Sonne, Rahmen in Sonne leise; offen ein Hauch Sonne im Grund. Auf hellem Grund sun-700, damit das Zeichen 3:1 hält. */
.fragen-zeichen { --zf: var(--sonne); position: relative; width: 40px; height: 40px; flex: none; color: var(--zf);
                  border: 1px solid color-mix(in srgb, var(--zf) 34%, transparent); border-radius: var(--radius);
                  transition: border-color .35s var(--aus), background-color .35s var(--aus); }
html.hell .fragen-zeichen { --zf: var(--sonne-700); }
.fragen-zeichen::before, .fragen-zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
                                                  background: currentColor; border-radius: 1px; transition: rotate .5s var(--sanft); }
.fragen-zeichen::after { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) { .fragen-knopf:hover .fragen-zeichen { border-color: color-mix(in srgb, var(--zf) 70%, transparent); } }
.fragen-eintrag.offen .fragen-zeichen { border-color: color-mix(in srgb, var(--zf) 80%, transparent); background: color-mix(in srgb, var(--zf) 12%, transparent); }
.fragen-eintrag.offen .fragen-zeichen::after { rotate: 0deg; }
/* Antwort: Höhe über das Raster (0fr zu 1fr), der Text kommt kurz danach */
.fragen-antwort { display: grid; grid-template-rows: 1fr; }
.js .fragen-antwort { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--sanft); }
.js .fragen-eintrag.offen .fragen-antwort { grid-template-rows: 1fr; }
.fragen-antwort > div { min-height: 0; overflow: hidden; }
.fragen-antwort p { margin: 0; padding: 0 64px clamp(26px, 1.4vw + 14px, 36px) 0; max-width: 60ch; color: var(--leise); font-size: clamp(16px, 15px + .3vw, 19px);
             line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.js .fragen-antwort p { opacity: 0; translate: 0 8px; transition: opacity .25s var(--aus), translate .25s var(--aus); }
.js .fragen-eintrag.offen .fragen-antwort p { opacity: 1; translate: 0 0; transition: opacity .6s var(--aus) .12s, translate .8s var(--sanft) .12s; }

@media (max-width: 860px) {
  .fragen-raster { grid-template-columns: 1fr; }
  .fragen-kopf { margin-bottom: 16px; }
  .fragen-zeichen { width: 36px; height: 36px; }
  .fragen-antwort p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .fragen-antwort, .js .fragen-antwort p, .fragen-eintrag::before, .fragen-zeichen::before, .fragen-zeichen::after { transition: none; }
}