/* Forest Air — Aufwertungsebene der Startseite
   Additiv: nimmt man diese Datei heraus, bleibt die vollständige Seite
   zurück. Alles hier bewegt nur `transform`, `opacity` und Masken. */

/* ------------------------------------------------------ Wortweiser Einlauf */
.fa-wortlauf .fa-wort{
  display:inline-block;
  opacity:0;
  transform:translateY(0.42em) rotateX(-24deg);
  transform-origin:50% 100%;
  transition:opacity .62s var(--e-weich), transform .78s var(--e-satt);
  transition-delay:calc(var(--i) * 42ms);
  will-change:transform,opacity;
}
.fa-wortlauf.los .fa-wort{opacity:1;transform:none}
/* Nach dem Lauf die Bremse lösen — `will-change` dauerhaft stehen zu lassen
   hält für jedes Wort eine eigene Ebene im Speicher. */
.fa-wortlauf.los{will-change:auto}
body.rm .fa-wortlauf .fa-wort{opacity:1;transform:none;transition:none}

/* ------------------------------------------------------- Bilder, die wandern */
.fa-wandert{
  transform:translate3d(0,var(--wy,0px),0);
  transition:transform .12s linear;
  will-change:transform;
}
/* Der Rahmen schneidet ab, damit die Verschiebung keine leeren Streifen
   aufreißt. Ohne das sieht man am oberen Bildrand den Hintergrund. */
.fa-bild,main figure{overflow:clip}
body.rm .fa-wandert{transform:none;transition:none}

/* --------------------------------------------------------- Magnetische Knöpfe */
.fa-magnet{
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:transform .4s var(--e-satt),box-shadow .3s ease,background .3s ease,color .3s ease;
}
.fa-cta.fa-magnet:hover{box-shadow:0 16px 40px rgba(231,220,201,.24)}
body.rm .fa-magnet{transform:none}

/* -------------------------------------------------------------- Kartenneigung */
.fa-neigt{
  transform:perspective(900px) rotateX(var(--nx,0deg)) rotateY(var(--ny,0deg));
  transform-style:preserve-3d;
  transition:transform .5s var(--e-satt),border-color .35s ease,box-shadow .35s ease;
  position:relative;
}
/* Ein Glanzpunkt, der dem Zeiger folgt — er macht aus der Neigung eine
   Oberfläche. Ohne ihn kippt nur ein flaches Rechteck. */
.fa-neigt::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(38% 42% at var(--gx,50%) var(--gy,50%),
             rgba(231,220,201,.13),transparent 72%);
  opacity:0;transition:opacity .4s ease;
}
.fa-neigt:hover::after{opacity:1}
body.rm .fa-neigt{transform:none}
body.rm .fa-neigt::after{display:none}

/* ------------------------------------------------------------ Waldband
   Ein schmaler Streifen des eingefärbten Waldbilds zwischen zwei Abschnitten.
   Er gibt der langen Seite einen Takt und bindet sie an den Hero zurück. */
.fa-waldband{
  position:relative;height:clamp(90px,11vh,150px);overflow:clip;
  border-top:1px solid rgba(231,228,214,.08);
  border-bottom:1px solid rgba(231,228,214,.08);
}
.fa-waldband img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:translate3d(0,var(--wy,0px),0) scale(1.14);
}
.fa-waldband::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--nachthimmel) 0%,rgba(35,35,35,.35) 28%,
             rgba(35,35,35,.35) 72%,var(--nachthimmel) 100%);
}
.fa-waldband-punkt{
  position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  translate:-50% -50%;z-index:2;
  background:var(--mondlicht);box-shadow:0 0 22px 6px rgba(231,220,201,.5);
  animation:fa-bandpuls 7s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes fa-bandpuls{
  0%,100%{opacity:.35;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.25)}
}
body.rm .fa-waldband-punkt{animation:none;opacity:.8}
.fa-waldband-linie{
  position:absolute;left:0;right:0;top:50%;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(161,165,140,.45) 22%,
             rgba(161,165,140,.45) 78%,transparent);
}

/* --------------------------------------------- Der Hero verabschiedet sich */
.fa-waldgrund{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.fa-waldton .fa-hero-text{
  transform:translate3d(0,var(--py,0px),0);
  opacity:var(--pa,1);
}
.fa-waldton .fa-hero-bild{transform:translate3d(0,var(--py,0px),0);will-change:transform}
body.rm .fa-waldgrund,
body.rm .fa-waldton .fa-hero-text,
body.rm .fa-waldton .fa-hero-bild{transform:none;opacity:1}

/* =========================================== 3 — Einladung zum Scrollen */
.fa-scrolleinladung{
  position:absolute;left:50%;bottom:18px;z-index:4;translate:-50% 0;
  width:1px;height:72px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(161,165,140,.55));
  transition:opacity .6s ease,transform .6s var(--e-satt);
}
.fa-scrolleinladung i{
  position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--mondlicht);box-shadow:0 0 16px 4px rgba(231,220,201,.5);
  animation:fa-einladung 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes fa-einladung{
  0%{top:0;opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{top:calc(100% - 7px);opacity:0}
}
.fa-scrolleinladung.weg{opacity:0;transform:translateY(14px)}
body.rm .fa-scrolleinladung{display:none}
@media (max-width:900px){.fa-scrolleinladung{display:none}}

/* ================================= 8 — Fortschrittsring am Terminknopf */
/* Erster Versuch: der Ring lag als ::before mit inset:-2px AUSSERHALB des
   Knopfes. Unsichtbar — .fa-cta hat overflow:hidden (fuer den Lichtwisch),
   und das schneidet alles ab, was ueber den Rand ragt. Der Ring liegt jetzt
   innen, als ::after, und wird ueber zwei Masken auf ein 2 px schmales Band
   am Innenrand reduziert. */
.fa-ring{position:relative}
.fa-ring::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:2px;
  background:conic-gradient(from -90deg,
             var(--forest) var(--ring,0deg), rgba(86,94,76,.22) var(--ring,0deg));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
body.rm .fa-ring::after{display:none}

/* ============================================================ 16 — Zitate */
.fa-zitat{position:relative;padding-left:clamp(26px,3vw,46px)}
.fa-zitat::before{
  content:"„";position:absolute;left:-2px;top:-.18em;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(52px,6vw,92px);line-height:1;
  color:var(--salbeinebel);opacity:.4;pointer-events:none;
}
.fa-hell .fa-zitat::before{color:var(--forest);opacity:.32}
.fa-zitat::after{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;
  background:linear-gradient(180deg,var(--salbeinebel),transparent);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.1s var(--e-satt) .15s;
}
.fa-hell .fa-zitat::after{background:linear-gradient(180deg,var(--forest),transparent)}
.rv.ein .fa-zitat::after,.fa-zitat.ein::after{transform:scaleY(1)}
body.rm .fa-zitat::after{transform:scaleY(1);transition:none}

/* ================================================= 18 — Bildunterschriften */
.fa-unterschrift{
  overflow:hidden;
}
.fa-unterschrift > *,.fa-unterschrift{
  display:block;
  transform:translateY(0);
}
.fa-bild .fa-unterschrift,figure .fa-unterschrift{
  transform:translateY(110%);opacity:0;
  transition:transform .8s var(--e-satt),opacity .6s ease;
}
.rv.ein .fa-unterschrift,.ein .fa-unterschrift{transform:none;opacity:1}
body.rm .fa-unterschrift{transform:none;opacity:1;transition:none}
.fa-zitat.ohne-zeichen{padding-left:clamp(20px,2.2vw,34px)}
.fa-zitat.ohne-zeichen::before{display:none}
/* Bildunterschriften der Clips laufen ebenfalls von unten ein */
.clip-cap.fa-unterschrift{transform:translateY(110%);opacity:0;
  transition:transform .8s var(--e-satt),opacity .6s ease}
.ein .clip-cap.fa-unterschrift,.rv.ein .clip-cap.fa-unterschrift{transform:none;opacity:1}

/* ============================================ 9 — Weiche Übergänge
   Die Seite sprang an jeder Grenze hart von Nachthimmel auf Creme. Der
   Streifen nimmt die Kante heraus; die Farben kommen aus derselben Messung,
   die auch die Abschnitte einfärbt — nicht aus einer Annahme. */
.fa-uebergang{
  height:clamp(70px,9vh,130px);
  background:linear-gradient(180deg,var(--von) 0%,var(--nach) 100%);
  pointer-events:none;
}
@media (max-width:700px){.fa-uebergang{height:52px}}

/* Die Oberzeile war nur im Hero gestaltet — in den neuen Abschnitten stand
   sie als schlichter Satz da. Hier einmal fuer alle eigenen Bloecke. */
.fa-zahlen .fa-pf-oberzeile,
.fa-schritte .fa-pf-oberzeile,
.fa-presse .fa-pf-oberzeile,
.fa-wege .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 14px;
  display:flex;align-items:center;gap:14px;
}
.fa-zahlen .fa-pf-oberzeile::after,
.fa-schritte .fa-pf-oberzeile::after,
.fa-wege .fa-pf-oberzeile::after{
  content:"";flex:0 0 auto;width:clamp(40px,6vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-presse .fa-pf-oberzeile::after{display:none}

/* ============================================================ 11 — Zahlenband */
.fa-zahlen{background:var(--nachthimmel);padding:clamp(52px,7vh,92px) 24px}
.fa-zahlen-innen{max-width:var(--breite);margin:0 auto}
.fa-zahlen h2{
  font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(26px,3vw,42px);line-height:1.1;letter-spacing:-.022em;margin:0 0 34px;
}
.fa-zahlen ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:rgba(231,228,214,.12);
  border-top:1px solid rgba(231,228,214,.12);border-bottom:1px solid rgba(231,228,214,.12);
}
.fa-zahlen li{background:var(--nachthimmel);padding:26px 22px 24px}
.fa-zahl{
  display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.03em;
  color:var(--mondlicht);font-variant-numeric:tabular-nums;margin-bottom:10px;
}
.fa-zahlen b{display:block;font-size:15px;font-weight:600;color:var(--creme);margin-bottom:3px}
.fa-zahl-unter{display:block;font-size:13.5px;color:var(--salbeinebel)}

/* =========================================================== 12 — Schrittband */
.fa-schritte{background:#1e1e1e;padding:clamp(52px,7vh,92px) 24px}
.fa-schritte-innen{max-width:var(--breite);margin:0 auto}
.fa-schritte-kopf{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:32px;
}
.fa-schritte h2{
  font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(26px,3vw,42px);line-height:1.1;letter-spacing:-.022em;margin:0;
}
.fa-schritte ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
}
.fa-schritte li{
  position:relative;padding:22px 22px 22px 0;
  border-top:1px solid rgba(231,228,214,.14);
  transition:background .35s ease;
}
/* Die Linie oben wächst beim Einlaufen von links — fünf Schritte, fünf Linien */
.fa-schritte li::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--salbeinebel),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--e-satt);
  transition-delay:calc(var(--s,0) * 120ms);
}
.fa-schritte.ein li::before,.rv.ein .fa-schritte li::before{transform:scaleX(1)}
body.rm .fa-schritte li::before{transform:scaleX(1);transition:none}
.fa-schritt-nr{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.22em;color:var(--salbeinebel);margin-bottom:12px;
}
.fa-schritte b{display:block;font-size:17px;color:var(--creme);margin-bottom:5px}
.fa-schritte li > span:last-child{display:block;font-size:13.5px;color:var(--salbeinebel);line-height:1.5}
.fa-schritte li:hover{background:rgba(231,228,214,.04)}

