/* ===========================================================================
   Aufklapper des Relaunchs (Phase A2; Andi, 04.10.2026)

   Ein Bauteil für alles, was in Glas aufklappt: die Fragen im Abschnitt
   „Fragen“, „Mehr dazu“ im Fragenfluss, die Detailaufstellung per Knopf und
   die Annahmenliste. Geschlossen eine Kopfzeile mit Plus, geöffnet dreht das
   Plus zum × und die Antwort steht in derselben Fläche — kein zweites Glas
   darin.

   Aufbau (aufklapper.js setzt Zustand, aria-expanded und inert):
     .aufklapper[.glas]            die Fläche; .offen, wenn offen
       .aufklapper-kopf (button)   ganze Zeile, aria-expanded, aria-controls
         .aufklapper-zeichen       Plus, wird zum ×
       .aufklapper-koerper         Raster 0fr → 1fr, die Höhe
         .aufklapper-inhalt        beschneidet, min-height 0
           .aufklapper-text        bewegt sich: transform und opacity

   Bewegung:
   - Die Höhe läuft über die Rasterzeile, nie über height, und schwingt nie
     über: Auch beim Öffnen trägt sie die gedämpfte Feder (--feder-zu). Ein
     Überschwingen über 1fr hinaus würde die Fläche kurz größer machen als
     ihr Inhalt; das ist in Safari nicht geprüft und bleibt deshalb weg.
   - Das Überschwingen steht nur am Text: Er kommt von oben herein
     (--schwebe-weg) und federt mit --feder-auf, um --versatz später als die
     Fläche. Das Plus dreht mit derselben Feder.
   - Schließen mit --feder-zu, ohne Überschwingen, damit nichts nachwippt.
   - Alles als transition, nicht als animation: Wird während der Bewegung
     erneut gedrückt, läuft sie aus der aktuellen Stelle zurück — ohne
     Schwung. Mit federn.js übernimmt deshalb aufklapper.js Höhe und Weg
     (Klasse .feder-js, unten); was hier steht, ist der Rückfall.
   - Animiert werden nur grid-template-rows, transform und opacity — opacity
     nur am Text, der kein Glas enthält. Kein filter, keine mask: Beides an
     einem Vorfahren schaltet das Glas ab (glas.css).
   - Ohne linear() gilt --ease-aus (tokens.css). Weniger Bewegung: kein Weg,
     kein Überschwingen, nur kurzes Einblenden.
   =========================================================================== */

.aufklapper { display: grid; }
.aufklapper.glas { padding: 0; }

.aufklapper-titel { margin: 0; font: inherit; }
.aufklapper-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    min-height: 56px; padding: 14px 20px; border: 0; background: none; cursor: pointer; text-align: left;
    color: var(--text); font: 600 var(--g-16)/1.35 var(--f-text);
    -webkit-text-stroke: inherit; paint-order: inherit;
}
.aufklapper-kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -4px; border-radius: var(--r-flaeche); }

/* Plus aus zwei Strichen; offen um 45 Grad gedreht, also ×. */
.aufklapper-zeichen { position: relative; flex: none; width: 18px; height: 18px; color: var(--akzent);
    transition: transform var(--d-schritt) var(--feder-zu); }
.aufklapper-zeichen::before, .aufklapper-zeichen::after {
    content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: var(--r-bedien); background: currentColor;
}
.aufklapper-zeichen::after { transform: rotate(90deg); }
.aufklapper.offen .aufklapper-zeichen { transform: rotate(45deg); transition: transform var(--d-szene) var(--feder-auf); }

.aufklapper-koerper {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--d-schritt) var(--feder-zu);
}
.aufklapper.offen .aufklapper-koerper { grid-template-rows: 1fr; transition: grid-template-rows var(--d-szene) var(--feder-zu); }
.aufklapper-inhalt { min-height: 0; overflow: hidden; }
.aufklapper-text {
    padding: 0 20px 18px; color: var(--text); font: var(--g-16)/1.55 var(--f-text);
    opacity: 0; transform: translateY(calc(-1 * var(--schwebe-weg)));
    transition: opacity var(--d-ping) var(--ease-ein), transform var(--d-schritt) var(--feder-zu);
}
.aufklapper-text > :first-child { margin-top: 0; }
.aufklapper-text > :last-child { margin-bottom: 0; }
.aufklapper.offen .aufklapper-text {
    opacity: 1; transform: none;
    transition: opacity var(--d-schritt) var(--ease-aus) var(--versatz), transform var(--d-szene) var(--feder-auf) var(--versatz);
}

/* Mehrere Aufklapper in einer Glasfläche (Abschnitt „Fragen“): Die Gruppe ist
   das Glas, die Einträge sind durch eine Linie getrennt. So bleibt es bei
   einer weichgezeichneten Fläche statt einer je Frage (höchstens drei). */
.aufklapper-gruppe { display: grid; padding: 4px 0; }
.aufklapper-gruppe > .aufklapper + .aufklapper { border-top: 1px solid var(--glasrand); }

/* Schlicht: ohne eigene Fläche, in einer anderen (Fragenfluss, „Mehr dazu“). */
.aufklapper.schlicht .aufklapper-kopf { min-height: 44px; padding: 10px 0; font: 600 var(--g-14)/1.3 var(--f-text); color: var(--akzent); justify-content: flex-start; gap: 10px; }
.aufklapper.schlicht .aufklapper-zeichen { width: 14px; height: 14px; }
.aufklapper.schlicht .aufklapper-zeichen::before, .aufklapper.schlicht .aufklapper-zeichen::after { top: 6px; width: 14px; }
.aufklapper.schlicht .aufklapper-text { padding: 0; font: var(--g-14)/1.5 var(--f-text); color: var(--leise); }

/* Mit Feder (aufklapper.js, Tor G2): Höhe und Weg setzt das Skript in jedem
   Bild, mit Schwung beim Umkehren. Hier läuft dann nur noch die Deckung, sonst
   zögen zwei an derselben Eigenschaft. Was oben steht, bleibt der Rückfall. */
.aufklapper.feder-js .aufklapper-koerper, .aufklapper.feder-js.offen .aufklapper-koerper { transition: none; }
.aufklapper.feder-js .aufklapper-text { transition: opacity var(--d-ping) var(--ease-ein); }
.aufklapper.feder-js.offen .aufklapper-text { transition: opacity var(--d-schritt) var(--ease-aus) var(--versatz); }

@media (prefers-reduced-motion: reduce) {
    .aufklapper-koerper, .aufklapper.offen .aufklapper-koerper,
    .aufklapper-zeichen, .aufklapper.offen .aufklapper-zeichen { transition: none; }
    .aufklapper-text, .aufklapper.offen .aufklapper-text { transform: none; transition: opacity var(--d-ping) linear; }
}
@media print {
    .aufklapper-koerper { grid-template-rows: 1fr; }
    .aufklapper-text { opacity: 1; transform: none; }
    .aufklapper-zeichen { display: none; }
}