/* Forest Air — Bewegungs- und Feinschliffebene
   Ergaenzt rahmen.css. Alles hier ist additiv: nimmt man diese Datei heraus,
   bleibt eine vollstaendige, statische Seite zurueck. */

:root{
  --e-weich:cubic-bezier(.22,.61,.36,1);
  --e-satt:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------- Einblenden */
/* Maske statt clip-path — siehe Kommentar in motion.js */
.rv{
  -webkit-mask-image:linear-gradient(180deg,#000 0 100%);
          mask-image:linear-gradient(180deg,#000 0 100%);
  -webkit-mask-size:100% 0%;  mask-size:100% 0%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0;  mask-position:0 0;
  opacity:0;
  transform:translateY(22px);
  transition:mask-size 1.05s var(--e-satt),
             -webkit-mask-size 1.05s var(--e-satt),
             opacity .8s var(--e-weich),
             transform .95s var(--e-satt);
}
.rv.ein{
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  opacity:1; transform:none;
}
body.rm .rv{-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:1;transform:none;transition:none}

/* Die Wix-Embeds bringen ihr EIGENES Aufblenden mit: ein Element startet auf
   opacity:0 und bekommt per IntersectionObserver die Klasse "in". Das ist
   Bewegung, und Bewegung muss abbestellbar sein — sonst bleibt bei
   abgeschalteter Bewegung schlicht ein Loch stehen. Gemessen: auf
   produkt-home und produkt-pro blieb der ganze Videoabschnitt "Gesehen von
   Ben Greenfield" unsichtbar, 448 px Leere mitten auf der Seite.
   !important, weil die Embed-Regeln ueber eine id gesetzt sind
   (#blk-comp-… .video-wrap) und jede Klassenregel sonst verliert. */
body.rm .video-wrap,
body.rm .video-bio,
body.rm .col-img,
body.rm .col-txt,
body.rm .f-card,
body.rm .clip,
body.rm .copy{opacity:1!important;transform:none!important;transition:none!important}

/* ---------------------------------------------------------- Fortschritt */
.fa-fortschritt{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
  background:rgba(231,228,214,.07);
}
.fa-fortschritt i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--salbeinebel),var(--mondlicht));
  will-change:transform;
}

/* ------------------------------------------------------- Kopf: einziehen */
.fa-kopf{transition:background .3s ease,border-color .3s ease,transform .42s var(--e-satt)}
.fa-kopf.weg{transform:translateY(-101%)}
body.rm .fa-kopf.weg{transform:none}

/* ------------------------------------------------------------------ Kopf
   Groesseres Zeichen, technischerer Aufbau: eine Haarlinie trennt Marke und
   Navigation, die Sprachwahl ist ein Schalter statt einer Pille, der
   Hauptknopf traegt eine Marke fuer "oeffnet ausserhalb". */
.fa-marke{flex-direction:row;align-items:center}
/* 34 px Höhe ergaben beim Wortzeichen 205 px Breite — ein Fünftel der
   ganzen Inhaltsspalte nur für das Logo. Das war einer der Gründe,
   warum die Kopfzeile 176 px über die Spalte hinauslief (15.08.
   gemessen). Bei 28 px sind es 168, und lesbar bleibt es allemal:
   der gescrollte Zustand steht ohnehin schon bei 27. */
.fa-marke-bild{
  display:block;height:28px;width:auto;
  transition:height .35s var(--e-satt),opacity .3s ease,filter .3s ease;
}
.fa-kopf.gescrollt .fa-marke-bild{height:24px}
.fa-marke:hover .fa-marke-bild{opacity:.9;filter:drop-shadow(0 0 14px rgba(231,220,201,.35))}
.fa-marke-claim{display:none}

.fa-kopf-linie{
  width:1px;align-self:stretch;margin:16px 4px 16px 8px;flex:0 0 auto;
  background:linear-gradient(180deg,transparent,rgba(231,228,214,.22),transparent);
}
@media (max-width:1260px){.fa-kopf-linie{display:none}}

/* Sprachwahl als Schalter */
.fa-sprachwahl{
  display:flex;align-items:stretch;border:1px solid rgba(161,165,140,.34);
  border-radius:999px;overflow:hidden;font-size:11px;letter-spacing:.12em;
}
.fa-sprachwahl span,.fa-sprachwahl a{
  padding:5px 10px;line-height:1.5;text-decoration:none;transition:background .25s ease,color .25s ease;
}
.fa-sprachwahl .an{background:rgba(231,228,214,.14);color:var(--creme)}
.fa-sprachwahl a{color:var(--salbeinebel)}
.fa-sprachwahl a:hover{background:rgba(231,228,214,.09);color:var(--creme)}

/* Der Hauptknopf zeigt, dass er die Seite verlaesst */
.fa-termin{display:inline-flex;align-items:center;gap:8px}
.fa-termin svg{opacity:.55;transition:transform .3s var(--e-satt),opacity .3s ease}
.fa-termin:hover svg{transform:translate(2px,-2px);opacity:.9}

/* Die Kopfleiste bekommt unten eine feine Fortschrittskante */
.fa-kopf::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  transform:scaleX(var(--anteil,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--salbeinebel),var(--mondlicht));
  opacity:.85;transition:transform .12s linear;
}
.fa-kopf{position:sticky}

/* Navigation: die Linie waechst aus der Mitte statt von links */
.fa-nav a::after{left:50%;right:50%;transition:left .3s var(--e-satt),right .3s var(--e-satt)}
.fa-nav a:hover::after,.fa-nav a.aktiv::after{left:0;right:0}

.fa-cta{position:relative;overflow:hidden;isolation:isolate}
.fa-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55),transparent 80%);
  transform:translateX(-120%);
}
.fa-cta:hover::before{transform:translateX(120%);transition:transform .75s var(--e-weich)}
body.rm .fa-cta::before{display:none}

