/* Forest Air — gemeinsame Bauteile von FAQ, Handbüchern und Erfahrungen
   ===========================================================================
   Diese drei Seiten sind zusammen ueberarbeitet worden und teilen sich eine
   Handvoll Kleinteile: die gesperrte Oberzeile, das Einblenden beim Scrollen,
   die Knopfpaare am Seitenende und den schlichten Umrissknopf.

   Warum sie hier liegen und nicht dreimal: sonst faellt beim naechsten Mal
   eine der drei Kopien aus der Reihe, und niemand merkt es, weil jede Seite
   fuer sich stimmig aussieht.

   Die Klassennamen beginnen aus historischen Gruenden mit fa-fq- (die
   FAQ-Seite war zuerst fertig). Wer sie umbenennt, muss 04_bauen.py und die
   Messliste in 07_kontrast.py mitziehen.
   =========================================================================== */

/* Gesperrte Oberzeile mit Strich davor — auf allen drei Seiten derselbe Ton. */
.fa-fq-ober{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:#B9BCA6;margin:0 0 18px;
}
.fa-fq-ober::before{content:"";width:26px;height:1px;background:currentColor;opacity:.75}

/* Einblenden beim Scrollen (assets/js/aufblende.js).
   Ohne Bewegung — sei es ueber den Schalter im Fuss oder ueber die
   Systemeinstellung — ist alles sofort und vollstaendig da.

   Der durchsichtige Ausgangszustand haengt bewusst an (scripting:enabled).
   Nur assets/js/aufblende.js nimmt ihn wieder weg; ist kein Skript im Spiel
   — abgeschaltet, blockiert, oder ein Leser, der die Seite ohne Skripte
   holt —, dann darf der Ausgangszustand gar nicht erst entstehen, sonst ist
   die halbe Seite dauerhaft unsichtbar. Browser, die die Abfrage nicht
   kennen, verwerfen den Block: dort steht alles sofort, ohne Einblendung.
   Das ist die richtige Richtung zum Danebenliegen. */
@media (scripting:enabled){
  .fa-fq-auf{
    opacity:0;transform:translateY(18px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1);
  }
}
.fa-fq-auf.ein{opacity:1;transform:none}
body.rm .fa-fq-auf{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .fa-fq-auf{opacity:1;transform:none;transition:none}
}

/* Knopfpaar am Seitenende */
.fa-fq-tat{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fa-fq-zweit{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid rgba(231,228,214,.30);border-radius:999px;padding:13px 24px;
  color:#E7E4D6;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.fa-fq-zweit:hover,.fa-fq-zweit:focus-visible{
  border-color:var(--mondlicht);background:rgba(231,220,201,.10);color:var(--creme);
}

/* Schlichter Umrissknopf (Suche, "alle öffnen", "mehr anzeigen") */
.fa-fq-schalter{
  background:transparent;border:1px solid rgba(231,228,214,.22);border-radius:999px;
  color:#DDD9CD;cursor:pointer;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;white-space:nowrap;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.fa-fq-schalter:hover,.fa-fq-schalter:focus-visible{
  border-color:rgba(231,220,201,.34);color:var(--creme);background:rgba(231,220,201,.07);
}