/* Aingel Variante 13 – Seitenkopf-Motiv „Gyroskop" (Leistungen, nach Variante 9)
   Vier kardanisch gelagerte Ringe in den Rollenfarben (Code, Text, Gestaltung, Prüfung), Du als oranger Kern in der
   Mitte. Langsames, ruhiges Kreisen, die Maus neigt das Modell leicht (nur feiner Zeiger). Lädt erst in der Nähe,
   zeichnet nur, solange sichtbar.
   Prüfung 14.10. (Owner: „beim Laden auch zwei verschiedene Animationen oben, eine mit schwarzen background …
   es soll aber sowieso nur eine davon sein“): das Standbild aus Variante 9 (img/gyroskop.webp) hat einen dunklen,
   nicht transparenten Grund - passend zu Variante 9, aber nicht zum hellen Modus dieser Seite. Es stand bisher die
   ganze Ladezeit über sichtbar und wurde erst nach dem Laden des 3D-Modells ausgeblendet - der Nutzer sah also kurz
   beide gleichzeitig. Jetzt bleibt es standardmäßig unsichtbar (0 Deckkraft) und erscheint nur, wenn JavaScript oder
   3D wirklich fehlen (.no-js bzw. die Klasse .ohne-3d, die gyroskop-motiv.js dann sofort setzt) - während des
   Ladens ist die Fläche einfach leer, nie ein zweites, falsch eingefärbtes Bild. */
[data-gyroskop] { position: relative; }
[data-gyroskop] .gyroskop-motiv__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s var(--kurve); }
.no-js [data-gyroskop] .gyroskop-motiv__bild, [data-gyroskop].ohne-3d .gyroskop-motiv__bild { opacity: 1; }
[data-gyroskop] .gyroskop-motiv__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }