/* Forest Air — Produktbühne im Hero */

.fa-buehne{position:relative;perspective:1400px;perspective-origin:50% 42%;user-select:none}
.pb-buehne{
  position:relative;height:clamp(330px,40vw,500px);
  transform-style:preserve-3d;cursor:grab;overflow:visible;
}
.pb-buehne.zieht{cursor:grabbing}
.pb-ring{position:absolute;inset:0;transform-style:preserve-3d}

.pb-karte{
  position:absolute;left:50%;top:0;margin:0;width:min(86%,400px);
  transform-origin:50% 60%;translate:-50% 0;
  transition:filter .5s ease,opacity .5s ease;
  cursor:pointer;
}
.pb-buehne.zieht .pb-karte{transition:none}
.pb-karte img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
  pointer-events:none;
}
.pb-karte:focus-visible{outline:2px solid var(--mondlicht);outline-offset:10px;border-radius:8px}

/* Glanzkante auf dem vorderen Gerät */
.pb-glanz{
  position:absolute;inset:6% 10% 30% 10%;pointer-events:none;border-radius:10px;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.12) 48%,transparent 60%);
  opacity:0;transition:opacity .6s ease;
}
.pb-karte.vorn .pb-glanz{opacity:1}
.pb-buehne.zieht .pb-glanz{opacity:0}

/* Gespiegelt wird nur das vordere Gerät */
.pb-spiegel{
  position:absolute;left:0;right:0;top:100%;height:52%;overflow:hidden;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.pb-karte.vorn .pb-spiegel{opacity:.22}
.pb-buehne.zieht .pb-spiegel{opacity:0}
.pb-spiegel img{
  transform:scaleY(-1);filter:blur(1.5px);
  mask-image:linear-gradient(180deg,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
}

.pb-kegel{
  position:absolute;left:50%;top:-16%;width:74%;height:120%;translate:-50% 0;
  pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,
             transparent 42%, rgba(231,220,201,.10) 50%, transparent 58%);
  filter:blur(10px);
}
.pb-podest{
  position:absolute;left:50%;bottom:2%;width:52%;height:26px;translate:-50% 0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,220,201,.20),transparent 72%);
  filter:blur(5px);
}

/* Datenkranz — klappt auf, sobald die Bühne steht */
.pb-kranz{
  position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none;
}
.pb-kranz li{
  position:absolute;pointer-events:auto;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease .15s,transform .5s var(--e-satt) .15s;
}
.fa-buehne:not(.dreht) .pb-kranz li{opacity:1;transform:none}
.pb-kranz b{
  display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mondlicht);margin-bottom:3px;
}
.pb-kranz span{display:block;font-size:11.5px;line-height:1.5;color:var(--salbeinebel)}
.pb-kranz li::before{
  content:"";position:absolute;top:8px;width:26px;height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.7),transparent);
}
.pb-f0{left:0;top:12%}      .pb-f0::before{right:-30px}
.pb-f1{right:0;top:26%;text-align:right}   .pb-f1::before{left:-30px;background:linear-gradient(270deg,rgba(161,165,140,.7),transparent)}
.pb-f2{left:0;top:58%}      .pb-f2::before{right:-30px}
.pb-f3{right:0;top:70%;text-align:right}   .pb-f3::before{left:-30px;background:linear-gradient(270deg,rgba(161,165,140,.7),transparent)}
.pb-tat{left:50%;bottom:-8%;transform:translateX(-50%)}
.fa-buehne:not(.dreht) .pb-tat{transform:translateX(-50%)}
.pb-tat::before{display:none}
.pb-tat .fa-cta{font-size:12.5px;padding:8px 16px}

/* Leiste unter der Bühne */
.pb-leiste{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:clamp(30px,4vw,46px);
}
.pb-pfeil{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  background:none;border:1px solid rgba(161,165,140,.38);color:var(--creme);
  font-size:14px;line-height:1;transition:background .25s ease,border-color .25s ease;
}
.pb-pfeil:hover{background:rgba(231,228,214,.09);border-color:var(--salbeinebel)}
.pb-schild{text-align:center;min-width:min(230px,52vw)}
.pb-name{
  margin:0;font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:400;font-size:clamp(17px,2vw,21px);color:var(--creme);letter-spacing:.01em;
}
.pb-zeile{margin:4px 0 0;font-size:12px;color:var(--salbeinebel);line-height:1.5}

