/* Styling fuer static/js/hintergrund.js (ersetzt jquery.vegas) */

.cnl-bg,
.cnl-bg-overlay,
.cnl-bg-schleier {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/*
  Das gekachelte Muster über dem Bild.

  `opacity` ist NICHT schmückend, sondern der Grund, warum vom Backdrop
  überhaupt etwas zu sehen ist. Die Kacheln unter /vegas/overlays/ sind zum
  Teil vollständig deckendes Schwarz — `19.png`, das Filmseite und
  Personenseite benutzen, ist ein 30×30-Feld aus #000 mit Alpha 0 auf allen
  900 Pixeln. jquery.vegas legte darauf immer eine halbe Deckkraft:

      .vegas-overlay { background: transparent url(overlays/01.png);
                       opacity: .5; z-index: -1 }

  Beim Ersetzen von Vegas durch static/js/hintergrund.js kam die Kachel mit,
  die Deckkraft nicht. Das Muster lag damit als schwarze Wand über dem Bild —
  auf jeder Filmseite und jeder Personenseite, bei jedem Film. Zu sehen war
  nicht "kein Hintergrundbild", sondern ein Hintergrundbild hinter einer
  undurchsichtigen Fläche.

  .5 ist der Wert von Vegas und damit der, für den die Seiten gezeichnet
  wurden: der Filmtitel steht deshalb in Weiss auf dem abgedunkelten Foto.
*/
.cnl-bg-overlay {
  z-index: -1;
  background-repeat: repeat;
  opacity: .5;
}

/* Die Fläche zwischen Bild und Inhalt. In der Hintergrundfarbe des Themas und
   nicht in Schwarz: sonst wäre das helle Thema plötzlich dunkel und die dunkle
   Schrift darauf nicht mehr zu lesen. Bootstrap tauscht --bs-body-bg beim
   Themawechsel, der Schleier geht damit von selbst mit.
   Zwischen Bild (-2) und Muster (-1) hat er keinen Platz - er gehört über
   beide, aber unter den Inhalt. */
.cnl-bg-schleier {
  z-index: -1;
  background-color: var(--bs-body-bg);
}

.cnl-bg-ebene {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 1000ms ease-in-out;
}