/* ══ 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 Tarifwahl ist ein eigener Raum (V3 26.09.2026): die Randhinweise
   „Text“ und „Bild“ und die Randpfeile der linken Spalte ruhen, solange sie
   offen ist. Sie luden zu den Aufklappspalten ein, und die fuhren ueber die
   Kreise - mit klickbaren Chips, die Modus und Stil verstellten. */
body.abo-app .edge-hint,
body.abo-app .panel-pfeil {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* 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;
}
/* Der Pfeil auf dem LAUFENDEN Tarif (V3 25.09.2026): ein schwarzes,
   gefuelltes Dreieck, 26 x 20 wie das der Tafel, die Spitze nach unten auf
   den Kreis. EINER fuer alle Kreise, in einer Lage ueber ihnen;
   billing/plan-carousel.js stellt ihn in jedem Bild der Bahn auf die
   Oberkante seines Kreises. Die Box sitzt mit der Spitze auf der Mitte der
   Bahn, und um die Spitze wird skaliert - so ist die Verschiebung genau der
   Ort der Spitze. Eine schwarze Flaeche, auf das Dreieck beschnitten
   (clip-path): drei Raender zeigten in Firefox unter dem Skalieren eine
   Naht. Kein Zeigerempfang: er ist eine Anzeige. */
.ab-pfeil {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 26px;
  height: 20px;
  margin: -20px 0 0 -13px;
  background: var(--black);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
}
/* 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.
   WEICHZEICHNEN UND MISCHEN GETRENNT (V3 27.09.2026). Jeder Auszug ist ein
   aeusseres <i>, das mischt (multiply) und die Lage traegt, und darin ein
   inneres <i>, die farbige Scheibe, die weichgezeichnet wird - Filter und
   Mischen auf einem Element ist die Kombination, bei der WebKit (Safari)
   weichzeichnet, aber nicht mischt. Isoliert wird der KREIS, nicht die
   Gruppe der Auszuege: sie muessen die Scheibe finden. */
.ab-kreis {
  isolation: isolate;
}
.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;
  display: block;
  mix-blend-mode: multiply;
}
.ab-fx > i > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}
/* ── 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: var(--auf-schwarz-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: var(--auf-schwarz-55);
}
/* Die Anmerkung — der Sternchentext der Preistabelle (V3). Sie steht so
   weit zurück, dass sie den Satz nicht stört, und bricht in zwei Zeilen,
   wo der Kreis schon schmal wird. */
.ab-fuss {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--auf-schwarz-30);
  margin-top: 14px;
  max-width: 26ch;
}

/* Die drei Farbauszüge der Tarifkreise und der Tafel (Cyan, Magenta, Gelb,
   auth/separations.js SEPARATION_COLORS): die innere Flaeche jedes Auszugs.
   V3 setzte die Farbe als style-Attribut im Markup - das laesst die CSP
   nicht zu. Die zweite Angabe ist dieselbe Farbe in Display P3: Safari
   mischt im Farbraum des Schirms, dort ergaben die sRGB-Farben
   pflaumenbraun statt schwarz (auth/separations.js). Die erste bleibt fuer
   Browser ohne color(). */
.ab-fx > i:nth-child(1) > i,
#ab-tafel .ab-tf-fx > i:nth-child(1) > i {
  background: #00ffff;
  background: color(display-p3 0 1 1);
}
.ab-fx > i:nth-child(2) > i,
#ab-tafel .ab-tf-fx > i:nth-child(2) > i {
  background: #ff00ff;
  background: color(display-p3 1 0 1);
}
.ab-fx > i:nth-child(3) > i,
#ab-tafel .ab-tf-fx > i:nth-child(3) > i {
  background: #ffff00;
  background: color(display-p3 1 1 0);
}

/* ── DIE TARIFWAHL ALS TAFEL (V3 24.–28.09.2026) ─────────────────────
   Der Umschalter ueber dem Knopf zeigt nur EIN Zeichen: das der ANDEREN
   Ansicht - im Karussell die Tafel, auf der Tafel die drei Kreise. Ein
   Klick fuehrt dorthin, und das Zeichen blendet kurz in das der Ansicht
   ueber, aus der man kam.
   FEST im Fenster und ueber der Ebene der Tarifwahl (#lg-wrap steht auf
   z-index 60 und faengt jeden Zeiger): in der Fussleiste lag der Schalter
   darunter - ein echter Klick traf die Bahn und schloss die Wahl.
   Gestellt wird er per Skript ueber den Knopf (billing/plan-table.js). */
#ab-schalter {
  display: none;
  position: fixed;
  left: 50%;
  top: 0;
  opacity: 0;
  transform: translateX(-50%);
  align-items: center;
  gap: 0;
  z-index: 70;
}
body.lg-abo #ab-schalter {
  display: flex;
}
/* Ein Knopf, beide Zeichen in derselben Zelle uebereinander. Gezeigt wird
   nur das, wohin der Klick fuehrt (#ab-schalter[data-ziel]). Die Zelle ist
   so breit wie das breitere Zeichen, der Knopf springt beim Wechsel also
   nicht. */
