/* ══ REGISTRIERUNG IM AUFGEWEITETEN KREIS ══════════════════════
   Der Kreis waechst auf und traegt die Rechnungsdaten. Der Inhalt
   bleibt in einer SICHEREN ZONE, deutlich vom Rand abgesetzt (V3
   25.09.2026). Bis dahin war das das einbeschriebene Rechteck - seine
   Ecken lagen AUF der Rundung, und rollte die abweichende Adresse eine
   Feldzeile in die Ecke, stiess ihr Unterstrich an den Rand. Jetzt, alle
   Masse in Teilen des Durchmessers:
   - schmaler: 57 % breit statt 68 % (seitlich 21,5 %);
   - oben und unten ein Polster von 3,5 % (ein Innenabstand in Prozent
     bezieht sich auf die Breite des Kreises, waechst also mit ihm), und
     ueber genau diesem Polster blendet eine Maske den Inhalt aus: eine
     gerollte Zeile verschwindet, bevor sie die Rundung erreicht. 4,55 %
     der Hoehe des Rollbereichs (77 % des Durchmessers) sind die 3,5 %
     des Polsters;
   - voll gedeckt ist nur, was zwischen den Polstern liegt. An jeder Ecke
     dieser Zone bleiben knapp 10 % des Radius Luft zum Rand.
   Springt die Schreibmarke per Tab in ein Feld im Polster, rollt der
   Browser es heraus (scroll-padding). Damit der Satz ohne Rollen
   hineinpasst, wird er eingepasst (circle-optics.js fitRegistrationSet). */
#lg-reg {
  position: absolute;
  top: 11.5%;
  bottom: 11.5%;
  left: 21.5%;
  right: 21.5%;
  z-index: 3;
  padding: 3.5% 0;
  scroll-padding: 5% 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 4.55%,
    #000 95.45%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, transparent 0, #000 4.55%, #000 95.45%, transparent 100%);
}
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);
  zoom: var(--lg-s, 1);
}
/* 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: var(--auf-schwarz-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: var(--t-label-groesse);
  font-weight: var(--t-label-gewicht);
  letter-spacing: var(--t-label-sperrung);
  line-height: var(--t-label-zeilenhoehe);
  text-transform: uppercase;
  color: var(--auf-schwarz-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);
}
/* Der Haken (V3 24.09.2026): ein weiss gefuelltes Quadrat las sich nicht
   als bestaetigt. Jetzt steht im gefuellten Kasten ein GEZEICHNETER
   schwarzer Haken - kein Schriftzeichen, sondern ein Pfad (kurzer
   Schenkel nach unten, langer nach oben rechts, 2,1 Einheiten stark,
   spitz gestossen). Er liegt als Bild auf einem ::after ueber dem ganzen
   Kasten (Rand inbegriffen) und schreibt sich beim Setzen von links nach
   rechts hin, wie mit dem Stift gezogen (clip-path); beim Loesen geht er
   schneller, als er kam. Schwarz steht fest im Bild (%23000): der Haken
   gehoert auf den weissen Kasten, gleich was --black gerade ist. */
.lg-box2::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2.9 6.5 5.4 9 10.2 3.2' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='4'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 0.1s ease,
    -webkit-clip-path 0.1s ease;
}
.lg-check input:checked ~ .lg-box2::after {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.26s cubic-bezier(0.45, 0, 0.25, 1) 0.04s,
    -webkit-clip-path 0.26s cubic-bezier(0.45, 0, 0.25, 1) 0.04s;
}
/* Wer mit der Tastatur kommt (Tab, dann Leertaste), muss sehen, welcher
   Kasten dran ist - das Kaestchen selbst ist unsichtbar. */
html.tastatur .lg-check input:focus ~ .lg-box2 {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}
/* 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: var(--auf-schwarz-80);
  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: var(--t-label-groesse);
  font-weight: var(--t-label-gewicht);
  letter-spacing: var(--t-label-sperrung);
  line-height: var(--t-label-zeilenhoehe);
  text-transform: uppercase;
  color: var(--auf-schwarz-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: var(--auf-schwarz-80);
  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;
}
/* Die Inhaltsseite aus dem AGB-Haken liegt UEBER dem Registrierkreis (V3
   26.09.2026; vorher lag sie dahinter, der Text war groesstenteils
   verdeckt), und der Kreis tritt samt Korona ab, beide im selben Bild -
   mit 820 Punkten ragt er ueber den Bildbereich hinaus, und die Korona
   blendete sonst ueber dem Rahmen eine Sekunde lang nach. Zurueck kommt
   der Kreis sofort, die Korona weich wie bei ihrem Auftritt. Ein Klick
   neben den Text oder Escape fuehrt zurueck, die Angaben stehen noch da. */