/* ============================================================ 19 — Presseband */
.fa-presse{
  background:var(--nachthimmel);padding:clamp(34px,4.5vh,58px) 0;
  border-top:1px solid rgba(231,228,214,.08);
  border-bottom:1px solid rgba(231,228,214,.08);
  overflow:clip;
}
/* Die gemeinsame Regel macht aus der Oberzeile ein Flex-Element — damit
   greift text-align:center nicht mehr. Hier also ueber justify-content, und
   der Streifen laeuft randlos, die Zeile braucht deshalb eigenes Polster. */
.fa-presse .fa-pf-oberzeile{justify-content:center;margin:0 0 20px;padding:0 24px}
.fa-presse-band{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.fa-presse-band ul{
  list-style:none;margin:0;padding:0;display:flex;gap:clamp(34px,5vw,78px);
  white-space:nowrap;width:max-content;
  animation:fa-presselauf 42s linear infinite;
}
.fa-presse-band:hover ul{animation-play-state:paused}
.fa-presse-band li{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(19px,2vw,30px);letter-spacing:.03em;
  color:var(--salbeinebel);opacity:.85;
  transition:color .3s ease,opacity .3s ease;
}
.fa-presse-band li:hover{color:var(--mondlicht);opacity:1}
@keyframes fa-presselauf{to{transform:translateX(-50%)}}
/* Steht das Band still, ist die zweite Reihe kein Nahtschluss mehr, sondern
   eine sichtbare Wiederholung: fuenf Namen wurden zu zehn und brachen in drei
   krumme Zeilen um. Ohne Bewegung faellt sie weg, und die fuenf Namen stehen
   in einer Zeile. */
body.rm .fa-presse-band ul{animation:none;flex-wrap:wrap;white-space:normal;
  width:auto;justify-content:center;
  /* Die fuenf Namen sind zusammen 1271 px breit. Mit dem Laufband-Abstand von
     78 px brach immer einer allein in eine zweite Zeile; enger passen sie auf
     eine. Bricht es auf schmalen Schirmen doch um, halten 10 px Zeilenabstand
     die beiden Zeilen zusammen statt sie 72 px auseinanderzuziehen. */
  column-gap:clamp(16px,2vw,30px);row-gap:10px}
body.rm .fa-presse-naht{display:none}
body.rm .fa-presse-band{-webkit-mask-image:none;mask-image:none}

/* ============================================================== 20 — Drei Wege */
.fa-wege{background:var(--nachthimmel);padding:clamp(56px,8vh,110px) 24px}
.fa-wege-innen{max-width:var(--breite);margin:0 auto}
.fa-wege h2{
  font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.024em;margin:0 0 34px;
}
.fa-wege-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.fa-weg{
  position:relative;display:block;text-decoration:none;color:var(--creme);
  border-radius:14px;overflow:clip;isolation:isolate;
  min-height:clamp(300px,34vw,420px);
  border:1px solid rgba(231,228,214,.12);
  transition:border-color .4s ease,transform .5s var(--e-satt);
}
.fa-weg:hover{border-color:rgba(231,220,201,.5);transform:translateY(-6px)}
.fa-weg-bild{position:absolute;inset:0;z-index:-2;display:block}
.fa-weg-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--e-satt);filter:brightness(.72) saturate(.85)}
.fa-weg:hover .fa-weg-bild img{transform:scale(1.07)}
.fa-weg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,18,.25) 0%,rgba(20,22,18,.62) 52%,rgba(20,22,18,.92) 100%);
}
.fa-weg-text{
  position:absolute;left:0;right:0;bottom:0;padding:24px 24px 22px;display:block;
}
.fa-weg-ober{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mondlicht);margin-bottom:8px;
}
.fa-weg b{display:block;font-size:clamp(20px,2vw,26px);margin-bottom:6px;letter-spacing:-.01em}
.fa-weg-unter{display:block;font-size:14px;color:rgba(245,242,235,.86);max-width:26ch}
.fa-weg-pfeil{
  position:absolute;right:24px;bottom:24px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(231,228,214,.34);
  transition:background .3s ease,color .3s ease,transform .4s var(--e-satt);
}
.fa-weg:hover .fa-weg-pfeil{background:var(--mondlicht);color:#232323;transform:translateX(4px)}
body.rm .fa-weg-bild img,body.rm .fa-weg{transition:none}

/* ================================== 10 — Bildspalten bleiben stehen */
.fa-klebt-bild{position:sticky;top:calc(var(--kopfhoehe,74px) + 40px);align-self:start}
body.rm .fa-klebt-bild{position:static}

/* ================================== 13 — Die Bildstrecke fährt seitwärts */
.fa-gal-faehrt{position:relative;padding:0}
.fa-gal-fix{
  position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;
  overflow:clip;
}
.fa-gal-faehrt .fa-galerie-band{
  overflow:visible;      /* eigenes Scrollen aus, solange die Seite fährt */
  transform:translate3d(0,0,0);
  will-change:transform;
  cursor:default;
}
.fa-gal-faehrt .fa-galerie-tasten{display:none}
body.rm .fa-gal-faehrt{height:auto !important}
body.rm .fa-gal-fix{position:static;height:auto !important}
body.rm .fa-gal-faehrt .fa-galerie-band{overflow-x:auto;transform:none}
.fa-gal-fix{gap:clamp(20px,3vh,40px)}
.fa-gal-fortschritt{
  align-self:center;width:min(280px,60vw);height:2px;border-radius:2px;
  background:rgba(231,228,214,.14);overflow:hidden;flex:0 0 auto;
}
.fa-gal-fortschritt i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--salbeinebel),var(--mondlicht));
}
.fa-hell .fa-gal-fortschritt{background:rgba(30,33,28,.14)}
.fa-hell .fa-gal-fortschritt i{background:linear-gradient(90deg,var(--forest),#8C9479)}

/* ============================================ Bildstrecke als 3D-Karussell */
.fa-gal3d{background:var(--nachthimmel);padding:clamp(30px,5vh,56px) 0;position:relative}
.fa-gal3d-fix{display:grid;place-items:center;overflow:clip}
.fa-gal3d-buehne{
  width:100%;height:clamp(300px,38vw,430px);
  display:grid;place-items:center;
  cursor:grab;
}
.fa-gal3d-buehne.zieht{cursor:grabbing}
.fa-gal3d .fa-galerie-band{
  position:relative;
  list-style:none;margin:0;padding:0;
  width:var(--b,260px);height:clamp(260px,34vw,380px);
  will-change:transform;
}
.fa-gal3d .fa-galerie-band > li{
  position:absolute;inset:0;
  /* Die Transformation setzt das Skript je Kachel — siehe galerie3d.js. */
  transition:opacity .35s ease,filter .35s ease;
  border-radius:12px;overflow:clip;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
}
.fa-gal3d .fa-galerie-band > li img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e-satt);
}
.fa-gal3d .fa-galerie-band > li.vorn{
  box-shadow:0 40px 80px rgba(0,0,0,.65),0 0 0 1px rgba(231,220,201,.22);
}
.fa-gal3d .fa-galerie-band > li.vorn:hover img{transform:scale(1.05)}
/* Der Bodenschein hält den Ring am Boden, sonst schwebt er im Nichts. */
.fa-gal3d-fix::after{
  content:"";position:absolute;left:50%;bottom:14%;translate:-50% 0;
  width:min(70vw,760px);height:120px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(231,220,201,.10),transparent 72%);
  filter:blur(14px);
}
/* Die Fallback-Reihe, wenn das Skript nicht greift (zu wenige Bilder,
   Bewegung aus): waagerechte Strecke wie vorher. */
.fa-gal3d:not(.fa-gal3d-an) .fa-galerie-band{
  display:flex;gap:18px;overflow-x:auto;padding:0 24px;
  width:auto;height:auto;transform:none;
}
.fa-gal3d:not(.fa-gal3d-an) .fa-galerie-band > li{
  position:static;transform:none;flex:0 0 clamp(220px,26vw,320px);
  aspect-ratio:3/4;
}
@media (max-width:900px){
  .fa-gal3d-buehne{height:clamp(260px,62vw,340px)}
  .fa-gal3d .fa-galerie-band{height:clamp(230px,56vw,300px)}
}


/* Ein Abschnitt aus einem Wix-Block hat schmueckende Kreise ("orbs"), die
   ueber den rechten Rand ragen — gemessen 14 px. Der Ausschnitt gehoert an die
   Sektion; `clip` (nicht `hidden`) laesst dabei position:sticky in Ruhe. */
main .fa-sektion{overflow-x:clip}

/* DIE Ursache, warum in der Bildstrecke nur EINE Kachel gezeichnet wurde:
   die alte Reihe ist ein waagerechter Scroller (`overflow-x:auto`). Ein
   absolut gesetztes Kind wird darin auf den Kasten des Scrollers beschnitten
   — und der ist genau so breit wie eine Kachel. Alle anderen meldeten
   ordentlich ihre Lage und waren trotzdem weg. Weder 3D noch Deckkraft noch
   Weichzeichner waren schuld; drei Umbauten hat es gekostet, das zu finden.
   Der Scroller gehört hier abgeschaltet. */
.fa-gal3d .fa-galerie-band{
  overflow:visible !important;
  display:block !important;
  scroll-snap-type:none !important;
  cursor:default;
}

/* ===================================== 17 — Zweites Bild auf den Produktkarten */
.fa-hat-zweitbild{position:relative;overflow:clip;border-radius:6px}
.fa-zweitbild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .6s var(--e-weich),transform 1.1s var(--e-satt);
  pointer-events:none;
}
.fa-bildwechsel:hover .fa-zweitbild,
.fa-hat-zweitbild:hover .fa-zweitbild{opacity:1;transform:none}
.fa-bildwechsel:hover .product-image,
.fa-hat-zweitbild:hover .product-image{opacity:.12}
.product-image{transition:opacity .6s var(--e-weich)}
body.rm .fa-zweitbild{display:none}