/* ------------------------------------------------------ Kapitelverzeichnis */
.fa-kapitel{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;
  /* Eigener Grund: der Inhalt zieht darunter durch — mal hell, mal dunkel.
     Ohne diesen Grund misst man hier Kontraste um 1 : 1. */
  background:color-mix(in srgb,#1b1b1b 82%,transparent);
  backdrop-filter:blur(9px);
  border:1px solid rgba(231,228,214,.10);
  border-radius:12px;padding:12px 8px;
}
.fa-kapitel ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fa-kapitel button{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;cursor:pointer;padding:6px 8px;border-radius:7px;
  color:var(--salbeinebel);font:inherit;font-size:11.5px;letter-spacing:.05em;
  text-align:left;transition:color .25s ease,background .25s ease;
}
.fa-kapitel-nr{font-variant-numeric:tabular-nums;opacity:.55;font-size:10px}
.fa-kapitel-name{
  /* Was ein- und ausblendet, gehoert aus dem Fluss — sonst wandern die
     Ziffern beim Scrollen seitlich hin und her, weil die Namen verschieden
     breit sind. */
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .4s var(--e-satt),opacity .3s ease;
}
.fa-kapitel:hover .fa-kapitel-name{max-width:180px;opacity:1}
.fa-kapitel button:hover{color:var(--creme);background:rgba(231,228,214,.07)}
.fa-kapitel button.an{color:var(--mondlicht)}
.fa-kapitel button.an .fa-kapitel-nr{opacity:1}
@media (max-width:1099px){.fa-kapitel{display:none}}

/* ------------------------------------------------------------ Photonenfeld */
.fa-photonenfeld{
  position:relative;
  overflow:clip;                 /* 3D-Ueberhaenge duerfen die Seite nicht verbreitern */
  background:
    radial-gradient(72% 58% at 68% 42%, rgba(58,60,52,.55) 0%, rgba(35,35,35,0) 62%),
    radial-gradient(120% 92% at 30% 8%, #2c2c2c 0%, var(--nachthimmel) 58%);
  border-bottom:1px solid rgba(231,228,214,.08);
  padding:clamp(40px,6vh,78px) 0 0;
}
.pf-leinwand{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.fa-hero-innen{
  position:relative;z-index:2;
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.fa-hero-text{position:relative;isolation:isolate}
/* Eigener Grund unter der Schrift statt Hoffnung: das Feld dahinter ist mal
   dicht, mal leer — ohne Schleier schwankt der Textkontrast mit der Dichte. */
.fa-hero-text::before{
  content:"";position:absolute;z-index:-1;
  left:-8%;right:-16%;top:-14%;bottom:-16%;
  background:radial-gradient(62% 62% at 34% 48%,
             rgba(26,26,26,.9) 0%, rgba(30,30,30,.6) 48%, rgba(35,35,35,0) 80%);
  pointer-events:none;
}
/* Das Band sass mit 26 px Abstand zu weit ueber der Zeile und war mit
   10,5 px die kleinste Schrift der Seite. Jetzt sitzt es direkt ueber
   der Ueberschrift und ist eine Spur groesser — 19.08. */
.fa-hero-band{
  font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--salbeinebel);margin:0 0 12px;
  display:flex;align-items:center;gap:16px;
}
.fa-hero-band::after{
  content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,rgba(161,165,140,.5),transparent);
}
.fa-pf-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:300;letter-spacing:-.005em;
  font-size:clamp(40px,6.2vw,78px);line-height:.98;margin:0 0 22px;
}
.fa-pf-titel em{
  font-family:"DM Serif Display","Cormorant Garamond",Georgia,serif;
  font-style:italic;font-weight:400;color:var(--mondlicht);
  padding-right:.06em;
}
.fa-hero-claim{
  font-size:clamp(16px,1.5vw,20px);color:var(--creme);margin:0 0 18px;
  letter-spacing:.01em;
}
.fa-hero-claim em{
  font-family:"DM Serif Display",Georgia,serif;font-style:italic;
  color:var(--mondlicht);
}
/* Der Hero-Absatz lag bei 15 px Mulish in Salbeinebel, waehrend der
   vergleichbare Fliesstext weiter unten ("Ohne Nahrung überleben wir Wochen …")
   bei 20 px Barlow in Creme steht. Gemessen, nicht geschaetzt — jetzt gleich.
   Nach unten skaliert er mit, damit er auf dem Handy nicht die halbe Seite
   frisst. */
.fa-pf-text{
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.65;
  color:rgba(245,242,235,.92);
  max-width:34ch;margin:0 0 32px;
}
.fa-pf-knoepfe{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.fa-zweit{
  color:var(--creme);text-decoration:none;font-size:13.5px;letter-spacing:.05em;
  border-bottom:1px solid rgba(231,228,214,.35);padding-bottom:3px;
  transition:border-color .25s ease,color .25s ease;
}
.fa-zweit:hover{border-color:var(--mondlicht);color:var(--mondlicht)}

/* Das Geraet: Quelle der Welle, deshalb mit eigenem Lichtsaum */
.fa-hero-bild{
  position:relative;margin:0;justify-self:end;width:100%;max-width:560px;
  cursor:pointer;
}
.fa-hero-bild::before{
  content:"";position:absolute;inset:-14% -10% -18% -10%;z-index:0;
  background:radial-gradient(50% 50% at 44% 62%,
             rgba(231,220,201,.22) 0%, rgba(231,220,201,.06) 42%, transparent 72%);
  filter:blur(6px);pointer-events:none;
}
.fa-hero-bild img{
  position:relative;z-index:1;width:100%;border-radius:6px;
  /* Der Ausschnitt holt das Geraet ins Bild — im Original sitzt es unten und
     die Person nimmt zwei Drittel der Flaeche ein. */
  aspect-ratio:5/4;object-fit:cover;object-position:52% 86%;height:auto;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
  transition:transform .9s var(--e-satt);
}
.fa-hero-bild:hover img{transform:translateY(-4px) scale(1.006)}
body.rm .fa-hero-bild:hover img{transform:none}

/* Untere Leiste: wofuer das Geraet gemacht ist, und was man im Feld sieht */
.fa-hero-unten{
  position:relative;z-index:2;max-width:var(--breite);margin:clamp(34px,5vh,64px) auto 0;
  padding:0 24px;
}
.fa-hero-fuer{
  display:flex;align-items:baseline;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  padding-bottom:22px;
}
.fa-hero-fuer-titel{
  margin:0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--salbeinebel);
}
.fa-hero-fuer ul{
  list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
}
.fa-hero-fuer li{display:flex;align-items:baseline;gap:9px}
.fa-hero-fuer b{font-size:15px;font-weight:500;color:var(--creme)}
.fa-hero-fuer span{font-size:12.5px;color:var(--salbeinebel)}

.fa-pf-legende{
  list-style:none;margin:0;padding:24px 0 30px;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  border-top:1px solid rgba(231,228,214,.09);
}
.fa-pf-legende li{position:relative;padding-left:20px}
.fa-pf-legende li::before{
  content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;
}
.fa-pf-legende .pf-l0::before{background:var(--salbeinebel);opacity:.62}
.fa-pf-legende .pf-l1::before{background:var(--creme);box-shadow:0 0 14px rgba(245,242,235,.6)}
.fa-pf-legende .pf-l2::before{background:var(--mondlicht);box-shadow:0 0 16px rgba(231,220,201,.65)}
.fa-pf-legende b{
  display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--creme);font-weight:500;margin-bottom:5px;
}
.fa-pf-legende span{display:block;color:var(--salbeinebel);font-size:12.5px;line-height:1.6}

