/* =========================================================================
   APP-BILDSCHIRME IN ECHTEM HTML
   Feste Leinwand von 390 x 844 px (die Masse, fuer die die App gebaut ist),
   die per transform auf die Rahmenbreite skaliert wird. Dadurch stimmen alle
   Abstaende exakt und nichts wird unscharf — anders als bei einem PNG.
   ========================================================================= */
.a-wrap{position:relative;width:100%;aspect-ratio:390/844;overflow:hidden;background:#0e1213}
.a-screen{position:absolute;top:0;left:0;width:390px;height:844px;
  transform-origin:top left;display:flex;flex-direction:column;
  background:#0e1213;color:#fff;font-size:14px;line-height:1.4;
  font-family:'Inter',system-ui,sans-serif}
.a-screen *{box-sizing:border-box}
.a-screen b,.a-screen em,.a-screen i,.a-screen u,.a-screen s{font-style:normal;text-decoration:none}

/* ---- Kamera-Insel ---- */
.a-insel{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:104px;height:30px;border-radius:99px;background:#000;z-index:5}

/* ---- Kopfzeile ----
   Drei Spalten: Logo links, Werte mittig, Glocke rechts. Der obere Abstand
   haelt alles unter der Kamera-Insel und weg von der Ecken-Rundung. */
.a-top{display:grid;grid-template-columns:34px 1fr 32px;align-items:center;gap:8px;
  padding:54px 16px 10px;flex:none}
.a-pills{display:flex;justify-content:center;gap:6px}
.a-logo{width:34px;height:34px;border-radius:12px;background:#182022;display:grid;place-items:center;flex:none}
.a-pill{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:99px;
  background:#182022;font-size:12px;font-weight:700}
.a-bell{position:relative;width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1.5px solid rgba(224,169,58,.55)}
.a-pill--streak{border:1.5px solid rgba(224,145,95,.5);background:rgba(224,145,95,.10);color:#e0915f}
/* In der App sitzt oben rechts nur ein kleiner Punkt, keine Zahl. */
.a-bell i{position:absolute;top:0;right:0;width:9px;height:9px;border-radius:99px;background:#e0915f}

/* ---- Rumpf ---- */
.a-body{flex:1;overflow:hidden;padding:0 14px;display:flex;flex-direction:column;gap:12px}

/* ---- Heldenkarte ---- */
.a-held{background:#161b1c;border-radius:18px;padding:16px 16px 14px}
.a-held__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.a-held__ic{width:38px;height:38px;display:grid;place-items:center;flex:none}
.a-held__top b{display:block;font-size:22px;font-weight:800;line-height:1.05}
.a-held__top i{display:block;font-size:14px;font-weight:700;color:#e0a93a}
.a-held__glob{margin-left:auto;text-align:right;font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#7d8a88}
.a-held__glob em{display:block;width:26px;height:3px;border-radius:2px;background:#e0b94a;margin-top:7px;margin-left:auto}
.a-xp{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#7d8a88;font-weight:700}
.a-xp b{font-size:14px;letter-spacing:0;text-transform:none;color:#fff}
.a-xpbar{height:6px;border-radius:99px;background:#232b2c;margin:7px 0 12px;overflow:hidden}
.a-xpbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3f7f78,#5fb5ab)}
.a-hp{display:flex;align-items:center;gap:3px}
.a-hp s{display:block;line-height:0}
.a-hp b{margin-left:auto;font-size:15px;font-weight:800}

/* ---- Listenkarte ---- */
.a-karte{background:#161b1c;border-radius:18px;padding:14px 16px}
.a-karte__kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.a-karte__kopf span{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#7d8a88}
.a-karte__kopf em{font-size:12px;font-weight:700;color:#5fb5ab}
.a-zeile{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.06)}
.a-zeile:first-of-type{border-top:0}
.a-zeile__ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--f) 16%, transparent)}
.a-zeile b{display:block;font-size:15px;font-weight:700}
.a-zeile i{display:block;font-size:11.5px;color:#7d8a88;margin-top:1px}
.a-chev{margin-left:auto;line-height:0}

/* ---- Wochenziel im Fuss der Heute-Karte ---- */
.a-woche{display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;padding-top:11px;border-top:1px solid rgba(255,255,255,.06)}
.a-woche span{font-size:12px;font-weight:700;color:#9aa8a5;letter-spacing:0;text-transform:none}
.a-woche em{display:flex;gap:7px}
.a-woche em i{width:11px;height:11px;border-radius:50%;border:1.5px solid #2a3132}
.a-woche em i.jetzt{border-color:#5fb5ab}
/* Der Fortschrittsring neben «3 offen» */
.a-ring{width:17px;height:17px;border-radius:50%;margin-left:8px;
  border:2px solid #2a3132;border-top-color:#5fb5ab;border-right-color:#5fb5ab}

/* ---- Overview ---- */
.a-ovk{display:flex;align-items:center;gap:9px;margin-top:2px}
.a-ovk b{font-size:19px;font-weight:800}
.a-ovk i{min-width:22px;height:22px;border-radius:99px;background:rgba(95,181,171,.16);
  color:#5fb5ab;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px}
.a-ov__z{display:flex;align-items:center}
.a-ov__z b{font-size:16px;font-weight:800}
.a-ov p{font-size:12.5px;line-height:1.45;color:#9aa8a5;font-style:italic;margin-top:5px}

/* ---- Tages-Linse (nur noch im Quest-Blatt) ---- */
.a-linse{background:#161b1c;border-radius:18px;padding:14px 16px}
.a-linse__kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.a-linse__kopf span{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e0b94a}
.a-linse__kopf em{width:30px;height:30px;border-radius:10px;background:rgba(224,185,74,.14);display:grid;place-items:center}
.a-linse p{font-size:13.5px;line-height:1.45;color:#fff}
.a-linse p b{color:#5fb5ab;font-weight:700}
.a-linse i{display:block;font-size:11px;color:#6d7a78;margin-top:6px}
.a-linse u{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#5fb5ab;margin-top:9px}

/* ---- Quests ---- */
.a-seg{display:flex;gap:7px}
.a-seg span{flex:1;text-align:center;padding:9px 0;border-radius:99px;background:#182022;
  font-size:13px;font-weight:700;color:#9aa8a5}
.a-seg span.on{background:#5fb5ab;color:#0b1112}
.a-ring{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.a-ring__b{width:50px;text-align:center;flex:none;padding:8px 4px;border-radius:12px;
  background:#161b1c;border:1px solid rgba(95,181,171,.25)}
.a-ring__b i{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#5fb5ab;margin-top:3px}
.a-ring__b--o{border-color:rgba(224,169,58,.35)}
.a-ring__b--o i{color:#e0a93a}
.a-ring__m{flex:1;position:relative;text-align:center;height:78px}
.a-ring__m svg{width:150px;height:58px;display:block;margin:0 auto}
.a-ring__m b{position:absolute;left:0;right:0;top:14px;font-size:34px;font-weight:800;line-height:1}
.a-ring__m span{position:absolute;left:0;right:0;top:52px;font-size:11px;color:#9aa8a5}
.a-woche{text-align:center;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#5fb5ab;margin-top:-6px}
.a-h2{font-size:19px;font-weight:800}
.a-h2 em{font-size:11.5px;font-weight:600;color:#7d8a88;margin-left:6px}
.a-quest{background:#141b1a;border:1px solid rgba(95,181,171,.3);border-radius:16px;padding:13px 14px}
.a-quest__kopf{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.a-quest__kopf span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7d8a88}
.a-quest__kopf em{font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;
  background:rgba(95,181,171,.18);color:#5fb5ab}
.a-quest__b{margin-left:auto;width:30px;height:30px;border-radius:10px;background:rgba(95,181,171,.12);
  display:grid;place-items:center}
.a-quest>b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.a-quest p{font-size:12.5px;line-height:1.4;color:#9aa8a5}
.a-quest u{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:#5fb5ab;margin-top:8px}
.a-baseline{display:flex;align-items:center;gap:10px;background:#161b1c;border-radius:14px;padding:11px 14px}
.a-baseline span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5fb5ab}
.a-baseline b{display:block;font-size:13.5px;font-weight:700;margin-top:2px}
.a-baseline em{margin-left:auto;font-size:12px;font-weight:800;color:#5fb5ab;white-space:nowrap}
.a-mini{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#7d8a88}
.a-kommend{display:flex;align-items:center;background:#161b1c;border-radius:14px;padding:12px 14px}
.a-kommend b{font-size:14px;font-weight:700}
.a-kommend u{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#5fb5ab}

/* ---- Habits ---- */
.a-stats{display:flex;gap:8px;background:#161b1c;border-radius:16px;padding:11px 8px}
.a-stats div{flex:1;text-align:center;border-left:1px solid rgba(255,255,255,.07)}
.a-stats div:first-child{border-left:0}
.a-stats span{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:800}
.a-stats i{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6d7a78;margin-top:2px}
.a-hkopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.a-hkopf span{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#2fc95f}
.a-hkopf em{width:28px;height:28px;border-radius:9px;background:#182022;display:grid;place-items:center}
.a-habit{display:flex;align-items:center;gap:12px;background:#161b1c;border-radius:15px;padding:12px 14px}
/* In der App stehen die Wachstums-Symbole frei — ohne farbige Kachel. */
.a-habit__ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--f) 16%, transparent)}
.a-habit__m{flex:1;min-width:0}
.a-habit__m b{display:block;font-size:15px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-habit__m b u{color:#2fc95f;font-weight:800;font-size:13px}
.a-habit__m i{display:block;font-size:11px;color:#2fc95f;margin-top:2px}
.a-habit__r{text-align:right;flex:none}
.a-habit__r span{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:#9aa8a5}
.a-habit__r em{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#5c6a68;margin-top:3px}
.a-swipe{text-align:center;font-size:11.5px;color:#6d7a78;display:flex;align-items:center;
  justify-content:center;gap:4px}
.a-dots{display:flex;gap:5px;justify-content:center}
.a-dots i{width:18px;height:5px;border-radius:99px;background:#2a3132}
.a-dots i.on{width:26px;background:#2fc95f}
.a-analyse{display:flex;align-items:center;gap:12px;background:#161b1c;border-radius:15px;padding:12px 14px}
.a-analyse b{display:block;font-size:14.5px;font-weight:700}
.a-analyse i{display:block;font-size:11px;color:#7d8a88;margin-top:1px}

/* ---- Journal ---- */
.a-jkopf{display:flex;align-items:center;justify-content:space-between}
.a-jkopf span{display:block;font-size:11.5px;font-weight:600;color:#7d8a88;margin-top:2px}
.a-jkopf b{display:block;font-size:21px;font-weight:800}
.a-jkopf em{width:30px;height:30px;border-radius:10px;background:#182022;display:grid;place-items:center}
.a-slider{display:flex;gap:12px;justify-content:space-around;background:#161b1c;border-radius:18px;padding:16px 12px}
.a-slider__s{text-align:center;flex:1}
.a-slider__t{width:38px;height:118px;border-radius:19px;background:#1e2627;margin:0 auto 8px;
  position:relative;overflow:hidden}
.a-slider__t i{position:absolute;left:0;right:0;bottom:0;height:26px;border-radius:19px;
  background:color-mix(in srgb, var(--f) 60%, transparent)}
.a-slider__s b{display:block;font-size:13px;font-weight:800}
.a-slider__s span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6d7a78;margin-top:2px}
.a-plus{margin-left:auto;width:20px;height:20px;border-radius:7px;background:rgba(95,181,171,.16);
  color:#5fb5ab;display:grid;place-items:center;font-size:14px;font-weight:800}
.a-feld{background:#161b1c;border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:12px 14px;
  font-size:12.5px;color:#5c6a68;line-height:1.45}
.a-feld--gross{min-height:62px}
.a-moods{display:flex;justify-content:space-between;gap:6px}
.a-mood{flex:1;height:44px;border-radius:13px;background:#161b1c;display:grid;place-items:center}
.a-diktat{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:99px;background:rgba(95,181,171,.14);color:#5fb5ab;font-size:12px;font-weight:700}

/* ---- Journal: Speichern und die zwei Karten darunter ---- */
.a-save{height:44px;border-radius:14px;background:#5fb5ab;color:#0b1112;
  display:grid;place-items:center;font-size:14px;font-weight:800}
.a-jkarten{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.a-jk{display:flex;align-items:center;gap:9px;background:#161b1c;border-radius:15px;padding:11px 12px}
.a-jk b{display:block;font-size:13.5px;font-weight:700}
.a-jk i{display:block;font-size:10.5px;color:#7d8a88;margin-top:1px}

/* ---- Habits: die Kampf-Karte lugt rechts hervor ---- */
.a-hreihe{display:flex;gap:8px;align-items:stretch}
.a-hreihe .a-habit{flex:1;min-width:0}
.a-kampfk{width:74px;flex:none;background:#161b1c;border-radius:15px;padding:11px 10px;
  display:flex;flex-direction:column;justify-content:space-between;opacity:.72}
.a-kampfk__o{display:flex;align-items:center;justify-content:space-between}
.a-kampfk__o em{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#9aa8a5}
.a-kampfk__u{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:8px}
.a-kampfk__u i{font-size:11px;font-weight:700;color:#de5650}
.a-kampfk__u b{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d7a78}

/* ---- Markt ---- */
.a-mkopf{display:flex;align-items:center;justify-content:space-between}
.a-mkopf b{font-size:22px;font-weight:800}
.a-mrang{padding:5px 11px;border-radius:99px;background:rgba(224,145,95,.14);
  color:#e0915f;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.a-mtext{font-size:11.5px;line-height:1.45;color:#7d8a88}
.a-items{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.a-item{position:relative;background:#161b1c;border-radius:15px;padding:11px 12px 12px;text-align:center}
.a-item__k{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.a-item__k span{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d7a78}
.a-item__k em{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#e0b94a}
.a-item__ic{width:40px;height:40px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--f) 15%, transparent)}
.a-item b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.a-item p{font-size:9.5px;line-height:1.35;color:#7d8a88;margin-top:4px;min-height:26px}
.a-item__t{display:flex;gap:6px;margin-top:9px}
.a-item__t u{flex:1;height:26px;border-radius:99px;background:#5fb5ab;color:#0b1112;
  display:grid;place-items:center;font-size:11.5px;font-weight:800}
.a-item__t s{flex:1;height:26px;border-radius:99px;background:#1e2627;color:#5c6a68;
  display:grid;place-items:center;font-size:11.5px;font-weight:800}
/* Gesperrte Plaetze: in der App verschwommen mit Schloss und Rang-Hinweis. */
.a-item--zu{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:132px;background:#12181a}
.a-item--zu span{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7d8a88;line-height:1.5}

/* ---- Fussleiste ---- */
.a-nav{display:flex;flex:none;padding:9px 6px 16px;border-top:1px solid rgba(255,255,255,.06);
  background:#0e1213}
.a-nav__i{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#5c6a68;
  transition:color .3s}
.a-nav__i b{font-size:9.5px;font-weight:700}
.a-nav__i.on{color:#5fb5ab}

/* Vorschau auf die Kampf-Habits (zweite Seite) */
.a-kampf{background:#161b1c;border-radius:15px;padding:12px 14px;opacity:.6}
.a-kampf>span{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#de5650}
.a-kampf__l{display:flex;gap:8px;margin-top:9px}
.a-kampf__l em{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px;
  background:rgba(222,86,80,.1);font-size:12px;font-weight:700;color:#c9a09e}

/* ---- Quest-Blatt im Handy ---- */
.a-screen--quest{padding:54px 16px 18px;gap:0}
.a-qkopf{display:flex;align-items:center;gap:11px;flex:none}
.a-qzurueck{width:32px;height:32px;border-radius:11px;background:#182022;display:grid;
  place-items:center;flex:none;cursor:pointer}
.a-qkopf span{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7d8a88}
.a-qkopf b{display:block;font-size:14px;font-weight:700;margin-top:2px}
.a-qxp{margin-left:auto;font-size:11px;font-weight:800;color:#5fb5ab;letter-spacing:0;
  text-transform:none;padding:5px 10px;border-radius:99px;background:rgba(95,181,171,.14)}
.a-qdots{display:flex;gap:5px;margin:18px 0 20px;flex:none}
.a-qdots i{flex:1;height:3px;border-radius:99px;background:#252d2e;transition:background .4s}
.a-qdots i.on{background:#5fb5ab}
/* Das Gerät ist kleiner geworden und wird deshalb heruntergerechnet. Damit
   der Text trotzdem gut lesbar bleibt, steht er hier eine Spur grösser und mit
   mehr Zeilenabstand als in der App. */
.a-qbody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.a-qtag{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#5fb5ab;flex:none}
.a-qbody h3{font-size:27px;font-weight:800;line-height:1.14}
.a-qbody p{font-size:15px;line-height:1.62;color:#9aa8a5}
.a-qbody p b{color:#fff;font-weight:700}
.a-qquelle{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#6d7a78;
  margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.a-qex{padding:13px 15px;border-radius:11px;background:#161b1c;font-size:13.5px;
  line-height:1.45;color:#7d8a88}
.a-qfeld{display:block}
.a-qfeld span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5fb5ab;margin-bottom:7px}
.a-qfeld input{width:100%;padding:13px 14px;border-radius:12px;background:#161b1c;
  border:1px solid rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px}
.a-qfeld input:focus{outline:0;border-color:#5fb5ab;background:rgba(95,181,171,.06)}
.a-qbtn{flex:none;margin-top:16px;width:100%;padding:15px;border-radius:14px;border:0;
  background:#5fb5ab;color:#0b1112;font:inherit;font-size:14px;font-weight:800;cursor:pointer;
  transition:transform .14s,opacity .2s}
.a-qbtn:active{transform:scale(.985)}
.a-qbtn:disabled{opacity:.32;cursor:default}
.a-qbtn--geist{background:transparent;color:#9aa8a5;border:1px solid rgba(255,255,255,.12)}
.a-qfertig{align-items:center;text-align:center;justify-content:center;gap:14px}
.a-qring{width:84px;height:84px;border-radius:50%;border:2px solid #5fb5ab;display:grid;
  place-items:center;box-shadow:0 0 44px rgba(95,181,171,.3)}
.a-qxpgross{font-size:40px;font-weight:800;color:#5fb5ab;line-height:1}
.a-qergebnis{width:100%;text-align:left;padding:14px 16px;border-radius:14px;
  background:rgba(95,181,171,.1);border:1px solid rgba(95,181,171,.3);font-size:14px;line-height:1.4}
.a-qergebnis span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5fb5ab;margin-bottom:5px}

/* ---------- Quests-Reiter, Stand App-Build B130 (August 2026) ----------
   Über den Büchern links der Tag, rechts der Rang. Darunter die drei
   Wochenbücher in voller Breite — das mittlere ist die heutige Quest.
   Masse 1:1 aus der App (.bkRow/.bkIt/.bkL in GoGrow_App.jsx). */
.a-qz{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:16px;padding:0 4px}
.a-qz__l,.a-qz__r{display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.a-qz__l{color:#5fb5ab}
.a-qz__r{color:#e0915f}

.a-bk{display:flex;gap:14px;justify-content:center;align-items:flex-end;margin-top:18px}
.a-bk__i{position:relative;width:64px;height:90px;border-radius:3px 8px 8px 3px;
  background:linear-gradient(120deg,#2b3435 0%,#1d2425 55%,#161c1d 100%);
  display:grid;place-items:center;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.5),inset 10px 0 0 var(--f),
    0 8px 16px rgba(0,0,0,.5)}
.a-bk__i em{font-style:normal;font-size:32px;font-weight:900;line-height:1;padding-left:8px;
  letter-spacing:-.05em;transform:scaleX(.84);color:var(--f);
  text-shadow:0 2px 6px rgba(0,0,0,.5)}
.a-bk__i--now{width:84px;height:118px;transform:translateY(-2px);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.5),inset 10px 0 0 var(--f),
    0 12px 22px rgba(0,0,0,.5)}
.a-bk__i--now em{font-size:44px}
.a-bk__i--lock{opacity:.45}
.a-bk__mk{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:99px;
  display:grid;place-items:center;background:#0e1213;border:1px solid rgba(255,255,255,.08)}

.a-bkl{margin-top:11px;text-align:center;min-height:34px}
.a-bkl i{display:block;font-style:normal;font-size:9.5px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase}
.a-bkl b{display:block;font-size:12.5px;font-weight:600;color:#9aa8a5;margin-top:3px;line-height:1.3}

.a-oeffnen{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:6px;font-size:13px;font-weight:800;color:#5fb5ab}