/* ===========================================================================
   DER AUFBAU DER BEIDEN VERGLEICHSBILDER   (.wi__vgl)

   Gehoert zu <figure class="wi__vgl" data-vgl="ab|auf"> im Vergleichsband
   von #warum-immobilien und zu assets/js/vgl-animation.js.

   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   NEU GESCHRIEBEN AM 01.09.2026 — Optimierungsbriefing, Abschnitt 04,
   „Bilder als Mechanismus". Die beiden Abbildungen waren Rasterbilder
   (vgl-klassisch.png, vgl-immobilie.png: fallende und wachsende Balken
   mit Pfeil) und wurden ueber eine wandernde Verlaufsmaske laengs der
   Pfeilachse freigegeben — die ganze Rechnung dazu (Achsen 125 und 55
   Grad, Saum 26 %, Front 7 -> 120 %, @property --vgl-front) steht in der
   Versionsgeschichte. Sie ist gegenstandslos: die Abbildungen sind jetzt
   Inline-SVG mit echten Pfaden, und ein Pfad laesst sich ziehen, statt
   dass man ihn unter einer Maske hervorholen muesste.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   KUNDENWUNSCH VOM 31.08.2026 GILT WEITER: „Man kommt auf die Section — und
   auch wenn man mit der Maus druebergeht — sollen die Pfeile aufgebaut
   werden. Die Pfeile werden immer laenger." Dieselbe Geste, jetzt auf
   echten Pfaden: `stroke-dashoffset` von 1 auf 0 bei pathLength="1".

   WAS SICH BEWEGT, in der Reihenfolge
     0   ms   Haus (Vermoegenswert) blendet auf              300 ms
     0   ms   Pfeil 1 zieht                                   500 ms
     70  ms   Pfeil 2 zieht  (nur rechts)                     500 ms
     140 ms   Pfeil 3 zieht  (nur rechts)                     500 ms
     ~420 ms  die Pfeilspitzen erscheinen, jede wenn ihr Pfeil steht
     350 ms   der Eigentumsanteil im Haus waechst von unten   450 ms
     800 ms   fertig
   Alles innerhalb der P0-Vorgabe desselben Briefings: keine Einzelbewegung
   ueber 600 ms, Staffelung 70 ms je Element, in Summe 140 ms.

   DIE DREI ZUSTAENDE, gesetzt allein vom Skript ueber `data-vgl-lauf`:
     (kein Attribut)  Ruhezustand, alles vollstaendig sichtbar
     bereit           Startlage: Pfeile auf Laenge 0, Spitzen und Haus
                      unsichtbar, Anteil auf Hoehe 0
     lauf             die Bewegung laeuft; am Ende nimmt das Skript das
                      Attribut weg, und es gilt wieder der Ruhezustand

   DER RUHEZUSTAND STEHT NICHT HIER. Es gibt bewusst KEINE Grundregel, die
   etwas verbirgt. Ohne JavaScript, bei abgeschalteter Bewegung und nach
   dem Lauf steht die Abbildung deshalb immer ganz da — genau die
   Bedingung aus dem P0 des Briefings: „Inhalte duerfen nie dauerhaft mit
   opacity: 0 verbleiben."

   Groesse, Lage und Tafel der Abbildung stehen in assets/css/warum.css;
   hier steht nur Bewegung.
   =========================================================================== */

.wi__vgl {
  --vgl-dauer: 500ms;
  --vgl-kurve: cubic-bezier(0.42, 0.05, 0.40, 0.98);
  --vgl-takt:  70ms;
}

/* ---------------------------------------------------------------------------
   1  STARTLAGE — nur unter `bereit` und `lauf`
--------------------------------------------------------------------------- */
.wi__vgl[data-vgl-lauf] .vgl-pfeil {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.wi__vgl[data-vgl-lauf] .vgl-spitze,
.wi__vgl[data-vgl-lauf] .vgl-haus { opacity: 0; }
.wi__vgl[data-vgl-lauf] .vgl-anteil {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ---------------------------------------------------------------------------
   2  DER LAUF
   `--n` steht an jedem Pfeil und seiner Spitze im Markup (0, 1, 2) und
   staffelt sie. Die Spitze wartet, bis ihr Pfeil steht: Dauer plus Takt
   minus ein kleiner Vorgriff, damit sie nicht nach dem Pfeil aufblitzt,
   sondern mit ihm ankommt.
--------------------------------------------------------------------------- */
.wi__vgl[data-vgl-lauf='lauf'] .vgl-haus {
  animation: vgl-auf 300ms var(--vgl-kurve) both;
}
.wi__vgl[data-vgl-lauf='lauf'] .vgl-pfeil {
  animation: vgl-zug var(--vgl-dauer) var(--vgl-kurve) both;
  animation-delay: calc(var(--n, 0) * var(--vgl-takt));
}
.wi__vgl[data-vgl-lauf='lauf'] .vgl-spitze {
  animation: vgl-auf 150ms linear both;
  animation-delay: calc(var(--n, 0) * var(--vgl-takt) + var(--vgl-dauer) - 80ms);
}
.wi__vgl[data-vgl-lauf='lauf'] .vgl-anteil {
  animation: vgl-anteil 450ms 350ms var(--vgl-kurve) both;
}

@keyframes vgl-zug    { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vgl-auf    { from { opacity: 0; } to { opacity: 1; } }
@keyframes vgl-anteil { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------------------------
   3  BEWEGUNG AUS
   Das Skript ruehrt die Abbildungen bei `reduce` gar nicht erst an. Der
   Block faengt den zweiten Fall ab: jemand stellt die Einstellung um,
   waehrend die Seite offen ist. Dann steht sofort alles.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wi__vgl[data-vgl-lauf] .vgl-pfeil { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .wi__vgl[data-vgl-lauf] .vgl-spitze,
  .wi__vgl[data-vgl-lauf] .vgl-haus { opacity: 1; animation: none; }
  .wi__vgl[data-vgl-lauf] .vgl-anteil { transform: none; animation: none; }
}