/* ══ TARIFWAHL IM KREIS ══════════════════════════════════
   Nach der Registrierung schrumpft der Kreis auf Tarifgroesse, und
   hinter seinem Ruecken kommen die Nachbarn hervor. Aufbau und Optik
   sind dieselben wie oben — schwarze Scheibe, drei Farbauszuege im
   Multiplizieren, Korona als eigene Ebene darunter.               */
#ab-bahn {
  position: absolute;
  inset: 0;
  display: none;
}
body.lg-abo #ab-bahn {
  display: block;
}
/* Der Anmeldekreis tritt ab, ohne sich zu bewegen: an seiner Stelle
   steht der gleich grosse Tarifkreis. Deshalb kein Ausblenden — die
   Uebergabe faellt nur dann nicht auf, wenn sie hart ist.         */
body.lg-abo #lg-auth {
  opacity: 0;
  pointer-events: none;
  transition: none;
}
body.lg-abo .lg-korona {
  display: none !important;
}
/* ── TARIFWAHL AUS DER APP ────────────────────────────────
   Aus dem Anmeldeschirm heraus steht die Bahn ohnehin allein da. Aus
   der laufenden App heraus tritt sie an die Stelle des Hauptbildes:
   alles im Bildbereich tritt ab, nur der Traeger des Anmeldebereichs
   bleibt — er haelt die Bahn. Sichtbarkeit statt display, damit die
   Groessen erhalten bleiben und nichts umbricht.                    */
body.abo-app #oz > * {
  visibility: hidden;
  pointer-events: none;
}
/* Der Traeger muss den Bildbereich ausfuellen: #ab-bahn steht auf
   inset:0 und nimmt seine Masse von ihm. Ohne das ist die Bahn null
   hoch und die Kreise sitzen an der Oberkante.                      */
body.abo-app #oz > #lg-wrap {
  visibility: visible;
  pointer-events: auto;
  display: block;
  opacity: 1;
  position: absolute;
  inset: 0;
}
body.abo-app #lg-wrap > *:not(#ab-bahn) {
  visibility: hidden;
  pointer-events: none;
}
body.abo-app #ab-bahn {
  visibility: visible;
  pointer-events: auto;
}
/* Die Kreditangabe ist jetzt ein Schalter. */
#credit-display {
  cursor: pointer;
}
body.locked #credit-display {
  cursor: default;
}
body.lg-abo #login-ph {
  display: none !important;
}
.ab-ebene {
  position: absolute;
  inset: 0;
}
/* ALLE Koronen unter ALLEN Scheiben: sonst legt sich der Schein des
   einen Kreises ueber das Schwarz des naechsten.                  */
.ab-koronen {
  z-index: 1;
}
.ab-kreise {
  z-index: 2;
}
.ab-kreis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ab-d);
  height: var(--ab-d);
  margin: calc(var(--ab-d) / -2) 0 0 calc(var(--ab-d) / -2);
  border-radius: 50%;
  cursor: pointer;
}
.ab-kreis.mitte {
  cursor: default;
}
/* Kein z-index auf Scheibe und Auszuegen: er oeffnete einen eigenen
   Stapelkontext, und das Multiplizieren faende die Scheibe nicht mehr.
   Die Reihenfolge im Markup entscheidet.                          */
.ab-scheibe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--black);
}
.ab-fx {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ab-fx i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
  display: block;
}
/* ── Der Refill-Kreis: ein Glas Milch ────────────────────────────
   Er steht da wie jeder andere Tarif — schwarze Scheibe, weisser Satz —
   und wird nach „abonnieren" von unten aufgefuellt.
   Das Gefuellte ist keine weisse Farbe, sondern gar nichts: Scheibe und
   Auszuege werden auf den TROCKENEN Rest oberhalb der Oberflaeche
   beschnitten (--poly), und was darunter liegt, ist einfach nicht mehr
   da. Deshalb steht am Ende auch keine weisse Scheibe vor den Farb-
   kreisen — dort ist der Grund selbst. Ohne Guss steht „none", der
   Kreis ist dann ganz.                                              */
.ab-kreis.rf .ab-scheibe,
.ab-kreis.rf .ab-fx i {
  clip-path: var(--poly, none);
}
.ab-tropfen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Die Spritzer sind Milch, die durch das Schwarz fliegt: auf dem Grund
   waeren sie unsichtbar, im Kreis sind sie das Loch.                */
.ab-tropfen i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
}
.ab-korona {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ab-d) * 2.04);
  height: calc(var(--ab-d) * 2.04);
  margin: calc(var(--ab-d) * -1.02) 0 0 calc(var(--ab-d) * -1.02);
  border-radius: 50%;
  pointer-events: none;
}
.ab-korona i {
  position: absolute;
  inset: 0;
  display: block;
}
/* Anders als beim Anmeldekreis ist die Mitte hier voll weiss gefuellt:
   sonst schiene zwischen Scheibenkante und Saum der Hintergrund durch,
   sobald ein Kreis kleiner skaliert daneben steht.                */
.ab-korona .saum {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 1) 0%,
    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%
  );
}
.ab-korona .hof {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 49%,
    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%
  );
}
.ab-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 im Kreis: dieselbe Stufenleiter wie in der Registrierung.
   Die Groessen sind fest; faellt der Kreis kleiner aus als 430 px,
   skaliert --ab-s den ganzen Satz mit.                            */
.ab-inhalt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  pointer-events: none;
  padding: 0 13%;
  transform: scale(var(--ab-s, 1));
}
.ab-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
}
.ab-preis {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: 0.015em;
  line-height: 1;
  margin-top: 16px;
  white-space: nowrap;
}
.ab-preis .je {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 0.6em;
  color: rgba(255, 255, 255, 0.5);
}
/* inkl. USt. bzw. der Hinweis für Kleinunternehmer */
.ab-steuer {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.4);
}
.ab-credits {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.8;
  margin-top: 18px;
}
/* Weiche Kanten: der Kreis wird Bild fuer Bild neu skaliert, ein hartes
   Ein-Pixel-Kaestchen faellt dabei mal auf eine Bildschirmzeile und mal
   zwischen zwei — es flimmerte.                                    */
.ab-strich {
  width: 88px;
  height: 2px;
  margin: 18px 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0)
  );
}
.ab-liste {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* Die drei Farbauszüge des Refill-Kreises (Cyan, Magenta, Gelb) */
.ab-fx > i:nth-child(1) {
  background: #00ffff;
}
.ab-fx > i:nth-child(2) {
  background: #ff00ff;
}
.ab-fx > i:nth-child(3) {
  background: #ffff00;
}