body.lg-regmodus.cv-open:not(.hist-voll) #oz > #content-view {
  z-index: 61;
}
body.lg-regmodus.cv-open:not(.hist-voll) #oz > #lg-wrap {
  opacity: 0;
  pointer-events: none;
}
body.lg-regmodus.cv-open:not(.hist-voll) #oz > #lg-korona {
  opacity: 0;
  transition: none;
}
/* 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. Wie an den Tarifkreisen (V3 27.09.2026):
   der Auszug (.lg-l) mischt und traegt die Lage, die farbige Flaeche darin
   (i) wird weichgezeichnet - Filter und Mischen nie auf demselben Element
   (auth/separations.js). Der Hinweis fuer den Compositor nennt darum auch
   keinen Filter mehr: will-change:filter hielt jeden Auszug als eigene
   Ebene samt Filter fest, genau der Weg, auf dem WebKit das Mischen
   verliert. Die Gruppe ist ausdruecklich isoliert - die drei mischen nur
   miteinander. Die Scheibe (#lg-bg) ist waehrend jeder Fahrt, Regung und
   Explosion weg (lg-off), es gibt ausser ihnen nichts zu finden. */
.lg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}
.lg-l {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
.lg-l > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}
.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 Knopf liegt über dem Kreis ────────────────
   Überdeckt der Kreis die Fußleiste – der aufgeweitete der Registrierung
   oder auf der ersten Seite der Anmeldekreis, der mit der Adresse wächst
   (auth/compact-circle.js setzt dann body.circle-compact) –, hebt sich
   die Fußleiste über den Kreis. Sonst läge der Knopf unter der Scheibe,
   und die Flächen über ihr (#lg-form, #lg-sent: der ganze Kasten des
   Kreises) fingen seine Klicks ab. Der schwarze Knopf bekommt einen
   weißen Rahmen, damit er auf dem Schwarz als Knopf lesbar bleibt – aber
   erst, wenn er frei ist. Gesperrt ist er nur Schraffur, und die steht im
   Kreis weiß.
   Eine Klasse mehr als die Regeln in layout/startup.css
   (body.locked.lg-regmodus footer, body.locked.lg-start footer), die
   später geladen werden. */
body.locked.lg-regmodus.circle-compact footer,
body.lg-regmodus.circle-compact footer,
body.locked.lg-start.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. */
  pointer-events: none;
}
/* Der Knopf erbte das und nähme auch frei keinen Klick an – er holt sich
   die Klicks ausdrücklich zurück. Gesperrt lässt er sie durch
   (.gen-btn:disabled), und solange er zappelt oder ausgeblendet ist,
   hält ihn sein Inline-Stil fern. Der Rahmen liegt als Schatten nach
   innen, nicht als border: so ist der Knopf frei so breit wie gesperrt,
   und der Wechsel zwischen Schraffur und Schwarz bleibt EIN Bild ohne
   Versatz. */
body.circle-compact #gen-btn:not(:disabled) {
  pointer-events: auto;
  box-shadow: inset 0 0 0 1px var(--white);
}
/* Die Schraffur (components/hatch.css) ist innerhalb der Scheibe weiß und
   außerhalb schwarz, auch wenn die Kante quer durch den Knopf läuft. Ihr
   Muster wird dafür zur Maske über einem Verlauf, der an der Kante von
   Weiß in Schwarz wechselt – auf einem Punkt, so weich wie die Kante
   selbst. Mitte und Radius, von der linken oberen Ecke des Knopfes aus,
   führt auth/compact-circle.js der schwebenden Scheibe nach; ohne sie
   liegt der Kreis als Punkt neben dem Knopf, und alle Linien sind schwarz. */
body.circle-compact #gen-btn:disabled::before {
  background: radial-gradient(
    circle var(--scheibe-r, 0px) at var(--scheibe-x, -9px) var(--scheibe-y, -9px),
    var(--white) calc(100% - 0.5px),
    var(--black) calc(100% + 0.5px)
  );
  -webkit-mask: var(--knopf-schraffur, none) 0 0 / 100% 100% no-repeat;
  mask: var(--knopf-schraffur, none) 0 0 / 100% 100% no-repeat;
}
body.circle-compact #lg-reg {
  overflow-y: auto;
  overflow-x: hidden;
}
body.circle-compact .lg-title {
  font-size: clamp(22px, 4.5vh, 34px);
}