/* ── DER ZAHLUNGSKREIS ───────────────────────────────────────────────
   Aus dem Prototyp V3 übernommen (Zeilen 1452–1600). In der Tarifwahl
   fuehrt „auswaehlen“ bei einem Tarif, der Geld kostet, in einen Kreis,
   der eine Kopie des Registrierkreises ist (#lg-auth, #lg-reg, die
   Korona) - mit eigenen Kennungen, damit beide nie aneinandergeraten.
   Seit Oktober 2026 steht er da wie eine Kasse: oben, was man kauft
   (Name, Preis und Steuer wie auf dem Tarifkreis, die Credits und der
   Umfang), darunter „Rechnung an“ aus dem Profil - die Zeilen der
   Rechnungsdaten klappen erst mit „ändern“ auf -, die beiden
   Zustimmungen und unten die Knoepfe von PayPal an der Stelle von V3s
   zwei Bezahlarten, im selben Rahmen.
   Die Zeilen, Haken und Beschriftungen tragen dieselben Klassen wie in
   der Registrierung (.lg-f, .lg-check, .lg-box2, .lg-lbl, .lg-mail),
   Name, Preis, Steuer, Credits und Fusszeile dieselben wie auf dem
   Tarifkreis (.ab-name, .ab-preis, .ab-steuer, .ab-credits, .ab-fuss) -
   sie SIND dieselben und bleiben es, wenn dort etwas nachgezogen wird.
   Kopiert ist, was an den Kennungen haengt: Scheibe, Korona, der Kasten
   fuer den Satz, das Aufklappen.
   Er liegt in #lg-wrap neben der Bahn. Aus der App heraus blendet die
   Tarifwahl dort alles ausser der Bahn aus (billing/plans.css) - die
   Regel fuer #zl-wrap ist darum staerker gefasst. Im Rueckfall nach der
   Anmeldung (ohne Free-Plan) steht er ebenso da. */
#zl-wrap {
  position: absolute;
  inset: 0;
  z-index: 26;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
body.abo-app.zl-an #lg-wrap > #zl-wrap {
  display: flex;
  visibility: visible;
  pointer-events: none;
}
body.zl-an #lg-wrap > #zl-wrap {
  display: flex;
  visibility: visible;
  pointer-events: none;
}
/* Unsichtbar, bis er den Tarifkreis uebernimmt (payment-circle.js widen:
   .da). Rund auch fuer den Zeiger: border-radius schneidet die
   Trefferflaeche. */
#zl-auth {
  position: relative;
  flex: none;
  width: 258px;
  height: 258px;
  border-radius: 50%;
  visibility: hidden;
  pointer-events: none;
}
#zl-wrap.da #zl-auth {
  visibility: visible;
  pointer-events: auto;
}
#zl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
#zl-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--black);
  transition: background-color 0.3s ease;
}
#zl-disc.err #zl-bg {
  background: var(--red);
  transition: none;
}
#zl-disc.checking #zl-bg {
  animation: lg-pulse 1.15s ease-in-out infinite;
}
#zl-disc.err {
  animation: lg-shake 0.32s ease-in-out;
}
/* Die Korona: dieselben Ebenen wie .lg-korona, 2,04-fache Scheibe, und
   wie dort eine eigene Ebene am Fenster UNTER der Fussleiste (z 20 gegen
   30) - in #lg-wrap (z 60) laege ihr Schein ueber dem Knopf. Lage und
   Groesse fuehrt das Skript dem Kreis nach (payment-optics.js
   placeCorona). Sie haengt in #oz neben #lg-korona; aus der App heraus
   blendet die Tarifwahl dort alles aus (body.abo-app #oz > *), darum die
   staerkere Regel. */
