/* ══ 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;
}
/* DER KREIS GEHT NOCH, DIE APP STEHT SCHON (body.lg-geht, V3 25.09.2026).
   Seit der Kreuzblende ins Hauptfenster wird die App schon waehrend des
   Abgangs (bekannte Adresse) bzw. der Explosion (Registrierung) frei-
   geschaltet - unsichtbar unter dem vollen Startbild, damit das letzte
   Bild geladen und entschluesselt ist, wenn die Blende beginnt. Bis der
   Kreis durch ist, bleibt seine Ebene stehen, aber ohne Zeiger. Beginnt
   die Blende (body.rauscht faellt, core/session.js openMainWindow), geht
   sie im selben Zug wie das Startbild, mit seiner Kurve, aber schneller:
   in 0,4 statt 0,65 s. Die Farbauszuege gehoeren zum Startbild und nicht
   aufs Bild - gingen sie mit ihm, laegen sie als bunte Flecken noch ueber
   dem Hauptbild, wenn es schon deutlich zu sehen ist. */
body.lg-geht #lg-wrap {
  display: flex;
  pointer-events: none;
}
body.lg-geht:not(.rauscht) #lg-wrap {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 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;
}
/* Solange der Kreis nach der Freischaltung noch geht (lg-geht), bleibt
   auch sie im Aufbau - sie blendet dann gerade selbst ab (beim Abgang
   ueber .an, beim Platzen Bild fuer Bild). Ohne das riss sie mitten in
   ihrer Blende weg. */
body.lg-geht:not(.locked) .lg-korona {
  display: block;
}
.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%
  );
}