/* ══ TEST: STARTBILD VOR DER ANMELDUNG ════════════════════════════
   Die Animation liegt ueber dem ganzen Fenster. Zu sehen sind nur der
   Schriftzug und der Anmeldekreis — keine Menues, keine Guthabenzahl.
   Nach der Anmeldung geht sie in der Kreuzblende ins Hauptfenster
   (V3, 25.09.2026): in 0,65 s, im selben Zug kommt die App
   (body.eingang) — zieht dabei leicht auf. Was unter ihr liegt — das
   Hauptbild, der Platzhalter —, steht dann schon ganz da (body.bild-da).
   Bis dahin ging es in 1,5 s, erst zoegernd, dann schnell, und die
   Oberflaeche wartete, bis es fast weg war: zwischen Startbild und App
   lag ein weisser Augenblick (ui/startup-image.js STARTUP_FADE). */
#startup-anim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 7;
  pointer-events: none;
  opacity: 1;
  transition:
    opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.5s 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. Dasselbe, solange der Kreis
   nach der Freischaltung noch geht (body.lg-geht): die Explosion der
   Registrierung reicht weit ueber die Bildflaeche. */
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,
body.lg-geht .canvas,
body.lg-geht .img-area,
body.lg-geht .body {
  overflow: visible;
}
/* Die beiden Bildleisten warten ausserhalb der Flaeche, die sonst ihr Rand
   verbirgt — so lange bleiben sie verborgen. */
body.lg-geht #oz > .history {
  visibility: hidden;
}
/* 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 ───────────────────────────────────
   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) noch zurueckhalten.
   Seit V3 (25.09.2026) OHNE Staffel: die Teile kommen nicht mehr auf
   weisser Seite, nachdem das Startbild weg ist, sondern in dem Zug, in
   dem es geht — mit seiner Dauer und seiner Kurve (#startup-anim). Was
   ueber dem Startbild liegt, blendet so genau auf, wie das Startbild
   abblendet; zusammen ist das EINE Kreuzblende. */
@keyframes lg-auftritt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.eingang footer,
body.eingang .panel,
body.eingang #panel-line,
body.eingang aside.ctx,
body.eingang #ctx-line,
body.eingang #credit-display,
body.eingang #auth-wrap,
body.eingang .edge-hint {
  animation: lg-auftritt 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* Kommt der Eingang aus der Anmeldung, steht die Fussleiste schon auf dem
   Schirm — mitsamt dem Knopf. Ein Auftritt setzte sie noch einmal auf null
   und blendete sie wieder auf; genau das war das Aufblinken. */
body.eingang.fuss-steht footer {
  animation: none;
}
/* ── ERST DAS RAUSCHEN, DANN DIE OBERFLAECHE ─────────────────
   Die App wird freigeschaltet und aufgebaut, solange der Anmeldekreis
   noch geht — unsichtbar unter dem vollen Startbild (body.rauscht).
   Unsichtbar heisst hier wirklich nur unsichtbar: die Teile stehen schon
   im Aufbau, nur ihre Deckkraft ist null. So kann alles, was nach der
   Anmeldung misst — Bildflaeche, Leisten, Platzhalter —, rechnen wie
   immer. Der Vorhang faellt, wenn die Grafik zu gehen BEGINNT
   (core/session.js openMainWindow): eine Kreuzblende. */
body.rauscht footer,
body.rauscht .panel,
body.rauscht #panel-line,
body.rauscht aside.ctx,
body.rauscht #ctx-line,
body.rauscht #credit-display,
body.rauscht #auth-wrap,
body.rauscht .edge-hint,
body.rauscht #oz > *:not(#lg-wrap):not(#lg-korona):not(#out-img):not(#login-ph),
body.rauscht:not(.bild-da) #oz > #out-img,
body.rauscht:not(.bild-da) #oz > #login-ph {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Das Hauptbild und der Platzhalter liegen UNTER dem Startbild. Sobald das
   Bild entschluesselt ist (mainImageReady), stehen sie dort schon ganz da
   (body.bild-da): so zeichnet der Browser das Bild, solange noch nichts
   blendet — nicht erst im ersten Bild der Blende, wo das gemessen 0,16 s
   Stillstand kostete. Anfassen laesst es sich erst mit der App. */
body.rauscht.bild-da #oz > #out-img,
body.rauscht.bild-da #oz > #login-ph {
  pointer-events: none !important;
}
/* Kommt der Eingang aus der Anmeldung, steht die Fussleiste schon auf dem
   Schirm — sie darf nicht noch einmal verschwinden. */
body.rauscht.fuss-steht footer {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* In Dauer und Kurve der Kreuzblende — aber nur fuer das, was UEBER dem
   Startbild liegt (Werkzeuge, Nummer, Sonnenstand). Hauptbild und
   Platzhalter liegen DARUNTER: blendeten auch sie von null auf, liefen
   zwei Blenden uebereinander, und in der Mitte schiene die weisse Seite
   durch. */
body.entrauscht #oz > *:not(#lg-wrap):not(#lg-korona):not(#out-img):not(#login-ph) {
  transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Fuer die Registrierung kommt die Fussleiste zurueck — mit dem gewohnten
   Generieren-Knopf, der hier "registrieren" heisst. 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. Er steht da, sobald
   der Satz der Registrierung steht — GRAU und gesperrt (.gen-btn:disabled,
   genau wie „anmelden" ohne gueltige Adresse), bis alle Zeilen mit Stern
   gefuellt sind und der AGB-Haken gesetzt ist; dann schwarz. Deckung und
   Sperre fuehrt das Skript (auth/registration.js). Weich ist nur das Ein-
   und Ausblenden des ganzen Knopfes; zwischen gesperrt und frei wechselt
   er in EINEM Bild. */
body.locked.lg-regmodus #gen-btn,
body.lg-regmodus #gen-btn {
  display: flex !important;
  visibility: visible !important;
  transition: opacity 0.5s ease;
}
body.lg-regmodus #gen-btn {
  transition: opacity 0.5s 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;
}
body.lg-abo .gen-btn {
  cursor: pointer;
}
/* ── DIE ERSTE SEITE: DER KNOPF „ANMELDEN" ────────────────────────
   Schon vor der Anmeldung steht unten derselbe Knopf an derselben Stelle
   — „anmelden" (Enter im Mailfeld tut dasselbe), zu den Abos geblaettert
   „erst anmelden", im Ziffernschritt „bestaetigen". Die Fussleiste steht
   dafuer von Anfang an: kaeme sie erst mit ihm, rueckte der Anmeldekreis
   um ihre halbe Hoehe nach oben. Deckung und Aufschrift fuehrt das Skript
   (auth/first-page.js). */
body.locked.lg-start footer {
  display: grid !important;
  position: relative;
  z-index: 30;
}
body.locked.lg-start footer .gen-wrap {
  display: flex !important;
  visibility: visible !important;
}
body.locked.lg-start footer .f-status,
body.locked.lg-start footer .f-right {
  visibility: hidden;
}
body.locked.lg-start #gen-btn {
  display: flex !important;
  visibility: visible !important;
  transition: opacity 0.5s ease;
}
/* Beim Blaettern stehen Anmeldekreis und Abos zugleich da: die Tarifwahl
   (lg-abo) darf den Kreis und seine Korona hier nicht wegnehmen — ihre
   Lage und Deckung fuehrt das Skript. */
body.lg-abo.lg-vorab #lg-auth {
  opacity: 1;
  pointer-events: auto;
}
body.lg-abo.lg-vorab .lg-korona {
  display: block !important;
}

/* 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;
}