/* Forest Air — Zubehör
   ===========================================================================
   Die Seite war der schwächste Punkt der ganzen Website: englischer Text auf
   der deutschen Seite, 100 bis 140 px Luft zwischen jeder Zeile (jede Zeile
   stand in einem eigenen .fa-text-Halter), ein Aufzählungspunkt als eigener
   Absatz, drei Überschriften ohne ihren Text und eine h2 mit 14 px.

   Sie wird jetzt vollständig gebaut (zubehoer_seite in 04_bauen.py), der
   Inhalt liegt in inh.ZUBEHOER, und dort steht auch, woher jede einzelne
   Angabe stammt. Hier steht nur, wie es aussieht.

   Drei Sachen, die hier bewusst so sind:

   * Die Seite teilt sich mit FAQ, Handbüchern und Erfahrungen die Kleinteile
     aus seitenteile.css (.fa-fq-ober, .fa-fq-auf, .fa-fq-tat, .fa-fq-zweit).
     Ein viertes Mal dieselbe Oberzeile zu bauen hiesse, dass beim nächsten
     Mal eine der vier aus der Reihe fällt.
   * Die beiden Filterfotos liegen auf schwarzem Grund. Sie bekommen deshalb
     keinen hellen Rahmen, sondern verschmelzen mit der Karte — ein Kasten
     drumherum würde die Freisteller als Rechteck sichtbar machen.
   * Alles, was aus einer Quelle zitiert wird (Handbuch, Pflegerhythmus),
     steht in einem eigenen, abgesetzten Kasten. Damit ist auf einen Blick zu
     sehen, was Beleg ist und was Fliesstext.
   =========================================================================== */

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

/* Kopf einer Sektion — überall gleich aufgebaut */
.fa-zb-kopf{margin:0 0 clamp(24px,3.4vw,38px)}
.fa-zb-kopf 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-zb-zeile{
  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;max-width:34em;
}

/* ================================================================== Auftakt */
.fa-zb-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-zb-hero .fa-fq-ober{justify-content:center}
.fa-zb-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-zb-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-zb-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-zb-vor{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.72;color:#DAD6C8;margin:0 auto;max-width:40em;
}

/* Sprungmarken. flex-wrap ist Pflicht: bei 390 px passen vier Marken nicht in
   eine Zeile, und ohne Umbruch schiebt die vierte die Seite nach rechts. */
.fa-zb-anker{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(24px,3.4vw,36px) auto 0;max-width:44em;
}
.fa-zb-anker a{
  display:inline-flex;align-items:center;text-decoration:none;
  border:1px solid rgba(231,228,214,.22);border-radius:999px;padding:10px 18px;
  color:#DDD9CD;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.fa-zb-anker a:hover,.fa-zb-anker a:focus-visible{
  border-color:var(--zb-linie-hell);color:var(--creme);background:rgba(231,220,201,.08);
}

/* ============================================================= Lieferumfang */
.fa-zb-lief{
  background:linear-gradient(180deg,#212320 0%,#232323 100%);
  padding:clamp(38px,5.5vw,68px) 0;
  border-top:1px solid var(--zb-linie);
}
.fa-zb-lief-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.fa-zb-lief-liste li{
  background:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  border:1px solid var(--zb-linie);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:6px;
}
.fa-zb-lief-nr{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.22em;color:#A8AC95;
}
.fa-zb-lief-name{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-weight:600;
  font-size:clamp(16px,1.8vw,19px);line-height:1.3;color:var(--creme);
}
.fa-zb-lief-text{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;color:#D6D2C4;
}

/* ============================================================ Kanülen/Filter */
.fa-zb-teil{
  background:linear-gradient(180deg,#232323 0%,#1F211C 100%);
  padding:clamp(38px,5.5vw,72px) 0;
  border-top:1px solid var(--zb-linie);
  scroll-margin-top:calc(var(--kopfhoehe) + 20px);
}
.fa-zb-text{margin:0 0 clamp(24px,3.4vw,34px);max-width:44em}
.fa-zb-text p{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.72;color:#DAD6C8;margin:0 0 12px;
}
.fa-zb-text p:last-child{margin-bottom:0}
.fa-zb-text b{color:var(--creme);font-weight:600}

.fa-zb-raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;
}
.fa-zb-karte{
  background:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  border:1px solid var(--zb-linie);border-radius:16px;padding:22px 20px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.fa-zb-karte:hover{border-color:rgba(231,220,201,.26)}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-zb-karte:hover{transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(0,0,0,.35)}
}
.fa-zb-karte h3{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mondlicht);margin:0 0 12px;padding:0 0 12px;
  border-bottom:1px solid var(--zb-linie);
}
.fa-zb-karte p{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.65;color:#D6D2C4;margin:0;
}

/* Belegkasten: was wörtlich aus dem Handbuch kommt */
.fa-zb-quelle{
  margin:clamp(22px,3vw,32px) 0 0;
  background:rgba(231,220,201,.045);
  border:1px solid var(--zb-linie);border-left:3px solid var(--mondlicht);
  border-radius:12px;padding:20px 22px;
}
.fa-zb-quelle h3{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mondlicht);margin:0 0 12px;
}
.fa-zb-quelle ul{margin:0;padding:0;list-style:none}
.fa-zb-quelle li{
  position:relative;padding-left:20px;margin:0 0 8px;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.62;color:#D6D2C4;
}
.fa-zb-quelle li:last-child{margin-bottom:0}
.fa-zb-quelle li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:1px;background:var(--mondlicht);opacity:.75;
}

