/* ERZEUGT von schwebebahn.py ueber bauen.py — nicht von Hand aendern. */

/* ===================================================== Wuppertaler Schwebebahn
   Der Wagen HAENGT an der Schiene und pendelt leicht — beides gehoert dazu,
   sonst ist es eine Hochbahn und keine Schwebebahn.

   Zwei getrennte Bewegungen, damit sie sich nicht gegenseitig stoeren:
   .sb-fahrt verschiebt waagerecht, .sb-pendel dreht um den Aufhaengepunkt
   (transform-origin oben in der Mitte). Eine einzige Transform-Kette koennte
   das nicht, weil die Drehung sonst um den Wagenmittelpunkt liefe.

   Bei reduzierter Bewegung steht der Wagen ruhig im Bild — er verschwindet
   nicht, sonst fehlte das Motiv ganz. */
/* Die Zeichenfarbe: auf dunklem Grund der helle Akzent, auf hellem Grund ein
   dunkler Ton. Gold auf Weiss verschwindet — am 22.09.2026 im Musterbogen
   genau so passiert, weil die Farbe ausserdem aus der falschen Variable kam
   (--akzent statt --accent) und deshalb die helle Textfarbe erbte. */
.schwebebahn { line-height: 0; width: 100%; color: var(--sb-farbe, var(--accent-soft, #3f96e3)); }
.schwebebahn--auf-hell { color: var(--sb-farbe, var(--accent-ink, #0f5fb0)); }
.schwebebahn svg { display: block; width: 100%; height: auto; }

.sb-fahrt {
  animation: sb-fahren var(--dauer, 22s) linear infinite;
  will-change: transform;
}
@keyframes sb-fahren {
  from { transform: translateX(var(--von, -360px)); }
  to   { transform: translateX(var(--bis, 1500px)); }
}

.sb-pendel {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sb-pendeln 4.6s ease-in-out infinite;
}
@keyframes sb-pendeln {
  0%, 100% { rotate: -1.1deg; }
  50%      { rotate: 1.1deg; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-fahrt { animation: none; transform: translateX(560px); }
  .sb-pendel { animation: none; rotate: 0deg; }
}