/* =====================================================================
   Die haeufigen Fragen -- die Liste.

   Das Fenster steht nicht hier. Es kommt aus bausteine.css des
   Lernkerns und aus popup.css; diese Datei baut nur die Liste davor.

   Die Farben kommen aus farben.css ueber die Rollen: --mx-akzent ist
   das Rosa, --mx-primaer das Dunkelblau. Die Rueckfallwerte stehen
   dabei, damit die Seite auch dann lesbar bleibt, wenn der Kern aus
   ist -- dieselbe Handschrift wie in bausteine.css.

   Der Nummernkreis ist derselbe wie an den Schrittkarten, nur kleiner:
   1,9 rem statt 2,8. Auf der Startseite fuehrt die Zahl den Blick, in
   einer Liste zaehlt sie nur mit. Alex' Ansage vom 2026-09-12.
   ===================================================================== */

.ap-faq {
    margin: 0 0 2rem;
}

.ap-faq__gruppe + .ap-faq__gruppe {
    margin-top: 2.6rem;
}

.ap-faq__liste {
    display: flex;
    flex-direction: column;
}

.ap-faq__eintrag {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.25rem 0;
}

/* Der Strich steht zwischen den Fragen und nicht um die Liste herum:
   Eine Gruppe hat oben schon ihren Bereichskopf, und ein Strich
   darunter wiederholte ihn nur. */
.ap-faq__eintrag + .ap-faq__eintrag {
    border-top: 1px solid var(--farbe-linie);
}

.ap-faq__eintrag:first-child { padding-top: .2rem; }
.ap-faq__eintrag:last-child  { padding-bottom: .2rem; }

.ap-faq__zahl {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-rund);
    background: var(--farbe-akzent);
    color: var(--farbe-marke);
    font-weight: var(--schrift-gewicht-fett);
    font-size: var(--schrift-groesse-14);
    font-variant-numeric: tabular-nums;
}

.ap-faq__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-faq__frage {
    margin: .05rem 0 .7rem;
    font-size: var(--schrift-groesse-17);
    font-weight: var(--schrift-gewicht-halbfett);
    color: var(--farbe-marke);
    text-wrap: balance;
}

.ap-faq__knopf {
    margin: 0;
}

/* Die Zeile im Fenster, die die Nummer nennt. Klein und ruhig: Sie
   sagt nur, welche Frage das war, damit sie sich weitergeben laesst. */
.ap-faq__marke {
    margin: 0 0 .6rem;
    font-size: var(--schrift-groesse-12);
    font-weight: var(--schrift-gewicht-fett);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--farbe-akzent-dunkel);
}

/* Eine angesprungene Frage soll sich zeigen und nicht unter der
   Kopfleiste kleben. */
.ap-faq__eintrag:target {
    scroll-margin-top: 6rem;
}

@media (max-width: 520px) {
    .ap-faq__eintrag { gap: .7rem; padding: 1.1rem 0; }
    .ap-faq__frage   { font-size: var(--schrift-groesse-16); }
}