/* Forest Air — Bewegungsebene, zweite Stufe
   ===========================================================================
   Gehoert zu assets/js/bewegung.js. Ergaenzt motion.css, ersetzt sie nicht.

   Alles hier ist additiv: nimmt man die Datei heraus, steht eine
   vollstaendige, ruhige Seite. Und alles hier hat einen body.rm-Zweig —
   wer Bewegung abstellt, bekommt eine Seite ohne Bewegung, kein Loch.

   Die Kurven kommen aus motion.css (--e-weich, --e-satt). Keine zweite
   Zeitsprache: zwei verschiedene Beschleunigungen auf einer Seite merkt man,
   ohne benennen zu koennen, was stoert.
   =========================================================================== */

:root{
  /* Der Takt zwischen zwei gestaffelten Stuecken. 90 ms ist gemessen der
     Punkt, an dem eine Reihe als Reihe gelesen wird und nicht als drei
     einzelne Ereignisse. Bei 150 ms wartet man auf die dritte Karte. */
  --bw-takt:90ms;

}

/* ============================================ 0 · Eine geerbte Falle
   ---------------------------------------------------------------------
   startseite.js hängt JEDEM <figcaption> im Hauptteil die Klasse
   .fa-unterschrift an (Punkt 18 dort). In motion.css steht dazu:

       figure .fa-unterschrift{transform:translateY(110%);opacity:0}

   Gedacht ist das für Bildunterschriften, die unter einem Foto
   hervorfahren, sobald das Bild eingeblendet wird — sichtbar werden sie
   erst, wenn der Rahmen die Klasse .ein bekommt.

   Meine Zitatkarten sind aber ebenfalls <figure> mit <figcaption>, und
   sie bekommen nie ein .ein — sie hängen an einer anderen Ebene. Ergebnis:
   Name, Ort und Dauer standen 110 % unterhalb ihrer Karte und wurden von
   deren overflow:hidden abgeschnitten. Sichtbar wurden sie erst nach
   sieben Sekunden durch das Netz in motion.js.

   GEMESSEN, NICHT VERMUTET: figcaption bei oben=359 in einer 465 px hohen
   Karte, opacity 0. Im Bildschirmfoto sah man drei Karten mit einem
   leeren Fuß und hätte auf ein Layoutproblem getippt.

   Zwei Klassen statt !important — .fa-so-karte .fa-unterschrift (0,2,0)
   schlägt figure .fa-unterschrift (0,1,1) sauber. */
.fa-so-karte .fa-unterschrift,
.fa-nu-stimme .fa-unterschrift,
.fa-nu-stimme.fa-unterschrift{
  transform:none;opacity:1;overflow:visible;
}

/* ========================================================= 1 · Einlaufen */
/* Der Einlauf benutzt "translate", NICHT "transform".
   ---------------------------------------------------------------------
   Das ist der Kniff, der die ganze Ebene erst konfliktfrei macht:
   translate ist eine eigenstaendige Eigenschaft und wird mit transform
   ZUSAMMENGERECHNET, nicht dagegen. So kann dasselbe Element gleichzeitig
   einlaufen (translate) und sich beim Schweben heben (transform), ohne
   dass eine der beiden Bewegungen die andere ueberschreibt.

   Mit beidem auf transform war es ein Entweder-oder: entweder die Karte
   lief ein, oder sie hob sich — nie beides. */
/* Und der Einlauf ist eine ANIMATION, kein Uebergang.
   ---------------------------------------------------------------------
   Zwei Anlaeufe hat das gekostet, beide mit demselben Muster: die
   transition-Kurzschreibweise setzt alles zurueck.

   Erster Versuch: transition direkt auf .bw-auf. Jede Regel, die auf
   demselben Element ein eigenes "transition:transform .5s" fuer einen
   Hover-Effekt deklariert, hat die Einblendung mitgeloescht.

   Zweiter Versuch: den Uebergang in eine :root-Variable auslagern und
   ueberall voranstellen. Sieht sauber aus, funktioniert aber nicht —
   ein var() INNERHALB einer Variablen wird dort aufgeloest, wo die
   VARIABLE steht, also an :root. var(--takt) war dort nie gesetzt, jedes
   Stueck bekam den Rueckfallwert 0, und alle drei Karten liefen exakt
   gleichzeitig ein. Gemessen: Deckkraft 0.21 / 0.21 / 0.21.

   Eine Animation hat das Problem nicht. animation-delay wird am Element
   selbst ausgewertet, und Animationen und Uebergaenge stehen sich nicht
   im Weg — die Karte kann einlaufen und sich gleichzeitig heben. */
