/* ============================================================
   DAS ERSTE JAHR — DIE DURCHGEHENDE BAHN
   ------------------------------------------------------------
   Diese Datei greift ausschließlich, wenn die gezeichnete Szene
   wirklich läuft: einsteiger_jahr.js setzt dafür die Klassen
   `epj-szene-buehne` und `epj-szene-an`. Ohne JavaScript, ohne
   Canvas und in alten Browsern bleibt das Jahresband exakt so,
   wie es in einsteiger.css steht — ein sticky Bildfeld mit den
   gepflegten Fotos.

   Aus dem Bildfeld wird hier eine Spielbahn: eine schmale,
   durchgehende Spalte über die volle Fensterhöhe, oben und
   unten weich auslaufend, damit sie nicht als Kasten endet,
   sondern durch die Seite läuft. Die Punktachse wandert an
   ihren rechten Rand — dort steht sie wie eine Distanzmarke am
   Loch, nicht wie ein Steuerelement daneben.
   ============================================================ */

.epj-szene-buehne{
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:56px;
}

/* Die Bahn klebt über die ganze Fensterhöhe. Kein Grid mehr —
   Canvas, Achse und Zeile liegen übereinander. */
.epj-szene-buehne .epj-band{
  position:sticky;
  top:0;
  height:100svh;
  display:block;
  padding:0;
  background:none;
}

.epj-szene-buehne .epj-bilder{
  position:absolute;
  inset:0;
  aspect-ratio:auto;
  border-radius:0;
  overflow:hidden;
  background:#fff;
  /* Oben und unten auslaufen lassen: die Linie hat keinen
     Anfang und kein Ende, sie läuft durch die Seite. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
}

/* Die gepflegten Fotos bleiben im Markup — sie werden nur
   verdeckt, sobald wirklich gezeichnet wird. */
.epj-szene-an .epj-bild{display:none}

.epj-szene{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* Die Punktachse entfällt, solange die Szene läuft: Der Ball IST
   die Fortschrittsanzeige. Zwei Anzeigen nebeneinander, die
   verschieden weit fortgeschritten aussehen, verwirren nur. */
.epj-szene-buehne .epj-achse{display:none}

/* Die Zeitangabe entfällt ebenfalls: Sie wiederholt wörtlich die
   `epj-wann`-Zeile der Station, die direkt daneben steht — und
   lag den Dingen am Weg im Bild. */
.epj-szene-buehne .epj-bandzeile{display:none}

/* ---- Schmale Fenster: aus der Spalte wird ein Streifen ----
   Unter 900 px liegt das Band sonst quer über dem Text. Eine
   liegende Bahn ergibt für eine senkrecht laufende Szene aber
   kein Bild — deshalb bleibt die Spalte hier stehen und wird
   nur schmal. Achse und Zeitangabe hätten darin keinen Platz;
   beides steht ohnehin im Text daneben. */
@media (max-width:900px){
  .epj-szene-buehne{
    grid-template-columns:clamp(78px,22vw,104px) minmax(0,1fr);
    gap:20px;
  }
  .epj-szene-buehne .epj-band{
    position:sticky;
    top:0;
    height:100svh;
    z-index:1;
    background:none;
    padding:0;
  }
  .epj-szene-buehne .epj-achse,
  .epj-szene-buehne .epj-bandzeile{display:none}
}

@media (max-width:560px){
  .epj-szene-buehne{gap:14px}
}

/* ---- Reduzierte Bewegung ----
   Die Szene wird ein einziges Mal still gezeichnet. Eine
   fensterhohe, klebende Spalte wäre hier fehl am Platz. */
@media (prefers-reduced-motion:reduce){
  /* NICHT `static`: die Bahn ist der Positionierungskontext für
     Canvas, Achse und Zeile. Ohne ihn beziehen sich deren
     `inset:0` auf den Viewport, und die Szene legt sich über die
     ganze Seite. */
  .epj-szene-buehne .epj-band{
    position:relative;
    height:min(72svh,560px);
  }
  .epj-szene-buehne .epj-achse{padding:24px 0}
}

/* Das Wort „Pate" trägt die Farbe der Patenlinie — ohne Legende
   ist damit klar, welche Linie wem gehört. Bei „Ich bin schon
   dabei" ist die Patenlinie die eigene (dunkle), dann bleibt das
   Wort in der Textfarbe. */
.epj-szene-buehne .epj-pate{color:var(--gruen);font-weight:400}
[data-rolle="dabei"] .epj-szene-buehne .epj-pate{color:inherit;font-weight:inherit}