@media (max-width:980px){
  .fa-hero-innen{grid-template-columns:1fr;gap:30px}
  .fa-hero-bild{justify-self:stretch;max-width:none;order:2}
  .fa-hero-text{order:1}
  .fa-hero-text::before{left:-10%;right:-10%}
}
@media (max-width:760px){
  .fa-pf-legende{grid-template-columns:1fr;gap:15px;padding-bottom:24px}
  .fa-photonenfeld{padding-top:28px}
  .fa-hero-fuer{gap:14px}
  .fa-hero-fuer ul{gap:16px}
  .fa-pf-titel{font-size:clamp(34px,10.5vw,52px)}
}

/* ----------------------------------------------------------- Seitenkopf */
.fa-seitenkopf{
  background:radial-gradient(110% 130% at 12% 0%,#2b2b2b 0%,var(--nachthimmel) 58%);
  border-bottom:1px solid rgba(231,228,214,.08);
}
.fa-seitenkopf-innen{max-width:var(--breite);margin:0 auto;padding:clamp(56px,8vw,104px) var(--rand)}
.fa-seitenkopf h1{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(30px,4.4vw,52px);line-height:1.08;margin:0 0 18px;max-width:18ch;
}
.fa-seitenkopf-text{color:var(--salbeinebel);line-height:1.75;max-width:56ch;margin:0;font-size:15px}

/* ------------------------------------------------------------- Vertrauen */
.fa-vertrauen{
  list-style:none;margin:0;padding:22px 24px;
  border-top:1px solid rgba(231,228,214,.09);
  border-bottom:1px solid rgba(231,228,214,.09);
  background:#1e1e1e;
}
.fa-vertrauen-innen{
  max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);display:grid;
  grid-template-columns:repeat(4,1fr);gap:18px 26px;
}
.fa-vertrauen li{display:flex;gap:11px;align-items:flex-start}
.fa-vertrauen svg{flex:0 0 auto;margin-top:2px;color:var(--salbeinebel)}
.fa-vertrauen b{display:block;font-size:13px;color:var(--creme);font-weight:500;margin-bottom:3px}
.fa-vertrauen a,.fa-vertrauen span{color:var(--salbeinebel);font-size:12px;line-height:1.55;text-decoration:none}
.fa-vertrauen a{border-bottom:1px solid rgba(161,165,140,.3)}
.fa-vertrauen a:hover{color:var(--creme);border-color:var(--creme)}
@media (max-width:900px){.fa-vertrauen-innen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fa-vertrauen-innen{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Gesprächsband */
.fa-band{
  position:relative;overflow:clip;
  background:linear-gradient(150deg,#20241d 0%,#2a2f26 46%,#1d1d1d 100%);
  border-top:1px solid rgba(231,228,214,.10);
}
.fa-band-innen{
  max-width:var(--breite);margin:0 auto;padding:clamp(46px,7vw,78px) var(--rand);
  display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:center;
}
.fa-band-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(24px,3.2vw,38px);line-height:1.16;margin:0 0 14px;max-width:20ch;
}
.fa-band-titel em{font-family:"DM Serif Display",Georgia,serif;font-style:italic;color:var(--mondlicht)}
.fa-band p{color:var(--salbeinebel);line-height:1.75;margin:0;max-width:48ch;font-size:14.5px}
.fa-band-tat{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.fa-band-tat .fa-cta{font-size:14px;padding:13px 26px}
.fa-band-kontakt{display:flex;flex-direction:column;gap:6px}
.fa-band-kontakt a{
  color:var(--creme);text-decoration:none;font-size:14px;
  display:flex;align-items:center;gap:9px;transition:color .25s ease
}
.fa-band-kontakt a:hover{color:var(--mondlicht)}
.fa-band-kontakt svg{color:var(--salbeinebel)}
@media (max-width:860px){
  .fa-band-innen{grid-template-columns:1fr;gap:26px}
}

/* --------------------------------------------------------- Feinschliff */
.fa-fuss-nav a{position:relative}
.fa-fuss-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--salbeinebel);transition:width .3s var(--e-satt);
}
.fa-fuss-nav a:hover::after{width:100%}

/* HIER STAND EINE ZWEITE, VOLLSTÄNDIGE .fa-bewegung-REGEL.
   -------------------------------------------------------------------
   Sie war ein Duplikat der Regel in rahmen.css — gleiche Spezifität,
   aber motion.css wird DANACH geladen, also hat sie gewonnen. Folge:
   der 44-px-Mindestwert für die Tippfläche auf dem Handy, der in
   rahmen.css sauber im Mobil-Block steht, ist seit dem Tag nie
   angekommen. Gemessen am 15.08. bei 390 px: 108 x 26 px statt der
   geforderten 44 px Höhe. Man sieht so etwas nicht, man misst es.
   Die Regel steht jetzt nur noch in rahmen.css. Bitte nicht wieder
   hier anlegen. */

/* Tastaturbedienung sichtbar machen — ohne Ring auf Mausklick */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--mondlicht);outline-offset:3px;border-radius:3px;
}

/* Bilder heben sich beim Zeigen leicht — eine Reaktion, nicht zwei */
.fa-bild img{transition:transform .8s var(--e-satt),filter .8s var(--e-weich)}
.fa-bild:hover img{transform:scale(1.014);filter:brightness(1.05)}
body.rm .fa-bild:hover img{transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .rv{-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:1;transform:none;transition:none}
  .fa-kopf.weg{transform:none}
}

/* Fuss: Logo statt Schriftzug */
.fa-fuss-bild{height:24px;width:auto;display:block;margin-bottom:10px}
.fa-fuss-marke{display:flex;flex-direction:column;align-items:flex-start}
.fa-fuss-marke p{margin:0 0 16px}

/* Der geklonte Hauptknopf im aufgeklappten Menue */
.fa-nav a.fa-nav-cta{
  /* Zwei Klassen, damit die Regel gegen .fa-nav a gewinnt — sonst erbt der
     Knopf die helle Schriftfarbe der Navigation und steht hell auf hell. */
  margin-top:18px;align-self:flex-start;border-bottom:0;
  color:var(--nachthimmel);opacity:1;text-align:center;padding:11px 22px;
}
.fa-nav a.fa-nav-cta::after{display:none}
@media (min-width:1261px){.fa-nav-cta{display:none}}