#zl-korona {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  display: none;
}
body.abo-app.zl-an #oz > #zl-korona.da {
  display: block;
  visibility: visible;
}
body.zl-an #oz > #zl-korona.da {
  display: block;
  visibility: visible;
}
#zl-korona i {
  position: absolute;
  inset: 0;
  display: block;
}
#zl-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%
  );
}
#zl-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%
  );
}
#zl-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%
  );
}
/* Der Satz: dieselbe sichere Zone wie #lg-reg (seitlich 21,5 %, oben und
   unten 11,5 % mit 3,5 % Polster, ueber dem Polster die Ausblendung).
   Rollen darf er immer (die aufgeklappten Rechnungsdaten), die Leiste
   bleibt unsichtbar. Er steht kleiner als der Satz der Registrierung
   (--zl-s): die Uebersicht bis zu den Knoepfen von PayPal passt ohne
   Rollen zwischen die Polster (payment-circle.js fitSet). Unter 820
   Punkten Kreisgroesse wird er ebenso mitskaliert. */
#zl-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-x: hidden;
  overflow-y: auto;
  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.zl-offen #zl-reg {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
/* Waehrend der Server die Zahlung bestaetigt, atmet der Kreis
   (lg-pulse), die Schrift wird blass. */
body.zl-offen #zl-disc.checking #zl-reg {
  opacity: 0.4;
  pointer-events: none;
  transition-delay: 0s;
}
/* Die Auswahl des Landes hat einen schwarzen Grund (fuer ihre Liste) -
   auf dem atmenden Grau stuende sie als Kasten da. */
#zl-disc.checking .lg-f select {
  background-color: transparent;
}
#zl-reg::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#zl-reg-inner {
  width: 100%;
  margin: auto 0;
  text-align: center;
  color: var(--white);
  zoom: var(--zl-s, 1);
}
/* ── WAS MAN KAUFT ──
   Name, Preis und Steuer stehen wie auf dem Tarifkreis, aus dem der
   Kreis gewachsen ist (plans.css), darunter die Credits und der Umfang:
   was der Tarif freischaltet, eine Zeile je Leistung mit einem Haken
   (plan-format.js planScope). Ab vier Zeilen in zwei Spalten, die von
   oben nach unten gelesen werden (die Zeilen je Spalte setzt
   payment-circle.js als --zl-zeilen). Die Fusszeile (automatische
   Erneuerung, Kuendigung) gehoert an der Kasse zum Kauf - sie steht in
   einer Zeile und heller als auf dem Kreis. */
.zl-kauf .ab-credits {
  margin-top: 16px;
}
.zl-umfang {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  column-gap: 30px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--auf-schwarz-80);
  text-align: left;
}
.zl-umfang:empty {
  display: none;
}
.zl-umfang.zwei {
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: repeat(var(--zl-zeilen, 4), auto);
  grid-auto-flow: column;
}
/* Der Haken ist der Pfad aus den Kaestchen der Registrierung (.lg-box2),
   hier weiss und ohne Kasten. */
.zl-umfang li {
  position: relative;
  padding-left: 19px;
}
.zl-umfang li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 12px;
  height: 12px;
  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='%23fff' stroke-width='1.4' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='4'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  opacity: 0.55;
}
.zl-kauf .ab-fuss {
  max-width: none;
  margin-top: 12px;
  color: var(--auf-schwarz-45);
}
.zl-kauf .ab-fuss:empty,
.zl-wechsel:empty {
  display: none;
}
/* Wer schon ein Abo hat und ein anderes waehlt: das bisherige endet mit
   dem Wechsel (payment-circle.js switchText). */
.zl-wechsel {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--auf-schwarz-80);
}

/* ── RECHNUNG AN ──
   Die Uebersicht wie die Adresse der Registrierung (.lg-mail): die
   Beschriftung, darunter die Zeilen mit einem Strich - so steht sie auch
   auf der Rechnung (payment-math.js invoiceLines). „ändern“ steht rechts
   in der Beschriftung, halbfett und heller wie die Verweise im Satz, und
   klappt an der Stelle der Uebersicht die Zeilen der Rechnungsdaten auf;
   dann heisst es „Übernehmen“. Fehlt etwas, stehen sie gleich offen. */
