/* =====================================================================
 * RailTime - technische Gueterzug-Silhouette als echte Hintergrundebene.
 *
 * Jedes groessere Segment wird zu einem eigenen Stapelkontext:
 * Segment-Hintergrund (-2 / Elementhintergrund), Zug (-1), Inhalt (auto+).
 * Damit liegt der Zug ueber Farben und Verlaeufen, aber garantiert hinter
 * Text, Bildern, Videos, Karten und Bedienelementen.
 * ===================================================================== */

.rt-zug-segment-traeger {
  position: relative;
  isolation: isolate;
}

.rt-zug-ebene {
  position: fixed !important;
  z-index: -1 !important;
  inset: 0;
  overflow: hidden;
  color: #44515e;
  opacity: .15;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}

.rt-zug-ebene--dunkel {
  color: #d8dde4;
}

.rt-zug-ebene--hell {
  color: #44515e;
}

.rt-zug-gleis {
  position: absolute;
  right: 0;
  bottom: 18vh;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

.rt-zug {
  position: absolute;
  bottom: calc(18vh + 1px);
  left: 0;
  width: clamp(2600px, 250vw, 4000px);
  will-change: transform;
}

.rt-zug__bild {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Mobil laeuft dieselbe Dekoration mit. Nur die Zuglaenge wird an den
   schmalen Viewport angepasst: die Desktop-Breite (rund das 2,5-fache der
   Viewportbreite) wuerde auf dem Telefon einen 6- bis 7-fach breiten Zug
   ergeben, von dem kaum noch etwas als Zug lesbar waere. Das Verhaeltnis
   bleibt daher bei etwa 3 Viewportbreiten. */
@media (max-width: 767px) {
  .rt-zug {
    bottom: calc(16vh + 1px);
    width: clamp(900px, 300vw, 1600px);
  }

  .rt-zug-gleis { bottom: 16vh; }
}

/* Bei reduzierter Bewegung bleibt die Dekoration aus. */
@media (prefers-reduced-motion: reduce) {
  .rt-zug-ebene { display: none; }
}