/* Forest Air — FAQ
   ===========================================================================
   Neunundzwanzig Fragen in sechs Bereichen. Die Seite muss zwei Dinge
   gleichzeitig koennen: einen Ueberblick geben und eine einzelne Frage
   schnell auffindbar machen. Deshalb oben die Suche und die Bereichsmarken,
   darunter die Bereiche der Reihe nach.

   DREI ENTSCHEIDUNGEN, DIE HIER FESTGESCHRIEBEN SIND
   --------------------------------------------------
   1) Die Aufklapper sind <details>/<summary> — kein JavaScript-Akkordeon.
      Ohne Skript sind alle Antworten trotzdem erreichbar, die Tastatur
      bedient sie von Haus aus, und die Browsersuche (Strg+F) findet auch
      Text in geschlossenen Aufklappern. Ein selbstgebauter Akkordeon aus
      <div>s kann von alledem nichts.

   2) Die Fragen stehen NICHT in Anton. Anton ist eine Versalienschrift fuer
      Wucht — neunundzwanzig Zeilen davon untereinander liest niemand. Die
      Fragen stehen in Barlow halbfett, gemischte Schreibung; Anton bleibt den
      Bereichsueberschriften.

   3) Die Werkzeugleiste klebt oben (position:sticky). Darum darf auf
      .fa-fq KEIN overflow gesetzt werden — ein Elternteil mit overflow wird
      zum Scrollbehaelter und die Leiste klebt dann an etwas, das sich nie
      bewegt.
   =========================================================================== */

.fa-fq{
  --fq-tief:#1B1D18;
  --fq-grund:#232323;
  --fq-karte:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  --fq-karte-auf:linear-gradient(180deg,#31342C 0%,#282A24 100%);
  --fq-linie:rgba(231,228,214,.13);
  --fq-linie-hell:rgba(231,220,201,.34);
  position:relative;
}
.fa-fq-innen{max-width:1000px;margin:0 auto;padding:0 var(--rand)}

/* ================================================================== Auftakt */
.fa-fq-hero{
  background:
    radial-gradient(80% 62% at 50% -8%,rgba(231,220,201,.11) 0%,rgba(231,220,201,0) 62%),
    linear-gradient(180deg,#1E201B 0%,#232323 62%,#212320 100%);
  padding:clamp(54px,7.5vw,96px) 0 clamp(30px,4vw,44px);
  text-align:center;
}
.fa-fq-hero .fa-fq-ober{justify-content:center}
.fa-fq-hero h1{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(36px,7.4vw,84px);line-height:.98;margin:0 0 16px;
  color:var(--creme);
  text-shadow:0 2px 0 rgba(0,0,0,.32),0 20px 54px rgba(0,0,0,.45);
}
.fa-fq-hero h1 em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:0;color:var(--mondlicht);
  font-size:1.06em;line-height:.95;
}
.fa-fq-lede{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(18px,2.4vw,25px);line-height:1.42;color:var(--mondlicht);
  margin:0 auto;max-width:26em;
}

/* Zahl-Zeile unter dem Vorspann: 29 Fragen · 6 Bereiche */
.fa-fq-zahlen{
  margin:22px 0 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ADB19A;
}
.fa-fq-zahlen span{display:inline-flex;align-items:center;gap:10px}
.fa-fq-zahlen span+span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.7}