/* Punkte unter der Bühne
   ------------------------------------------------------------------
   Sie waren 7 x 7 px — sichtbar wie treffbar das Kleinste auf der
   ganzen Seite. Am 15.08. mit einem Tipp-Test gefunden: an keiner
   Stelle 21 px neben der Mitte landet der Finger noch auf dem Knopf.

   Der Punkt bleibt klein, der KNOPF wird groß: gezeichnet wird über
   ::before, angefasst der Knopf selbst. Ein unsichtbares Feld über
   ::after — wie sonst überall auf dieser Seite — ginge hier NICHT:
   die Punkte stehen nur 8 px auseinander, die Felder würden sich
   überlappen, und man träfe zuverlässig den Nachbarn.

   Diese Regel steht bewusst hier und nicht im Mobil-Block von
   rahmen.css: produktbuehne.css wird später geladen und hätte sie
   sonst überschrieben. */
.pb-punkte{display:flex;justify-content:center;gap:2px;margin-top:10px}
.pb-punkte button{
  width:26px;height:34px;padding:0;border-radius:0;cursor:pointer;
  background:none;border:0;position:relative;transform:none;
}
.pb-punkte button::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:rgba(161,165,140,.35);
  transition:background .3s ease,transform .3s var(--e-satt);
}
.pb-punkte button.an::before{
  background:var(--mondlicht);transform:translate(-50%,-50%) scale(1.5);
}

@media (max-width:980px){
  .pb-kranz{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:24px}
  .pb-kranz li{position:static;text-align:left !important}
  .pb-kranz li::before{display:none}
  .pb-tat{grid-column:1/-1}
  .pb-tat .fa-cta{display:inline-block}
  .pb-buehne{height:clamp(260px,62vw,400px)}
}
@media (max-width:520px){
  /* Gemessen bei 390 px Fensterbreite, ueber vier Sekunden Drehung beobachtet:
     bei 94 % wurde das vordere Geraet hoechstens 294 px breit — auf einem
     Handy wirkt das kleiner, als das Geraet im Hero sein sollte. 98 % ergibt
     335 px (+14 %), und der rechte Rand der hinteren Karte bleibt bei 388 px,
     also gerade noch im Fenster. Ab 102 % laeuft sie mit 396 px hinaus und
     wird angeschnitten — deshalb nicht mehr. */
  .pb-karte{width:min(98%,350px)}
  .pb-schild{min-width:0}
  .pb-kranz{grid-template-columns:1fr}
}

/* Feinschliff nach der Sichtprüfung: die Angaben standen über dem seitlichen
   Gerät. Sie rücken nach außen, bekommen eine Höchstbreite und einen eigenen,
   sehr leisen Grund — auf einer Bühne wechselt der Hintergrund ständig. */
@media (min-width:981px){
  .pb-kranz li{max-width:170px}
  .pb-f0,.pb-f2{left:-6%}
  .pb-f1,.pb-f3{right:-6%}
  .pb-kranz li:not(.pb-tat){
    background:linear-gradient(90deg,rgba(24,24,24,.72),rgba(24,24,24,.34));
    padding:6px 10px;border-radius:6px;backdrop-filter:blur(3px);
  }
  .pb-f1,.pb-f3{background:linear-gradient(270deg,rgba(24,24,24,.72),rgba(24,24,24,.34)) !important}
  .pb-karte{width:min(88%,430px)}
}

/* ------------------------------------------------- Kopf der Produktuebersicht
   Gleiche Buehne wie auf der Startseite, aber ohne Photonenfeld: hier soll das
   Geraet die Aufmerksamkeit haben, nicht die Physik dahinter. */
.fa-produktkopf{
  background:
    radial-gradient(78% 60% at 74% 44%, rgba(58,60,52,.5) 0%, rgba(35,35,35,0) 64%),
    radial-gradient(120% 92% at 22% 4%, #2d2d2d 0%, var(--nachthimmel) 60%);
  border-bottom:1px solid rgba(231,228,214,.08);
  padding:clamp(46px,6vh,86px) 0 clamp(30px,4vh,54px);
}
.fa-produktkopf-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,60px);align-items:center;
}
.fa-produktkopf-text{max-width:34em}
.fa-produktkopf-hinweis{
  margin:22px 0 0;font-size:12px;letter-spacing:.06em;color:var(--salbeinebel);opacity:.85;
}
.fa-produktkopf .fa-buehne{min-height:clamp(340px,46vh,520px)}
@media (max-width:900px){
  .fa-produktkopf-innen{grid-template-columns:1fr;gap:26px}
  .fa-produktkopf .fa-buehne{min-height:clamp(300px,42vh,420px)}
}

