/* ==========================================================
   Sternenhimmel  ·  diBP
   Liegt als eigene Ebene hinter dem Inhalt des Hero. Der
   Inhalt (.hero .wrap) steht auf z-index 2 und bleibt damit
   in jedem Fall davor.
   ========================================================== */
.sterne{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;          /* nimmt dem Globus keine Klicks weg */
  /* Oben darf es funkeln, nach unten laeuft der Himmel aus - dort
     stehen Text und Zitat, die keinen Flimmergrund vertragen. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.35) 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.35) 82%,transparent 100%);
  opacity:.66;
}
.sterne canvas{display:block;width:100%;height:100%}

/* Ohne Bewegung bleibt das Feld stehen - gezeichnet wird es trotzdem,
   es ist ja Teil des Bildes und keine Animation um ihrer selbst willen. */
@media (prefers-reduced-motion: reduce){
  .sterne{opacity:.5}
}