/* ══ TEST: STARTBILD VOR DER ANMELDUNG ════════════════════════════
   Die Animation liegt ueber dem ganzen Fenster. Zu sehen sind nur der
   Schriftzug und der Anmeldekreis — keine Menues, kein Generieren-Knopf,
   keine Guthabenzahl. Nach der Anmeldung blendet sie nichtlinear ab:
   erst zoegernd, dann schnell, und zieht dabei leicht auf.
   Zurueckdrehen: diesen Block und den Aufruf in _doLogin() entfernen. */
#startup-anim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 7;
  pointer-events: none;
  opacity: 1;
  transition:
    opacity 1.5s cubic-bezier(0.55, 0, 0.85, 0.35),
    transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#startup-anim.weg {
  opacity: 0;
  transform: scale(1.045);
}
body:not(.locked) #startup-anim {
  pointer-events: none;
}
/* Der Schriftzug liegt ueber allem — auch ueber der Korona, die auf dem
   Startbild ueber die Bildflaeche hinausreichen darf. */
.hdr {
  position: relative;
  z-index: 70;
}
/* Solange nicht angemeldet ist, wird die Bildflaeche nicht beschnitten:
   sonst endet der Schein der Korona an ihrer Oberkante und es steht eine
   waagerechte Kante quer durch die Hintergrundgrafik.                  */
/* Die mittlere Reihe .body schneidet ebenfalls ab — sie ist es, die die
   Farbkreise der Explosion an einer waagerechten Kante abgeschnitten hat.
   Sie gehoert also in dieselbe Liste. Weiter aussen sitzt nur noch das
   Fenster selbst, und dort SOLL Schluss sein.                        */
body.locked .canvas,
body.locked .img-area,
body.locked .body,
body.lg-regmodus .canvas,
body.lg-regmodus .img-area,
body.lg-regmodus .body,
body.lg-abo .canvas,
body.lg-abo .img-area,
body.lg-abo .body {
  overflow: visible;
}
/* alles Uebrige ruht, solange nicht angemeldet ist */
body.locked footer,
body.locked .edge-hint,
body.locked #credit-display,
body.locked #auth-wrap,
body.locked .panel,
body.locked aside.ctx,
body.locked #ctx-line,
body.locked #panel-line {
  display: none !important;
}
/* ── AUFTRITT DES HAUPTFENSTERS ───────────────────────────────────
   Alles auf einmal wirkt wie ein Schalter. Die Teile kommen deshalb
   leicht versetzt — nur so viel, dass es lebt, nicht so viel, dass man
   es als Reihenfolge liest. Der Schriftzug bildet den Schluss.
   Gearbeitet wird mit einer Animation, nicht mit einem Uebergang: die
   Teile springen von display:none auf sichtbar, und nur die Animation
   kann sie mit ihrer Rueckwaertsfuellung (both) waehrend der Verzoegerung
   noch zurueckhalten.                                                */
@keyframes lg-auftritt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.eingang footer {
  animation: lg-auftritt 0.45s ease both 0.06s;
}
/* Kommt der Eingang aus der Tarifwahl, steht die Fussleiste schon auf dem
   Schirm — mitsamt dem Knopf, der gerade in Ruhe grau geworden ist. Der
   gestaffelte Auftritt setzte sie noch einmal auf null und blendete sie
   in 0,45 s wieder auf; genau das war das Aufblinken. Alles Uebrige ist
   wirklich neu und tritt weiter gestaffelt auf.                      */
body.eingang.fuss-steht footer {
  animation: none;
}
body.eingang .panel,
body.eingang #panel-line {
  animation: lg-auftritt 0.45s ease both 0.12s;
}
body.eingang aside.ctx,
body.eingang #ctx-line {
  animation: lg-auftritt 0.45s ease both 0.17s;
}
body.eingang #credit-display {
  animation: lg-auftritt 0.45s ease both 0.21s;
}
body.eingang #auth-wrap {
  animation: lg-auftritt 0.45s ease both 0.25s;
}
body.eingang .edge-hint {
  animation: lg-auftritt 0.45s ease both 0.29s;
}
/* Fuer die Registrierung kommt die Fussleiste zurueck — mit dem gewohnten
   Generieren-Knopf, der hier "registrieren" heisst: grau, solange Angaben
   fehlen, schwarz sobald alles da ist. Diese Regeln stehen absichtlich
   NACH der versteckenden und sind enger gefasst: bei gleicher Spezifitaet
   gaebe sonst die spaetere Regel den Ausschlag — und das war die, die die
   Leiste verbirgt.                                                     */
/* Die Fussleiste liegt ueber der Korona — sonst deckt deren Schein den
   Knopf zu. Sie bleibt dabei an ihrem Platz im Aufbau, nur die Ebene
   ist hoeher.                                                        */
body.locked.lg-regmodus footer,
body.lg-regmodus footer,
body.locked.lg-abo footer,
body.lg-abo footer {
  display: grid !important;
  position: relative;
  z-index: 30;
}
body.locked.lg-regmodus footer .gen-wrap,
body.lg-regmodus footer .gen-wrap,
body.locked.lg-abo footer .gen-wrap,
body.lg-abo footer .gen-wrap {
  display: flex !important;
  visibility: visible !important;
}
body.locked.lg-regmodus footer .f-status,
body.locked.lg-regmodus footer .f-right,
body.locked.lg-abo footer .f-status,
body.locked.lg-abo footer .f-right {
  visibility: hidden;
}
/* Er sitzt an genau derselben Stelle wie der spaetere Generieren-Knopf —
   es ist derselbe Knopf, nur mit anderer Aufschrift. Kein Versatz beim
   Uebergang.                                                          */
body.locked.lg-regmodus #gen-btn,
body.lg-regmodus #gen-btn {
  display: flex !important;
  visibility: visible !important;
  /* Er erscheint erst, wenn alles Verpflichtende steht — dann schwarz. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.lg-regmodus.lg-fertig #gen-btn {
  opacity: 1;
  pointer-events: auto;
}
/* der Uebergang zum zurueckgenommenen Knopf laeuft weich mit */
body.lg-regmodus #gen-btn {
  transition:
    opacity 0.5s ease,
    background-color 0.45s ease;
}
/* In der Tarifwahl ist es derselbe Knopf an derselben Stelle — nur die
   Aufschrift wechselt. Sichtbar wird er, wenn die Kreise stehen.    */
body.locked.lg-abo #gen-btn,
body.lg-abo #gen-btn {
  display: flex !important;
  visibility: visible !important;
  transition:
    opacity 0.5s ease,
    background-color 0.45s ease;
}
body.lg-abo .gen-btn {
  cursor: pointer;
}

/* Grosse Platzhaltergrafik in der Bildmitte — in der Groesse der
   frueheren Startgrafik (5:4, mittig in der Bildflaeche). Klick oder
   Drop laedt das Referenzbild.                                      */
#login-ph {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  background: var(--white);
  overflow: hidden;
}
#login-ph img,
#login-ph video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#login-ph:hover > .ph-x,
#oz.drag-over #login-ph > .ph-x {
  stroke: var(--ph-dunkel);
}

/* Die Videoquelle des Startbilds: winzig und unsichtbar, aber im Baum,
   damit der Browser weiter Bilder liefert */
#startup-quelle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}