/* ===========================================================================
   zz-motion.css - Bewegungsschicht der GOLD-Fassung          Stand 31.08.2026
   ---------------------------------------------------------------------------
   Diese Datei ergaenzt Bewegung, die es vorher nirgends gab. Sie aendert
   keine bestehende Regel, sondern nutzt drei Eigenschaften, die dem
   vorhandenen CSS NICHT in die Quere kommen:

     scale:      eigenstaendige Eigenschaft, wird MIT transform verrechnet
     translate:  dito
     animation-timeline: neu, faellt ohne Unterstuetzung ersatzlos weg

   Warum nicht transform? Weil fast jede Karte und jeder Knopf der Seite
   transform schon fuer Hover benutzt (translateY(-2px), scale(1.06) auf
   Bildern). Wer da mit transform dazwischenfunkt, loescht den Hover. Die
   eigenstaendigen Eigenschaften multiplizieren sich statt zu ueberschreiben -
   deshalb bleibt alles Bestehende unangetastet.

   Muss als LETZTES Stylesheet eingebunden sein (nach lv-eigen.css).

   1. Druck-Rueckmeldung
   2. Scroll-getriebene Bildbaender
   3. Fortschrittsfaden
   =========================================================================== */

:root{
  --lvm-druck:  cubic-bezier(.2,.8,.3,1);   /* Loslassen: weich auslaufend   */
  --lvm-klein:  .955;                       /* kleine Bedienknoepfe          */
  --lvm-knopf:  .972;                       /* Buttons                       */
  --lvm-karte:  .988;                       /* grosse Flaechen               */
}

/* ---------------------------------------------------------------------------
   1. Druck-Rueckmeldung
   ---------------------------------------------------------------------------
   Bisher passierte zwischen Antippen und Seitenwechsel gar nichts. Am Handy
   ist das besonders spuerbar, weil es dort keinen Hover gibt: Der Finger
   trifft, und die Seite bleibt bis zum Wechsel stumm.

   Hinweg 70 ms (soll sofort wirken), Rueckweg 190 ms (soll nachfedern).
   -------------------------------------------------------------------------- */

.lv-btn, .lv-f-btn, .lv-i-cta, .lv-s-more, .lv-nav-toggle, .lv-nav-text,
.lv-pr-chip, .lv-pr-btn, .lv-pr-cta, .lv-pr-tool,
.lv-viz-cta, .lv-vz-btn, .lv-web-cta, .lv-ex-cta, .lv-ex-btn,
.lv-fde-cta, .lv-fpv-cta, .lv-kip-cta, .lv-kip-link, .lv-kip-reflink,
.lv-kw-btn, .lv-vr-cta, .lv-vr-cbtn, .lv-sm-btn, .lv-fs-btn, .lv-p-more,
.lv-s-link, .lv-s-card, .lv-p-card, .lv-p-stage, .lv-ex-card, .lv-fde-card,
.lv-fpv-card, .lv-kip-card, .lv-viz-card, .lv-kw-card, .lv-web-card,
.lv-web-shot, .lv-viz-shot, .lv-vz-stage{
  -webkit-tap-highlight-color:transparent;   /* eigenes Feedback statt des
                                                grauen Systemblitzers        */
  touch-action:manipulation;                 /* nimmt die 300-ms-Tippbremse  */
  transition:scale 190ms var(--lvm-druck);
}

/* Kleine Bedienknoepfe duerfen am staerksten nachgeben - je kleiner die
   Flaeche, desto groesser muss der Weg sein, damit man ihn sieht. */
.lv-nav-toggle:active, .lv-pr-tool:active, .lv-pr-chip:active,
.lv-vz-btn:active, .lv-vr-cbtn:active, .lv-sm-btn:active,
.lv-fs-btn:active, .lv-p-more:active{
  scale:var(--lvm-klein);
  transition-duration:70ms;
}

.lv-btn:active, .lv-f-btn:active, .lv-i-cta:active, .lv-s-more:active,
.lv-pr-btn:active, .lv-pr-cta:active, .lv-viz-cta:active, .lv-web-cta:active,
.lv-ex-cta:active, .lv-ex-btn:active, .lv-fde-cta:active, .lv-fpv-cta:active,
.lv-kip-cta:active, .lv-kip-link:active, .lv-kip-reflink:active,
.lv-kw-btn:active, .lv-vr-cta:active, .lv-nav-text:active{
  scale:var(--lvm-knopf);
  transition-duration:70ms;
}

/* Grosse Flaechen: fast unsichtbar wenig, sonst wirkt es wie ein Wackeln. */
.lv-s-link:active, .lv-s-card:active, .lv-p-card:active, .lv-p-stage:active,
.lv-ex-card:active, .lv-fde-card:active, .lv-fpv-card:active,
.lv-kip-card:active, .lv-viz-card:active, .lv-kw-card:active,
.lv-web-card:active, .lv-web-shot:active, .lv-viz-shot:active,
.lv-vz-stage:active{
  scale:var(--lvm-karte);
  transition-duration:70ms;
}

/* Wer eine Karte anfasst, drueckt auf die Karte - nicht zusaetzlich auf den
   Knopf darin. Sonst schrumpfen beide uebereinander. */
.lv-s-card:active .lv-btn, .lv-p-card:active .lv-btn,
.lv-kw-card:active .lv-kw-btn{ scale:1; }