/* ========================================================== Werkzeugleiste */
.fa-fq-werkzeug{
  position:sticky;top:var(--kopfhoehe);z-index:40;
  background:rgba(30,32,27,.92);
  backdrop-filter:saturate(150%) blur(12px);
  border-top:1px solid var(--fq-linie);
  border-bottom:1px solid var(--fq-linie);
  padding:14px 0;
}
.fa-fq-werkzeug-innen{
  max-width:1000px;margin:0 auto;padding:0 var(--rand);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.fa-fq-suchfeld{position:relative;flex:1 1 300px;min-width:0}
.fa-fq-suchfeld svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#ADB19A;pointer-events:none;
}
.fa-fq-suche{
  width:100%;background:rgba(245,242,235,.055);
  border:1px solid rgba(231,228,214,.20);border-radius:999px;
  color:var(--creme);font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;padding:12px 44px 12px 42px;
  transition:border-color .25s ease,background .25s ease;
}
.fa-fq-suche::placeholder{color:#A8AC95;opacity:1}
.fa-fq-suche:focus{
  outline:none;border-color:var(--fq-linie-hell);background:rgba(245,242,235,.09);
  box-shadow:0 0 0 3px rgba(231,220,201,.13);
}
.fa-fq-leeren{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(245,242,235,.10);color:var(--creme);
  display:none;align-items:center;justify-content:center;font-size:15px;line-height:1;
}
.fa-fq-suchfeld.gefuellt .fa-fq-leeren{display:flex}
.fa-fq-leeren:hover{background:rgba(245,242,235,.2)}

/* Bereichsmarken */
.fa-fq-marken{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  max-width:1000px;margin:0 auto;padding:0 var(--rand) 4px;
}
.fa-fq-marke{
  display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  border:1px solid rgba(231,228,214,.16);border-radius:999px;
  padding:8px 15px;color:#DDD9CD;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.06em;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.fa-fq-marke b{font-weight:500}
/* 10,5 px ist unter der Grenze, ab der Text auf dem Handy noch
   ohne Zusammenkneifen lesbar ist. 11,5 kostet keinen Platz. */
.fa-fq-marke i{font-style:normal;color:#A8AC95;font-size:11.5px;letter-spacing:.1em}
.fa-fq-marke:hover,.fa-fq-marke:focus-visible{
  border-color:var(--fq-linie-hell);background:rgba(231,220,201,.08);color:var(--creme);
}

/* Trefferzeile */
.fa-fq-stand{
  max-width:1000px;margin:0 auto;padding:12px var(--rand) 0;text-align:center;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#ADB19A;
}
.fa-fq-stand[hidden]{display:none}

/* ================================================================= Bereiche */
.fa-fq-liste{
  background:linear-gradient(180deg,#212320 0%,#232323 40%,#1F211C 100%);
  padding:clamp(34px,5vw,60px) 0 clamp(44px,6vw,80px);
}
.fa-fq-bereich{padding:clamp(26px,4vw,44px) 0 0;scroll-margin-top:calc(var(--kopfhoehe) + 78px)}
.fa-fq-bereich+.fa-fq-bereich{border-top:1px solid var(--fq-linie);margin-top:clamp(30px,4.5vw,52px)}
.fa-fq-bereich[hidden]{display:none}

.fa-fq-bkopf{display:flex;gap:18px;align-items:flex-start;margin:0 0 22px}
.fa-fq-bnr{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.2em;color:#A8AC95;
  padding-top:.5em;flex:0 0 auto;
}
.fa-fq-bkopf h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.014em;
  font-size:clamp(24px,3.6vw,40px);line-height:1.04;margin:0 0 6px;color:var(--creme);
}
.fa-fq-bunter{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(16px,2vw,20px);line-height:1.4;color:var(--mondlicht);margin:0;
}

/* ================================================================== Karten */
.fa-fq-karten{display:flex;flex-direction:column;gap:10px}

.fa-fq-karte{
  background:var(--fq-karte);
  border:1px solid var(--fq-linie);border-radius:14px;
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
  scroll-margin-top:calc(var(--kopfhoehe) + 78px);
}
.fa-fq-karte[hidden]{display:none}
.fa-fq-karte:hover{border-color:rgba(231,220,201,.24)}
.fa-fq-karte[open]{background:var(--fq-karte-auf);border-color:var(--fq-linie-hell)}

.fa-fq-kopf{
  display:flex;align-items:center;gap:16px;
  padding:17px 20px;cursor:pointer;list-style:none;
}
.fa-fq-kopf::-webkit-details-marker{display:none}
.fa-fq-kopf:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px;border-radius:14px}
.fa-fq-nr{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.16em;color:#ADB19A;flex:0 0 auto;
  min-width:2.2em;
}
.fa-fq-frage{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-weight:600;font-size:clamp(15.5px,1.7vw,18px);line-height:1.4;
  color:var(--creme);margin:0;flex:1 1 auto;
}
.fa-fq-frage mark{background:rgba(231,220,201,.26);color:var(--creme);border-radius:3px;padding:0 2px}
.fa-fq-zeichen{
  position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(231,228,214,.26);
  transition:border-color .3s ease,transform .3s ease;
}
.fa-fq-zeichen::before,.fa-fq-zeichen::after{
  content:"";position:absolute;left:50%;top:50%;background:#DDD9CD;
  transform:translate(-50%,-50%);transition:opacity .3s ease,transform .3s ease;
}
.fa-fq-zeichen::before{width:11px;height:1.5px}
.fa-fq-zeichen::after{width:1.5px;height:11px}
.fa-fq-karte[open] .fa-fq-zeichen{border-color:var(--fq-linie-hell)}
.fa-fq-karte[open] .fa-fq-zeichen::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}

/* -------------------------------------------------------------- Antworten */
.fa-fq-antwort{padding:0 20px 20px calc(20px + 2.2em + 16px)}
.fa-fq-antwort p{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.75;color:#DAD6C8;margin:0 0 12px;max-width:46em;
}
.fa-fq-antwort p:last-child{margin-bottom:0}
.fa-fq-antwort b,.fa-fq-antwort strong{color:var(--creme);font-weight:600}

.fa-fq-schritte,.fa-fq-pflege,.fa-fq-gegen{
  margin:0 0 14px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px;max-width:46em;
}
.fa-fq-schritte li,.fa-fq-pflege li,.fa-fq-gegen li{
  position:relative;padding-left:30px;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.66;color:#DAD6C8;
}
.fa-fq-schritte{counter-reset:fq}
.fa-fq-schritte li{counter-increment:fq}
.fa-fq-schritte li::before{
  content:counter(fq,decimal-leading-zero);
  position:absolute;left:0;top:.12em;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.1em;color:#A8AC95;
}
.fa-fq-pflege li::before,.fa-fq-gegen li::before{
  content:"";position:absolute;left:6px;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--salbeinebel);
}
.fa-fq-gegen li{padding-left:22px}
.fa-fq-gegen li::before{left:0}

