/* ══ REGISTRIERUNG IM AUFGEWEITETEN KREIS ══════════════════════
   Der Kreis waechst auf und traegt die Rechnungsdaten. Der Inhalt
   bleibt im einbeschriebenen Rechteck, damit nichts an den Rand stoesst. */
#lg-reg {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 16%;
  right: 16%;
  z-index: 3;
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.lg-regoffen #lg-reg {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
/* Erst wenn die abweichende Rechnungsadresse dazukommt, wird es laenger
   als der Kreis — vorher gibt es nichts zu scrollen.                  */
body.lg-rechnung #lg-reg {
  overflow-y: auto;
  overflow-x: hidden;
}
#lg-reg::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#lg-reg-inner {
  width: 100%;
  margin: auto 0;
  text-align: center;
  color: var(--white);
}
/* Ueber und unter dem Einleitungstext derselbe Abstand — die Summe
   bleibt gleich, damit der Satz weiterhin ohne Scrollen hineinpasst. */
.lg-title {
  font-family: var(--serif);
  font-size: 34px;
  font-style: italic;
  line-height: 1.1;
  margin: 0 0 22px;
}
.lg-intro {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 100%;
  margin: 0 auto 22px;
}
.lg-mail {
  margin-bottom: 18px;
  text-align: left;
}
.lg-mail .lg-val {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 6px;
  display: block;
}
.lg-lbl {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: 5px;
}
.lg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 24px;
}
.lg-f {
  display: block;
  text-align: left;
}
.lg-f.wide {
  grid-column: 1 / -1;
}
.lg-f input,
.lg-f select {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 3px 0 6px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.lg-f input:focus,
.lg-f select:focus {
  border-bottom-color: var(--white);
}
.lg-f select {
  background: var(--black);
  color: var(--white);
}
.lg-f select option {
  background: var(--black);
  color: var(--white);
}
.lg-check {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
}
.lg-check + .lg-check {
  margin-top: 12px;
}
.lg-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lg-box2 {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lg-check:hover .lg-box2 {
  border-color: var(--white);
}
.lg-check input:checked ~ .lg-box2 {
  border-color: var(--white);
  background: var(--white);
}
/* kein Haken — die gefuellte Flaeche sagt es schon */
/* ohne Unterstreichung — der Wechsel auf volles Weiss genuegt als Hinweis */
/* statt Unterstreichung: halbfett — so sind die Verweise im Satz zu erkennen */
.lg-check a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.lg-check a:hover {
  color: var(--white);
}
.lg-haken {
  padding-top: 20px;
} /* so passt der Satz ohne Rechnungsadresse ohne Scrollen hinein */
#lg-bill {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}
body.lg-rechnung #lg-bill {
  max-height: 420px;
  opacity: 1;
}
.lg-sub {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-top: 20px;
  display: block;
  text-align: left;
}
.lg-other {
  display: block;
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 2px;
  transition: color 0.15s;
}
.lg-other:hover {
  color: var(--white);
}
/* Steht die Rechnungsadresse offen, liegen ueber "Andere E-Mail-Adresse"
   Formularzeilen — dann derselbe Abstand wie zwischen den Zeilen und der
   AGB-Zeile (gemessen 33 px). Ohne sie folgt sie dem 12er-Takt der drei
   Zeilen.                                                             */
body.lg-rechnung .lg-other {
  margin-top: 33px;
}
/* Schalter unten links: nur zum Vorfuehren — sagt der Anmeldung, ob die
   eingegebene Adresse schon ein Konto hat. Faellt weg, sobald echt angeschlossen. */

/* im Registriermodus traegt der Generieren-Knopf den Abschluss */
body.lg-regmodus .gen-btn {
  cursor: pointer;
}
/* Auf dem Startbild ruht die Fussleiste. Fuer die Registrierung kommt
   allein der Knopf zurueck — und auch der erst, wenn alle noetigen
   Angaben da sind. Er sitzt unten in der Mitte, ohne transform, damit
   das Zittern beim Absenden nicht mit der Ausmittelung kollidiert.  */

/* Farbebenen der Mini-Optik */
.lg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lg-l {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform, filter, opacity;
}
.lg-off {
  opacity: 0 !important;
  visibility: hidden;
}
/* E-Mail-Eingabe im Footer */
/* Im gesperrten Zustand: Eingabe unsichtbar, Button zeigt den Inhalt */

.lg-bill-grid {
  padding-top: 16px;
}

/* Rückmeldung des Servers unter dem Formular */
#lg-reg-msg {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
#lg-reg-msg:empty {
  display: none;
}

/* ── Kleine Fenster: der Abschlussknopf liegt über dem Kreis ───────
   Überdeckt der aufgeweitete Kreis die Fußleiste (auth/compact-circle.js
   setzt dann body.circle-compact), hebt sich die Fußleiste über den
   Kreis. Der schwarze Knopf bekommt einen weißen Rahmen, damit er auf
   dem Schwarz als Knopf lesbar bleibt.
   Eine Klasse mehr als die Regeln in layout/startup.css
   (body.locked.lg-regmodus footer), die später geladen werden. */
body.locked.lg-regmodus.circle-compact footer,
body.lg-regmodus.circle-compact footer {
  z-index: 61; /* über #lg-wrap (60), unter dem Schriftzug (70) */
  /* Der leere Fußkasten darf Klicks und Scrollen im Kreis nicht abfangen —
     der Knopf selbst schaltet sich wieder frei, sobald alles da ist. */
  pointer-events: none;
}
body.circle-compact #gen-btn {
  border: 1px solid var(--white);
}
body.circle-compact #lg-reg {
  overflow-y: auto;
  overflow-x: hidden;
}
body.circle-compact .lg-title {
  font-size: clamp(22px, 4.5vh, 34px);
}