/* ==========================================================================
   Filmkorn im Hintergrund
   --------------------------------------------------------------------------
   Hier stellst du alles ein. Nach dem Speichern die Seite hart neu laden (Strg+F5).
   Das Korn ist Teil des Hintergrunds und läuft beim Scrollen mit der Seite mit.
   Es liegt auf den Landschaften, dem Himmel und den hellen Abschnittsflächen.
   Schrift, Textfelder, Logos, Kopfzeile und Fußzeile bleiben frei davon.
   Es wirkt nur auf der Startseite, weil nur dort diese Datei eingebunden ist.
   ========================================================================== */

:root {
  /* Stärke des Korns. 0 = aus, 0.05 = kaum zu sehen, 0.09 = dezent, 0.2 = deutlich, 0.4 = sehr stark. */
  --korn-staerke: 0.09;

  /* Körnung: Kantenlänge der Korn-Kachel in Pixeln.
     Kleiner = feineres Korn (z. B. 140px), größer = gröberes Korn (z. B. 420px). */
  --korn-groesse: 256px;

  /* Mischmodus. "normal" ist am sparsamsten. "overlay" oder "soft-light" wirken filmischer,
     dann darf --korn-staerke meist etwas höher sein. */
  --korn-mischung: normal;
}

/* Die Stellen, an denen Hintergrund sichtbar ist:
   Landschaftsfenster (Hero, Zitatband, See, Nacht) und Abschnittsflächen samt ihren kleinen Landschaftsübergängen */
.szene::after,
main > section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("../img/korn.png") 0 0 / var(--korn-groesse) var(--korn-groesse) repeat;
  opacity: var(--korn-staerke);
  mix-blend-mode: var(--korn-mischung);
}

/* Auf dem dunklen Nachthimmel fällt das helle Korn stärker auf, deshalb dort etwas schwächer */
.fenster-nacht .szene::after { opacity: calc(var(--korn-staerke) * 0.6); }

@media print { .szene::after, main > section::before { display: none; } }