/* ------------------------------------------------------------------
   Lichtkegel – das Design bleibt unveraendert dunkel, es kommt nur eine
   Ebene darueber, die dem Zeiger folgt und die Seite oertlich aufhellt.

   `mix-blend-mode: screen` ist der Kern: diese Mischart kann nur aufhellen
   und laesst Weiss unveraendert. Ein gewoehnliches halbtransparentes Weiss
   wuerde den Grund unter der Schrift anheben und weisse Schrift damit
   schlechter lesbar machen – hier passiert das Gegenteil.

   Der Ton ist warm (Sand, nicht Blau), damit das Licht zur Dubai-Bildwelt
   passt und nicht wie ein Bildschirmreflex wirkt.

   Wird nur auf Seiten geladen, die <body class="sgf-licht"> tragen.
------------------------------------------------------------------ */

.lichtkegel{
  position:fixed;top:0;left:0;width:820px;height:820px;
  margin:-410px 0 0 -410px;           /* Mittelpunkt auf den Zeiger legen */
  pointer-events:none;
  z-index:5;                          /* ueber den Flaechen, unter Menue (60) und Sprunglink (70) */
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .65s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  background:radial-gradient(circle closest-side,
    rgba(168,148,110,.33) 0%,
    rgba(160,140,104,.22) 26%,
    rgba(150,132,98,.11) 48%,
    rgba(140,124,92,.042) 66%,
    rgba(130,115,86,0) 80%)}

body.sgf-licht.licht-an .lichtkegel{opacity:1}

/* Waehrend eine Ueberlagerung offen ist (Formular, Rechtstexte, Bestellung)
   gehoert die Aufmerksamkeit dorthin – das Licht bleibt aus. */
body.sgf-licht.locked .lichtkegel{opacity:0}

/* Ohne Maus gibt es nichts zu folgen. */
@media (hover:none),(pointer:coarse){.lichtkegel{display:none}}
@media (prefers-reduced-motion:reduce){.lichtkegel{display:none}}