.bw-auf{opacity:0;translate:0 26px}
.bw-auf.bw-da{
  animation:bw-ein .85s var(--e-satt) both;
  animation-delay:calc(var(--takt,0) * var(--bw-takt));
}
@keyframes bw-ein{
  from{opacity:0;translate:0 26px}
  to  {opacity:1;translate:0 0}
}
body.rm .bw-auf{opacity:1;translate:none;animation:none}

/* ====================================================== 2 · Zeigerlicht */
.bw-licht{position:relative}
.bw-licht::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .38s ease;
  background:radial-gradient(220px circle at var(--zx,50%) var(--zy,50%),
             rgba(231,220,201,.11),transparent 62%);
}
.bw-licht:hover::after{opacity:1}
body.rm .bw-licht::after{display:none}

/* Auf hellen Flaechen ist ein heller Lichtfleck unsichtbar — dort ein
   dunkler. Sonst reagiert die Karte scheinbar gar nicht, und man haelt den
   Effekt fuer kaputt statt fuer dezent. */
.fa-hell .bw-licht::after{
  background:radial-gradient(220px circle at var(--zx,50%) var(--zy,50%),
             rgba(47,52,40,.10),transparent 62%);
}

/* ============================================ 3 · Abschnitts-Fortschritt */
/* Eine Haarlinie an der linken Kante des Abschnitts, die mitwaechst. Sie
   schmueckt nicht nur: sie zeigt, wie weit man in einem langen Abschnitt
   ist — auf dem Handy ist das die einzige Ortsangabe, die man hat. */
.fa-stimmenoben,.fa-nutzung,.fa-lichtvertieft,.fa-warburgvertieft{position:relative}
.fa-stimmenoben::before,.fa-nutzung::before,
.fa-lichtvertieft::before,.fa-warburgvertieft::before{
  content:"";position:absolute;left:0;top:0;width:2px;
  height:calc(var(--durch,0) * 100%);
  background:linear-gradient(180deg,transparent,var(--salbeinebel),var(--mondlicht));
  opacity:.5;pointer-events:none;
}
body.rm .fa-stimmenoben::before,body.rm .fa-nutzung::before,
body.rm .fa-lichtvertieft::before,body.rm .fa-warburgvertieft::before{display:none}

@media (max-width:700px){
  /* Auf 390 px sitzt die Linie im Seitenrand und beruehrt fast den Text.
     Schmaler und leiser. */
  .fa-stimmenoben::before,.fa-nutzung::before,
  .fa-lichtvertieft::before,.fa-warburgvertieft::before{width:1px;opacity:.34}
}

/* ================================================== 4 · Kundenstimmen */
/* Der Abschnitt bekommt einen eigenen, sehr leisen Schimmer, der mit dem
   Scrollfortschritt heller wird. Grund: die drei Karten stehen auf dem
   gleichen Nachthimmel wie alles andere — ohne eine eigene Flaeche liest
   sich der wichtigste Abschnitt der Seite wie ein Zwischenstueck. */
.fa-so-schimmer{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,
             rgba(86,94,76,.30),transparent 68%);
  opacity:calc(.25 + var(--durch,0) * .75);
}
body.rm .fa-so-schimmer{opacity:1}
.fa-so-innen{position:relative}

/* Die Kopfzeile zieht ein paar Bildpunkte nach — echte Parallaxe, aber
   klein. 18 px ist die Grenze, ab der es als Tiefe gelesen wird und noch
   nicht als Wackeln. */
.fa-so-kopf{transform:translateY(calc((1 - var(--durch,1)) * 18px))}
body.rm .fa-so-kopf{transform:none}

.fa-so-karte{
  position:relative;overflow:hidden;
  transition:transform .45s var(--e-satt),border-color .4s ease,
             box-shadow .5s var(--e-satt),background .5s ease;
}
.fa-so-karte:hover,.fa-so-karte:focus-within{
  transform:translateY(-6px);
  border-color:rgba(231,220,201,.34);
  box-shadow:0 22px 48px -26px rgba(0,0,0,.85),
             0 0 0 1px rgba(231,220,201,.07) inset;
  background:linear-gradient(180deg,rgba(47,52,40,.62),rgba(35,35,35,.28));
}
body.rm .fa-so-karte:hover,body.rm .fa-so-karte:focus-within{
  transform:none;box-shadow:none;
}