.zl-an {
  margin-top: 28px;
  text-align: left;
}
.zl-an-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.zl-aendern {
  margin: 0 0 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-label-groesse);
  font-weight: 600;
  letter-spacing: var(--t-label-sperrung);
  line-height: var(--t-label-zeilenhoehe);
  text-transform: uppercase;
  color: var(--auf-schwarz-80);
  transition: color 0.15s;
}
.zl-aendern:hover {
  color: var(--white);
}
.zl-aendern:disabled {
  cursor: default;
  color: var(--auf-schwarz-45);
}
.zl-adresse {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 3px 0 6px;
}
.zl-adresse span {
  display: block;
}
.zl-adresse .zl-mailzeile {
  margin-top: 2px;
  font-size: 13px;
  color: var(--auf-schwarz-55);
}
body.zl-bearbeiten .zl-adresse {
  display: none;
}
/* Die Zeilen klappen auf wie #lg-bill, die E-Mail-Adresse steht darin
   wie in der Registrierung - geaendert wird sie im Profil. */
#zl-felder {
  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.zl-bearbeiten #zl-felder {
  max-height: 1200px;
  opacity: 1;
}
#zl-felder .lg-mail {
  margin: 10px 0 18px;
}
/* Die abweichende Rechnungsadresse klappt auf wie #lg-bill. */
#zl-rechnung {
  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.zl-rechnung #zl-rechnung {
  max-height: 420px;
  opacity: 1;
}
/* ── DIE KNOEPFE VON PAYPAL ──
   An der Stelle von V3s zwei Bezahlarten (.zl-arten, .zl-art) und in
   ihrem Satz: nebeneinander, frei als eigene Gruppe, 44 Punkte Luft nach
   oben (die Punkte des Satzes, sie schrumpfen mit ihm), jeder im feinen
   Rahmen im Mass der Unterstriche, der unter dem Zeiger weiss wird.
   PayPal zeichnet die Knoepfe selbst - schwarz, eckig, Logo und Schrift
   weiss (paypal-buttons.js); Farbe und Schrift im Knopf gehoeren PayPal.
   Der Rahmen liegt innen ueber den Knoepfen, sie fuellen ihn ganz.
   Bis alles steht, stehen sie zurueckgenommen da (paypal-buttons.js
   sync); waehrend das SDK laedt, halten zwei leere Rahmen ihren Platz.
   Ein dritter (SEPA beim Einmalkauf) bricht in die naechste Zeile um.
   Klappt PayPal unter dem Kartenknopf ein Formular auf, stehen alle
   untereinander in der ganzen Breite (.offen).
   FALLE zoom: Der Satz steht unter zoom (--zl-s), Firefox und Safari
   verkleinern darunter zwar den Rahmen eines iframes, nicht aber seinen
   Inhalt - PayPals Logo stand zu gross im Knopf, „Debit- oder
   Kreditkarte“ war abgeschnitten oder fehlte. Die Reihe (.zl-arten-satz)
   nimmt den zoom darum mit dem Kehrwert zurueck (--zl-gegen,
   payment-circle.js setSetScale) und wird per transform verkleinert -
   das tun alle drei gleich. Sie steht in den Masszahlen des Satzes da
   (100 % / --zl-s breit), haelt aber keinen Platz: die Hoehe von
   .zl-arten fuehrt payment-circle.js nach. Die Zelle ist ein Flexkasten:
   PayPals Kasten darin ist inline-block und stand sonst auf der
   Grundlinie, unter dem Knopf blieben gut zwei Punkte frei. */