/* ============================================================ Lichtstrecke
   Ersetzt den Wix-Block „Wir atmen Licht" — Entwurf 3.02 „Acht Minuten
   zwanzig". Vorher vier gleich breite Textspalten; jetzt eine Strecke aus
   fünf Stationen von der Sonne bis in die Zelle, jede mit einer Maßangabe.

   Vier Regeln, die hier teuer gelernt sind:

   * KEIN overflow:hidden auf der Sektion. Das machte sie zum Scrollbehälter
     und tötet position:sticky an anderer Stelle. Begrenzt wird am Band.
   * KEIN echtes CSS-3D. Die Wix-Blöcke ringsum setzen filter, opacity und
     overflow auf Elternelementen; jede dieser Eigenschaften flacht eine
     3D-Kette ein. Tiefe entsteht hier über Helligkeit und Streulicht in 2D.
   * Der AUSGANGSZUSTAND ist der FERTIGE Zustand. Alles Inszenierte hängt an
     der Klasse .ls-an, die das Skript nur bei eingeschalteter Bewegung setzt.
     Wer nicht scrollt — Bildschirmfoto, Vorschau, PDF-Export — sieht
     trotzdem den vollständigen Abschnitt.
   * Bewegt wird nur transform und opacity. Das Photon wandert über
     translateX in Bildpunkten (--ls-px), nicht über left: ein Prozentwert auf
     left rechnet bei jedem Bild das Layout neu, und ein prozentualer
     transform auf einem 100 % breiten Element schöbe das Element aus der
     Seite heraus — beides wäre teuer, das zweite auch ein Überstand.
   ------------------------------------------------------------------------ */
.fa-lichtstrecke{
  --ls-f:1;                  /* Aufbau der Achse, 0…1 — vom Skript gesetzt */
  --ls-px:0px;               /* Ort des Photons auf der Achse, in Bildpunkten */
  --ls-linie:rgba(231,220,201,.16);
  --ls-text2:#CFCCC4;
  background:
    radial-gradient(120% 74% at 6% 0%, rgba(231,220,201,.055), transparent 62%),
    linear-gradient(180deg,#232323 0%,#1E201C 100%);
  color:var(--creme);
  padding:clamp(48px,5.6vw,84px) 0 clamp(40px,4.6vw,64px);
  border-block:1px solid rgba(231,220,201,.10);
}
.fa-ls-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}

.fa-ls-ober{
  margin:0 0 20px;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--salbeinebel);
  display:flex;align-items:center;gap:14px;
}
.fa-ls-ober::after{
  content:"";flex:0 0 auto;width:clamp(40px,6vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-ls-kopf{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.6vw,60px);align-items:end;
}
.fa-ls-titel{
  margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,3.9vw,54px);line-height:1.12;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--creme);
}
.fa-ls-titel em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-weight:500;text-transform:none;color:var(--mondlicht);font-size:1.1em;
}
.fa-ls-vor{margin:0;font-size:16px;line-height:1.62;color:var(--ls-text2);max-width:44ch}

/* ------------------------------------------------------------- die Achse */
.fa-ls-achse{margin:clamp(34px,4.2vw,58px) 0 0;padding:0 24px}
.fa-ls-achse-in{position:relative;max-width:calc(var(--breite) - 48px);margin:0 auto}
.fa-ls-linie{position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(161,165,140,.22)}
.fa-ls-linie i{
  position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--ls-f));
  background:linear-gradient(90deg,rgba(161,165,140,.5),rgba(231,220,201,.85));
}
.fa-ls-photon{position:absolute;left:0;top:4px;width:100%;height:11px;pointer-events:none}
.fa-ls-photon i{
  position:absolute;left:0;top:0;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--mondlicht);will-change:transform;
  box-shadow:0 0 0 4px rgba(231,220,201,.12),0 0 20px 4px rgba(231,220,201,.30);
  transform:translateX(var(--ls-px));
}
.fa-ls-photon.weich i{transition:transform .55s var(--e-satt)}

