/* === assets/css/stream.css — Vertikaler Stream (rechts) ================== */
:root{
  --portrait-vh: 100svh;
  /* WICHTIG: zusätzlich auf 100svw deckeln */
  --stream-w: min(calc(var(--portrait-vh) * 0.6666667), 1080px, 100svw);

  /* neutrale Platzhalterfarben (ohne Animation/Filter) */
  --ph-bg: #f4f4f4;
}
@media (prefers-color-scheme: dark){
  :root{ --ph-bg: #1a1a1a; }
}

/* Layout */
.stream{ width:100svw; margin:0; padding:0; }
.stream__rail{
  width:var(--stream-w);
  max-width: 100svw;
  margin-left:auto;
  margin-top:0; padding-top:0;
}
#stream-sentinel{ width:1px; height:1px; }

/* Picture blockt den Platz, erhält Platzhalter bis Bild geladen ist */
.stream__rail picture{
  display:block;
  margin:0; padding:0;
  position:relative;
  overflow:hidden;
  background: var(--ph-bg);        /* neutraler Platzhalter */
}
.stream__rail picture.is-ready{
  background: transparent;         /* weg, wenn Bild da ist */
}

/* Bild selbst: CLS-freundlich, sanftes Fade-in */
.stream__img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  margin:0; padding:0;
  opacity:0;
  transition: opacity .25s ease;
}
.stream__img.is-ready{ opacity:1; }

/* --- Stream: Layoutstabilität & sanftes Fade-In ----------------------- */
.stream__rail picture {
  display: block;
  overflow: hidden;
  /* Platz durch JS-gesetztes aspect-ratio bleibt erhalten */
}

.stream__img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .25s ease;
}

.stream__img.is-ready {
  opacity: 1;
}