.zl-arten {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 44px auto 0;
  transition: opacity 0.2s;
}
.zl-arten.is-disabled {
  opacity: 0.35;
}
.zl-arten-satz {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: calc(100% / var(--zl-s, 1));
  zoom: var(--zl-gegen, 1);
  transform: scale(var(--zl-s, 1));
  transform-origin: 0 0;
}
.zl-art,
.zl-arten.is-loading .zl-arten-satz::before,
.zl-arten.is-loading .zl-arten-satz::after {
  display: flex;
  flex: 0 1 236px;
  min-width: 0;
  min-height: 40px;
}
.zl-arten.is-loading .zl-arten-satz::before,
.zl-arten.is-loading .zl-arten-satz::after {
  content: '';
  border: 1px solid #676969;
}
/* Der Rahmen liegt innen ueber dem Knopf, wie V3s border: an der Kante
   des iframes rundet jeder Browser anders - als Schatten aussen lag mal
   ein Saum zwischen Knopf und Rahmen, mal deckte der Knopf den Rahmen,
   und links stand er so dicht am Rand des rollenden Satzes, dass Safari
   ihn abschnitt. Oben auf deckt er die Kante, und er bleibt in der
   Zelle. Er ist DECKEND: Safari liess unter der unteren und rechten
   Kante eine helle Pixelreihe des iframes stehen, und durch den
   halbdurchsichtigen Rahmen (Weiss zu 28 %) stand sie weiss da. Sein
   Grau ist dieses Weiss ueber PayPals Schwarz (#2c2e2f). Was der Knopf
   ueber die Zelle hinaus zeichnet, schneidet sie ab. PayPals iframe hat
   z-index 100; die Zelle haelt die Ebenen bei sich (isolation). */
.zl-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.zl-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 101;
  border: 1px solid #676969;
  pointer-events: none;
  transition: border-color 0.15s ease;
}
.zl-art:hover::after {
  border-color: var(--white);
}
/* Abgebaute Knoepfe warten verborgen, bis PayPal sie geraeumt hat. */
.zl-art[hidden] {
  display: none;
}
html.tastatur .zl-art:focus-within {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}
.zl-arten.offen .zl-arten-satz {
  flex-direction: column;
  align-items: stretch;
}
.zl-arten.offen .zl-art {
  flex: none;
}
/* Rueckmeldung von PayPal und vom Server unter den Knoepfen. */
#zl-msg {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
#zl-msg:empty {
  display: none;
}
/* Der Umschalter Karussell/Tafel gehoert nicht zur Zahlung. */
body.zl-an #ab-schalter {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Die AGB und die Datenschutzerklaerung aus dem Haken: aus der App
   heraus blendet die Tarifwahl alles in #oz aus - auch die Inhaltsseite,
   die der Verweis oeffnet. Sie liegt jetzt ueber dem Kreis (#lg-wrap
   z 60); ein Klick neben den Text oder Escape fuehrt zurueck. Der Kreis
   selbst tritt solange ab: mit 820 Punkten ragt er ueber den Bildbereich
   hinaus, und seine Kappen stuenden schwarz ueber und unter dem Text.
   Die grosse Historie ist nicht gemeint. */
body.abo-app.zl-an.cv-open:not(.hist-voll) #oz > #content-view {
  visibility: visible;
  pointer-events: auto;
  z-index: 61;
}
body.abo-app.zl-an.cv-open:not(.hist-voll) #lg-wrap > #zl-wrap,
body.abo-app.zl-an.cv-open:not(.hist-voll) #oz > #zl-korona {
  opacity: 0;
}
body.abo-app.zl-an.cv-open:not(.hist-voll) #zl-wrap.da #zl-auth {
  pointer-events: none;
}
/* Dasselbe im Rueckfall nach der Anmeldung (ohne Free-Plan), wo die
   Tarifwahl nicht aus der App kommt. */
body.zl-an.cv-open:not(.hist-voll) #oz > #content-view {
  visibility: visible;
  pointer-events: auto;
  z-index: 61;
}
body.zl-an.cv-open:not(.hist-voll) #lg-wrap > #zl-wrap,
body.zl-an.cv-open:not(.hist-voll) #oz > #zl-korona {
  opacity: 0;
}
body.zl-an.cv-open:not(.hist-voll) #zl-wrap.da #zl-auth {
  pointer-events: none;
}