.fa-ls-stationen{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  list-style:none;margin:0;padding:0;
}
.fa-ls-stationen li{position:relative;display:flex;justify-content:center}
.fa-ls-knopf{
  appearance:none;background:none;border:0;cursor:pointer;padding:24px 4px 0;
  display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
  font-family:"Space Grotesk",sans-serif;color:var(--salbeinebel);
  transition:color .35s ease;
}
.fa-ls-punkt{
  position:absolute;top:5px;left:50%;margin-left:-4.5px;width:9px;height:9px;
  border-radius:50%;background:#33352F;border:1px solid rgba(231,220,201,.40);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
.fa-ls-name{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;text-align:center}
.fa-ls-kmass{font-size:10.5px;letter-spacing:.06em;color:#9AA087}
.fa-ls-knopf:hover{color:var(--mondlicht)}
.fa-ls-knopf:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px;border-radius:6px}
.fa-ls-knopf[aria-current="true"]{color:var(--creme)}
.fa-ls-knopf[aria-current="true"] .fa-ls-kmass{color:var(--salbeinebel)}
.fa-ls-knopf[aria-current="true"] .fa-ls-punkt{
  background:var(--mondlicht);border-color:var(--mondlicht);
  box-shadow:0 0 0 4px rgba(231,220,201,.13);
}

/* --- die zugeschaltete Inszenierung -------------------------------------
   Nur mit .ls-an. Die Maßangaben ziehen auf, sobald die Achse ihre Station
   erreicht hat; gedimmt heißt hier .42 und nicht 0 — nichts darf dauerhaft
   unsichtbar sein, auch nicht für eineinhalb Sekunden. */
.ls-an .fa-ls-kmass{
  opacity:.42;transform:translateY(4px);
  transition:opacity .55s var(--e-weich),transform .55s var(--e-weich);
}
.ls-an li.erreicht .fa-ls-kmass{opacity:1;transform:none}
.ls-an .fa-ls-punkt{background:#2B2D27}
.ls-an li.erreicht .fa-ls-punkt{background:var(--salbeinebel);border-color:var(--salbeinebel)}
.ls-an .fa-ls-knopf[aria-current="true"] .fa-ls-punkt{
  background:var(--mondlicht);border-color:var(--mondlicht);
}

/* ----------------------------------------------------------- die Strecke */
.fa-ls-strecke{position:relative;margin:clamp(26px,3.2vw,42px) 0 0}
.fa-ls-band{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.fa-ls-band::-webkit-scrollbar{display:none}
.fa-ls-band:focus-visible{outline:2px solid var(--mondlicht);outline-offset:-3px}
.fa-ls-stat{flex:0 0 100%;scroll-snap-align:center;padding:0 24px}
.fa-ls-stat-in{
  max-width:calc(var(--breite) - 48px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(24px,4vw,66px);align-items:start;
  border-top:1px solid var(--ls-linie);padding-top:26px;
}
/* align-items:start und nicht center: die Maßangabe muss bei jeder Station an
   derselben Höhe stehen. Mittig ausgerichtet wandert sie mit der Länge des
   Absatzes daneben — beim Weiterblättern sähe das aus wie ein Wackler. */
.fa-ls-mass-gross{
  margin:0;font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-.02em;
  color:var(--mondlicht);
}
.fa-ls-mass-unter{
  margin:9px 0 0;font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-ls-mass::after{
  content:"";display:block;height:1px;margin-top:clamp(14px,2vw,20px);
  transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(231,220,201,.75),rgba(231,220,201,0));
}
.fa-ls-zaehler{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.24em;color:var(--salbeinebel);margin-bottom:14px;
}
.fa-ls-h3{
  margin:0 0 10px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-weight:500;font-size:clamp(24px,2.5vw,34px);line-height:1.2;color:var(--creme);
}
.fa-ls-p{margin:0;font-size:16.5px;line-height:1.66;color:var(--ls-text2);max-width:52ch}

@keyframes fa-ls-hoch{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fa-ls-strich{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ls-an .fa-ls-stat.an .fa-ls-mass-gross{animation:fa-ls-hoch .72s var(--e-satt) both}
.ls-an .fa-ls-stat.an .fa-ls-mass::after{animation:fa-ls-strich .9s .1s var(--e-satt) both}
.ls-an .fa-ls-stat.an .fa-ls-zaehler{animation:fa-ls-hoch .6s .08s var(--e-weich) both}
.ls-an .fa-ls-stat.an .fa-ls-h3{animation:fa-ls-hoch .66s .14s var(--e-weich) both}
.ls-an .fa-ls-stat.an .fa-ls-p{animation:fa-ls-hoch .72s .2s var(--e-weich) both}

/* ---------------------------------------------------------- die Steuerung */
.fa-ls-steuer{
  max-width:var(--breite);margin:clamp(22px,2.6vw,34px) auto 0;padding:0 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.fa-ls-pfeil{
  appearance:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(231,220,201,.34);color:var(--creme);
  display:grid;place-items:center;flex:0 0 auto;
  transition:background .3s ease,border-color .3s ease;
}
.fa-ls-pfeil:hover{background:rgba(231,220,201,.12);border-color:var(--mondlicht)}
.fa-ls-pfeil:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
.fa-ls-pfeil[disabled]{opacity:.38;cursor:default}
.fa-ls-hinweis{
  margin:0 0 0 auto;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-ls-hinweis-ruhig{
  display:none;margin:0 0 0 auto;font-family:"Space Grotesk",sans-serif;
  font-size:11px;letter-spacing:.08em;color:var(--salbeinebel);
}

/* ------------------------------------------------------ Randnotiz und Fuß */
.fa-ls-randnotiz{
  max-width:var(--breite);margin:clamp(30px,3.6vw,48px) auto 0;padding:0 24px;
  font-size:12.5px;line-height:1.65;color:var(--salbeinebel);
}
.fa-ls-randnotiz b{
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-ls-randnotiz span{color:var(--ls-text2)}
.fa-ls-fuss{
  max-width:var(--breite);margin:22px auto 0;padding:22px 24px 0;
  border-top:1px solid var(--ls-linie);
  display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;
}
.fa-ls-fuss .fa-cta{padding:13px 26px;font-size:13.5px}
.fa-ls-forsch{
  margin:0;flex:1 1 340px;font-size:12.5px;line-height:1.6;
  color:var(--salbeinebel);max-width:62ch;
}

/* --------------------------------------------------------- ohne Bewegung
   Die fünf Stationen stehen untereinander — kein waagerechter Behälter,
   keine Station, die man nur durch Wischen erreicht. Beide Wege sind nötig:
   body.rm setzt das Skript (Schalter im Fuß ODER Systemeinstellung), die
   @media-Abfrage greift auch dann, wenn gar kein Skript läuft. */
body.rm .fa-ls-band{display:block;overflow:visible;scroll-snap-type:none}
body.rm .fa-ls-stat + .fa-ls-stat{margin-top:clamp(26px,3vw,40px)}
body.rm .fa-ls-hinweis{display:none}
body.rm .fa-ls-hinweis-ruhig{display:block}
body.rm .fa-ls-photon i,body.rm .fa-ls-punkt,body.rm .fa-ls-kmass{transition:none}

@media (prefers-reduced-motion:reduce){
  .fa-ls-band{display:block;overflow:visible;scroll-snap-type:none;scroll-behavior:auto}
  .fa-ls-stat + .fa-ls-stat{margin-top:clamp(26px,3vw,40px)}
  .fa-ls-hinweis{display:none}
  .fa-ls-hinweis-ruhig{display:block}
  .fa-ls-photon i,.fa-ls-punkt,.fa-ls-kmass{transition:none}
  .ls-an .fa-ls-stat.an > *,.ls-an .fa-ls-stat.an *{animation:none}
}
@media print{
  .fa-ls-band{display:block;overflow:visible}
  .fa-ls-stat + .fa-ls-stat{margin-top:24px}
}

@media (max-width:860px){
  .fa-ls-kopf{grid-template-columns:1fr;gap:20px;align-items:start}
}
@media (max-width:760px){
  .fa-ls-achse{padding:0 20px}
  .fa-ls-innen,.fa-ls-steuer,.fa-ls-randnotiz{padding-inline:var(--rand)}
  .fa-ls-fuss{padding-inline:20px}
  .fa-ls-stat{padding:0 20px}
  .fa-ls-achse-in,.fa-ls-stat-in{max-width:calc(var(--breite) - 40px)}
  .fa-ls-knopf{padding-top:22px;gap:3px}
  .fa-ls-name{font-size:9.5px;letter-spacing:.03em}
  .fa-ls-kmass{display:none}
  .fa-ls-stat-in{grid-template-columns:1fr;gap:18px}
  .fa-ls-mass-gross{font-size:clamp(30px,8.6vw,40px)}
  .fa-ls-mass::after{margin-top:12px}
  .fa-ls-p{font-size:15.5px}
  .fa-ls-hinweis,.fa-ls-hinweis-ruhig{margin-left:0;flex-basis:100%;letter-spacing:.1em}
}

/* ================================ Aufwertung der übernommenen Wix-Abschnitte
   Diese drei Blöcke kommen aus Wix und bleiben inhaltlich, wie sie sind — sie
   bekommen nur eine Gestaltungsebene darüber. Alles ist auf den jeweiligen
   Block eingegrenzt, damit nichts in andere Embeds ausläuft. */

/* --- „Forest Air anwenden" (zwei tägliche Rituale) ---------------------
   SOLL ist forestairforeverywhere.com/de. Dort steckt jede Karte in einem
   iframe von 468 px Breite. Die @media-Abfragen IM Embed messen das iframe —
   es greift also der schmale Zweig (max-width:800px): Ziffer 72 px,
   Überschrift bis 42 px, Fliesstext 17 px, Innenabstand 48/24 bzw. 28/22.
   Bei uns liegt derselbe Baustein direkt in der Seite. Das @media misst jetzt
   das FENSTER (1440) und der breite Zweig gewinnt: Ziffer 104 px, Überschrift
   56 px, Innenabstand 56/48. Gemessen wurde die Karte damit 711 statt 536 px
   hoch, die Überschrift brach um, und über der Ziffer stand ein Loch.
   03_embed.py kann das nicht allgemein loesen (Container-Abfragen wuerden
   jeden Embed der Seite umstellen) — deshalb wird der schmale Zweig hier von
   Hand nachgezogen, eng auf .fa-ritual begrenzt.
   Die frueheren Zutaten (Pillen-Etikett, blasse Ziffer, Haarlinie oben links)
   sind raus: die Haarlinie kollidierte mit dem ::before des Embeds und blieb
   als winziger Strich über der Ziffer stehen, die blasse Ziffer kam auf
   1,3:1 Kontrast. */
.fa-ritual{align-items:start;gap:34px;max-width:1040px}
.fa-ritualspalte{display:flex;flex-direction:column;min-width:0}
/* Dieselbe Falle wie in rahmen.css: .fa-halter und .fa-bild bringen
   margin:0 auto und einen Seitenabstand mit. In einer Spalte (Flex) macht der
   automatische Rand aus dem Kasten einen Schrumpfkasten — und weil der Inhalt
   ein container-type:inline-size ist, der nichts zur Breite beitraegt, bleiben
   0 px uebrig. Gemessen: die Fusszeile war 48 px breit und 616 px hoch. */
.fa-ritualspalte > .fa-halter,
.fa-ritualspalte > .fa-bild{
  margin:0;max-width:none;width:100%;min-width:0;padding:0;
}
/* Keine reservierte Hoehe: die Karte soll sich um ihren Text legen. */
.fa-ritual .fa-halter{min-height:0}
.fa-ritual .section{
  min-height:0 !important;padding:0 !important;display:block !important;
}
.fa-ritual .inner{max-width:none !important}
.fa-ritual .way-text{padding:30px 26px 32px !important}
/* Der senkrechte Strich im Karteninneren gehoert zum breiten Zweig des
   Embeds; im schmalen (also auf der Wix-Seite) ist er ausgeschaltet. */
.fa-ritual .way-text::before{display:none !important}
.fa-ritual .way-num-large{
  font-size:72px !important;line-height:1 !important;margin-bottom:12px !important;
}
.fa-ritual .way-title{
  font-size:clamp(30px,3.1vw,42px) !important;margin-bottom:24px !important;
  letter-spacing:-.01em;
}
.fa-ritual .way-body{
  font-size:17px !important;line-height:1.62 !important;margin-bottom:18px !important;
}
.fa-ritual .way-body:last-child{margin-bottom:0 !important}
/* Die Fotos liegen unbeschnitten vor (1536x1024). Auf der Wix-Seite sind sie
   auf 450x428 bzw. 450x495 gefuellt — sonst steht neben der Karte ein flaches
   Breitbild und die Spalten sind verschieden hoch. */
.fa-ritualfoto img{
  width:100%;max-width:none !important;height:auto;
  aspect-ratio:450/428;object-fit:cover;object-position:63% 50%;
}
#s-comp-mp15053b .fa-ritualfoto img{aspect-ratio:450/495;object-position:50% 50%}
/* Die Fusszeile steht in der Fotospalte, direkt unter dem Foto — mit ihrer
   eigenen Haarlinie darueber (die bringt der Embed mit). */
.fa-ritual .caption-block{padding:17px 0 0 !important}
@media (max-width:900px){
  .fa-ritual{max-width:none}
  /* Foto zuerst — samt seiner Fusszeile, die inhaltlich dazugehoert. */
  .fa-ritual > .fa-ritualspalte{order:-1}
  .fa-ritual .way-text{padding:26px 20px 28px !important}
  .fa-ritual .way-num-large{font-size:62px !important}
}

/* --- „Für alle, die atmen" (die Anwendungsbereiche) --- */
.fa-halter .who-card,.fa-halter .cond-card,.fa-halter .use-card{
  border-radius:12px !important;
  transition:transform .45s var(--e-satt),box-shadow .4s ease,border-color .4s ease;
}
.fa-halter .who-card:hover,.fa-halter .cond-card:hover,.fa-halter .use-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(20,22,18,.16);
  border-color:rgba(86,94,76,.55) !important;
}
.fa-halter .who-icon,.fa-halter .cond-icon{
  transition:transform .5s var(--e-satt);
}
.fa-halter .who-card:hover .who-icon,
.fa-halter .cond-card:hover .cond-icon{transform:scale(1.12) rotate(-4deg)}

/* --- „Von Partnern weltweit empfohlen" --- */
.fa-halter .partner-box,.fa-halter .partners-inner{position:relative}
.fa-halter .partner-cta,.fa-halter .partners-cta{
  transition:transform .35s var(--e-satt),box-shadow .35s ease;
}
.fa-halter .partner-cta:hover,.fa-halter .partners-cta:hover{
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(86,94,76,.28);
}
body.rm .fa-halter .who-card,body.rm .fa-halter .cond-card,
body.rm .fa-halter .use-card{transition:none;transform:none}

/* ================================= Bildstrecke: Spiegelboden und Tiefe
   Die Wand steht auf einer glänzenden Fläche. Das Spiegelbild ist eine
   zweite Grafik, senkrecht gespiegelt und nach unten ausgeblendet — kein
   `filter`, keine dritte Dimension. Beides bricht in dieser Seite (siehe
   Kommentar in galerie3d.js); eine zweite Grafik nicht. */
.fa-gal3d-an .fa-galerie-band > li{
  overflow:visible !important;
  box-shadow:none !important;
  display:flex;flex-direction:column;
}
.fa-gal-bild{
  display:block;position:relative;flex:0 0 auto;height:100%;
  border-radius:12px;overflow:clip;
  box-shadow:0 26px 54px rgba(0,0,0,.62), 0 0 0 1px rgba(231,220,201,.07);
}
.fa-gal-bild img{width:100%;height:100%;object-fit:cover;display:block}

.fa-gal-spiegel{
  display:block;position:relative;flex:0 0 auto;
  height:34%;margin-top:3px;border-radius:12px;overflow:clip;
  opacity:.30;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
          mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.fa-gal-spiegel img{
  width:100%;height:294%;object-fit:cover;display:block;
  transform:scaleY(-1);transform-origin:50% 0;
}
/* Das vordere Bild spiegelt sich am kräftigsten — es steht im Licht. */
.fa-gal3d-an .fa-galerie-band > li.vorn .fa-gal-spiegel{opacity:.42}
.fa-gal3d-an .fa-galerie-band > li.vorn .fa-gal-bild{
  box-shadow:0 36px 78px rgba(0,0,0,.7), 0 0 0 1px rgba(231,220,201,.22);
}

/* Der Boden: ein Lichtstreifen unter der Wand plus ein dunkler Horizont.
   Ohne ihn schwebt die Spiegelung im Nichts. */
.fa-gal3d-buehne{position:relative}
.fa-gal3d-buehne::before{
  content:"";position:absolute;left:50%;bottom:16%;translate:-50% 0;
  width:min(92vw,1500px);height:180px;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 100% at 50% 0%,rgba(231,220,201,.10),transparent 72%),
    linear-gradient(180deg,rgba(231,228,214,.055),transparent 70%);
  filter:blur(2px);
}
/* Seitliche Verdunklung — die Wand läuft ins Dunkle, statt abgeschnitten
   zu wirken. */
.fa-gal3d-fix{position:relative}
.fa-gal3d-fix::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,var(--nachthimmel) 0%,rgba(35,35,35,0) 16%,
             rgba(35,35,35,0) 84%,var(--nachthimmel) 100%);
}
/* Die Kachel braucht Platz für ihr Spiegelbild */
.fa-gal3d .fa-galerie-band{height:clamp(300px,40vw,440px)}
.fa-gal3d-buehne{height:clamp(360px,48vw,560px)}
@media (max-width:900px){
  .fa-gal3d .fa-galerie-band{height:clamp(250px,60vw,330px)}
  .fa-gal3d-buehne{height:clamp(300px,72vw,400px)}
  .fa-gal-spiegel{height:26%}
  .fa-gal-spiegel img{height:385%}
}
body.rm .fa-gal-spiegel{display:none}

/* ============================================== Videoabschnitt aufgewertet
   Vorher: eine flache Fläche mit einem Standbild darauf und einem grauen
   Kreis als Abspielknopf — es sah nach Platzhalter aus. Jetzt steht der Film
   auf einer Bühne im Dunkeln: ein weiter Lichtkegel dahinter, ein gerahmter
   Bildschirm mit Schlagschatten, und ein Abspielknopf, der atmet. */
#blk-comp-mqxionsv .fa-video-wrap{
  position:relative;isolation:isolate;
  padding:clamp(40px,6vh,80px) 0 clamp(46px,7vh,90px) !important;
  background:
    radial-gradient(72% 60% at 50% 34%, rgba(58,60,52,.55) 0%, rgba(28,28,28,0) 66%),
    radial-gradient(120% 90% at 50% 0%, #2b2b2b 0%, var(--nachthimmel) 62%) !important;
}
/* Ein Lichtkegel von oben — er macht aus der Fläche einen Raum. */
#blk-comp-mqxionsv .fa-video-wrap::before{
  content:"";position:absolute;left:50%;top:-4%;translate:-50% 0;z-index:-1;
  width:min(1100px,86vw);height:74%;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,
             transparent 40%, rgba(231,220,201,.10) 50%, transparent 60%);
  filter:blur(22px);
}
#blk-comp-mqxionsv .fa-heading{
  font-family:"Space Grotesk",sans-serif !important;
  letter-spacing:-.022em !important;margin-bottom:clamp(26px,4vh,48px) !important;
}
#blk-comp-mqxionsv .fa-accent{
  font-family:"Cormorant Garamond",Georgia,serif !important;font-style:italic;
  color:var(--mondlicht) !important;
}
/* Der Bildschirm bekommt einen Rahmen, einen Schlagschatten und einen
   Bodenschein — er steht, statt zu kleben. */
#blk-comp-mqxionsv .fa-screen{
  border-radius:14px !important;overflow:clip;
  box-shadow:0 44px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(231,220,201,.14) !important;
  transition:transform .6s var(--e-satt),box-shadow .6s ease;
}
#blk-comp-mqxionsv .fa-stage{position:relative}
#blk-comp-mqxionsv .fa-stage::after{
  content:"";position:absolute;left:50%;bottom:-34px;translate:-50% 0;
  width:76%;height:44px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(231,220,201,.16),transparent 74%);
  filter:blur(12px);
}
#blk-comp-mqxionsv .fa-video-wrap:hover .fa-screen{
  transform:translateY(-4px);
  box-shadow:0 54px 110px rgba(0,0,0,.68), 0 0 0 1px rgba(231,220,201,.3) !important;
}
/* Der Abspielknopf atmet, statt grau dazustehen. */
#blk-comp-mqxionsv .fa-play-ring{
  border-color:rgba(231,220,201,.55) !important;
  animation:fa-videopuls 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes fa-videopuls{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.14);opacity:1}
}
#blk-comp-mqxionsv .fa-poster{
  background:radial-gradient(closest-side,rgba(20,20,20,.35),transparent 78%) !important;
  transition:background .4s ease;
}
#blk-comp-mqxionsv .fa-poster:hover{background:radial-gradient(closest-side,rgba(20,20,20,.1),transparent 80%) !important}
#blk-comp-mqxionsv .fa-play{
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition:transform .35s var(--e-satt);
}
#blk-comp-mqxionsv .fa-poster:hover .fa-play{transform:scale(1.12)}
body.rm #blk-comp-mqxionsv .fa-play-ring{animation:none}

