/* Raster: a photo becomes a living halftone (assets/js/raster.js). The canvas lies over
   the photo; the photo stays as the fallback until the first raster frame is drawn. */
.raster { position: relative; overflow: hidden; }
.raster > :not(.raster__flaeche) { position: relative; z-index: 1; }
/* The original photo is never shown first: paper until the raster's first frame fades in.
   It only appears when the raster cannot run (no WebGL, image error: .raster--ohne; no JS: raster-ohne-js.css). */
.raster img { opacity: 0; }
.raster--ohne img { opacity: 1; }
.raster__flaeche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; }
.raster--bereit .raster__flaeche { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .raster__flaeche { transition: opacity 700ms ease-out; }
}

/* Smaller raster areas, same dot size (Jan 12.10.2026: "die Fläche etwas kleiner, die Rasterpunkte so groß lassen").
   Only the height shrinks; the cell size (data-zelle) stays, so the dots keep their size. */
.bildpause.raster img { height: clamp(8rem, 22vw, 19rem); }
.auftakt.raster .auftakt__foto img { height: 180px; }
.seitenkopf.raster .seitenkopf__bild--foto img { height: 26vh; min-height: 150px; }
@media (min-width: 900px) {
  .auftakt.raster { min-height: min(calc(100svh - 7.5rem), 34rem); }
  .auftakt.raster .auftakt__foto img { height: 100%; }
  .seitenkopf.raster { min-height: min(44vh, 26rem); }
  .seitenkopf.raster .seitenkopf__bild--foto img { height: min(44vh, 26rem); }
}