/* Die vier Angaben lagen auf dem Geraet. Auf einer breiten Buehne ist das
   Geraet ein flacher Riegel in der Mitte — die Ecken sind frei. Also in die
   Ecken damit, und die Fuehrungslinie zeigt von dort nach innen. */
@media (min-width:981px){
  .pb-f0{top:4%;bottom:auto}
  .pb-f1{top:4%;bottom:auto}
  .pb-f2{top:auto;bottom:22%}
  .pb-f3{top:auto;bottom:22%}
  .pb-f2::before,.pb-f3::before{top:auto;bottom:8px}
  .pb-kranz li{max-width:186px}
}

/* Die Glanzkante hatte eine sichtbare rechteckige Kante — ein Kasten um das
   Geraet, den es dort nicht gibt. Weich gezeichnet und an den Raendern
   ausgeblendet bleibt der Lichtstreifen, der Kasten verschwindet. */
.pb-glanz{
  filter:blur(8px);border-radius:24px;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.10) 50%,transparent 64%);
  -webkit-mask-image:radial-gradient(72% 74% at 50% 44%,#000 42%,transparent 82%);
          mask-image:radial-gradient(72% 74% at 50% 44%,#000 42%,transparent 82%);
}
.pb-karte.vorn .pb-glanz{opacity:.8}

/* Auf dem Handy stand die Buehne im Produktkopf in einer Spalte ohne eigene
   Begrenzung — die Karten ragten 96 px ueber den Bildschirmrand hinaus.
   Der Ausschnitt gehoert an die Buehne, nicht an die Seite. */
.fa-produktkopf .fa-buehne{overflow:clip;overflow-clip-margin:24px}
@media (max-width:900px){
  .fa-produktkopf .pb-karte{width:min(78%,340px)}
}

/* Auf dem Handy sollte der Datenkranz UNTER der Buehne stehen. Er stand aber
   darauf: der Kranz ist ein Kind der Buehne, und die Buehne hatte eine feste
   Hoehe — also lag der Kranz im selben Kasten wie die Geraete und wurde vom
   Bild ueberdeckt. Die feste Hoehe gehoert an den Ring, nicht an die Buehne;
   dann faellt der Kranz von selbst darunter. */
@media (max-width:980px){
  .pb-buehne{height:auto !important;cursor:default}
  .pb-ring{position:relative;height:clamp(260px,62vw,400px)}
  .pb-kranz{margin-top:22px}
}

/* ======================================================= Bühne, zweite Fassung
   Der erste Anlauf las sich als flacher Bilderwechsler: zwei gleich grosse
   Geraete nebeneinander, dazwischen Luft. Geaendert wurden vier Dinge — das
   Geraet ist deutlich groesser, das hintere sitzt viel weiter hinten, die
   Buehne hat eine Achse (Leuchtlinie mit wanderndem Punkt), und das vordere
   Geraet neigt sich mit dem Zeiger. */

.pb-buehne{height:clamp(400px,46vw,600px);perspective-origin:50% 46%}
.fa-buehne{perspective:1500px}
.pb-karte{width:min(94%,560px);transform-style:preserve-3d;
  transition:filter .5s ease,opacity .5s ease}
.pb-karte img{filter:drop-shadow(0 34px 46px rgba(0,0,0,.7))}

/* --- Die Achse: Haarlinie mit wanderndem Punkt ------------------------- */
.pb-achse{
  position:absolute;left:50%;top:4%;bottom:12%;width:1px;translate:-50% 0;
  background:linear-gradient(180deg,transparent,rgba(161,165,140,.55) 22%,
             rgba(161,165,140,.55) 78%,transparent);
  pointer-events:none;z-index:0;opacity:.8;
}
.pb-punkt{
  position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--mondlicht);
  box-shadow:0 0 20px 5px rgba(231,220,201,.55);
  animation:pb-wandern 7.5s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes pb-wandern{0%,100%{top:6%}50%{top:88%}}
body.rm .pb-punkt{animation:none;top:46%}

/* --- Lichtwisch beim Einrasten ---------------------------------------- */
.pb-karte.wisch .pb-glanz{
  animation:pb-wisch 1.15s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes pb-wisch{
  0%{opacity:0;transform:translateX(-28%)}
  30%{opacity:1}
  100%{opacity:.8;transform:translateX(28%)}
}
body.rm .pb-karte.wisch .pb-glanz{animation:none}

/* Der Lichtkegel folgt dem Zeiger, damit Neigung und Licht zusammenpassen */
.pb-kegel{left:var(--lichtx,50%);transition:left .5s cubic-bezier(.22,.61,.36,1)}

/* Das hintere Geraet tritt weiter zurueck, damit die Tiefe wirkt */
.pb-karte:not(.vorn) img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)) blur(.6px)}