/* Der Faden an der Oberkante jeder Karte laeuft beim Schweben von links
   nach rechts durch. Das ist der eine Effekt in diesem Abschnitt, der rein
   dekorativ ist — deshalb ist er auch der leiseste. */
.fa-so-faden{
  position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--mondlicht),transparent);
  transform:scaleX(0);transform-origin:0 50%;opacity:.75;
  transition:transform .75s var(--e-satt);
}
.fa-so-karte:hover .fa-so-faden,
.fa-so-karte:focus-within .fa-so-faden{transform:scaleX(1)}
body.rm .fa-so-faden{display:none}

/* Der Punkt vor dem Thema pulst NICHT. Er wird beim Schweben nur heller —
   ein dauernd pulsender Punkt zieht den Blick von der Zeile ab, die man
   lesen soll. */
.fa-so-thema{display:flex;align-items:center;gap:9px}
.fa-so-thema i{
  width:5px;height:5px;flex:0 0 auto;transform:rotate(45deg);
  background:var(--salbeinebel);transition:background .4s ease,transform .5s var(--e-satt);
}
.fa-so-karte:hover .fa-so-thema i{background:var(--mondlicht);transform:rotate(135deg)}
body.rm .fa-so-karte:hover .fa-so-thema i{transform:rotate(45deg)}

/* --- Der Aufklapper mit dem ganzen Bericht ------------------------------
   <details>/<summary>: ohne JavaScript zu oeffnen, mit der Tastatur
   bedienbar, und Strg+F findet auch Text im geschlossenen Zustand. Die
   Hoehe zum Animieren misst bewegung.js — eine geratene max-height ist
   entweder zu klein und schneidet ab, oder zu gross und laeuft ins Leere. */
.fa-so-mehr{margin-top:-2px}
.fa-so-mehr summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 0;min-height:24px;list-style:none;
  font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--salbeinebel);
  transition:color .3s ease;
}
.fa-so-mehr summary::-webkit-details-marker{display:none}
.fa-so-mehr summary:hover{color:var(--mondlicht)}
.fa-so-mehr summary i{
  width:7px;height:7px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .38s var(--e-satt);
}
.fa-so-mehr[open] summary i{transform:rotate(225deg) translateY(-2px)}
.fa-so-mehr-zu{display:none}
.fa-so-mehr[open] .fa-so-mehr-auf{display:none}
.fa-so-mehr[open] .fa-so-mehr-zu{display:inline}
.fa-so-voll{
  margin:0 0 6px;font-size:14px;line-height:1.72;color:var(--salbeinebel);
  border-left:1px solid rgba(231,228,214,.2);padding-left:14px;
}
.fa-so-mehr[open] .fa-so-voll{animation:bw-auffalten .5s var(--e-satt)}
@keyframes bw-auffalten{
  from{opacity:0;max-height:0}
  to{opacity:1;max-height:var(--voll,420px)}
}
body.rm .fa-so-mehr[open] .fa-so-voll{animation:none}

/* Die Dauer fuellt sich beim Schweben. Sie ist der Informationsgewinn des
   ganzen Abschnitts — deshalb bekommt sie die deutlichste Reaktion. */
.fa-so-dauer{
  position:relative;overflow:hidden;
  transition:color .38s ease,border-color .38s ease;
}
.fa-so-dauer b{position:relative;z-index:1;font-weight:400}
.fa-so-dauer::before{
  content:"";position:absolute;inset:0;background:var(--mondlicht);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--e-satt);
}
.fa-so-karte:hover .fa-so-dauer{color:var(--nachthimmel);border-color:var(--mondlicht)}
.fa-so-karte:hover .fa-so-dauer::before{transform:scaleX(1)}
body.rm .fa-so-dauer::before{display:none}
body.rm .fa-so-karte:hover .fa-so-dauer{color:var(--mondlicht)}

.fa-so-alle{display:inline-block;margin-top:clamp(24px,2.8vw,34px)}
.fa-so-fuss{
  margin:18px 0 0;padding-top:14px;
  border-top:1px solid rgba(231,228,214,.1);
  font-size:12px;line-height:1.7;color:rgba(161,165,140,.7);max-width:86ch;
}