/* ==========================================================================
   FILMBAND — die Bildstrecke der Startseite (Entwurf 03)
   --------------------------------------------------------------------------
   Ein waagerechtes Laufband mit Perforation oben und unten. Es laeuft
   gleichmaessig und ohne Ende von rechts nach links durch, ganz von allein.
   Faehrt der Zeiger darueber, bleibt es stehen; faehrt er weg, laeuft es
   weiter.

   DER SCROLL IST HIER RAUS. Bis hierher hing das Band am Scrollstand: der
   Abschnitt bekam unter dem Inhalt eine leere Bahn (.fa-fb-weg), der Inhalt
   blieb per position:sticky darueber stehen, und der Scroll wickelte das Band
   ab. Das hielt die Seite an. Bahn, Haltepunkt und Fortschrittsspur sind
   ersatzlos entfallen — der Abschnitt ist wieder so hoch wie sein Inhalt.

   Vier Dinge sind teuer gelernt und duerfen nicht "vereinfacht" werden:

   1  KEIN echtes 3D. preserve-3d und perspective brechen auf dieser Seite,
      weil die Wix-Bloecke ringsum filter, opacity und overflow auf
      Elternelemente setzen — jede dieser Eigenschaften erzeugt einen eigenen
      Stapelkontext und flacht die Raumtiefe ein. Bewegt wird mit einem
      einzigen translate3d.

   2  KEIN overflow-x:auto auf dem laufenden Band. Ein waagerechter
      Scrollcontainer schneidet absolut positionierte Kinder auf eine
      Kachelbreite zusammen. Deshalb liegen Bild und Unterschrift als RASTER
      uebereinander (grid-area 1/1), nicht absolut — und der Rahmen bekommt
      erst dann overflow:hidden, wenn das Skript uebernimmt (.fa-fb-an).

   3  KEIN overflow:hidden auf .fa-filmband selbst. Das macht aus der Sektion
      einen Scrollbehaelter und toetet position:sticky an anderer Stelle —
      genau so ist es auf der Wirkungsweise-Seite schon einmal passiert.
      Begrenzt wird am Rahmen, nicht am Abschnitt.

   4  KEIN waagerechtes padding am LAUFENDEN Band. Der Ruecksprung setzt den
      Versatz um genau eine Satzbreite zurueck; ein Innenabstand vor der
      ersten Kachel wuerde an dieser Stelle als schmaler dunkler Spalt
      aufblitzen. Im ruhigen, scrollbaren Band ist er dagegen richtig.

   Grundzustand ohne JavaScript und bei abbestellter Bewegung: ein schlicht
   seitwaerts scrollbares Band mit neun Bildern. Nichts bewegt sich von
   allein, alles ist sichtbar und erreichbar.
   ========================================================================== */

.fa-filmband{
  background:var(--nachthimmel);
  padding:clamp(24px,3vw,44px) 0 clamp(20px,2.6vw,36px);
  --fb-leise:#C7C4BF;
}

/* --------------------------------------------------------------- Kopfzeile
   Der Zaehler ("Neun Bilder · Laeuft mit dem Scrollen") ist ersatzlos raus —
   er stimmte nur, solange der Scroll das Band bewegte. Uebrig bleiben
   Oberzeile und Ueberschrift, und die steht jetzt in derselben Groesse wie
   die uebrigen Abschnittstitel der Seite; vorher war sie mit hoechstens 27 px
   deutlich zu klein fuer das, was darunter passiert. */
.fa-fb-kopf{
  max-width:var(--breite);margin:0 auto clamp(15px,1.9vw,26px);
  padding:0 clamp(16px,2vw,24px);
}
.fa-fb-ober{
  margin:0 0 clamp(6px,.8vw,11px);
  font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-fb-titel{
  margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:.012em;
  text-transform:uppercase;color:var(--creme);
}

/* ------------------------------------------------------------ Der Rahmen
   Die Perforation sitzt auf der HUELLE, nicht auf dem Rahmen. Der Rahmen ist
   in der ruhigen Fassung ein Scrollcontainer — ein Schmuckelement darin
   wuerde mitscrollen und aus dem Bild laufen. */
.fa-fb-huelle{
  position:relative;background:#1A1A1A;
  border-block:1px solid rgba(231,220,201,.12);
}
.fa-fb-huelle::before,.fa-fb-huelle::after{
  content:"";position:absolute;left:0;right:0;height:7px;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(90deg,
    rgba(231,220,201,.24) 0 11px,transparent 11px 30px);
}
.fa-fb-huelle::before{top:4px}
.fa-fb-huelle::after{bottom:4px}

.fa-fb-rahmen{
  position:relative;padding:13px 0;
  /* Grundzustand: seitwaerts scrollbar. Erst .fa-fb-an schaltet auf die
     Fassung um, die das Skript bewegt. */
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fa-fb-rahmen::-webkit-scrollbar{display:none}
.fa-fb-rahmen:focus-visible{outline:2px solid var(--mondlicht);outline-offset:-3px}

.fa-fb-rahmen.fa-fb-an{overflow:hidden;cursor:grab}
.fa-fb-rahmen.fa-fb-an:active{cursor:grabbing}

.fa-fb-band{
  display:flex;gap:9px;margin:0;list-style:none;
  padding:0 clamp(14px,2.4vw,24px);
  width:max-content;
}
/* Im Lauf ohne Innenabstand (siehe Punkt 4 oben) und auf einer eigenen
   Ebene — so kostet die Bewegung nur noch das Zusammensetzen des Bildes. */
.fa-fb-an .fa-fb-band{padding:0;will-change:transform}

/* Die Kachelbreite steht in --fb-kachel, sobald das Skript laeuft, und zwar
   auf ganze Bildpunkte gerundet. Grund: bei 1440 px ergibt 24vw 345,6 px, ein
   voller Satz misst dann 3191,4 px. Der Ruecksprung verschiebt das Band um
   genau eine Satzbreite — ist die gebrochen, aendert sich dabei die Lage
   zwischen den Bildpunkten, und der Browser tastet in diesem einen Bild die
   ganze Reihe neu ab. Man sieht kein Springen, aber ein Zucken. Mit ganzen
   Bildpunkten bleibt die Lage exakt erhalten. Ohne Skript gilt der
   Rueckfallwert dahinter. */
.fa-fb-kachel{
  flex:none;
  /* Ein Viertel kleiner als zuvor. Und: NICHT mehr alle Kacheln gleich breit.
     Die neun Fotos haben drei verschiedene Seitenverhaeltnisse (1,50 quer,
     1,33, und 0,75 hoch). Bei fester Kachelbreite schnitt object-fit:cover
     besonders die Hochformate brutal an. Jetzt gibt die Hoehe das Mass vor,
     die Breite folgt dem Bild — so ist jedes Foto vollstaendig zu sehen, ohne
     Balken daneben. Das Skript rundet die Breite jeder Kachel auf ganze
     Bildpunkte, damit der Ruecksprung des Endlos-Laufs unsichtbar bleibt. */
  width:auto;
  height:clamp(201px,21.6vw,312px);
  overflow:hidden;background:#111;border-radius:1px;
}
/* Der zweite Kachelsatz traegt den Endlos-Lauf: sobald der Versatz eine volle
   Satzbreite erreicht hat, wird er darum verkleinert, und weil hier Bild fuer
   Bild dasselbe steht, sieht man keinen Sprung. Ohne Skript und bei
   abbestellter Bewegung waere er im scrollbaren Band nur ein Duplikat — dann
   ist er aus. */
.fa-fb-doppel{display:none}
.fa-filmband.fa-fb-laeuft .fa-fb-doppel{display:block}

/* Bild und Unterschrift teilen sich EINE Rasterzelle. grid-template:100%/100%
   pinnt die Zelle auf die Kachel — sonst zieht die Eigenbreite des Bildes
   (bis 6240 px) die Spalte auf. */
/* relative + absolut gesetzte Unterschrift: sonst bestimmt die Textzeile
   (white-space:nowrap) die Kachelbreite, und neben schmalen Hochformaten
   stand ein leerer Streifen. Jetzt gibt allein das Bild das Mass. */
.fa-fb-kachel figure{margin:0;position:relative;height:100%;width:auto;display:block}
.fa-fb-kachel img{
  width:auto;height:100%;min-width:0;max-width:none;
  object-fit:contain;display:block;
  -webkit-user-select:none;user-select:none;
}
.fa-fb-unter{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:var(--nachthimmel);
  padding:11px 15px;
  font-family:"Space Grotesk",sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mondlicht);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* Die Bildunterschriften der Startseite laufen sonst von unten ein
     (.fa-unterschrift aus Punkt 18). Hier steht sie fest. */
  transform:none !important;opacity:1 !important;
}
.fa-fb-nr{color:var(--salbeinebel);margin-right:9px}

/* -------------------------------------------------------------- Fusszeile
   Der Bedienhinweis ("Scrollen bewegt das Band — oder Pfeiltasten, oder
   ziehen") ist ersatzlos raus; bewegt wird nichts mehr von Hand. Uebrig
   bleibt die ruhige Fassung, und die steht nur dort, wo sie stimmt: ohne
   Skript und bei abbestellter Bewegung, wenn das Band wirklich ein Band zum
   Wischen ist. */
.fa-fb-fuss{display:none}
.fa-filmband:not(.fa-fb-laeuft) .fa-fb-fuss{
  display:block;max-width:var(--breite);margin:11px auto 0;
  padding:0 clamp(16px,2vw,24px);
}
.fa-fb-hinweis-ruhig{margin:0;font-size:12.5px;color:var(--fb-leise)}

/* ------------------------------------------- Ruhig: nur ein Band zum Scrollen
   Beides wird abgefangen: der Schalter im Fuss (body.rm) und die
   Systemeinstellung fuer den Fall, dass gar kein Skript laeuft. */
body.rm .fa-fb-rahmen{overflow-x:auto;overflow-y:hidden;cursor:auto}
body.rm .fa-fb-band{transform:none !important;will-change:auto}
body.rm .fa-fb-doppel{display:none !important}
@media (prefers-reduced-motion:reduce){
  .fa-fb-band{transition:none !important}
}

@media (max-width:700px){
  .fa-fb-kopf{margin-bottom:13px}
  .fa-fb-ober{font-size:10px;letter-spacing:.24em}
  .fa-fb-hinweis-ruhig{font-size:12px}
  .fa-fb-unter{font-size:9.5px;letter-spacing:.12em;padding:6px 9px}
}


/* ==========================================================================
   VERTIEFUNG — das Warburg-Kapitel (Entwurf 08)
   --------------------------------------------------------------------------
   Vorher zwei Wix-Embeds mit zusammen 2051 px. Offen stehen jetzt nur das
   Zitat und der Schlusssatz; die drei Gedanken dazwischen und die
   Quellenangabe liegen in einem <details>-Aufklapper — kein JavaScript, mit
   Tabulator und Leertaste bedienbar, beim Drucken oeffnet ihn der Browser.
   ========================================================================== */

.fa-vertiefung{
  background:linear-gradient(180deg,#242424,#1E1E1E);
  border-block:1px solid rgba(245,242,235,.09);
  padding:clamp(32px,4vw,44px) var(--rand) clamp(28px,3.4vw,36px);
  color:var(--creme);
  --vt-leise:#C7C4BF;
}
.fa-vt-innen{max-width:1080px;margin:0 auto;text-align:center}

.fa-vt-ober{
  margin:0 0 20px;font-family:"Space Grotesk",sans-serif;font-size:10px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--salbeinebel);
}
/* Das Anfuehrungszeichen steht im Text — der Schmuck aus Punkt 16 wuerde ein
   zweites davorsetzen. startseite.js laesst diesen Block deshalb aus. */
.fa-vt-zitat{
  margin:0 auto;max-width:26ch;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,3.5vw,50px);line-height:1.12;letter-spacing:-.012em;
  color:var(--creme);text-wrap:balance;hyphens:none;padding:0;
}
.fa-vt-hell{color:var(--mondlicht)}