/* Der Kranz braucht mehr Platz nach aussen, weil das Geraet gewachsen ist */
@media (min-width:981px){
  .pb-f0,.pb-f2{left:-9%}
  .pb-f1,.pb-f3{right:-9%}
}
@media (max-width:980px){
  .pb-achse{display:none}
  .pb-karte{width:min(86%,420px)}
  .pb-ring{height:clamp(280px,66vw,420px)}
}

/* Der Bühne fehlte schlicht Platz: gemessen bekam sie 536 px von 1232 und das
   Gerät kam auf 321 px heraus — das ist keine Bühne, das ist eine Briefmarke.
   Die Spalten werden umverteilt und die Karte darf die Spalte ausfüllen. */
@media (min-width:901px){
  .fa-waldton .fa-hero-innen{grid-template-columns:minmax(0,.80fr) minmax(0,1.20fr)}
  .pb-karte{width:min(100%,720px)}
  .pb-buehne{height:clamp(430px,34vw,580px)}
}
/* Das hintere Gerät ist Andeutung, nicht Konkurrenz — es darf ruhig aus dem
   Bild laufen. Der Ausschnitt sitzt an der Bühne, nicht an der Seite. */
.fa-buehne{overflow:clip;overflow-clip-margin:40px}

/* Auf dem Handy ist für zwei Geräte kein Platz: das hintere ragte nur noch als
   Fragment ins Bild. Dort zeigt die Bühne eins, gewechselt wird über die
   Punkte darunter. */
@media (max-width:900px){
  .pb-karte:not(.vorn){opacity:0 !important;pointer-events:none}
}

/* Die Produktbilder sind keine Freisteller: sie bringen eine dunkle
   Studiofläche mit. Auf dem alten schwarzen Hero fiel das nicht auf — auf dem
   Waldbild zeichnet sich ein Rechteck ab. Eine weiche Maske lässt die Kanten
   auslaufen; das Gerät sitzt mittig und bleibt vollständig. */