/* ====================================================== 5 · Nutzungsfälle */
.fa-nu-fall{
  position:relative;
  transition:background .5s ease;
}
.fa-nu-fall:hover{background:rgba(47,52,40,.34)}
body.rm .fa-nu-fall:hover{background:rgba(47,52,40,.34)}
/* Die Ziffer waechst beim Schweben und wird heller — sie ist die
   Wegmarke durch die drei Faelle. */
.fa-nu-nr{
  display:inline-block;
  transition:color .4s ease,letter-spacing .5s var(--e-satt);
}
.fa-nu-fall:hover .fa-nu-nr{color:var(--mondlicht);letter-spacing:.34em}
body.rm .fa-nu-fall:hover .fa-nu-nr{letter-spacing:.24em}
/* Der Strich ueber der Stimme laeuft beim Schweben durch. */
.fa-nu-stimme{position:relative}
.fa-nu-stimme::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--mondlicht),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--e-satt);
}
.fa-nu-fall:hover .fa-nu-stimme::before{transform:scaleX(1)}
body.rm .fa-nu-stimme::before{display:none}

/* ============================================ 6 · Wirkungsweise-Bausteine */
.fa-lv-stueck{
  position:relative;
  transition:background .45s ease;
}
.fa-lv-stueck:hover{background:rgba(47,52,40,.26)}
.fa-lv-zahl{transition:transform .55s var(--e-satt),color .4s ease}
.fa-lv-stueck:hover .fa-lv-zahl{transform:translateX(4px);color:var(--creme)}
body.rm .fa-lv-stueck:hover .fa-lv-zahl{transform:none}

.fa-wv-gedanke{
  transition:border-color .4s ease,transform .5s var(--e-satt);
}
.fa-wv-gedanke:hover{border-top-color:var(--mondlicht);transform:translateY(-3px)}
body.rm .fa-wv-gedanke:hover{transform:none}

/* ================================================== 7 · Allgemeiner Schliff */
/* Textlinks bekommen einen Strich, der von links einlaeuft statt einfach
   da zu sein. Gilt fuer .fa-zweit auf ALLEN Seiten — das ist der Knopf,
   der auf dieser Website am haeufigsten vorkommt.

   ZWEI DINGE, DIE ICH HIER ERST FALSCH HATTE:

   1) .fa-zweit traegt in motion.css schon einen border-bottom. Ein zweiter
      Strich bei bottom:2px stand daneben statt darauf — auf dem Bildschirm
      eine doppelte Unterstreichung. Der helle Strich liegt jetzt mit
      bottom:-1px genau auf der Linie, die ohnehin da ist: im Ruhezustand
      eine leise Linie, beim Schweben faehrt eine helle darueber.

   2) Die Tippflaeche war 19 px hoch. In rahmen.css steht dafuer eine
      Korrektur — aber nur im Block fuer grobe Zeigegeraete. Mit Maus blieb
      es bei 19 px, und die 24-px-Mindestgroesse gilt fuer beides.
      inline-flex statt inline-block, weil padding an einem reinen
      Inline-Element keine Hoehe erzeugt. */
.fa-zweit{
  position:relative;text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;
}
.fa-zweit::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--mondlicht);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--e-satt);
}
.fa-zweit:hover::before,.fa-zweit:focus-visible::before{transform:scaleX(1)}
body.rm .fa-zweit::before{transform:scaleX(1);transition:none}

/* Tabellenzeilen der Abgrenzung (steht derzeit nur auf /faq, der Baustein
   bleibt aber im Generator — siehe Kommentar dort). */
.fa-ab-tafel tbody tr{transition:background .35s ease}
.fa-ab-tafel tbody tr:hover{background:rgba(86,94,76,.16)}

/* Tastaturbedienung sichtbar lassen. Alles hier reagiert auf :hover — wer
   mit der Tastatur navigiert, braucht dieselbe Rueckmeldung, sonst ist die
   halbe Seite fuer ihn stumm. */
.fa-so-karte:focus-within,.fa-nu-fall:focus-within{outline:none}
.fa-so-mehr summary:focus-visible{
  outline:2px solid var(--mondlicht);outline-offset:3px;border-radius:2px;
}