.fa-vt-raute{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin:22px auto 18px;max-width:320px;
}
.fa-vt-raute span{
  height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(161,165,140,.7),transparent);
}
.fa-vt-raute i{width:7px;height:7px;transform:rotate(45deg);background:var(--mondlicht);display:block}

.fa-vt-quelle{
  margin:0;font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--salbeinebel);
}

.fa-vt-gegen{
  margin:22px auto 0;max-width:760px;padding:20px 26px;
  border:1px solid rgba(231,220,201,.24);border-radius:3px;
  background:rgba(47,52,40,.55);
}
.fa-vt-marke{
  display:block;margin-bottom:9px;font-family:"Space Grotesk",sans-serif;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mondlicht);
}
.fa-vt-satz{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(18px,1.8vw,26px);line-height:1.3;color:var(--creme);
}
.fa-vt-satz em{font-style:italic;color:var(--mondlicht)}

/* ------------------------------------------------------------- Aufklapper */
.fa-vt-mehr{
  max-width:940px;margin:22px auto 0;text-align:left;
  border-top:1px solid rgba(245,242,235,.13);
}
.fa-vt-knopf{
  list-style:none;cursor:pointer;padding:14px 2px 0;
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mondlicht);
}
/* Der Pfeil allein sagt zu wenig — der Klammerzusatz sagt, dass hier etwas
   aufgeht. Eine Spur leiser als die Zeile davor, aber nicht so leise, dass er
   unter die Kontrastgrenze faellt.

   Zwei Zusaetze, einer je Zustand, umgeschaltet ueber [open]. Beide Texte
   stehen in inhalte.py — ein "(aufklappen)" an einem offenen Aufklapper waere
   schlicht falsch, und ein Skript braucht es dafuer nicht. */
.fa-vt-hin{
  font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.12em;text-transform:none;color:var(--salbeinebel);
}
.fa-vt-hin-zu{display:none}
.fa-vt-mehr[open] .fa-vt-hin-auf{display:none}
.fa-vt-mehr[open] .fa-vt-hin-zu{display:inline}
.fa-vt-knopf::-webkit-details-marker{display:none}
.fa-vt-knopf::marker{content:""}
.fa-vt-knopf:focus-visible{outline:2px solid var(--mondlicht);outline-offset:4px}
.fa-vt-pfeil{
  width:9px;height:9px;flex:none;
  border-right:1px solid var(--mondlicht);border-bottom:1px solid var(--mondlicht);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--e-satt);
}
.fa-vt-mehr[open] .fa-vt-pfeil{transform:rotate(-135deg) translateY(-2px)}

.fa-vt-tief{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px;
  padding:20px 0 6px;
}
.fa-vt-nr{
  display:block;margin-bottom:6px;font-family:"Space Grotesk",sans-serif;
  font-size:10.5px;letter-spacing:.24em;color:var(--salbeinebel);
}
.fa-vt-bt{
  margin:0 0 6px;font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.03em;color:var(--creme);text-transform:none;
}
.fa-vt-tx{margin:0;color:var(--vt-leise);font-size:13.5px;line-height:1.58}
.fa-vt-tx + .fa-vt-tx{margin-top:7px}
.fa-vt-tx b{color:var(--creme);font-weight:600}

.fa-vt-belegt{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(245,242,235,.09);
}
.fa-vt-belegt .fa-vt-tx{max-width:78ch}

.fa-vt-abs{
  max-width:940px;margin:20px auto 0;padding-top:14px;
  border-top:1px solid rgba(245,242,235,.13);text-align:center;
}
/* 107 Zeichen je Zeile bei 1600 px (gemessen 15.08.). Die Begrenzung
   braucht margin-inline:auto — der Behaelter ist mittig gesetzt, ein
   begrenzter Block darin steht sonst linksbuendig und sieht schief
   aus, obwohl der Text zentriert ist. */
.fa-vt-fuss{margin:0 auto;font-size:12px;line-height:1.55;
  color:var(--salbeinebel);max-width:80ch}
.fa-vt-hinweis{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--salbeinebel)}

@media (max-width:860px){
  .fa-vt-tief{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fa-vt-gegen{padding:16px 18px}
  .fa-vt-knopf{letter-spacing:.16em;font-size:11px}
}


/* -------------------------------------------------- Produktkarte anklickbar
   Der Zeiger sagt, was der Klick kann. Gesetzt wird die Klasse vom Skript —
   ohne Skript bleibt der Knopf in der Karte der einzige Weg, und dann soll
   die Karte auch nicht so tun, als waere sie anklickbar. */
.product-card.fa-karte-klickbar{cursor:pointer}
.product-card.fa-karte-klickbar a,
.product-card.fa-karte-klickbar button{cursor:pointer}


/* ==========================================================================
   Warum ausgerechnet Licht — als Kartenstapel
   --------------------------------------------------------------------------
   Links steht, worum es geht und welche Frage sich daraus ergibt. Rechts
   liegt der Stapel: acht Karten, die vorderste scharf, die dahinter
   gestaffelt und weggekippt.

   DIE HÖHE IST FEST. Alle Karten liegen absolut übereinander, der Kasten
   hat eine gesetzte Höhe. Ohne das springt der Abschnitt bei jedem
   Blättern und schiebt den Rest der Seite hoch und runter — das ist der
   Grund, warum die meisten Karussells sich billig anfühlen.

   OHNE JAVASCRIPT IST ES EINE LISTE. Alles unten hängt an .bereit, und
   die Klasse setzt erst das Skript. Fällt es aus, stehen acht lesbare
   Blöcke untereinander.
   ========================================================================== */
.fa-warumlicht{
  background:
    radial-gradient(70% 110% at 82% 6%, rgba(231,220,201,.10) 0%, transparent 58%),
    radial-gradient(90% 130% at 8% 100%, rgba(86,94,76,.24) 0%, transparent 62%),
    #1b1d19;
  border-top:1px solid rgba(231,228,214,.09);
  border-bottom:1px solid rgba(231,228,214,.09);
  overflow:hidden;
}
.fa-wl-innen{ max-width:var(--breite); margin:0 auto; padding:clamp(50px,6.5vw,88px) var(--rand); }

.fa-kt-raster{
  display:grid; grid-template-columns:minmax(300px,.86fr) 1.14fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}

/* ------------------------------------------------------------------ links */
.fa-warumlicht .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 15px;
  display:flex; align-items:center; gap:14px;
}
.fa-warumlicht .fa-pf-oberzeile::after{
  content:""; flex:0 0 auto; width:clamp(30px,4vw,74px); height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-wl-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(29px,3.9vw,50px); line-height:1.06; margin:0 0 18px; color:var(--creme);
}
.fa-wl-titel em{ font-style:italic; color:var(--mondlicht); }
.fa-wl-vor{ margin:0 0 26px; font-size:15.5px; line-height:1.75; color:var(--salbeinebel); max-width:44ch; }

.fa-kt-frage{
  border-left:2px solid rgba(231,220,201,.4); padding:2px 0 2px 18px; margin:0 0 24px;
}
.fa-kt-f-ober{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--salbeinebel); margin:0 0 10px;
}
.fa-kt-f-satz{
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(16px,1.9vw,20px); line-height:1.45; margin:0; color:var(--creme);
}
.fa-kt-f-satz em{ font-style:italic; color:var(--mondlicht); }

/* ------------------------------------------------------------- die Bühne */
.fa-kt-buehne{ position:relative; }
.fa-kt-buehne:focus-visible{ outline:2px solid var(--mondlicht); outline-offset:16px; border-radius:14px; }

.fa-kt-stapel{ list-style:none; margin:0; padding:0; }

/* Ohne Skript: schlichte Liste. */
.fa-kt-karte{ margin-bottom:16px; }