#ab-schalter button {
  background: none;
  border: none;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--black);
  display: grid;
  place-items: center;
  transition: opacity 0.15s;
}
/* Unter der Hand graut er auf wie der Knopf darunter. */
#ab-schalter button:hover {
  opacity: 0.75;
}
/* Beim Wechsel geht das alte Zeichen schnell, das neue kommt einen Hauch
   spaeter und etwas langsamer - ein kurzes Ueberblenden, kein Umspringen. */
#ab-schalter svg {
  grid-area: 1/1;
  display: block;
  height: 17px;
  opacity: 0;
  transition: opacity 0.14s ease;
}
#ab-schalter svg.z-bahn {
  width: 38.6px; /* 386 x 170 auf 17 Punkte */
}
#ab-schalter svg.z-tafel {
  width: 20px; /* 200 x 170 auf 17 Punkte */
}
#ab-schalter[data-ziel='bahn'] svg.z-bahn,
#ab-schalter[data-ziel='tafel'] svg.z-tafel {
  opacity: 1;
  transition: opacity 0.22s ease 0.08s;
}
/* Die Tafel liegt an der Stelle der Bahn; die Bahn laeuft darunter weiter
   (sie ist die Wahrheit), nur unsichtbar. */
#ab-tafel {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 25;
}
/* Aus der App heraus blendet die Tarifwahl ALLES in #lg-wrap ausser der
   Bahn aus. Die Tafel muss dagegen ankommen: sichtbar, und ihre Flaeche
   samt Dreieck nimmt den Zeiger an; der Rest der Ebene laesst ihn durch,
   damit ein Klick daneben die Wahl schliesst - wie neben der Bahn. */
body.lg-abo.ab-tafel #lg-wrap > #ab-tafel {
  display: block;
  visibility: visible;
  pointer-events: none;
}
body.lg-abo.ab-tafel #ab-tafel .ab-tf-mitte,
body.lg-abo.ab-tafel #ab-tafel .ab-dreieck {
  pointer-events: auto;
  visibility: visible;
}
/* Die Bahn GANZ weg, solange die Tafel steht: die Kreise tragen ihre
   Sichtbarkeit inline. Opacity nimmt alle Kinder mit und laesst die Bahn
   unter der Tafel weiterlaufen. */
body.lg-abo.ab-tafel #ab-bahn {
  opacity: 0;
  pointer-events: none;
}
/* Die Mitte der Tafel. Zentriert wird sie mit `translate`; `transform`
   gehoert dem Schweben und Verformen (plan-table.js floatTable). Sie liegt
   auf einer eigenen Ebene der Grafikkarte: sie bewegt sich in jedem Bild,
   und dafuer wird nichts neu gesetzt, nur zusammengesetzt. */
#ab-tafel .ab-tf-mitte {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -56%;
  width: min(92vw, 1180px);
  will-change: transform;
}
/* Die dunkle Tafel - Nr. 9 aus abo-tabellen-varianten.html. */
#ab-tafel .ab-tf-dunkel {
  position: relative;
  background: var(--black);
  color: var(--white);
  --tf-polster-o: 2.2em;
  --tf-polster-s: 2.4em;
  padding: var(--tf-polster-o) var(--tf-polster-s) 2em;
  font-size: clamp(10px, 1.02vw, 15px);
  font-family: var(--sans);
  --tf-border: var(--tafel-linie);
  --tf-light: var(--tafel-leise);
  --tf-mid: var(--tafel-laut);
}
/* Die Linien zwischen den Zeilen sind keine Raender der Zellen, sondern je
   Zeile EIN durchgehender Strich ueber der Tabelle (.ab-tf-linien, gesetzt
   von plan-table.js setTableLines): Firefox rastet Zellraender Stueck fuer
   Stueck auf ganze Geraetepixel, und unter der Verformung des Schwebens
   fiel manches Stueck dabei auf null. Die Raender der Zellen bleiben als
   durchsichtige Striche stehen: jede Zeile behaelt so genau ihre Hoehe. */
/* Die Spalten der Tarife sind gleich breit (anders als in V3): die Zeilen
   kommen aus den Plandaten, und in einer schmalen Spalte brach „wie im Abo“
   um und machte jede Zeile doppelt so hoch. */
