/* ============================================================================
   MOBIL_LEISTUNG_V1 — Entschlackung des Hintergrunds auf schmalen Schirmen.
   Muss als LETZTES Stylesheet eingebunden werden (schlaegt die Vorgaben).

   Warum ueberhaupt: Die Seite legt mehrere bildschirmfuellende, fest stehende
   Ebenen uebereinander — drei Leuchtkugeln mit 120px Weichzeichner, ein
   Rasterbild mit Maske, eine Rauschebene mit Mischmodus und ein rotierender
   Farbkegel. Am Rechner ist das kostenlos. Auf dem Handy muss der Grafikchip
   diese Ebenen in JEDEM einzelnen Scrollbild neu zusammenrechnen. Genau das
   war der zaehe Scroll — nicht die Leitung.

   Der Rechner bleibt unangetastet: alles hier steht in @media (max-width:820px).
   ========================================================================== */

@media (max-width:820px) {

  /* --- Leuchtkugeln: Bewegung und Weichzeichner raus -----------------------
     Ein 120px-Weichzeichner auf 600x600px ist die teuerste Einzelmassnahme der
     ganzen Seite. Der Verlauf darunter ist ohnehin schon weich (radial-gradient
     mit transparentem Aussenrand) — ohne Weichzeichner sieht es fast gleich aus,
     kostet aber nichts mehr. Zusaetzlich fallen die zwei Dauer-Animationen weg. */
  .orb { animation: none !important; filter: none !important; opacity: .55 }

  /* --- Rauschebene: ganz raus ---------------------------------------------
     Sie liegt bildschirmfuellend mit mix-blend-mode:overlay ueber allem. Ein
     Mischmodus zwingt den Browser, den gesamten darunter liegenden Bereich neu
     zu mischen, statt fertige Ebenen zwischenzuspeichern. Auf einem Handy-
     Display ist die Koernung bei 3,5 % Deckkraft ohnehin nicht zu erkennen. */
  .noise { display: none !important }

  /* --- Rasterbild: Maske raus ---------------------------------------------
     Das Raster selbst ist billig, die weiche Maske darueber nicht — sie ist ein
     zusaetzlicher Durchgang pro Bild. Ohne Maske bleibt das Raster sichtbar,
     wir nehmen ihm stattdessen etwas Deckkraft. */
  .grid-bg { -webkit-mask-image: none !important; mask-image: none !important; opacity: .22 }

  /* --- Rotierender Farbkegel im Aufschlag: Drehung raus -------------------- */
  .hero::after { animation: none !important }

  /* --- Scanline-Textur ueber dem Film: raus -------------------------------
     Wieder ein Mischmodus, diesmal ueber bewegtem Videobild — der teuerste
     denkbare Fall, weil sich der Untergrund 30-mal je Sekunde aendert. */
  .film__scan { display: none !important }

  /* --- Glaseffekte sparsam -----------------------------------------------
     backdrop-filter ist auf Handys teuer. An den kleinen Pillen im Film reicht
     ein deckenderer Hintergrund; optisch faellt es kaum auf. */
  .film__skip, .film__play {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(11, 16, 21, .82)
  }

  /* --- Ruhige Dauer-Animationen, die niemand bewusst wahrnimmt ------------- */
  .statbar .sweep { animation: none }
  .sdiv::after    { animation: none }
}

/* --- Wer Bewegung ausgeschaltet hat, bekommt sie auch nicht ueber Umwege ---- */
@media (prefers-reduced-motion: reduce) {
  .orb, .beam, .hero::after, .statbar .sweep, .sdiv::after { animation: none !important }
}