.pb-karte img{
  -webkit-mask-image:radial-gradient(82% 80% at 50% 48%,#000 56%,rgba(0,0,0,.55) 78%,transparent 96%);
          mask-image:radial-gradient(82% 80% at 50% 48%,#000 56%,rgba(0,0,0,.55) 78%,transparent 96%);
}

/* Die Spiegelung stammt aus der Zeit, als die Bühne auf schwarzem Grund stand.
   Über einem Waldbild behauptet sie einen glänzenden Boden, den es nicht gibt —
   und im Bild las sie sich als zweites, schwebendes Gerät über den Angaben.
   Der weiche Bodenschein bleibt, die Spiegelung geht. */
.pb-spiegel{display:none}
.pb-podest{opacity:.75}

/* Der Ausschnitt saß an der Bühne — und hat damit die Angaben abgeschnitten,
   die absichtlich seitlich daneben stehen (aus "PREIS" wurde "EIS"). Er gehört
   an die Sektion: dort begrenzt er die Seite, ohne in die Bühne zu greifen. */
.fa-buehne{overflow:visible}
.fa-produktkopf .fa-buehne{overflow:visible}
.fa-produktkopf{overflow:clip}

/* Die Naht gibt es auch im Kopf der Produktübersicht — dort stehen die Spalten
   aber im Verhältnis .92 zu 1.08, die Kante liegt also bei 46 %, nicht bei
   40 %. Ohne eigenen Bezugspunkt (position:relative) sprang sie an den linken
   Rand der Sektion. */
.fa-produktkopf-innen{position:relative;--kante:46%;--luecke:clamp(26px,4vw,60px);gap:var(--luecke)}
.fa-produktkopf .fa-hero-naht{left:calc(var(--kante) + var(--luecke) / 2);top:-2%;bottom:-2%}


/* Das Wiegen wird auf die schon vorhandene Neigungsachse aufaddiert — so
   streiten sich Zeigerneigung und Eigenbewegung nicht um dieselbe Achse. */
.pb-buehne{transform:rotateY(var(--wiege,0deg));transition:transform .6s var(--e-satt)}
.pb-buehne.zieht{transition:none}
body.rm .pb-buehne{transform:none}
/* Der Datenkranz ist anklickbar — das darf man sehen */
.pb-kranz li:not(.pb-tat){transition:opacity .3s ease,transform .35s var(--e-satt)}
.pb-kranz:hover li:not(.pb-tat){transform:translateY(-2px)}


/* Auf dem Geraet passiert beim Darueberfahren NICHTS mehr. Der Zoom hat das
   Bild angehoben und wieder abgesetzt — auf einem Produktfoto wirkt das
   unruhig, nicht lebendig. */
.pb-karte:hover img,.pb-karte.vorn:hover img{transform:none !important}
.pb-karte{cursor:default}
.pb-karte.vorn{cursor:pointer}

/* Die Angaben erscheinen erst, wenn man ueber das Geraet faehrt. Vorher steht
   die Buehne ruhig da — vier Etiketten um ein Produkt herum sind viel, wenn
   man sie nicht gerade wissen will. */
.fa-buehne .pb-kranz li,
.fa-buehne:not(.dreht) .pb-kranz li{
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .45s var(--e-weich),transform .55s var(--e-satt);
}
.fa-buehne:hover .pb-kranz li,
.fa-buehne:focus-within .pb-kranz li,
.fa-buehne:not(.dreht):hover .pb-kranz li{
  opacity:1;transform:none;pointer-events:auto;
  transition-delay:calc(var(--vz,0) * 70ms);
}
.pb-f0{--vz:0} .pb-f1{--vz:1} .pb-f2{--vz:2} .pb-f3{--vz:3} .pb-tat{--vz:4}
/* Ohne Zeiger (Handy) bleiben sie sichtbar — dort gibt es kein Hover. */
@media (hover:none){.pb-kranz li{opacity:1;transform:none;pointer-events:auto}}
body.rm .pb-kranz li{opacity:1;transform:none;pointer-events:auto}

/* Der weiße Balken unter dem Gerät ist raus — er war der „Alle Angaben"-Knopf
   im Datenkranz. Das Gerät selbst führt schon auf seine Seite.
   Und die Neigung unter dem Zeiger ebenfalls: sie war als „man hält es in der
   Hand" gedacht und wirkte als Wackeln. */
.pb-tat{display:none !important}
.pb-karte{transform-origin:50% 60%}
.pb-buehne{--neigx:0deg;--neigz:0deg}


/* ==========================================================================
   Produktseite — "Für alle, die atmen": der Weltenschalter
   --------------------------------------------------------------------------
   Vorher standen hier drei gleich große Karten 01/02/03 nebeneinander,
   765 px hoch, in jeder dasselbe Symbol. Jetzt ein Block: links die Aussage,
   rechts eine Tafel, in der man zwischen Zuhause, Studios und Praxen
   umschaltet.

   Der Ausgangszustand ist der OHNE Skript: alle drei Welten stehen
   untereinander, die Reiterleiste ist nicht da. Erst `data-js` auf der Tafel
   — gesetzt von welten.js — macht daraus den Schalter. Deshalb hängt jede
   Regel, die etwas verbirgt, an `[data-js]` und keine am nackten Element.
   ========================================================================== */
.fa-welten{
  --fa-welten-fx:22%;
  position:relative;overflow:clip;
  background:#2F3428;                       /* Tiefwald */
  padding:clamp(46px,5.5vw,74px) 24px clamp(50px,5.5vw,78px);
}
/* Ein Lichtschein am unteren Rand, der beim Umschalten mitwandert. Er liegt
   über dem Grund und unter dem Text — deshalb keine Deckkraft am Elternteil,
   sondern eine eigene Ebene mit pointer-events:none. */
.fa-welten::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at var(--fa-welten-fx) 112%,
             rgba(161,165,140,.16),rgba(47,52,40,0) 70%);
  transition:background .7s var(--e-satt,cubic-bezier(.16,1,.3,1));
}
.fa-welten-innen{
  position:relative;max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,60px);align-items:center;
}
.fa-welten-ober{
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mondlicht);margin:0 0 16px;
}
.fa-welten-titel{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(34px,4.4vw,58px);line-height:.96;
  margin:0 0 18px;color:var(--creme);
}
.fa-welten-titel em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  text-transform:none;color:var(--mondlicht);font-size:1.06em;
}
.fa-welten-vor{
  margin:0;font-size:15.5px;line-height:1.65;color:#DCD9D3;max-width:44ch;
}
.fa-welten-vor em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.12em;color:var(--mondlicht);
}

.fa-welten-tafel{
  border:1px solid rgba(231,220,201,.20);border-radius:16px;
  background:rgba(20,22,17,.42);padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:20px;
}
.fa-welten-tafel[data-js]{min-height:280px}