/* Mit Skript: Stapel. */
.fa-kt-buehne.bereit .fa-kt-stapel{
  position:relative; height:clamp(392px,34vw,436px);
  perspective:1500px; perspective-origin:38% 50%;
  transform-style:preserve-3d; cursor:grab; touch-action:pan-y;
}
.fa-kt-buehne.bereit .fa-kt-stapel.zieht{ cursor:grabbing; }
.fa-kt-buehne.bereit .fa-kt-karte{
  position:absolute; inset:0; margin:0;
  transform-origin:50% 50%; will-change:transform,opacity;
  transition:transform .62s cubic-bezier(.22,.72,.24,1),
             opacity .48s ease;
}
.fa-kt-buehne.bereit .fa-kt-stapel.zieht .fa-kt-karte{ transition:none; }

.fa-kt-flaeche{
  height:100%; display:flex; flex-direction:column;
  border:1px solid rgba(231,228,214,.17); border-radius:16px;
  padding:clamp(24px,2.8vw,34px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(86,94,76,.30) 0%, transparent 62%),
    linear-gradient(165deg, rgba(48,51,45,.96) 0%, rgba(30,32,28,.98) 100%);
  box-shadow:0 34px 70px -38px rgba(0,0,0,.95), inset 0 1px 0 rgba(231,220,201,.07);
  overflow:hidden; position:relative;
}
/* Lichtkante oben — sie macht aus einem Rechteck eine Karte. */
.fa-kt-flaeche::before{
  content:""; position:absolute; left:8%; right:8%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,220,201,.5),transparent);
}

.fa-kt-akt{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--salbeinebel); margin:0 0 auto;
}
.fa-kt-zahl{ display:flex; align-items:baseline; gap:6px; margin:18px 0 12px; }
.fa-kt-zahl b{
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(38px,5.4vw,64px); line-height:.95; color:var(--mondlicht);
  letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.fa-kt-zahl i{ font-style:normal; font-size:clamp(15px,1.7vw,20px); color:var(--salbeinebel); }
.fa-kt-ober{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(161,165,140,.9); margin:0 0 9px;
}
.fa-kt-flaeche h3{
  font-family:"Space Grotesk",sans-serif; font-weight:400;
  font-size:clamp(17px,2vw,21px); line-height:1.28; margin:0 0 11px; color:var(--creme);
  max-width:30ch;
}
.fa-kt-text{
  margin:0; font-size:14.5px; line-height:1.72; color:var(--salbeinebel);
  max-width:52ch;
}
.fa-kt-nr{
  position:absolute; right:clamp(20px,2.4vw,30px); top:clamp(20px,2.4vw,28px);
  font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:.1em;
  color:rgba(231,220,201,.3); font-variant-numeric:tabular-nums;
}
.fa-kt-nr em{ font-style:normal; color:rgba(231,220,201,.16); }

/* ---------------------------------------------------------------- Steuer */
.fa-kt-steuer{ display:none; align-items:center; gap:16px; margin-top:24px; }
.fa-kt-buehne.bereit .fa-kt-steuer{ display:flex; }
.fa-kt-pfeil{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(161,165,140,.4); background:none; cursor:pointer;
  color:var(--creme); display:grid; place-items:center;
  transition:border-color .25s ease, color .25s ease, opacity .25s ease;
}
.fa-kt-pfeil:hover:not(:disabled){ border-color:var(--mondlicht); color:var(--mondlicht); }
.fa-kt-pfeil:disabled{ opacity:.3; cursor:default; }
.fa-kt-punkte{ list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; }

/* GEMESSEN UND KORRIGIERT: Beim ersten Anlauf war der Punkt 7 px groß und
   trug eine unsichtbare Tippfläche von 34 px. Bei 9 px Zwischenraum
   überlappten sich diese Flächen — der Nachbar fing den Klick ab, und
   Punkt 6 ließ sich nicht anwählen. Der Test lief 30 Sekunden ins Leere,
   und auf einem Handy hätte man es für ein hängendes Skript gehalten.

   Jetzt IST der Knopf die Fläche: 24 x 40 px, der Punkt darin ist nur
   noch gezeichnet. Die Knöpfe liegen nebeneinander statt übereinander,
   und jeder trifft, was er anzeigt. */
.fa-kt-punkt{
  width:24px; height:40px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; display:block;
}
.fa-kt-punkt::before{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:rgba(161,165,140,.35);
  transition:background .3s ease, transform .3s var(--e-satt,cubic-bezier(.2,.7,.3,1));
}
.fa-kt-punkt:hover::before{ background:rgba(231,220,201,.7); }
.fa-kt-punkt[aria-current="true"]::before{ background:var(--mondlicht); transform:scale(1.6); }
.fa-kt-punkt:focus-visible{ outline:2px solid var(--mondlicht); outline-offset:-4px; border-radius:6px; }

/* Der Aktwechsel wird sichtbar: vor dem fünften Punkt ein Strich. */
.fa-kt-p-bruch{ margin-left:14px; }
.fa-kt-p-bruch::after{
  content:""; position:absolute; left:-8px; top:50%; width:1px; height:12px;
  margin-top:-6px; background:rgba(161,165,140,.4);
}
.fa-kt-hinweis{
  display:none; margin:14px 0 0; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(161,165,140,.62);
}
.fa-kt-buehne.bereit .fa-kt-hinweis{ display:block; }

.fa-wl-fuss{
  margin:clamp(30px,3.6vw,44px) 0 0; padding-top:18px;
  border-top:1px solid rgba(231,228,214,.10);
  font-size:12.5px; line-height:1.7; color:rgba(161,165,140,.72); max-width:74ch;
}

/* ------------------------------------------------------------------ Schmal */
/* ==================================================================
   SCHWERER FEHLER, gefunden am 15.08. beim Geometrie-Durchgang
   ------------------------------------------------------------------
   Hier stand grid-template-columns:1fr. Das sieht richtig aus, ist es
   aber nicht: 1fr bedeutet minmax(AUTO,1fr), und „auto" als
   Mindestmaß heißt „so breit wie der Inhalt mindestens sein will".
   Ein Kind im Stapel wollte 438 px — und die Spalte wurde 438 px
   breit, obwohl der Kasten drumherum nur 350 hatte.

   Sichtbar war das als abgeschnittenes Kapitel: auf dem Handy fehlte
   bei JEDER Zeile der rechte Rand, die Überschrift „Warum
   ausgerechnet Licht" endete mitten im Wort. Kein Rollbalken, weil
   eine Sektion weiter oben abschneidet — deshalb hat die Prüfung auf
   waagerechten Überlauf das nie gemeldet. Gefunden hat es erst der
   Vergleich Kind gegen Elternkasten.

   minmax(0,1fr) setzt das Mindestmaß auf null und lässt den Inhalt
   umbrechen. min-width:0 auf den beiden Kindern ist der Gürtel zum
   Hosenträger: Rasterkinder haben von sich aus min-width:auto.
   ================================================================== */
@media (max-width:960px){
  .fa-kt-raster{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .fa-kt-kopf,
  .fa-kt-buehne{ min-width:0; }
  .fa-wl-vor{ max-width:none; }
}
@media (max-width:700px){
  .fa-wl-innen{ padding:clamp(42px,9vw,64px) var(--rand); }
  /* Auf 390 px brauchen die längsten Karten mehr Platz als am Rechner —
     die Spalte ist schmaler, also läuft der Text tiefer. Gemessen: die
     längste Karte (Komplex IV) braucht 470 px. */
  .fa-kt-buehne.bereit .fa-kt-stapel{ height:486px; perspective:1100px; }
  .fa-kt-flaeche{ padding:22px 20px; }
  .fa-kt-zahl b{ font-size:40px; }
  .fa-kt-text{ font-size:14.5px; line-height:1.7; }
  /* Kein Text unter 11,5 px. */
  .fa-kt-akt,
  .fa-kt-ober,
  .fa-kt-f-ober,
  .fa-warumlicht .fa-pf-oberzeile{ font-size:11.5px; letter-spacing:.2em; }
  .fa-wl-fuss{ font-size:12.5px; }
  .fa-kt-pfeil{ width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  .fa-kt-buehne.bereit .fa-kt-karte{ transition:opacity .2s linear; }
  .fa-kt-punkt{ transition:none; }
}

/* ==========================================================================
   Nachtrag 15.08. — drei Stellen aus der Sichtprüfung
   ========================================================================== */

/* 1 · Die verwaiste „01"
   ------------------------------------------------------------------
   Auf der Startseite stand einmal ein Paar aus zwei Ritualen: 01 Atmen
   und 02 Wasser. Der zweite ist bewusst entfernt worden (er steht
   ausführlicher auf einer eigenen Seite) — die Nummer 01 blieb stehen.
   Eine einzelne 01 verspricht eine 02, die es nicht gibt; man sucht
   dann nach einem Abschnitt, der fehlt.
   Wer das Wasser-Ritual zurückholt: hier die Regel entfernen UND in
   inhalte.py comp-mp15053b aus INDEX_GEKUERZT nehmen. Beides zusammen,
   sonst steht wieder eine Nummer allein. */
.fa-ritual .way-num-large{ display:none !important; }

/* 2 · „Take 90 seconds to review Forest Air"
   Das letzte Wort fiel allein in die dritte Zeile. text-wrap:balance
   verteilt die Zeilen gleichmäßig, statt sie nur umbrechen zu lassen. */
.fa-video-wrap .fa-heading{ text-wrap:balance; max-width:22ch; margin-inline:auto; }

/* 3 · „Hear them tell it." — dieselbe Behandlung, damit der kursive
   Teil nicht als Rest in einer eigenen Zeile hängt. */
.fa-ef-hero h1,
.fa-ef-hero .fa-ef-lede{ text-wrap:balance; }

/* ==================================================================
   STARTSEITEN-UMBAU 18.08.2026 — Audit A1, A2, A3
   ==================================================================
   Drei neue Abschnitte. Sie folgen bewusst der Formensprache der
   bestehenden eigenen Blöcke (.fa-warumlicht, .fa-vertiefung):

     · Oberzeile in Space Grotesk, 10,5 px, .34em Sperrung
     · h2 in Space Grotesk 300, clamp(29px,3.9vw,50px), <em> kursiv
       in Mondlicht
     · Fließtext in Salbeinebel, 15,5 px, Zeilenhöhe 1.75
     · Fußzeile 12,5 px mit Trennlinie darüber

   Wer hier etwas ergänzt: var(--rand) für den Seitenrand benutzen,
   nie einen eigenen Wert. Der Grund steht im :root von rahmen.css.
   ================================================================== */

/* ---------------------------------------------- A1 · Kundenstimmen */
.fa-stimmenoben{
  background:var(--nachthimmel);
  padding:clamp(52px,7vh,88px) var(--rand);
  color:var(--creme);
}
.fa-so-innen{max-width:var(--breite);margin:0 auto}
.fa-stimmenoben .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 14px;
  display:flex;align-items:center;gap:14px;
}
.fa-stimmenoben .fa-pf-oberzeile::after{
  content:"";flex:0 0 auto;width:clamp(40px,6vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-so-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(29px,3.9vw,50px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--creme);text-wrap:balance;
}
.fa-so-titel em{font-style:italic;color:var(--mondlicht)}
.fa-so-vor{
  margin:0 0 clamp(30px,3.6vw,42px);font-size:15.5px;line-height:1.75;
  color:var(--salbeinebel);max-width:58ch;
}

.fa-so-reihe{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2vw,26px);
}
.fa-so-karte{
  margin:0;padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(231,228,214,.14);border-radius:3px;
  background:linear-gradient(180deg,rgba(47,52,40,.42),rgba(35,35,35,.2));
  display:flex;flex-direction:column;gap:16px;
}
.fa-so-thema{
  margin:0;font-family:"Space Grotesk",sans-serif;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mondlicht);
}
/* Serif und kursiv wie das Warburg-Zitat — so ist auf einen Blick zu
   sehen, dass hier jemand anderes spricht als die Seite selbst. Das ist
   nicht nur Gestaltung: der Unterschied zwischen unserer Aussage und
   einer Kundenaussage ist der ganze rechtliche Boden dieses Blocks. */
.fa-so-zitat{
  margin:0;flex:1;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.1vw,24px);line-height:1.4;color:var(--creme);
  hyphens:none;
}
/* KEINE eigenen Anführungszeichen hier — und das ist teuer gelernt.
   startseite.js hängt jedem <blockquote> die Klasse .fa-zitat an. Darin
   ist ::before das große Schmuckzeichen UND ::after der animierte Strich
   an der linken Kante (Punkt 16/17 weiter oben, Zeile 145 ff.).

   Ein eigenes content: auf ::after überschreibt nur den Inhalt, nicht die
   Geometrie — der Strich bleibt 2 px breit, absolut positioniert, und das
   Anführungszeichen darin ist unsichtbar. Sichtbares Ergebnis: der Strich
   verschwindet ersatzlos, ohne dass irgendwo ein Fehler steht.
   Gemessen am 18.08. Also: Zeichen kommen von .fa-zitat, nicht von hier. */
