/* SUMAHOMES – Scroll-Einblendung für Fließtexte
   Zeile für Zeile, jede Zeile von links nach rechts – wie ein Auge liest.
   Nur Smartphones (≤ 700 px). Desktop bleibt unverändert.
   Klassen werden ausschließlich per JavaScript auf Mobile gesetzt.
   Text wird nie unsichtbar: noch nicht gelesene Zeilen bleiben bei 42 %. */

@media (max-width: 700px) {

  .sr-text:not(.sr-done) {
    --sr-y: 0px;     /* Oberkante der aktuellen Zeile */
    --sr-x: 0%;      /* Lesefortschritt in der aktuellen Zeile */
    --sr-lh: 1.6em;  /* Zeilenhöhe */

    -webkit-mask-image:
      linear-gradient(to bottom,
        #000 0, #000 var(--sr-y),
        rgba(0, 0, 0, .42) var(--sr-y), rgba(0, 0, 0, .42) 100%),
      linear-gradient(to right,
        #000 0, #000 calc(var(--sr-x) - 30%),
        transparent var(--sr-x), transparent 100%);
    -webkit-mask-size: 100% 100%, 100% var(--sr-lh);
    -webkit-mask-position: 0 0, 0 var(--sr-y);
    -webkit-mask-repeat: no-repeat;

    mask-image:
      linear-gradient(to bottom,
        #000 0, #000 var(--sr-y),
        rgba(0, 0, 0, .42) var(--sr-y), rgba(0, 0, 0, .42) 100%),
      linear-gradient(to right,
        #000 0, #000 calc(var(--sr-x) - 30%),
        transparent var(--sr-x), transparent 100%);
    mask-size: 100% 100%, 100% var(--sr-lh);
    mask-position: 0 0, 0 var(--sr-y);
    mask-repeat: no-repeat;
    mask-composite: add;
  }

}