#ab-tafel table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
#ab-tafel th,
#ab-tafel td {
  text-align: left;
  padding: 0.6em 0.9em;
  border-bottom: 1px solid transparent;
  vertical-align: top;
  font-weight: 400;
}
#ab-tafel th:first-child,
#ab-tafel td:first-child {
  padding-left: 0;
  color: var(--tf-mid);
  width: 13em;
}
#ab-tafel thead th {
  padding-bottom: 1em;
}
#ab-tafel .ab-tf-linien {
  position: absolute;
  top: var(--tf-polster-o);
  left: var(--tf-polster-s);
  right: var(--tf-polster-s);
  height: 0;
  pointer-events: none;
}
#ab-tafel .ab-tf-linien i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--tf-border);
}
#ab-tafel .ab-tf-linien i.kopf {
  background: var(--white); /* unter dem Kopf weiss */
}
#ab-tafel [data-i] {
  cursor: pointer;
}
/* Die Namen der Abos in Garamond kursiv - wie auf den Kreisen. */
#ab-tafel .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6em;
  line-height: 1.1;
}
#ab-tafel .preis {
  font-weight: 300;
  font-size: 1.85em;
  line-height: 1.05;
  margin: 0.2em 0 0.05em;
}
#ab-tafel .preis.klein {
  font-size: 1.05em;
  font-weight: 400;
  margin-top: 0.9em;
}
#ab-tafel .je {
  font-size: 0.76em;
  color: var(--tf-mid);
  letter-spacing: 0.06em;
}
#ab-tafel .ja svg {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.16em;
}
#ab-tafel .nein {
  display: inline-block;
  width: 0.75em;
  height: 1px;
  background: var(--tf-light);
  vertical-align: 0.32em;
}
#ab-tafel .blass {
  color: var(--tf-light);
}
#ab-tafel .wert {
  font-family: var(--t-ziffern);
}
#ab-tafel tfoot td {
  border-bottom: none;
  font-size: 0.74em;
  color: var(--tf-mid);
  line-height: 1.4;
  padding-top: 0.9em;
}
/* Unter dem Zeiger hebt sich die Spalte einen Schritt zur Wahl hin, so
   schnell wie ein Chip. Nur die Antwort auf den Zeiger blendet - springt
   die Wahl, haelt `sofort` den Uebergang fuer dieses Bild an. Die gewaehlte
   Spalte hebt sich deutlich ab; in ihr stehen die Linien eine Stufe heller
   (ein zweites Stueck Strich, Lage in --wahl-l/--wahl-r). */
#ab-tafel [data-i] {
  transition: background-color 0.12s;
}
#ab-tafel.sofort [data-i] {
  transition: none;
}
#ab-tafel th.unter,
#ab-tafel td.unter {
  background: var(--tafel-unter);
}
#ab-tafel th.gewaehlt,
#ab-tafel td.gewaehlt {
  background: var(--grau-800);
}
#ab-tafel .ab-tf-linien i.wahl {
  left: var(--wahl-l, 100%);
  right: var(--wahl-r, 0);
  background: var(--tafel-linie-an);
}
/* Mit der Tastatur waehlt man die Spalte ueber einen Knopf im Kopf
   (.ab-tf-wahl, eine Einfachwahl: role radio). Er liegt unsichtbar ueber
   dem ganzen Kopf; der Kopf selbst bleibt Spaltenkopf der Tabelle. */
#ab-tafel thead th[data-i] {
  position: relative;
}
#ab-tafel .ab-tf-wahl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Das Dreieck: schwarz, oben ueber der Spalte des LAUFENDEN Tarifs, die
   Spitze nach unten - dasselbe Zeichen wie ueber dem Kreis im Karussell
   (.ab-pfeil), eine Anzeige. Auf der ersten Seite laeuft kein Tarif - dort
   steht keines (.mit-pfeil). Wechselt der Tarif, gleitet es hin. EINE
   Flaeche, auf die Dreiecksform beschnitten; der Kasten nimmt den Zeiger
   ganz an - die Form steht darum im ::before. */
#ab-tafel .ab-dreieck {
  position: absolute;
  left: 0;
  top: -32px;
  width: 26px;
  height: 20px;
  display: none;
  transform: translateX(-50%);
  cursor: default;
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ab-tafel .ab-dreieck::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#ab-tafel.mit-pfeil .ab-dreieck {
  display: block;
}
/* Die Tafel lebt wie die Kreise (plan-table.js liveTable). Unter der
   schwarzen Flaeche liegen drei Farbauszuege in ihrer Form, multipliziert
   wie an den Kreisen: deckungsgleich ergeben sie Schwarz, auseinander
   farbige Saeume an den Kanten. In Ruhe sind sie ausgeblendet, die Flaeche
   liegt darueber und tritt nur in der Regung zurueck. Aussen das Mischen,
   innen die Flaeche mit ihrer Weichzeichnung. Die Gruppe bleibt OHNE
   isolation: unter ihr liegt nichts, was sie finden muesste, und isoliert
   legte WebKit sie beim Blitz in versetzte Kacheln. */
#ab-tafel .ab-tf-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
#ab-tafel .ab-tf-fx > i {
  position: absolute;
  inset: 0;
  display: block;
  mix-blend-mode: multiply;
}
#ab-tafel .ab-tf-fx > i > i {
  position: absolute;
  inset: 0;
  display: block;
}