/* ==================================================================
   8 · TIPPZIELE — auf ALLEN Breiten, nicht nur auf dem Handy
   ==================================================================
   In rahmen.css steht ein sorgfältig gemachter Block, der Tippflächen
   vergrößert. Er steht aber in `@media (max-width: 700px)`, gilt also
   nur für Telefone.

   Die Mindestgröße von 24 × 24 gilt für JEDES Zeigegerät, nicht nur für
   Finger. Gemessen über siebzehn Seiten in beiden Sprachen: 65 Links im
   Gesprächsband bei 18 px, das Warenkorbzeichen bei 19 × 19, die
   Sprachumschaltung bei 23 px (ein Pixel zu wenig), das
   Kapitelverzeichnis bei 22 px, die Partnerverweise bei 20 px.

   ZWEI DINGE, DIE HIER BEWUSST NICHT PASSIEREN:

   1. Links MITTEN IM FLIESSTEXT bleiben unangetastet. Für sie gilt die
      Ausnahme der Richtlinie ausdrücklich — und eine Textzeile, in der
      jeder Link 24 px hoch ist, hat keinen Zeilenrhythmus mehr.
      Betroffen wären sonst 18 Stellen, darunter jede Mailadresse in
      einem Satz.

   2. Die sichtbare Größe ändert sich nur dort, wo es niemandem auffällt.
      Wo ein Element in einer engen Reihe sitzt, wird über Polster
      gearbeitet, nicht über eine größere Schrift.
   ================================================================== */

/* Gesprächsband: zwei Links unter der Aufforderung, 18 px hoch. */
.fa-band-kontakt a{
  display:inline-flex;align-items:center;min-height:24px;
}

/* Sprachumschaltung: 23 px. Ein Pixel — und trotzdem darunter. */
.fa-sprachwahl a,.fa-sprachwahl .an{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;min-width:26px;
}

/* Warenkorb: 19 × 19 sichtbar. Das Zeichen bleibt so groß wie es ist,
   die treffbare Fläche wächst über Polster nach außen. */
.fa-korb{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;min-width:26px;
}

/* Kapitelverzeichnis am rechten Rand: 22 px je Eintrag. */
.fa-kapitel button,.fa-kapitel a{min-height:24px}

/* Partnerseite: Verweise im Verzeichnis, Suche, Knöpfe. */
.fa-pn-web,.fa-pn-eigen,.fa-pn-zweit{
  display:inline-flex;align-items:center;min-height:24px;
}
.fa-pn-suche input,.fa-pn-suche button{min-height:26px}

/* Handbücher: der Aufklapper "Inhalt" je Dokument ist ein <summary> und
   war 14 px hoch — die kleinste Schaltfläche der ganzen Website. */
.fa-hb-inhalt > summary{
  display:flex;align-items:center;min-height:26px;
}
.fa-hb-inhalt a{display:inline-flex;align-items:center;min-height:24px}

/* Kontakt: die sozialen Verweise und die Formularfelder. */
.kt-sozial a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;min-width:26px;
}
.kf-feld input,.kf-feld select,.kf-feld textarea{min-height:26px}
/* Ein Häkchen ist von Haus aus 13 px breit. Hier trägt es die
   Datenschutz-Zustimmung — ohne sie geht das Formular nicht ab. */
.kf-feld input[type="checkbox"],
.fa-pp-zustimmung input[type="checkbox"]{
  width:24px;height:24px;min-width:24px;flex:0 0 auto;
}

/* Partnerportal: das Häkchen der Zustimmung. Ein 17-px-Kästchen trifft
   niemand zuverlässig, und es ist das Feld, ohne das die Bewerbung
   nicht abgeschickt werden kann. */
/* Die Zeile, die hier stand, setzte 22 px und hob damit die 24 px vier
   Zeilen weiter oben wieder auf — dieselbe Spezifität, später im Blatt.
   Gemessen kam 24 × 22 heraus, ein Kästchen, das breiter als hoch ist. */
.fa-pp-zustimmung label{display:flex;align-items:flex-start;gap:10px;min-height:24px}

/* ==================================================================
   9 · ZEILENLÄNGE
   ==================================================================
   Über etwa 80 Zeichen je Zeile verliert das Auge beim Rücksprung die
   Spur. Gemessen wurden 112 Zeichen in der langen Fassung der
   Licht-Befunde — der Text stand über die volle Spaltenbreite von
   896 px bei 16 px Schrift.
   ================================================================== */
