/* Forest Air — Handbücher
   ===========================================================================
   Eine Downloadseite hat eine einzige Aufgabe: klar machen, was jemand
   bekommt, BEVOR er tippt. Welches Gerät, welche Sprache, wie groß, wie viele
   Seiten, was drinsteht. Vorher stand hier viermal "PDF-Dokument"
   untereinander.

   Zwei Sachen, die hier bewusst so sind:

   * Die Videos liegen als <video preload="none" poster="…"> da. Der Browser
     zeigt das Standbild und seinen eigenen Abspielknopf; die 61 bis 82 MB
     werden erst geladen, wenn jemand wirklich drückt. Deshalb braucht diese
     Seite kein eigenes JavaScript.
   * Das Inhaltsverzeichnis steckt in einem <details>. Es ist damit ohne
     Skript aufklappbar, per Tastatur bedienbar, und es macht die Karte nicht
     doppelt so hoch, nur weil zwölf Kapitel drinstehen.
   =========================================================================== */

.fa-hb{
  --hb-linie:rgba(231,228,214,.13);
  --hb-linie-hell:rgba(231,220,201,.34);
  position:relative;
}
.fa-hb-innen{max-width:1080px;margin:0 auto;padding:0 24px}

/* ================================================================== Auftakt */
.fa-hb-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(40px,5vw,64px);
  text-align:center;
}
.fa-hb-hero .fa-fq-ober{justify-content:center}
.fa-hb-hero h1{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(34px,7vw,80px);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-hb-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-hb-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 16px;max-width:26em;
}
.fa-hb-vor{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.72;color:#DAD6C8;margin:0 auto;max-width:40em;
}

/* ================================================================== Geräte */
.fa-hb-geraet{
  background:linear-gradient(180deg,#212320 0%,#232323 45%,#1F211C 100%);
  padding:clamp(38px,5.5vw,72px) 0;
  scroll-margin-top:calc(var(--kopfhoehe) + 20px);
}
.fa-hb-geraet+.fa-hb-geraet{border-top:1px solid var(--hb-linie)}
.fa-hb-gkopf{text-align:center;margin:0 0 clamp(26px,4vw,44px)}
.fa-hb-gkopf .fa-fq-ober{justify-content:center}
.fa-hb-gkopf h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(28px,5vw,54px);line-height:1;margin:0 0 12px;color:var(--creme);
}
.fa-hb-gzeile{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(17px,2.1vw,21px);line-height:1.42;color:var(--mondlicht);
  margin:0 auto;max-width:30em;
}

/* Gruppenüberschrift: Handbuch als PDF / Videoanleitung */
/* flex-wrap ist hier Pflicht, nicht Geschmack: bei 390 px passen
   "HANDBUCH ALS PDF" und "HERUNTERLADEN UND IN RUHE LESEN" nicht in eine
   Zeile, und ohne Umbruch schiebt die zweite Beschriftung die Seite 42 px
   nach rechts hinaus. */
.fa-hb-gruppe{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  margin:clamp(26px,3.6vw,40px) 0 16px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:#C4C7B2;
}
.fa-hb-gruppe span{flex:0 1 auto;min-width:0}
.fa-hb-gruppe i{
  font-style:normal;color:#A8AC95;letter-spacing:.14em;font-size:11px;
  flex:0 1 auto;min-width:0;
}
.fa-hb-gruppe::after{
  content:"";flex:1 1 auto;height:1px;background:var(--hb-linie);
}

.fa-hb-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;
}

/* =================================================================== Karten */
.fa-hb-karte{
  background:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  border:1px solid var(--hb-linie);border-radius:16px;
  padding:20px 20px 22px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.fa-hb-karte:hover{border-color:rgba(231,220,201,.26)}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-hb-karte:hover{transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(0,0,0,.35)}
}

.fa-hb-marke{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.fa-hb-sprache{
  border:1px solid rgba(231,220,201,.38);border-radius:999px;padding:4px 11px;
  color:var(--mondlicht);
}
.fa-hb-typ{color:#A8AC95;letter-spacing:.22em}

.fa-hb-name{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-weight:600;
  font-size:clamp(16px,1.8vw,19px);line-height:1.35;color:var(--creme);margin:0 0 8px;
}
.fa-hb-name em{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-weight:400;font-size:1.02em;color:var(--mondlicht);margin-top:2px;
}
.fa-hb-fakten{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.1em;color:#B4B8A1;margin:0 0 14px;
}
.fa-hb-fakten span{opacity:.55;margin:0 4px}

/* Inhaltsverzeichnis */
.fa-hb-inhalt{margin:0 0 16px;border-top:1px solid var(--hb-linie);padding-top:12px}
.fa-hb-inhalt summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#D2CFC0;
}
.fa-hb-inhalt summary::-webkit-details-marker{display:none}
.fa-hb-inhalt summary::after{
  content:"";width:7px;height:7px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s ease;
}
.fa-hb-inhalt[open] summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.fa-hb-inhalt summary:hover{color:var(--creme)}
.fa-hb-inhalt summary:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
.fa-hb-inhalt ol{
  margin:12px 0 0;padding:0 0 0 2px;list-style:none;counter-reset:hb;
  columns:2;column-gap:22px;
}
.fa-hb-inhalt li{
  counter-increment:hb;position:relative;padding-left:26px;margin:0 0 7px;
  break-inside:avoid;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.5;color:#D6D2C4;
}
.fa-hb-inhalt li::before{
  content:counter(hb,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.08em;color:#A8AC95;
}

/* Herunterladen */
.fa-hb-knopf{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--mondlicht);color:var(--nachthimmel);
  border-radius:999px;padding:12px 22px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:transform .25s ease,box-shadow .25s ease;
}
.fa-hb-knopf:hover{box-shadow:0 10px 26px rgba(231,220,201,.24)}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-hb-knopf:hover{transform:translateY(-1px)}
}
.fa-hb-hinweis{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:13px;line-height:1.55;color:#B4B8A1;margin:12px 0 0;
}

/* Video */
.fa-hb-film{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:12px;background:#15170F;border:1px solid var(--hb-linie);
  margin:0 0 14px;display:block;
}
.fa-hb-video .fa-hb-fakten{margin-bottom:0}
/* Der Fokusrahmen des Browsers ist auf <video> nicht verlaesslich sichtbar —
   hier wird er ausdruecklich gesetzt. */
.fa-hb-film:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}

.fa-hb-fehlt p{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.7;color:#DAD6C8;margin:0;
}

/* ================================================================ Abschluss */
.fa-hb-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(--hb-linie);
}
.fa-hb-schluss .fa-fq-ober{justify-content:center}
.fa-hb-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-hb-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:38em;
}

/* =================================================================== Schmal */
@media (max-width:820px){
  .fa-hb-raster{grid-template-columns:minmax(0,1fr)}
  .fa-hb-inhalt ol{columns:1}
}
@media (max-width:520px){
  .fa-hb-karte{padding:17px 16px 18px}
  .fa-hb-gruppe{gap:10px}
}