.fa-so-wer{
  display:flex;flex-direction:column;gap:3px;
  padding-top:14px;border-top:1px solid rgba(231,228,214,.12);
}
.fa-so-name{
  font-family:"Space Grotesk",sans-serif;font-size:13.5px;color:var(--creme);
}
.fa-so-ort{font-size:12.5px;color:var(--salbeinebel)}
/* Die Dauer ist der eigentliche Informationsgewinn des Blocks — sie
   beantwortet „wann merkt man was?". Deshalb hervorgehoben und nicht
   als dritte graue Zeile. */
.fa-so-dauer{
  margin-top:5px;align-self:flex-start;
  padding:3px 9px;border:1px solid rgba(231,220,201,.3);border-radius:2px;
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mondlicht);
}
.fa-so-mehr{display:inline-block;margin-top:clamp(24px,2.8vw,34px)}

/* ------------------------------------------------ A3 · Abgrenzung */
.fa-abgrenzung{
  background:linear-gradient(180deg,#242424,#1E1E1E);
  border-block:1px solid rgba(245,242,235,.09);
  padding:clamp(46px,6vh,78px) var(--rand);
  color:var(--creme);
}
.fa-ab-innen{max-width:900px;margin:0 auto}
.fa-abgrenzung .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 14px;
}
.fa-ab-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(28px,3.6vw,46px);line-height:1.07;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--creme);
}
.fa-ab-titel em{font-style:italic;color:var(--mondlicht)}
.fa-ab-vor{
  margin:0 0 clamp(26px,3vw,34px);font-size:15.5px;line-height:1.75;
  color:var(--salbeinebel);max-width:58ch;
}
.fa-ab-tafel{
  width:100%;border-collapse:collapse;text-align:left;
  font-size:clamp(14.5px,1.5vw,16.5px);
}
.fa-ab-tafel thead th{
  padding:0 0 10px;font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--salbeinebel);border-bottom:1px solid rgba(231,228,214,.2);
}
.fa-ab-tafel tbody th,
.fa-ab-tafel tbody td{
  padding:15px 0;border-bottom:1px solid rgba(231,228,214,.1);
  vertical-align:top;font-weight:400;
}
.fa-ab-tafel tbody th{
  padding-right:20px;color:var(--salbeinebel);
  font-family:"Space Grotesk",sans-serif;width:38%;
}
.fa-ab-tafel tbody td{color:var(--creme)}
/* Die eigene Zeile hebt sich ab, ohne dass irgendwo „besser" steht.
   Der Leser zieht den Schluss selbst — das ist der ganze Trick des
   Abschnitts und zugleich der Grund, warum er HWG-fest ist. */
/* Der Verlauf gehört auf die ZEILE, nicht auf die Zellen. Auf den Zellen
   fängt er in jeder Zelle neu an — gemessen am 18.08.: eine sichtbare
   senkrechte Kante mitten in der Zeile, dort wo die zweite Spalte beginnt.
   Auf dem <tr> läuft er über die volle Breite durch. */
.fa-ab-unser{background:linear-gradient(90deg,rgba(86,94,76,.42),transparent)}
.fa-ab-unser th{color:var(--mondlicht)}
.fa-ab-unser th,
.fa-ab-unser td{border-bottom-color:rgba(231,220,201,.34)}
.fa-ab-fuss{
  margin:22px 0 0;padding-top:16px;
  border-top:1px solid rgba(231,228,214,.1);
  font-size:12.5px;line-height:1.7;color:rgba(161,165,140,.78);max-width:74ch;
}
.fa-abgrenzung .fa-zweit{display:inline-block;margin-top:18px}

@media (max-width:560px){
  /* Zwei Spalten auf 390 px ergeben Zeilenumbrüche mitten im Gerätenamen.
     Untereinander gestellt bleibt die Zuordnung Gerät → Wirkung lesbar. */
  .fa-ab-tafel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fa-ab-tafel tbody th,
  .fa-ab-tafel tbody td{display:block;width:auto}
  .fa-ab-tafel tbody th{padding:14px 0 3px;border-bottom:0}
  .fa-ab-tafel tbody td{padding:0 0 14px}
}

/* -------------------------------------------------- A2 · Nutzung */
.fa-nutzung{
  background:var(--nachthimmel);
  padding:clamp(52px,7vh,92px) var(--rand);
  color:var(--creme);
}
.fa-nu-innen{max-width:var(--breite);margin:0 auto}
.fa-nutzung .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 14px;
  display:flex;align-items:center;gap:14px;
}
.fa-nutzung .fa-pf-oberzeile::after{
  content:"";flex:0 0 auto;width:clamp(40px,6vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-nu-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(29px,3.9vw,50px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--creme);
}
.fa-nu-titel em{font-style:italic;color:var(--mondlicht)}
.fa-nu-vor{
  margin:0 0 clamp(32px,3.8vw,46px);font-size:15.5px;line-height:1.75;
  color:var(--salbeinebel);max-width:58ch;
}

.fa-nu-reihe{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:rgba(231,228,214,.12);
  border-block:1px solid rgba(231,228,214,.12);
}
.fa-nu-fall{
  background:var(--nachthimmel);
  padding:clamp(26px,2.8vw,34px) clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;gap:18px;
}
.fa-nu-kopf{display:flex;flex-direction:column;gap:7px}
.fa-nu-nr{
  font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.24em;
  color:var(--salbeinebel);
}
.fa-nu-bt{
  margin:0;font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:clamp(19px,2vw,23px);line-height:1.2;color:var(--creme);
}
.fa-nu-zeit{
  margin:0;font-size:12.5px;letter-spacing:.05em;color:var(--mondlicht);
}
.fa-nu-text{display:flex;flex-direction:column;gap:12px;flex:1}
.fa-nu-tx{margin:0;font-size:14.5px;line-height:1.72;color:var(--salbeinebel)}

/* Die Stimme sitzt sichtbar abgesetzt am Fuß jedes Falls. Der Absatz
   darüber beschreibt Ort und Ablauf — das dürfen wir sagen. Was sich
   verändert hat, sagt nur der Kunde. Die Kante zwischen beidem ist
   Absicht und sollte beim Umbauen erhalten bleiben. */
.fa-nu-stimme{
  margin:0;padding:18px 0 0;border-top:1px solid rgba(231,228,214,.14);
}
.fa-nu-marke{
  margin:0 0 9px;font-family:"Space Grotesk",sans-serif;font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-nu-stimme blockquote{
  margin:0 0 10px;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(17px,1.8vw,20px);line-height:1.42;color:var(--creme);
  hyphens:none;
}
/* Siehe die Anmerkung bei .fa-so-zitat: Anführungszeichen und Strich
   kommen von .fa-zitat, nicht von hier. */
.fa-nu-stimme figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.fa-nu-name{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--mondlicht)}
.fa-nu-ort{font-size:12px;color:var(--salbeinebel)}

.fa-nutzung .fa-zweit{display:inline-block;margin-top:clamp(26px,3vw,36px)}
.fa-nu-fuss{
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid rgba(231,228,214,.1);
  font-size:12px;line-height:1.7;color:rgba(161,165,140,.72);max-width:88ch;
}

/* ==================================================================
   FEINSCHLIFF 18.08. spät — drei Bitten von Jonas
   ================================================================== */

/* 1 · „Qualität vor Quantität" deutlich größer.
   Sie stand als 10-px-Oberzeile über dem Warburg-Zitat und war damit
   kleiner als jede Bildunterschrift auf der Seite — obwohl sie den
   Gedanken benennt, um den es im ganzen Abschnitt geht.

   Mit der Größe muss die Sperrung runter: 0,34 em waren auf 10 px
   richtig, auf 19 px zerfällt die Zeile damit in Einzelbuchstaben.
   Gemessen ist 0,16 em der Punkt, an dem sie als Wortgruppe zusammen-
   bleibt und trotzdem als Auszeichnung lesbar ist. */
.fa-vertiefung .fa-vt-ober{
  font-size:clamp(14px,1.7vw,19px);
  letter-spacing:.16em;
  color:var(--mondlicht);
  margin-bottom:clamp(18px,2.2vw,26px);
}

/* 2 + 3 · Mehr Luft unter den beiden Ritualblöcken.
   Der erste endet mit „Reine Zugabe für die Sinne.", der zweite mit dem
   Absatz über die Schichten — und in beiden Fällen begann der nächste
   Abschnitt unmittelbar danach. Ein Ritual, das ausklingt, braucht eine
   Pause, bevor das nächste Thema anfängt.

   Über padding, nicht über margin: die Sektionen tragen ihre gemessene
   Flächenfarbe, und ein Außenabstand würde einen andersfarbigen Streifen
   dazwischen aufreißen. Padding bleibt in der Fläche. */
#s-comp-mp14g5c0,
#s-comp-mp15053b{
  padding-bottom:clamp(46px,6vw,92px);
}
@media (max-width:700px){
  #s-comp-mp14g5c0,
  #s-comp-mp15053b{padding-bottom:clamp(34px,8vw,58px)}
}

/* Der Titel der Kundenstimmen steht jetzt allein — ohne Oberzeile
   darüber braucht er etwas mehr Abstand nach unten zu den Karten,
   sonst klebt die Reihe an der Überschrift. */
.fa-so-kopf .fa-so-titel{margin-bottom:clamp(28px,3.4vw,40px)}