/* Produktseite: Kauf und Beratung nebeneinander */
.fa-produkt-tat{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fa-produkt-preis{align-items:baseline}

/* -------------------------------------------------------------- Galerie */
.fa-galerie{padding:clamp(46px,6vw,78px) 0}
.fa-galerie-kopf{
  max-width:var(--breite);margin:0 auto 26px;padding:0 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.fa-galerie-kopf h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(24px,3vw,34px);margin:0;line-height:1.1;
}
.fa-galerie-tasten{display:flex;gap:8px;flex:0 0 auto}
.fa-galerie-tasten button{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:none;border:1px solid rgba(161,165,140,.4);color:var(--creme);
  font-size:15px;line-height:1;transition:background .25s ease,border-color .25s ease;
}
.fa-galerie-tasten button:hover{background:rgba(231,228,214,.09);border-color:var(--salbeinebel)}
.fa-galerie-band{
  list-style:none;margin:0;padding:0 24px;display:flex;gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  max-width:calc(var(--breite) + 48px);margin-inline:auto;
}
.fa-galerie-band::-webkit-scrollbar{display:none}
.fa-galerie-band li{
  flex:0 0 clamp(230px,26vw,320px);scroll-snap-align:start;margin:0;
}
.fa-galerie-band img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:5px;display:block;
  transition:transform .8s var(--e-satt),filter .8s var(--e-weich);
  filter:brightness(.94);
}
.fa-galerie-band li:hover img{transform:translateY(-4px);filter:brightness(1.04)}
body.rm .fa-galerie-band{scroll-behavior:auto}
body.rm .fa-galerie-band li:hover img{transform:none;filter:none}

