/* ══ LOGIN IM KREIS ══════════════════════════════════════════════
   Der gesamte Anmeldevorgang findet in einer schwarzen Scheibe in
   der Bildflaeche statt. Die Farbebenen fuer Auftritt, Flackern und
   Abgang baut das Skript weiter unten (Mini-Optik).              */
#lg-wrap {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
body.locked #lg-wrap {
  pointer-events: auto;
}
body:not(.locked) #lg-wrap {
  display: none;
}
/* Waechst der Kreis mit der Adresse, laeuft er weich mit. Die Effekte
   (fahrt) setzen die Groesse dagegen Bild fuer Bild — dort nimmt das
   Skript die Klasse weg, sonst liefe die Ueberblendung hinterher.    */
#lg-auth.tippt {
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease,
    transform 0.5s ease;
}
#lg-auth {
  --d: min(258px, 40vh, 58vw);
  width: var(--d);
  height: var(--d);
  position: relative;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
#lg-auth.gone {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
#lg-disc {
  position: absolute;
  inset: 0;
}
/* ── MAUSZEIGER AUF DER SCHWARZEN FLAECHE ─────────────────────────
   Der Zeiger des Betriebssystems liegt ueber der Seite und laesst sich
   von ihr aus nicht umfaerben — weder mit Filtern noch mit Blendmodi.
   Ersetzen kann man ihn aber: dieselbe Form in Weiss, als Bild. Das
   zeichnet der Compositor wie den echten Zeiger, es laeuft also ohne
   jedes Nachziehen. Der Druckpunkt (0 0 bzw. Mitte) sitzt an derselben
   Stelle wie beim schwarzen.                                         */
/* Dasselbe gilt fuer die schwarzen Maskenkeile im rechten Aufklappmenue:
   auf schwarzem Grund verschwindet der schwarze Zeiger. Der Keil traegt
   einen clip-path, und der schneidet auch die Trefferflaeche zu — der
   Wechsel geschieht also genau an der schraegen Kante.              */
html.lg-weiss,
html.lg-weiss *,
.mat-wedge,
.mat-wedge * {
  cursor:
    url('/assets/zeiger-weiss.png') 0 0,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAATCAYAAAB2pebxAAAAbElEQVR42mP4////fiBWAGIGcjGIgIF+IBag1BAQeA/ECZQaAgPngdiBUkNgYD0x4UXIEBhowBdexBoCAvdxhRcphsDAfvTwIscQGJgP8+KAGUKRdygOWIqimKLERlGypzgDUlQUUKVQohgDAE1QUUgjCh0UAAAAAElFTkSuQmCC)
      0 0,
    default !important;
}
html.lg-weiss input,
html.lg-weiss textarea,
html.lg-weiss .lg-val {
  cursor:
    url('/assets/zeiger-text.png') 4 9,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAASCAYAAABmQp92AAAAKUlEQVR42mP4//8/AxA74MAMDFAFuABcAQzvh2K42KiCIaiAYHTjTDAAk9HSOGGtnGcAAAAASUVORK5CYII=)
      4 9,
    text !important;
}

/* ── KORONA UM DEN KREIS ──────────────────────────────────────────
   Fest stehend, ohne jede Bewegung: der Kern unmittelbar an der Kante
   ist voll weiss, nach aussen laeuft er weich aus, darueber liegt eine
   ruhige Gasstruktur. Nichts dreht sich, nichts blendet auf und ab —
   das spart zugleich die Rechenzeit, die die fuenf bewegten Ebenen
   vorher gekostet haben.
   Sie liegt als eigene Ebene am Fenster, damit kein Kasten sie
   beschneidet; Groesse und Mitte fuehrt das Skript dem Kreis nach.   */
.lg-korona {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 1.1s ease;
}
/* Hier bewusst KEIN Ebenen-Hinweis fuer den Compositor. In Firefox gemessen:
   die Flaeche ist bei grossem Kreis rund 1670 px im Quadrat, und der Versuch,
   sie dauerhaft als eigene Ebene zu halten, verdoppelte die Bildzeit —
   62 statt 31 ms. Billiger wird sie dadurch, dass sie seltener angefasst
   wird, siehe schwebenLassen(). */
.lg-korona.an {
  opacity: 1;
}
body:not(.locked):not(.lg-regmodus) .lg-korona {
  display: none;
}
.lg-korona i {
  position: absolute;
  inset: 0;
  display: block;
}
/* Kern: voll weiss an der Kante, dann in Stufen nach aussen */
.lg-korona .saum {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0) 48%,
    rgba(255, 255, 255, 1) 49.6%,
    rgba(255, 255, 255, 1) 51.4%,
    rgba(255, 255, 255, 0.55) 54%,
    rgba(255, 255, 255, 0.22) 58%,
    rgba(255, 255, 255, 0) 66%
  );
}
/* Hof: der weiche Schein darum */
.lg-korona .hof {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0) 48.5%,
    rgba(255, 255, 255, 0.5) 51%,
    rgba(255, 255, 255, 0.3) 56%,
    rgba(255, 255, 255, 0.14) 63%,
    rgba(255, 255, 255, 0.05) 72%,
    rgba(255, 255, 255, 0) 84%
  );
}
/* Gas: eine ruhige Struktur, rund maskiert */
.lg-korona .schwade {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(
    circle closest-side,
    #000 74%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 97%
  );
  mask-image: radial-gradient(
    circle closest-side,
    #000 74%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 97%
  );
}