.fa-lv-tx{max-width:38em}
.fa-wv-tx{max-width:40em}

/* ==================================================================
   10 · DRITTE STUFE — was auf JEDER Seite wirkt
   ==================================================================
   Gehört zum zweiten Block in bewegung.js. Fünf Wirkungen, die an dem
   hängen, was ohnehin im Markup steht.
   ================================================================== */

/* ------------------------------------------------ Bilder mit Tiefe */
/* Das Bild wird etwas größer gezeichnet als sein Rahmen, damit der
   Versatz von 26 px keine Lücke an der Kante aufreißt. Ohne das sieht
   man beim Scrollen einen hellen Streifen unter dem Bild — und das ist
   genau die Art Fehler, die man dem Effekt anlastet, nicht der Maßzahl. */
.bw-tiefe{
  transform:translate3d(0,0,0);
  transition:transform .12s linear;
  will-change:transform;
}
.fa-bild:has(.bw-tiefe),.fa-ritualfoto:has(.bw-tiefe){overflow:hidden}
.bw-tiefe{min-height:112%;object-fit:cover}
body.rm .bw-tiefe{transform:none!important;min-height:100%;transition:none}

/* ------------------------------------------- Karten neigen sich */
/* rotate statt transform — sonst überschreibt die Neigung das Anheben
   beim Schweben, und die Karte kann nur eines von beiden.
   Höchstens drei Grad: darüber wird der Text auf der Karte sichtbar
   unscharf, weil eine gedrehte Ebene neu gerastert werden muss. */
.bw-neigt{
  transform-style:preserve-3d;
  rotate:0deg;
  transition:rotate .35s var(--e-weich);
}
.bw-neigt:hover{
  rotate:var(--kipp-y,0deg) var(--kipp-x,0deg) 0deg;
}
@supports not (rotate: 1deg 1deg 0deg){
  /* Ältere Browser bekommen die Neigung nicht — sie bekommen auch
     keine halbe. Das Anheben beim Schweben bleibt in jedem Fall. */
  .bw-neigt:hover{rotate:none}
}
body.rm .bw-neigt,body.rm .bw-neigt:hover{rotate:none;transition:none}

/* ------------------------------- Überschriften kommen wortweise */
/* Der Rahmen bleibt IMMER sichtbar und messbar, bewegt wird nur das
   Wort darin. Das ist der Unterschied zu clip-path, das den Beobachter
   aushebeln würde — die Begründung steht ausführlich in bewegung.js. */
.bw-titel{display:block}
.bw-wortrahmen{
  display:inline-block;overflow:hidden;vertical-align:top;
  /* Kursive Überhänge und Unterlängen brauchen Luft, sonst schneidet
     der Rahmen das „g" und das „f" ab. Negativer Rand hebt die
     zusätzliche Fläche im Layout wieder auf. */
  padding:.1em .12em .18em;margin:-.1em -.12em -.18em;
}
.bw-zeile{
  display:inline-block;
  translate:0 105%;
  opacity:0;
}
.bw-titel-da .bw-zeile{
  animation:bw-wort .9s var(--e-satt) both;
}
/* Der Rahmen darf die Zeile nicht auf eine Zeile zwingen — lange
   Ueberschriften brechen weiterhin um, der Rahmen waechst mit. */
.bw-titel .bw-wortrahmen{display:block}
.bw-titel .bw-zeile{display:block}
@keyframes bw-wort{
  from{translate:0 105%;opacity:0}
  to  {translate:0 0;opacity:1}
}
body.rm .bw-zeile{translate:none;opacity:1;animation:none}
/* Ohne JavaScript wird nie zerlegt — dann steht die Überschrift wie
   immer da. Diese Regel fängt den Fall ab, dass das Skript zerlegt hat
   und danach etwas schiefgeht. */
.bw-titel:not(.bw-titel-da) .bw-zeile{opacity:0}
@media (prefers-reduced-motion:reduce){
  .bw-zeile,.bw-titel:not(.bw-titel-da) .bw-zeile{translate:none;opacity:1;animation:none}
}

/* --------------------------------------- Allgemeiner Hover-Schliff */
/* Jede Karte, die schon eine Kante hat, bekommt beim Schweben etwas
   mehr Licht darauf. Das ist der leiseste mögliche Effekt und trotzdem
   der, der am häufigsten greift — es gibt viele Karten. */