/* Filterkarten mit Foto. Die Freisteller liegen auf Schwarz — kein Rahmen,
   kein heller Grund, sonst steht das Rechteck des Fotos im Bild. */
.fa-zb-fraster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;
}
.fa-zb-fkarte{
  background:linear-gradient(180deg,#262822 0%,#1D1F1A 100%);
  border:1px solid var(--zb-linie);border-radius:16px;
  padding:16px 20px 22px;text-align:center;
}
.fa-zb-fkarte img{
  display:block;width:100%;max-width:360px;height:auto;margin:0 auto 12px;
}
.fa-zb-fkarte h3{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-weight:600;
  font-size:clamp(16px,1.8vw,19px);line-height:1.3;color:var(--creme);margin:0 0 6px;
}
.fa-zb-fkarte p{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;color:#D6D2C4;margin:0;
}

.fa-zb-hinweis{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;line-height:1.65;color:#B4B8A1;margin:20px 0 0;max-width:46em;
}

/* ================================================================== Pflege */
.fa-zb-pflege{
  background:linear-gradient(180deg,#1F211C 0%,#232323 100%);
  padding:clamp(38px,5.5vw,72px) 0;
  border-top:1px solid var(--zb-linie);
  scroll-margin-top:calc(var(--kopfhoehe) + 20px);
}
.fa-zb-pfl-liste{list-style:none;margin:0;padding:0}
.fa-zb-pfl-liste li{
  display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:8px 28px;
  padding:16px 0;border-top:1px solid var(--zb-linie);
}
.fa-zb-pfl-liste li:last-child{border-bottom:1px solid var(--zb-linie)}
.fa-zb-pfl-wann{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mondlicht);padding-top:.22em;
}
.fa-zb-pfl-was{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.7;color:#DAD6C8;
}

/* ============================================================ Ergänzungen */
.fa-zb-erg{
  background:linear-gradient(180deg,#232323 0%,#1E201B 100%);
  padding:clamp(38px,5.5vw,72px) 0;
  border-top:1px solid var(--zb-linie);
  scroll-margin-top:calc(var(--kopfhoehe) + 20px);
}
.fa-zb-erg-block{
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);align-items:center;
  padding:clamp(22px,3vw,32px) 0;
}
.fa-zb-erg-block+.fa-zb-erg-block{border-top:1px solid var(--zb-linie)}
.fa-zb-erg-dreh .fa-zb-erg-bild{order:2}
.fa-zb-erg-bild{margin:0}
.fa-zb-erg-bild img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:14px;border:1px solid var(--zb-linie);
}
.fa-zb-erg-text h3{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(22px,3.2vw,34px);line-height:1.04;margin:0 0 8px;color:var(--creme);
}
.fa-zb-erg-zeile{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(16px,1.9vw,20px);line-height:1.4;color:var(--mondlicht);margin:0 0 16px;
}
.fa-zb-schritte{
  margin:0 0 14px;padding:0;list-style:none;counter-reset:zb;
}
.fa-zb-schritte li{
  counter-increment:zb;position:relative;padding-left:32px;margin:0 0 9px;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.62;color:#DAD6C8;
}
.fa-zb-schritte li::before{
  content:counter(zb,decimal-leading-zero);position:absolute;left:0;top:.2em;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.08em;color:var(--mondlicht);
}
.fa-zb-schritte b{color:var(--creme);font-weight:600}
.fa-zb-erg-hinweis{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;line-height:1.65;color:#B4B8A1;margin:0;
}

/* =============================================================== Abschluss */
.fa-zb-schluss{
  background:
    radial-gradient(70% 100% at 50% 0%,rgba(86,94,76,.30) 0%,rgba(86,94,76,0) 70%),
    linear-gradient(180deg,#1E201B 0%,#232323 100%);
  padding:clamp(48px,7vw,90px) 0;text-align:center;
  border-top:1px solid var(--zb-linie);
}
.fa-zb-schluss .fa-fq-ober{justify-content:center}
.fa-zb-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-zb-schluss h2 em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:0;color:var(--mondlicht);font-size:1.06em;
}
.fa-zb-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;
}
.fa-zb-mail{margin:22px 0 0}
.fa-zb-mail a{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:13px;letter-spacing:.1em;color:var(--mondlicht);text-decoration:none;
  border-bottom:1px solid rgba(231,220,201,.34);padding-bottom:2px;
}
.fa-zb-mail a:hover,.fa-zb-mail a:focus-visible{color:var(--creme);border-bottom-color:var(--creme)}

/* =================================================================== Schmal */
@media (max-width:900px){
  .fa-zb-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fa-zb-lief-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fa-zb-erg-block{grid-template-columns:minmax(0,1fr)}
  .fa-zb-erg-dreh .fa-zb-erg-bild{order:0}
}
@media (max-width:640px){
  .fa-zb-raster,.fa-zb-fraster,.fa-zb-lief-liste{grid-template-columns:minmax(0,1fr)}
  .fa-zb-pfl-liste li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .fa-zb-karte,.fa-zb-fkarte{padding:18px 16px}
  .fa-zb-quelle{padding:18px 16px}
  .fa-zb-anker a{padding:9px 14px;letter-spacing:.12em}
}