/* Reiterleiste: ohne Skript gar nicht erst da. */
.fa-welten-reiter{display:none}
.fa-welten-tafel[data-js] .fa-welten-reiter{
  display:flex;gap:6px;background:rgba(231,220,201,.07);
  border-radius:999px;padding:5px;
}
.fa-welten-reiter button{
  flex:1;appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  background:transparent;color:#D8D5CF;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 8px;border-radius:999px;white-space:nowrap;
  transition:background .35s var(--e-satt,cubic-bezier(.16,1,.3,1)),color .3s ease;
}
.fa-welten-reiter button:hover{color:var(--creme)}
.fa-welten-reiter button[aria-selected="true"]{background:var(--mondlicht);color:#232323}
.fa-welten-reiter button:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}

.fa-welten-buehne{display:grid;gap:26px}
.fa-welten-tafel[data-js] .fa-welten-buehne{flex:1;gap:0;align-items:center}
.fa-welt{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,32px);align-items:center;
}
/* Erst mit Skript liegen die drei Welten übereinander. `visibility` statt
   `display:none`, damit die Tafel ihre Höhe von der größten Welt nimmt und
   beim Umschalten nicht springt. */
.fa-welten-tafel[data-js] .fa-welt{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s ease,
             transform .45s var(--e-satt,cubic-bezier(.16,1,.3,1)),
             visibility .45s;
}
.fa-welten-tafel[data-js] .fa-welt[data-an]{opacity:1;visibility:visible;transform:none}
.fa-welt-nr{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;
  font-size:clamp(58px,7.4vw,104px);line-height:.8;color:rgba(231,220,201,.58);
}
.fa-welt h3{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(23px,2.6vw,33px);line-height:1.05;
  margin:0 0 12px;color:var(--mondlicht);
}
.fa-welt p{margin:0;font-size:16px;line-height:1.6;color:#D8D5CF;max-width:40ch}

@media (max-width:960px){
  .fa-welten-innen{grid-template-columns:1fr;gap:28px;align-items:start}
  .fa-welten-tafel[data-js]{min-height:0}
}
@media (max-width:560px){
  .fa-welten{padding-left:18px;padding-right:18px}
  .fa-welten-tafel[data-js] .fa-welten-reiter{flex-wrap:wrap}
  .fa-welten-reiter button{flex:1 1 100%;font-size:11px;letter-spacing:.14em;padding:10px 6px}
  .fa-welt{grid-template-columns:1fr;gap:6px}
  .fa-welt-nr{font-size:54px;line-height:1}
}

body.rm .fa-welten::before,
body.rm .fa-welten-reiter button,
body.rm .fa-welten-tafel[data-js] .fa-welt{transition:none}
@media (prefers-reduced-motion:reduce){
  .fa-welten::before,
  .fa-welten-reiter button,
  .fa-welten-tafel[data-js] .fa-welt{transition:none}
}


/* ==========================================================================
   Produktseite — "Geprüft von mehreren Institutionen"
   --------------------------------------------------------------------------
   Oben der Zeitstrahl durch das Labor: abgeschlossen, fünf Stationen vom
   Prüfstand bis zur Haustür. Darunter das laufende Band mit den vier
   Forschungspartnern — gesetzte Namen, keine nachgebauten Wappen. Ein Wappen
   sieht aus wie eine Freigabe, ein Name nicht.

   Der Hinweissatz unter dem Band bleibt, egal was oben passiert: er ist der
   Grund, warum die vier Namen überhaupt dastehen dürfen.
   ========================================================================== */
.fa-inst{
  position:relative;overflow:clip;
  background:linear-gradient(180deg,#232323 0%,#1F221D 100%);
  padding:clamp(50px,6.5vw,92px) 0 clamp(40px,5vw,64px);
}
.fa-inst-innen{max-width:var(--breite);margin:0 auto;padding:0 24px}
.fa-inst-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,54px);align-items:end;margin-bottom:clamp(40px,5vw,70px);
}
.fa-inst-ober{
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--salbeinebel);margin:0 0 16px;
}
.fa-inst-titel{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(30px,5vw,60px);line-height:1;margin:0;
  color:var(--creme);
}
.fa-inst-titel em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  text-transform:none;color:var(--mondlicht);font-size:1.06em;
}
.fa-inst-vor{
  margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.65;color:#D2D0CA;max-width:56ch;
}
.fa-inst-vor em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.12em;color:var(--mondlicht);
}
@media (max-width:860px){
  .fa-inst-kopf{grid-template-columns:1fr;align-items:start;gap:18px}
}