.fa-karte,.fa-bl-karte,.fa-hb-karte,.fa-zb-karte,.fa-ef-kachel,.fa-pn-karte{
  transition:border-color .4s ease,box-shadow .5s var(--e-satt),
             background .45s ease,transform .45s var(--e-satt);
}
.fa-karte:hover,.fa-bl-karte:hover,.fa-hb-karte:hover,
.fa-zb-karte:hover,.fa-ef-kachel:hover,.fa-pn-karte:hover{
  border-color:rgba(231,220,201,.3);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.8);
}
body.rm .fa-karte:hover,body.rm .fa-bl-karte:hover,body.rm .fa-hb-karte:hover,
body.rm .fa-zb-karte:hover,body.rm .fa-ef-kachel:hover,body.rm .fa-pn-karte:hover{
  box-shadow:none;transform:none;
}

/* Aufklapper: der Pfeil dreht, die Zeile rückt beim Schweben ein Stück.
   Betrifft FAQ, Handbücher, AGB — überall dieselbe Geste. */
details > summary{transition:color .3s ease,padding-left .35s var(--e-satt)}
details > summary:hover{color:var(--mondlicht)}
body.rm details > summary:hover{padding-left:0}

/* Bildunterschriften und Listenpunkte: ein Hauch Bewegung beim Schweben,
   damit auch reine Textseiten (AGB, Impressum, Widerruf) nicht tot sind. */
.fa-text a,.fa-bt-inhalt a{
  transition:color .3s ease,background-size .45s var(--e-satt);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 1px;text-decoration:none;
  padding-bottom:1px;
}
.fa-text a:hover,.fa-bt-inhalt a:hover{background-size:100% 1px}
body.rm .fa-text a,body.rm .fa-bt-inhalt a{
  background-size:100% 1px;transition:none;
}

/* ==================================================================
   11 · ZEILENLÄNGE IN DEN ALTEN WIX-BLÖCKEN
   ==================================================================
   Die drei Partnerseiten und die Kleingedruckten der Produktseiten
   tragen noch rohen Wix-Text (.font_7, .font_8, .disclaimer). Der läuft
   über die volle Spaltenbreite: gemessen 144 Zeichen je Zeile auf
   partner-mark, 113 im Kleingedruckten. Über etwa 80 Zeichen verliert
   das Auge beim Rücksprung die Spur.

   ZWEI AUSRICHTUNGEN, ZWEI BEHANDLUNGEN — und das ist der Grund, warum
   hier nicht eine Regel für alle steht: .font_8 ist linksbündig, .font_7
   und .disclaimer sind zentriert. Ein zentrierter Absatz, dem man nur
   eine Breite gibt, rutscht an den linken Rand; er braucht zusätzlich
   margin-inline:auto. Ein linksbündiger darf das NICHT bekommen, sonst
   bricht er aus der Fluchtlinie aus, die in rahmen.css mühsam über
   var(--rand) hergestellt wurde.
   ================================================================== */
.fa-text .font_8,
.fa-text .font_9,
.fa-text p{max-width:78ch}

/* Zentriert: Breite UND Zentrierung, sonst wandert der Block nach links. */
.fa-text .font_7,
.disclaimer,
.fa-text [style*="text-align:center"],
.fa-text [style*="text-align: center"]{
  max-width:72ch;margin-inline:auto;
}

/* text-wrap:pretty verhindert Schusterjungen in der letzten Zeile —
   ein einzelnes Wort allein auf der Schlusszeile liest sich wie ein
   Fehler. Wo der Browser es nicht kann, ändert sich nichts. */
.fa-text p,.fa-text li,.disclaimer,.fa-lv-tx,.fa-wv-tx,.fa-nu-tx,
.fa-so-vor,.fa-ab-vor,.fa-nu-vor{text-wrap:pretty}

/* Das Kleingedruckte der Produktseiten steckt in einem Wix-Embed, dessen
   Stilregeln INLINE im <style> der Seite stehen — also nach allen
   verlinkten Blättern. Eine Klassenregel verliert dagegen, egal wie spät
   sie im Blatt steht. Zwei Klassen genügen, kein !important nötig. */