/* ---------------------------------------------------------------------------
   2. Scroll-getriebene Bildbaender
   ---------------------------------------------------------------------------
   Die Bilder wandern beim Scrollen langsamer als ihr Rahmen. Das laeuft ueber
   animation-timeline: view() - also im Compositor des Browsers, ohne eine
   Zeile JavaScript und ohne scroll-Ereignis. Wichtig hier, weil auf beiden
   Fassungen gleichzeitig three.js im Hintergrund rechnet: was so bewegt wird,
   nimmt dem Hauptthread nichts weg.

   Alle Rahmen tragen bereits overflow:hidden und ein festes Seitenverhaeltnis.
   scale:1.14 schafft den Ueberstand, aus dem die 5 % Weg genommen werden -
   und multipliziert sich mit dem transform:scale(1.01) bzw. dem Hover-Zoom
   scale(1.06), der auf denselben Bildern schon liegt.
   -------------------------------------------------------------------------- */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    .lv-web-sf img, .lv-s-media img, .lv-p-frame img, .lv-viz-sf img,
    .lv-viz-frame img, .lv-fpv-frame img, .lv-kip-frame img, .lv-kw-media img{
      scale:1.14;
      animation:lvmBand linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:translate;
    }

    /* Die grossen Buehnen bekommen weniger Weg: bei 660 px Hoehe faellt
       derselbe Prozentsatz sonst als Rutschen auf. */
    .lv-viz-frame img, .lv-fpv-frame img, .lv-kip-frame img{
      scale:1.09;
      animation-name:lvmBandRuhig;
    }
  }
}

@keyframes lvmBand{
  from{ translate:0 -5% }
  to  { translate:0  5% }
}
@keyframes lvmBandRuhig{
  from{ translate:0 -3% }
  to  { translate:0  3% }
}

/* ---------------------------------------------------------------------------
   3. Fortschrittsfaden
   ---------------------------------------------------------------------------
   Ein haarfeiner Goldfaden am oberen Rand, dessen Breite dem Scrollstand
   folgt. Kein eigenes Element noetig (body::after ist frei), keine Bindung an
   ein scroll-Ereignis, und ohne animation-timeline bleibt er unsichtbar statt
   halb gebaut stehenzubleiben.

   z-index 9985 liegt UNTER dem Menuepanel (9990) - waehrend das Menue offen
   ist, hat der Faden nichts zu melden.
   -------------------------------------------------------------------------- */

@supports (animation-timeline:scroll()){
  body::after{
    content:'';
    position:fixed; inset:0 0 auto 0; height:2px; z-index:9985;
    background:var(--lvt-verlauf-gold, linear-gradient(120deg,#7a5e18,#f5e6a8,#b38728,#fcf6ba,#7a5e18));
    transform-origin:0 50%;
    scale:0 1;
    pointer-events:none;
    animation:lvmFaden linear;
    animation-timeline:scroll(root block);
  }
  @keyframes lvmFaden{ from{ scale:0 1 } to{ scale:1 1 } }

  /* Die Weiche (.lv-w, z-index 99999) liegt ohnehin darueber. Im Vollbild der
     Galaxie (z-index 940) aber nicht - dort wird der Faden abgeschaltet, weil
     er sonst quer ueber der Szene haengt. */
  body:has(.lv-gx-voll)::after{ opacity:0; }
}

/* ---------------------------------------------------------------------------
   Rueckzug bei prefers-reduced-motion
   ---------------------------------------------------------------------------
   Kein Weg mehr - aber die Rueckmeldung beim Druecken bleibt, sonst waere die
   Seite fuer diese Nutzer wieder stumm. Sie wird nur von Bewegung auf
   Helligkeit umgestellt.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .lv-btn, .lv-f-btn, .lv-i-cta, .lv-s-more, .lv-nav-toggle, .lv-nav-text,
  .lv-pr-chip, .lv-pr-btn, .lv-pr-cta, .lv-pr-tool,
  .lv-viz-cta, .lv-vz-btn, .lv-web-cta, .lv-ex-cta, .lv-ex-btn,
  .lv-fde-cta, .lv-fpv-cta, .lv-kip-cta, .lv-kip-link, .lv-kip-reflink,
  .lv-kw-btn, .lv-vr-cta, .lv-vr-cbtn, .lv-sm-btn, .lv-fs-btn, .lv-p-more,
  .lv-s-link, .lv-s-card, .lv-p-card, .lv-p-stage, .lv-ex-card, .lv-fde-card,
  .lv-fpv-card, .lv-kip-card, .lv-viz-card, .lv-kw-card, .lv-web-card,
  .lv-web-shot, .lv-viz-shot, .lv-vz-stage{
    transition:opacity 90ms linear;
  }
  .lv-btn:active, .lv-f-btn:active, .lv-i-cta:active, .lv-s-more:active,
  .lv-nav-toggle:active, .lv-nav-text:active, .lv-pr-chip:active,
  .lv-pr-btn:active, .lv-pr-cta:active, .lv-pr-tool:active,
  .lv-viz-cta:active, .lv-vz-btn:active, .lv-web-cta:active,
  .lv-ex-cta:active, .lv-ex-btn:active, .lv-fde-cta:active,
  .lv-fpv-cta:active, .lv-kip-cta:active, .lv-kip-link:active,
  .lv-kip-reflink:active, .lv-kw-btn:active, .lv-vr-cta:active,
  .lv-vr-cbtn:active, .lv-sm-btn:active, .lv-fs-btn:active, .lv-p-more:active,
  .lv-s-link:active, .lv-s-card:active, .lv-p-card:active, .lv-p-stage:active,
  .lv-ex-card:active, .lv-fde-card:active, .lv-fpv-card:active,
  .lv-kip-card:active, .lv-viz-card:active, .lv-kw-card:active,
  .lv-web-card:active, .lv-web-shot:active, .lv-viz-shot:active,
  .lv-vz-stage:active{
    scale:1; opacity:.72;
  }
  body::after{ display:none; }
}