/* --------------------------------------------------------- Produktkarten */
.fa-karten{padding:clamp(46px,6vw,82px) 0}
.fa-karten-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-karten-innen h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(26px,3.4vw,40px);margin:0 0 12px;line-height:1.1;
}
.fa-karten-text{color:var(--salbeinebel);line-height:1.7;margin:0 0 34px;max-width:52ch;font-size:14.5px}
.fa-karten-innen ul{
  list-style:none;margin:0;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.fa-karte{
  background:#1e1e1e;border:1px solid rgba(231,228,214,.09);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .35s ease,transform .5s var(--e-satt);
}
.fa-karte:hover{border-color:rgba(161,165,140,.4);transform:translateY(-3px)}
body.rm .fa-karte:hover{transform:none}
.fa-karte > img{width:100%;aspect-ratio:16/10;object-fit:contain;display:block;
  background:radial-gradient(60% 70% at 50% 60%,#262626,#1b1b1b);padding:18px}
.fa-karte-text{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.fa-karte-text h3{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:21px;margin:0;letter-spacing:.01em;
}
.fa-karte-preis{margin:0;font-size:22px;color:var(--mondlicht)}
.fa-karte-text p{margin:0;color:var(--salbeinebel);line-height:1.65;font-size:13.5px}
.fa-karte-tat{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.fa-karte-tat .fa-cta{border:0;cursor:pointer;font-family:inherit;font-size:13px}

/* ------------------------------------------------------------- Beitraege */
.fa-beitraege{padding:clamp(30px,4vw,54px) 0}
.fa-beitraege-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-beitraege-innen ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fa-beitraege-innen li{border-top:1px solid rgba(231,228,214,.12)}
.fa-beitraege-innen li:last-child{border-bottom:1px solid rgba(231,228,214,.12)}
.fa-beitraege-innen a{
  display:block;padding:28px 0;text-decoration:none;color:inherit;
  transition:padding-left .4s var(--e-satt);
}
.fa-beitraege-innen a:hover{padding-left:14px}
body.rm .fa-beitraege-innen a:hover{padding-left:0}
.fa-beitraege-innen h3{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:clamp(19px,2.2vw,26px);margin:0 0 8px;color:var(--creme);
}
.fa-beitraege-innen p{margin:0 0 10px;color:var(--salbeinebel);line-height:1.7;max-width:66ch;font-size:14px}
.fa-beitrag-hin{font-size:12px;letter-spacing:.08em;color:var(--mondlicht)}
.fa-beitraege-hinweis{margin:22px 0 0;font-size:12px;color:var(--salbeinebel)}

/* --------------------------------------------------- Helle Sektionen
   Die Flaechenfarbe stammt aus einer MESSUNG der fertigen Seite, nicht aus
   den Wix-Design-Daten: dort steht mehrfach eine andere Farbe als die, die
   am Ende gerendert wird.

   Wichtig: hier wird KEINE Textfarbe pauschal gesetzt. Der erste Versuch tat
   das und stellte damit Bloecke, die ihren eigenen dunklen Grund mitbringen,
   dunkel auf dunkel — 1,0 : 1 an acht Stellen. Die Bloecke faerben sich
   selbst; die Sektion faerbt nur die Flaeche daneben. */
.fa-sektion.fa-hell > .fa-text{color:#3a3a3a}
.fa-sektion.fa-hell > .fa-text a{color:var(--forest)}
.fa-sektion.fa-hell > .fa-app{border-color:rgba(86,94,76,.35);color:var(--forest)}

/* Eigene Bausteine bringen ihren Grund selbst mit.
   Grund: die Produktkarten landeten in einer Sektion, deren Flaeche hell
   gemessen wurde — cremefarbene Schrift auf cremefarbenem Grund, 1,07 : 1.
   Ein Baustein darf sich nicht darauf verlassen, was um ihn herum liegt. */
.fa-karten,.fa-beitraege{background:var(--nachthimmel);color:var(--creme)}
.fa-karten-innen h2,.fa-beitraege-innen h3{color:var(--creme)}

/* HIER STAND EIN FEHLER VON MIR — als Mahnung dokumentiert.
   Die Messung meldete die beiden Quellenzeilen als "Nachthimmel auf
   Nachthimmel, 1,0 : 1". Ich habe sie daraufhin auf Creme gedreht. Falsch:
   .source-text und .source-note liegen ausschliesslich IM Overlay
   (.source-card), und das ist cremefarben. Dunkel war also richtig — nur
   war das Overlay zum Messzeitpunkt zugeklappt, und der Ausschnitt traf den
   dunklen Abschnitt dahinter. Mit der Aenderung war der Text im geoeffneten
   Zitatfenster unsichtbar.
   Lehre: einen Befund erst im Bild nachstellen, dann CSS anfassen. */

/* Gemessener Befund: der Zweitknopf "Get in Touch" auf der Erfahrungsseite
   steht in einem ausgemusterten Kupferton (#A67854) auf fast weissem Grund —
   3,64 : 1, also unter der Lesbarkeitsgrenze. Nach dem Kontrastgesetz der
   Marke gilt auf hellem Grund Forest #565E4C (6,06 : 1). */
#blk-comp-mor7yygu .cta-secondary{color:var(--forest) !important;
  border-color:rgba(86,94,76,.55) !important}

/* ============================================================== Feinschliff */

/* Kapitelanzeige: Fortschrittslinie, gefuellte Marke, Weg nach oben */
.fa-kapitel{padding:10px 8px 8px}
.fa-kapitel-linie{
  position:absolute;left:13px;top:14px;bottom:44px;width:1px;
  background:rgba(231,228,214,.14);border-radius:1px;overflow:hidden;
}
.fa-kapitel-linie::after{
  content:"";position:absolute;inset:0 0 auto 0;
  height:calc(var(--anteil,0) * 100%);
  background:linear-gradient(180deg,var(--salbeinebel),var(--mondlicht));
  transition:height .12s linear;
}
.fa-kapitel ol{position:relative;z-index:1}
.fa-kapitel button[data-zu]{position:relative;padding-left:16px}
.fa-kapitel button[data-zu]::before{
  content:"";position:absolute;left:1px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;
  background:var(--nachthimmel);box-shadow:0 0 0 1px rgba(231,228,214,.35);
  transition:background .3s ease,box-shadow .3s ease,transform .3s var(--e-satt);
}
.fa-kapitel button[data-zu].an::before{
  background:var(--mondlicht);box-shadow:0 0 0 1px var(--mondlicht),0 0 10px rgba(231,220,201,.55);
  transform:scale(1.25);
}
.fa-kapitel-hoch{
  display:flex;align-items:center;justify-content:center;width:100%;height:30px;
  margin-top:6px;background:none;border:0;border-top:1px solid rgba(231,228,214,.10);
  color:var(--salbeinebel);cursor:pointer;transition:color .25s ease;
}
.fa-kapitel-hoch:hover{color:var(--mondlicht)}

/* Lichthof am Zeiger — der leiseste Effekt der Seite, aber er passt zum Thema */
.fa-lichthof{
  position:fixed;left:0;top:0;width:520px;height:520px;pointer-events:none;z-index:1;
  background:radial-gradient(circle at center,
             rgba(231,220,201,.055) 0%, rgba(231,220,201,.022) 38%, transparent 68%);
  opacity:0;transition:opacity .5s ease;will-change:transform;
}
.fa-lichthof.an{opacity:1}
.fa-lichthof.aus{opacity:0}
body.rm .fa-lichthof{display:none}

/* Galerie: greifbar */
.fa-galerie-band{cursor:grab}
.fa-galerie-band.zieht{cursor:grabbing;scroll-snap-type:none}
.fa-galerie-band.zieht img{transform:none !important}
.fa-galerie-band:focus-visible{outline:2px solid var(--mondlicht);outline-offset:6px;border-radius:6px}

/* Hero: die Ebenen ziehen beim Scrollen unterschiedlich schnell weg */
.fa-hero-text,.fa-hero-bild,.fa-hero-unten{will-change:transform,opacity}

/* Knoepfe: spuerbarer Druckpunkt */
.fa-cta:active{transform:translateY(1px) scale(.985)}
.fa-zweit:active{opacity:.75}
body.rm .fa-cta:active{transform:none}

/* Aus dem Wix-Embed uebernommene Knoepfe sollen sich wie Knoepfe anfuehlen */
[data-nav]{transition:opacity .25s ease,transform .25s var(--e-satt)}
[data-nav]:hover{opacity:.86}
[data-nav]:active{transform:translateY(1px)}
body.rm [data-nav]:active{transform:none}

/* ------------------------------------------------------------- Vergleich */
.fa-vergleich{background:#1e1e1e;padding:clamp(46px,6vw,80px) 0;
  border-top:1px solid rgba(231,228,214,.09);border-bottom:1px solid rgba(231,228,214,.09)}
.fa-vergleich-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-vergleich-innen h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(24px,3.2vw,38px);margin:0 0 12px;line-height:1.1;color:var(--creme);
}
.fa-vergleich-text{color:var(--salbeinebel);line-height:1.7;margin:0 0 30px;max-width:58ch;font-size:14.5px}
.fa-vergleich-rolle{overflow-x:auto;scrollbar-width:thin}
.fa-vergleich table{width:100%;border-collapse:collapse;min-width:520px}
.fa-vergleich th,.fa-vergleich td{
  padding:14px 16px;text-align:left;font-weight:400;font-size:14px;
  border-bottom:1px solid rgba(231,228,214,.10);vertical-align:top;
}
.fa-vergleich thead th{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--salbeinebel);
  border-bottom:1px solid rgba(231,228,214,.2);
}
.fa-vergleich tbody th{color:var(--salbeinebel);width:32%}
.fa-vergleich td{color:var(--creme)}
.fa-vergleich .an{background:rgba(231,220,201,.06)}
.fa-vergleich thead .an{color:var(--mondlicht)}
.fa-vergleich tbody tr:last-child th,.fa-vergleich tbody tr:last-child td{border-bottom:0}
.fa-vergleich-fuss{margin:24px 0 0}

/* ------------------------------------------------------------ Einwände */
.fa-einwaende{padding:clamp(44px,6vw,76px) 0}
.fa-einwaende-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-einwaende-innen h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(22px,2.8vw,32px);margin:0 0 28px;color:var(--creme);
}
.fa-einwaende-innen ul{
  list-style:none;margin:0;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.fa-einwaende-innen li{border-top:1px solid rgba(231,228,214,.16);padding-top:16px}
.fa-einwaende-innen b{display:block;color:var(--creme);font-size:15px;font-weight:500;margin-bottom:8px}
.fa-einwaende-innen p{margin:0;color:var(--salbeinebel);line-height:1.7;font-size:13.5px}

/* -------------------------------------- Sechs Punkte (partner-mark) ----
   Auf der Seite von Mark Attwood stand unter dem Terminblock die nackte
   Überschrift "AFFORDABILITY" — der erste von sechs Punkten, deren übrige
   fünf beim Rückbau verlorengegangen waren. Sie sind wieder da und stehen
   jetzt als Raster, nicht als einzelne Zeile. Aufbau bewusst wie bei den
   Einwänden auf den Produktseiten: dieselbe Seite, dieselbe Sprache. */
.fa-mv{padding:clamp(44px,6vw,76px) 0}
.fa-mv-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-mv-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(22px,2.8vw,32px);margin:0 0 28px;color:var(--creme);
}
.fa-mv-liste{
  list-style:none;margin:0;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.fa-mv-liste li{border-top:1px solid rgba(231,228,214,.16);padding-top:16px}
.fa-mv-name{
  display:block;color:var(--creme);margin-bottom:8px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.fa-mv-text{margin:0;color:#C4C7B2;line-height:1.7;font-size:14.5px}
/* Bei 390 px bleiben nach dem Polster 342 px — 260 px Mindestbreite passen,
   aber zwei Spalten nicht. auto-fit erledigt das von selbst; die Zeile hier
   sorgt nur dafür, dass die Abstände auf dem Handy nicht auseinanderfallen. */
@media (max-width:520px){.fa-mv-liste{gap:20px}}
/* Es sind genau sechs Punkte. auto-fit macht daraus am Rechner vier plus zwei
   — die zweite Zeile bleibt halb leer und die Aufzählung wirkt abgerissen.
   Drei Spalten ergeben zwei volle Zeilen. */
@media (min-width:900px){.fa-mv-liste{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------- Kaufleiste */
.fa-kaufleiste{display:none}
@media (max-width:900px){
  .fa-kaufleiste{
    position:fixed;left:0;right:0;bottom:0;z-index:110;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(27,27,27,.97);backdrop-filter:blur(12px);
    border-top:1px solid rgba(231,228,214,.14);
  }
  .fa-kaufleiste b{display:block;font-size:13px;color:var(--creme);font-weight:500}
  .fa-kaufleiste span{display:block;font-size:15px;color:var(--mondlicht)}
  .fa-kaufleiste .fa-cta{border:0;cursor:pointer;font-family:inherit;font-size:13px;padding:11px 20px}
  body[data-seite^="produkt-"] .fa-fuss{padding-bottom:92px}
}

/* Gemessener Befund: der Knopf „Request Research Information" steht in Creme
   auf einer Sage-Fog-Fläche — 2,27 : 1. Das Kontrastgesetz der Marke sagt: auf
   einer hellen Fläche gehört Nachthimmel als Schrift, nicht Creme.
   (Auf einer Forest-Fläche wäre Moonlight richtig — hier ist die Fläche hell.) */
/* Nachgemessen: englisch stand der Knopf auf Sage Fog, deutsch nach der
   Farbkorrektur auf Forest — Nachthimmel darauf sind 2,32 : 1. Beide Sprachen
   bekommen deshalb dieselbe markenkonforme Kombination: Forest-Fläche mit
   Creme-Schrift, 6,06 : 1. */
#blk-comp-mp2t75xl .cta-button{
  background:var(--forest) !important;
  color:var(--creme) !important;
  font-weight:500;
}

/* Kopf auf dem Handy: das Zeichen bleibt gross genug zum Lesen, aber der
   Rest muss danebenpassen. Reihenfolge: Marke — Sprache — Korb — Menue.
   Der Menueknopf gehoert nach ganz rechts unter den Daumen, nicht neben
   das Logo. */
@media (max-width:900px){
  .fa-marke-bild,.fa-kopf.gescrollt .fa-marke-bild{height:27px}
  .fa-burger{order:4;margin-left:6px}
  .fa-kopf-rechts{order:3;margin-left:auto;gap:10px}
  .fa-sprachwahl{font-size:10px}
  .fa-sprachwahl span,.fa-sprachwahl a{padding:4px 8px}
}
@media (max-width:400px){
  .fa-marke-bild,.fa-kopf.gescrollt .fa-marke-bild{height:23px}
  .fa-kopf-innen{gap:10px}
  .fa-kopf-rechts{gap:8px}
}

/* ------------------------------------------------------ Stationen der Grafik
   Gedaempft wird ueber Deckkraft, nicht ueber display — die Grafik darf beim
   Umschalten nicht springen. */
.fa-stationen .fa-station-aus{opacity:.17;transition:opacity .45s var(--e-weich)}
.fa-stationen text,.fa-stationen rect,.fa-stationen circle,.fa-stationen path,
.fa-stationen polygon,.fa-stationen line,.fa-stationen ellipse{
  transition:opacity .45s var(--e-weich);
}
body.rm .fa-stationen *{transition:none}

.fa-stationsleiste{
  max-width:var(--breite);margin:22px auto 0;padding:0 24px;
}
.fa-stationsleiste-titel{
  margin:0 0 12px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--salbeinebel);
}
.fa-stationsleiste ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.fa-stationsleiste button{
  display:flex;align-items:baseline;gap:8px;cursor:pointer;font:inherit;
  padding:9px 14px;border-radius:999px;
  border:1px solid rgba(161,165,140,.30);background:transparent;
  color:var(--salbeinebel);font-size:12.5px;letter-spacing:.03em;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.fa-stationsleiste button:hover{border-color:rgba(231,228,214,.55);color:var(--creme)}
.fa-stationsleiste button.an{
  background:var(--mondlicht);border-color:var(--mondlicht);color:#232323;
}
.fa-stationsleiste button.an .fa-st-nr{opacity:.7}
.fa-st-nr{font-variant-numeric:tabular-nums;font-size:10px;opacity:.6;letter-spacing:.1em}
.fa-st-alle{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.fa-stationsleiste-hinweis{
  margin:12px 0 0;font-size:11.5px;color:var(--salbeinebel);opacity:.75;
}
/* Auf hellem Grund kehren sich die Werte um — sonst misst man hier 1,6 : 1. */
.fa-hell .fa-stationsleiste-titel,
.fa-hell .fa-stationsleiste-hinweis,
.fa-hell .fa-stationsleiste button{color:#4A5142}
.fa-hell .fa-stationsleiste button{border-color:rgba(86,94,76,.32)}
.fa-hell .fa-stationsleiste button:hover{border-color:rgba(86,94,76,.7);color:#2F3428}
.fa-hell .fa-stationsleiste button.an{background:var(--forest);border-color:var(--forest);color:#F5F2EB}
@media (max-width:520px){
  .fa-stationsleiste ol{gap:6px}
  .fa-stationsleiste button{padding:8px 11px;font-size:12px}
}

/* ------------------------------------------------------------- Lichtkasten */
.fa-galerie-kachel{cursor:zoom-in;position:relative}
.fa-galerie-kachel img{transition:transform .7s var(--e-satt),filter .5s ease}
.fa-galerie-kachel:hover img{transform:scale(1.045)}
.fa-galerie-kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(20,20,20,.5));
  opacity:0;transition:opacity .4s ease;
}
.fa-galerie-kachel:hover::after,.fa-galerie-kachel:focus-visible::after{opacity:1}
.fa-galerie-kachel:focus-visible{outline:2px solid var(--mondlicht);outline-offset:4px}
body.rm .fa-galerie-kachel img{transition:none}
body.rm .fa-galerie-kachel:hover img{transform:none}

.fa-lichtkasten{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;gap:clamp(8px,2vw,26px);
  background:rgba(18,18,18,.94);backdrop-filter:blur(14px);
  padding:clamp(16px,4vh,54px) clamp(12px,3vw,48px);
}
.fa-lichtkasten.auf{display:flex}
.lk-buehne{margin:0;max-width:min(1180px,92vw);max-height:84vh;display:flex}
.lk-buehne img{
  max-width:100%;max-height:84vh;object-fit:contain;display:block;
  border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);
  opacity:0;transform:scale(.985);
  transition:opacity .35s ease,transform .45s var(--e-satt);
}
.lk-buehne img.da{opacity:1;transform:none}
body.rm .lk-buehne img{transition:none;opacity:1;transform:none}

.fa-lichtkasten button{
  background:rgba(231,228,214,.08);border:1px solid rgba(231,228,214,.22);
  color:var(--creme);border-radius:50%;cursor:pointer;
  width:46px;height:46px;flex:0 0 auto;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,transform .25s var(--e-satt);
}
.fa-lichtkasten button:hover{background:rgba(231,228,214,.18);border-color:rgba(231,228,214,.5)}
.lk-zurueck:hover{transform:translateX(-3px)}
.lk-vor:hover{transform:translateX(3px)}
.lk-zu{position:absolute;top:clamp(12px,2.4vh,26px);right:clamp(12px,2.4vw,30px)}
.lk-zaehler{
  position:absolute;bottom:clamp(12px,2.4vh,26px);left:50%;transform:translateX(-50%);
  margin:0;font-size:12px;letter-spacing:.16em;color:var(--salbeinebel);
  font-variant-numeric:tabular-nums;
}
@media (max-width:620px){
  .lk-pfeil{position:absolute;bottom:calc(clamp(12px,2.4vh,26px) + 34px)}
  .lk-zurueck{left:20px} .lk-vor{right:20px}
  .lk-buehne{max-height:74vh}
  .lk-buehne img{max-height:74vh}
}

/* Der Hinweis unter der Stationsleiste stand auf hellem Grund bei 0,75
   Deckkraft — gemessen 4,16 : 1, also unter der Grenze. Auf Hell traegt die
   Farbe selbst die Zurueckhaltung, die Deckkraft wird nicht gebraucht. */
.fa-hell .fa-stationsleiste-hinweis{opacity:1;color:#4A5142}

/* ============================================================== Hero: Waldton
   Das Photonenfeld ist raus. An seiner Stelle steht ein Luftbild, das in drei
   Lagen auf die Markenfarben gebracht wird:

   1) Graustufe — das Ausgangsfoto ist ein sattes Sommergruen, das mit unserem
      Tannengruen streitet. Erst neutralisieren, dann faerben.
   2) mix-blend-mode:color — DIE eigentliche Einfaerbung. Sie nimmt Ton und
      Saettigung aus der Farbe und die Helligkeit aus dem Foto. Multiply allein
      dunkelt nur ab und ergibt ein mattes Grau; das war der erste Versuch.
   3) Multiply fuer die Tiefen, Screen fuer die Lichter.

   Darueber ein Verlauf von links: die Schrift steht immer auf gesichertem
   Grund, egal wie hell das Bild an der Stelle gerade ist. */
.fa-waldton{position:relative;overflow:clip;background:var(--tiefwald,#2F3428)}
.fa-waldgrund{position:absolute;inset:0;z-index:0}
.fa-waldgrund img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transform:scale(1.06);
  animation:fa-waldzoom 34s ease-out forwards;
}
@keyframes fa-waldzoom{to{transform:scale(1)}}
body.rm .fa-waldgrund img{animation:none;transform:none}
/* Die drei Mischlagen sind hier ausgebaut — sie stecken jetzt im Bild selbst.
   Gemessen: 36 Bilder je Sekunde mit Lagen, 60 ohne. Ein statisches Ergebnis
   gehoert nicht in jede einzelne Bildberechnung. */
.fa-waldschleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(18,21,15,.94) 0%,rgba(18,21,15,.72) 34%,
                    rgba(18,21,15,.22) 66%,rgba(18,21,15,.42) 100%),
    linear-gradient(180deg,rgba(18,21,15,.55) 0%,rgba(18,21,15,0) 22%,
                    rgba(18,21,15,0) 68%,var(--nachthimmel) 100%);
}
.fa-waldton .fa-hero-innen,
.fa-waldton .fa-hero-unten{position:relative;z-index:2}
/* Der eigene Schleier hinter dem Text wird nicht mehr gebraucht — der Verlauf
   oben macht das jetzt fuer die ganze Spalte und trifft damit auch Zeilen,
   die weiter oben oder unten stehen. */
.fa-waldton .fa-hero-text::before{display:none}
@media (max-width:900px){
  .fa-waldschleier{background:
    linear-gradient(180deg,rgba(18,21,15,.86) 0%,rgba(18,21,15,.58) 38%,
                    rgba(18,21,15,.8) 74%,var(--nachthimmel) 100%)}
  .fa-waldgrund img{object-position:50% 32%}
}

/* --- Die Naht: Haarlinie zwischen Text und Bühne, mit wanderndem Punkt -----
   Der Punkt gibt dem Bild eine Uhr: es passiert etwas, ohne dass etwas
   blinkt. Sie steht an der Grenze zwischen Aussage und Gerät — dort, wo das
   Auge ohnehin hin und her springt. */
/* Die Kante liegt bei 40 % der Reihe (Spalten .80fr zu 1.20fr) plus der
   halben Luecke. Beides wird hier ausgerechnet statt geschaetzt — sonst laeuft
   die Linie bei anderer Fensterbreite durch das Geraet. */
.fa-waldton .fa-hero-innen{position:relative;--luecke:clamp(28px,4vw,64px);gap:var(--luecke)}
.fa-hero-naht{
  position:absolute;left:calc(40% + var(--luecke) / 2);
  top:-4%;bottom:-4%;width:1px;z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(161,165,140,.55) 20%,
             rgba(161,165,140,.55) 80%,transparent);
}
.fa-hero-naht::after{
  content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--mondlicht);box-shadow:0 0 22px 5px rgba(231,220,201,.55);
  animation:fa-naht 8s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes fa-naht{0%,100%{top:8%}50%{top:86%}}
body.rm .fa-hero-naht::after{animation:none;top:46%}
@media (max-width:900px){.fa-hero-naht{display:none}}

/* Ein dunkler Lichtsee hinter der Bühne — auf dem hellen Waldbild ging das
   Gerät sonst unter. Gemessen an gerenderten Bildpunkten, nicht geschätzt. */
.fa-waldton .fa-hero-bild::before{
  content:"";position:absolute;z-index:-1;
  left:-14%;right:-14%;top:-12%;bottom:-14%;
  background:radial-gradient(58% 56% at 52% 46%,
             rgba(14,17,12,.88) 0%,rgba(14,17,12,.6) 44%,rgba(14,17,12,0) 78%);
  pointer-events:none;
}
.fa-waldton .fa-hero-bild{position:relative;isolation:isolate}

/* Das Waldbild ist rechts oben heller als der Rest — dort steht das Gerät.
   Der Schleier bekommt eine zusätzliche Lage von oben rechts, damit die
   Bühne auf ruhigem Grund steht statt in Geäst. */
.fa-waldschleier::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(72% 62% at 78% 30%,rgba(16,19,13,.62),rgba(16,19,13,0) 72%);
}

/* --- Kopf: Navigationsanzeiger und ruhigerer Zustand beim Scrollen -------- */
/* Nur auf breiten Schirmen. motion.css wird NACH rahmen.css geladen, und eine
   Regel ohne Medienabfrage schlaegt eine gleich starke Regel in einer
   Medienabfrage — dieses eine Wort hat unterhalb von 1261 px das
   `position:fixed` der Menueschublade ausgehebelt. Folge: das geoeffnete
   Menue war 50 px breit, jeder Menuepunkt abgeschnitten, und der Kopf wuchs
   auf 540 px. Der Anzeiger selbst gibt es nur in der waagerechten Leiste. */
@media (min-width:1261px){.fa-nav{position:relative}}
.fa-nav-anzeiger{
  position:absolute;left:0;bottom:-9px;height:2px;width:0;
  background:linear-gradient(90deg,var(--salbeinebel),var(--mondlicht));
  border-radius:2px;pointer-events:none;
  transition:transform .42s var(--e-satt),width .42s var(--e-satt),opacity .3s ease;
  box-shadow:0 0 12px rgba(231,220,201,.35);
}
body.rm .fa-nav-anzeiger{transition:none}
/* Der alte Unterstrich weicht dem Anzeiger — zwei Markierungen sind eine zu viel */
.fa-nav a::after{display:none}
.fa-nav a{transition:color .3s ease,opacity .3s ease}
.fa-nav a:hover,.fa-nav a.aktiv{opacity:1;color:var(--creme)}

/* Beim Scrollen wird die Leiste dichter und schmaler — sie tritt zurueck,
   ohne zu verschwinden. */
.fa-kopf.gescrollt{background:rgba(24,24,24,.86);backdrop-filter:blur(14px) saturate(1.1)}
.fa-kopf.gescrollt .fa-kopf-innen{height:62px}
.fa-kopf-innen{transition:height .35s var(--e-satt)}


/* ------------------------------------------- Kapitelleiste, zweite Fassung
   Vorher klappten die Namen nur beim Zeigen auf — man musste die Leiste erst
   finden, um zu erfahren, wozu sie gut ist. Ab 1400 px stehen sie dauerhaft,
   darunter verschwindet die Leiste ganz: zwischen 1100 und 1400 px lag sie
   dem Inhalt im Weg. */
@media (min-width:1400px){
  .fa-kapitel-name{max-width:190px;opacity:.85}
  .fa-kapitel{background:color-mix(in srgb,#1b1b1b 74%,transparent)}
  .fa-kapitel button.an .fa-kapitel-name{opacity:1}
}
@media (max-width:1399px){.fa-kapitel{display:none}}

/* Der bewegte Waldgrund liegt ÜBER dem Standbild, nicht an seiner Stelle:
   solange das Video nicht geladen ist (preload="none", langsame Verbindung,
   Datensparmodus), sieht man das Bild — und nie eine leere Fläche. */
.fa-waldfilm{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;opacity:0;transition:opacity 1.2s ease;
}
.fa-waldfilm.laeuft{opacity:1}
body.rm .fa-waldfilm{display:none}
@media (max-width:900px){.fa-waldfilm{object-position:50% 32%}}


/* ---------------------------------------- Kapitelleiste, dritte Fassung
   Sie sah gut aus und hat genau deshalb gestoert: ein leuchtender Kasten am
   rechten Rand, der staendig Aufmerksamkeit abzog. Jetzt ist sie eine Reihe
   feiner Striche ohne Kasten, ganz aussen. Erst beim Zeigen wachsen Ziffern
   und Namen heraus. */
@media (min-width:1100px){
  .fa-kapitel{
    right:6px;padding:6px 4px;border:0;background:transparent;backdrop-filter:none;
    opacity:.5;transition:opacity .35s ease;
  }
  .fa-kapitel:hover,.fa-kapitel:focus-within{opacity:1}
  .fa-kapitel ol{gap:0}
  .fa-kapitel button{
    padding:5px 6px;gap:0;justify-content:flex-end;
    background:none !important;
  }
  /* Der Strich IST der Punkt: 14 px lang, ein Pixel hoch. Der aktive ist
     laenger und heller — mehr braucht eine Ortsangabe nicht. */
  .fa-kapitel button::before{
    content:"";display:block;width:14px;height:1px;flex:0 0 auto;
    background:rgba(231,228,214,.45);
    transition:width .3s var(--e-satt),background .3s ease;
  }
  .fa-kapitel button.an::before{width:26px;background:var(--mondlicht)}
  .fa-kapitel button:hover::before{width:22px;background:var(--creme)}
  .fa-kapitel-nr{
    max-width:0;overflow:hidden;opacity:0;
    transition:max-width .3s var(--e-satt),opacity .25s ease,margin .3s ease;
  }
  .fa-kapitel-name{max-width:0;opacity:0;margin-right:0}
  .fa-kapitel:hover .fa-kapitel-nr{max-width:26px;opacity:.7;margin-right:8px}
  .fa-kapitel:hover .fa-kapitel-name{max-width:170px;opacity:.9;margin-right:10px}
  .fa-kapitel:hover button{padding-left:10px}
}
/* Unter 1100 px gibt es sie gar nicht — dort ist der Platz zu kostbar. */
@media (max-width:1099px){.fa-kapitel{display:none}}