.fa-fq-weiter{
  display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none;
}
.fa-fq-weiter a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border:1px solid rgba(231,228,214,.22);border-radius:999px;padding:7px 14px;
  color:#E0DCCE;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.fa-fq-weiter a::after{content:"→";font-size:12px;letter-spacing:0}
.fa-fq-weiter a:hover{border-color:var(--fq-linie-hell);background:rgba(231,220,201,.08);
  color:var(--creme)}

/* -------------------------------------------------------- Kein Treffer */
.fa-fq-leer{
  text-align:center;padding:clamp(40px,7vw,80px) 24px;
}
.fa-fq-leer[hidden]{display:none}
.fa-fq-leer p{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.6vw,26px);line-height:1.4;color:var(--mondlicht);margin:0 0 10px;
}
.fa-fq-leer .fa-fq-leer-zu{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-style:normal;
  font-size:15.5px;color:#D6D2C4;margin:0 0 20px;
}

/* ================================================================== Abschluss */
.fa-fq-schluss{
  background:
    radial-gradient(70% 100% at 50% 0%,rgba(86,94,76,.30) 0%,rgba(86,94,76,0) 70%),
    linear-gradient(180deg,#1F211C 0%,#232323 100%);
  padding:clamp(48px,7vw,90px) 0;text-align:center;
  border-top:1px solid var(--fq-linie);
}
.fa-fq-schluss .fa-fq-ober{justify-content:center}
.fa-fq-schluss h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.014em;
  font-size:clamp(26px,4.4vw,50px);line-height:1.02;margin:0 0 14px;color:var(--creme);
}
.fa-fq-schluss-text{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.72;color:#DAD6C8;margin:0 auto 26px;max-width:36em;
}
/* ================================================================= Bewegung */
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-fq-karte[open] .fa-fq-antwort{
    animation:fq-auf .42s cubic-bezier(.22,.9,.3,1) both;
  }
  body:not(.rm) .fa-fq-karte:hover{transform:translateY(-1px)}
}
@keyframes fq-auf{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fa-fq-karte[open] .fa-fq-antwort{animation:none}
}

/* ================================================================== Schmal */
@media (max-width:720px){
  .fa-fq-werkzeug{position:static}
  .fa-fq-werkzeug-innen{gap:10px}
  .fa-fq-schalter{flex:1 1 auto;text-align:center}
  .fa-fq-bkopf{gap:12px}
  .fa-fq-kopf{gap:12px;padding:15px 16px}
  .fa-fq-nr{min-width:2em}
  .fa-fq-antwort{padding:0 16px 18px 16px}
  .fa-fq-marken{gap:6px}
  .fa-fq-marke{font-size:11.5px;padding:7px 12px}
}