.fa-inst-spur{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.fa-inst-spur h3{
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--creme);margin:0;
}
.fa-inst-zustand{
  font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#232323;background:var(--mondlicht);
  border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.fa-inst-linie{flex:1 1 40px;min-width:0;height:1px;background:rgba(245,242,235,.18)}

.fa-inst-strahl{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px);
}
.fa-inst-strahl::before{
  content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;
  background:linear-gradient(90deg,var(--mondlicht),rgba(231,220,201,.25));
}
.fa-inst-k{position:relative;padding-top:26px}
/* Die Füllung des Punktes ist die Grundfarbe an genau dieser Höhe des
   Verlaufs — sonst läge ein dunkler Fleck auf der Linie. */
.fa-inst-k::before{
  content:"";position:absolute;left:0;top:0;width:13px;height:13px;
  border-radius:50%;background:#222521;border:2px solid var(--mondlicht);
}
.fa-inst-nr{
  display:block;margin-bottom:7px;font-family:"Space Grotesk",sans-serif;
  font-size:9.5px;letter-spacing:.3em;color:var(--salbeinebel);
}
.fa-inst-t{
  display:block;font-family:"Anton","Arial Narrow",Impact,sans-serif;
  text-transform:uppercase;font-size:clamp(15px,1.7vw,22px);line-height:1.08;
  color:var(--creme);-webkit-hyphens:auto;hyphens:auto;
}
.fa-inst-u{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:#B9B7B2}

@media (max-width:820px){
  .fa-inst-strahl{grid-template-columns:1fr;gap:0}
  .fa-inst-strahl::before{
    left:6px;right:auto;top:6px;bottom:22px;height:auto;width:1px;
    background:linear-gradient(180deg,var(--mondlicht),rgba(231,220,201,.25));
  }
  .fa-inst-k{padding:0 0 22px 34px}
  .fa-inst-k::before{top:2px}
}

/* Das laufende Band — randlos über die volle Breite. Der Ausschnitt sitzt an
   .fa-inst-band: die Spur ist absichtlich breiter als das Fenster, sie darf
   die Seite aber nicht seitlich wachsen lassen. */
.fa-inst-bandzone{
  position:relative;background:#1E211C;
  margin:clamp(42px,5vw,72px) 0 clamp(26px,3vw,40px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-top:1px solid rgba(245,242,235,.14);
  border-bottom:1px solid rgba(245,242,235,.14);
}
.fa-inst-bandzone::before,.fa-inst-bandzone::after{
  content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;
}
.fa-inst-bandzone::before{left:0;background:linear-gradient(90deg,#1E211C,rgba(30,33,28,0))}
.fa-inst-bandzone::after{right:0;background:linear-gradient(270deg,#1E211C,rgba(30,33,28,0))}
.fa-inst-bandkopf{
  max-width:var(--breite);margin:0 auto 16px;padding:0 24px;
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--salbeinebel);
}
.fa-inst-band{overflow:hidden}
.fa-inst-spurband{
  display:flex;width:max-content;
  animation:fa-inst-lauf 44s linear infinite;
}
.fa-inst-band:hover .fa-inst-spurband{animation-play-state:paused}
@keyframes fa-inst-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fa-inst-gruppe{display:flex;align-items:center;flex:0 0 auto}
.fa-inst-gruppe span{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,46px);line-height:1.12;color:var(--creme);
  padding:0 clamp(18px,2.4vw,34px);white-space:nowrap;
}
.fa-inst-gruppe i{
  font-style:normal;color:var(--salbeinebel);
  font-size:clamp(18px,2.4vw,30px);line-height:1;
}
.fa-inst-hinweis{margin:0;font-size:12.5px;line-height:1.6;color:#B9B7B2;max-width:74ch}

/* Ohne Bewegung steht das Band still und die Namen setzen sich um. Beides
   zusammen: der Schalter im Fuß (body.rm) und die Systemeinstellung. */
/* `flex:0 0 auto` an der Gruppe muss hier ausdrücklich zurückgenommen werden.
   Ohne das bleibt die Gruppe bei ihrer natürlichen Breite von rund 2400 px
   stehen, obwohl die Spur schon auf 100 % geschrumpft ist — das Band steht
   dann zwar still, ragt aber weiterhin links und rechts aus dem Bild. */
body.rm .fa-inst-spurband,
body.rm .fa-inst-gruppe{flex-wrap:wrap;justify-content:center}
body.rm .fa-inst-spurband{animation:none;width:100%}
body.rm .fa-inst-gruppe{flex:1 1 100%;width:100%;
  gap:clamp(6px,1.4vw,18px);padding:0 24px}
body.rm .fa-inst-gruppe[data-kopie]{display:none}
body.rm .fa-inst-gruppe span{white-space:normal;text-align:center;padding:0}
/* Im stehenden Band steht jeder Name in seiner eigenen Zeile — die Punkte
   trennen dann nichts mehr, sie hängen nur noch an den Zeilenenden. */
body.rm .fa-inst-gruppe i{display:none}
body.rm .fa-inst-bandzone::before,
body.rm .fa-inst-bandzone::after{display:none}
@media (prefers-reduced-motion:reduce){
  .fa-inst-spurband,
  .fa-inst-gruppe{flex-wrap:wrap;justify-content:center}
  .fa-inst-spurband{animation:none;width:100%}
  .fa-inst-gruppe{flex:1 1 100%;width:100%;
    gap:clamp(6px,1.4vw,18px);padding:0 24px}
  .fa-inst-gruppe[data-kopie]{display:none}
  .fa-inst-gruppe span{white-space:normal;text-align:center;padding:0}
  .fa-inst-gruppe i{display:none}
  .fa-inst-bandzone::before,.fa-inst-bandzone::after{display:none}
}
@media (max-width:560px){
  .fa-inst-innen,.fa-inst-bandkopf{padding-left:18px;padding-right:18px}
}

/* ==========================================================================
   Preis und Klickhinweis am Gerät (14.08.)
   --------------------------------------------------------------------------
   Der Preis stand bisher nur im Datenkranz — und der wird erst eingeblendet,
   wenn die Bühne stillsteht (.fa-buehne:not(.dreht)). Auf dem Handy greift
   das nicht zuverlässig; dann stand im Hero überhaupt kein Preis.

   Jetzt klebt er am vorderen Gerät und ist ab dem ersten Bildaufbau da,
   unabhängig von jeder Animation. Der Datenkranz behält seine Zeile
   „Preis" — doppelt ist hier besser als gar nicht, und die beiden stehen
   weit genug auseinander, dass es nicht wie ein Fehler aussieht.

   Beides zeigt NUR das vordere Gerät. An den hinteren wäre es Beschriftung
   auf etwas, das man nicht anklicken kann.
   ========================================================================== */
.pb-tipp{
  position:absolute; opacity:0; pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.pb-karte.vorn .pb-tipp{ opacity:1; }

/* Das Preisschild stand hier. Entfernt am 14.08. — der Preis steht schon
   im Datenkranz, und zweimal dieselbe Zahl im selben Bild wirkt wie ein
   Fehler. */

/* --- Der Klickhinweis --------------------------------------------------- */
.pb-tipp{
  /* Gemessen: ohne nowrap brach „Tippen für Details" bei 390 px auf zwei
     Zeilen um und stand als Klotz mitten auf dem Gerät. */
  left:50%; bottom:-6%; transform:translate(-50%,6px);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--salbeinebel);
  border:1px solid rgba(161,165,140,.32); border-radius:999px;
  padding:6px 14px; background:rgba(27,29,25,.72);
  backdrop-filter:blur(6px);
}
.pb-karte.vorn .pb-tipp{ transform:translate(-50%,0); }
.pb-tipp i{ font-style:normal; }
.pb-tipp svg{ flex:0 0 auto; opacity:.8; }

/* Beim Überfahren des Geräts hebt sich der Hinweis — das bestätigt, dass da
   wirklich etwas passiert, bevor man klickt. */
.pb-karte.vorn:hover .pb-tipp,
.pb-karte.vorn:focus-visible .pb-tipp{
  border-color:rgba(231,220,201,.55); color:var(--mondlicht);
}
/* Während die Bühne dreht, sind beide weg — sonst wandern sie mit und
   sehen aus, als hingen sie schief in der Luft. */
.pb-buehne.zieht .pb-tipp,
.fa-buehne.dreht .pb-tipp{ opacity:0 !important; }

@media (max-width:700px){
  .pb-tipp{ font-size:11.5px; padding:7px 13px; bottom:-8%; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
  .pb-tipp{ transition:none; transform:translate(-50%,0); }
}

/* Der Datenkranz auf dem Handy — sofort da, nicht erst im Stillstand.
   ------------------------------------------------------------------
   Genau das war Jonas' ursprüngliche Beobachtung: „der Scrolleffekt
   greift manchmal nicht so wirklich", und dann stand im Hero kein
   Preis. Auf dem Handy ist der Kranz ohnehin ein schlichtes Raster
   unter der Bühne und keine schwebende Beschriftung — dort gibt es
   keinen Grund, ihn an den Stillstand der Drehung zu koppeln. */
@media (max-width:980px){
  .fa-buehne .pb-kranz li{ opacity:1 !important; transform:none !important; }
}