.inner .disclaimer,
.fa-halter .disclaimer{max-width:72ch;margin-inline:auto}

/* Zwei letzte Kleingedruckte, beide zentriert und beide zu breit.

   Beim Wix-Kleingedruckten auf den Produktseiten ist !important nötig,
   und zwar begründet: die Embed-Regeln kommen über eine ID
   (#blk-comp-… .disclaimer) und stehen inline im <style> der Seite. Gegen
   eine ID verliert jede Klassenregel, egal wie spät sie steht. motion.css
   hat an einer vergleichbaren Stelle dieselbe Entscheidung getroffen und
   sie dort ausführlich begründet. */
.disclaimer{max-width:72ch!important;margin-inline:auto!important}

/* Der Hinweis unter der langen Fassung der Licht-Befunde lief über die
   vollen 1200 px bei 11,5 px Schrift — gemessen 200 Zeichen je Zeile. */
.fa-wk-hinweis.fa-wk-mitte,.fa-lv-liste + .fa-wk-hinweis{
  max-width:78ch;margin-inline:auto;text-align:center;
}

/* Die Brotkrume über jedem Blogbeitrag ("Journal › …") war 15 px hoch —
   die kleinste Schaltfläche der Beitragsseiten.
   Die beiden anderen Meldungen von dort ("Technologieseite",
   "Produktübersicht") sind KEINE Befunde: das sind Verweise mitten im
   Satz, für die die Ausnahme der Richtlinie ausdrücklich gilt. Wer sie
   auf 24 px zwingt, zerreißt den Zeilenrhythmus des Fließtextes. */
.fa-bt-weg a{display:inline-flex;align-items:center;min-height:24px}

/* ==================================================================
   12 · BESTELLLEISTE auf der Produktübersicht
   ==================================================================
   Die beiden Produktkarten dort sind als Ganzes ein Link auf die
   Produktseite — ein Knopf darin wäre ungültiges Markup. Diese Leiste
   steht deshalb direkt darunter und wiederholt nur Name, Preis, Knopf.

   NAMENSKOLLISION, teuer gelernt: die Klassen hiessen zuerst .fa-bl-*.
   Das ist aber der Namensraum der BLOGLISTE (blog.css) — dort ist
   .fa-be-zeile die Zeile mit Datum und Lesezeit, siebenmal auf /blog.
   blog.css wird spaeter geladen und hat display:flex zurueckgeholt,
   aber Hintergrund, Polster und Uebergang aus dieser Datei blieben
   an den Blogzeilen haengen. Jetzt .fa-be-* wie der Abschnitt selbst.
   ================================================================== */
.fa-bestellen{
  background:var(--nachthimmel);
  padding:clamp(30px,4vh,54px) var(--rand) clamp(40px,5vh,68px);
  color:var(--creme);
}
.fa-be-innen{max-width:var(--breite);margin:0 auto}
.fa-bestellen .fa-pf-oberzeile{
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--salbeinebel);margin:0 0 18px;
}
.fa-be-liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:rgba(231,228,214,.12);
  border-block:1px solid rgba(231,228,214,.12);
}
.fa-be-zeile{
  background:var(--nachthimmel);
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:clamp(14px,2vw,30px);
  padding:clamp(18px,2.2vw,24px) 0;
  transition:background .4s ease;
}
.fa-be-zeile:hover{background:rgba(47,52,40,.3)}
.fa-be-wer{display:flex;flex-direction:column;gap:4px;min-width:0}
.fa-be-wer b{
  font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:clamp(16px,1.8vw,20px);color:var(--creme);
}
.fa-be-kurz{font-size:13px;line-height:1.5;color:var(--salbeinebel);max-width:46ch}
.fa-be-preis{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(17px,2vw,23px);color:var(--mondlicht);white-space:nowrap;
}
.fa-be-tat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fa-be-fuss{
  margin:16px 0 0;font-size:12.5px;color:rgba(161,165,140,.8);
}
.fa-be-fuss a{color:inherit}

@media (max-width:760px){
  /* Auf dem Handy untereinander — drei Spalten lassen für den Namen
     sonst 90 px übrig, und der Preis rutscht unter den Knopf. */
  .fa-be-zeile{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .fa-be-preis{font-size:20px}
  .fa-be-tat{width:100%}
  .fa-be-tat .fa-cta{flex:1 1 auto;text-align:center;justify-content:center}
}