/* =========================================================================
   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 ----
   Mit angedeuteter Linse rechts, damit sie nicht wie ein schwarzer Balken wirkt. */
.a-insel{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:92px;height:28px;border-radius:99px;background:#000;z-index:5}
/* Die Linse nur andeuten: klein und sehr leise (Eluan 23.08.). */
.a-insel::after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#0a0d0e;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06)}

/* ---- Statusleiste ---- */
.a-sb{position:absolute;top:0;left:0;right:0;height:52px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px 0;color:#fff;pointer-events:none}
.a-sb b{font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1}
.a-sb__r{display:flex;align-items:center;gap:5px}
.a-sb__r svg{display:block}

/* ---- 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 ----
   Wie in der App: das Rangsymbol liegt gross und sehr leise hinter der Karte,
   oben rechts stehen der laufende Monat und der Platz in der Monats-Rangliste. */
.a-held{position:relative;overflow:hidden;background:#161b1c;border-radius:18px;padding:16px 16px 14px}
.a-held>*{position:relative;z-index:1}
.a-held__wz{position:absolute;right:-26px;bottom:-46px;z-index:0;line-height:0;opacity:.09;pointer-events:none}
.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:#e0915f;margin-top:2px}
.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;font-size:20px;font-weight:800;letter-spacing:0;color:#e0b94a;margin-top:5px}
.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}

/* ---- 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}
/* Die Standortbestimmung an Tag 1 hat in der App einen leisen tuerkisen Rand. */
.a-baseline{display:flex;align-items:center;gap:10px;background:#161b1c;border-radius:14px;padding:11px 14px;
  border:1px solid rgba(95,181,171,.35)}
.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}
/* «Die 5 Segmente» mit dem Ring aus 17 Strichen, wie in der App. */
.a-kommend{background:#161b1c;border-radius:20px;padding:14px 16px 13px}
.a-kommend__k{display:flex;align-items:center}
.a-kommend b{font-size:15px;font-weight:800}
.a-kommend__k u{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;color:#5fb5ab}
.a-kommend>i{display:block;text-align:center;font-size:10.5px;color:#6d7a78;margin-top:2px}
.a-seg5{position:relative;width:168px;height:168px;margin:6px auto 4px}
.a-seg5 i{position:absolute;left:50%;top:0;width:4px;height:20px;margin-left:-2px;
  border-radius:99px;background:var(--f);opacity:.34;transform-origin:50% 84px}
.a-seg5 i.jetzt{opacity:1;height:26px;width:5px;margin-left:-2.5px;
  box-shadow:0 0 12px color-mix(in srgb, var(--f) 70%, transparent)}
.a-seg5__m{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0}
/* «1» gross, «/17» klein und hochgestellt daneben, wie in der App. */
.a-seg5__m b{display:flex;align-items:flex-start;font-size:30px;font-weight:800;line-height:1}
.a-seg5__m u{font-size:11px;font-weight:700;color:#6d7a78;margin-left:1px}
.a-seg5__m em{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#5fb5ab;margin-top:6px}

/* ---- 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}
/* In der App stehen die Wachstums-Symbole frei, ohne farbige Kachel, und die
   Karte hat zwei Zeilen: oben Symbol, Name und Streak, unten Quote und Bereich. */
.a-habit{background:#161b1c;border-radius:16px;padding:13px 14px 12px}
.a-habit__o{display:flex;align-items:center;gap:9px}
.a-habit__o svg{flex:none}
.a-habit__o b{font-size:17px;font-weight:800;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-habit__o u{font-size:12.5px;font-weight:800;color:#2fc95f;flex:none}
.a-habit__st{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:14px;font-weight:700;flex:none}
.a-habit__u{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.a-habit__u i{font-size:11px;font-weight:800;color:#2fc95f;white-space:nowrap}
.a-habit__u em{font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#5c6a68;white-space:nowrap}
.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 ----
   Der ganze Eintrag steht in EINER Karte, genau wie in der App. */
.a-jkarte{background:#161b1c;border-radius:20px;padding:14px 15px 13px;
  display:flex;flex-direction:column;gap:10px}
/* Drei gleich breite Spalten: «Heute» links, Datum exakt mittig, Tag rechts. */
.a-jkopf{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:baseline;gap:6px}
.a-jkopf b{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1}
.a-jkopf span{font-size:10.5px;font-weight:600;color:#7d8a88;text-align:center;line-height:1.2}
.a-jkopf u{font-size:13px;font-weight:800;color:#5fb5ab;text-align:right}
.a-slider{display:flex;gap:12px;justify-content:space-around;padding:4px 0 2px}
.a-slider__s{text-align:center;flex:1}
.a-slider__t{width:42px;height:112px;border-radius:19px;background:rgba(128,128,128,.14);margin:0 auto 7px;
  position:relative;overflow:hidden}
.a-slider__t i{position:absolute;left:3px;right:3px;bottom:3px;min-height:24px;border-radius:16px;
  background:linear-gradient(to top,color-mix(in srgb, var(--f) 72%, #000),var(--f))}
.a-slider__s b{display:block;font-size:14px;font-weight:800;color:var(--f)}
.a-slider__s span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6d7a78;margin-top:3px}
.a-plus{margin-left:auto;width:22px;height:22px;border-radius:7px;background:rgba(95,181,171,.16);
  display:grid;place-items:center;line-height:0}
.a-raute{width:22px;height:22px;border-radius:7px;background:rgba(95,181,171,.16);
  display:grid;place-items:center;line-height:0;margin-left:5px}
.a-mini em:not(.a-plus):not(.a-raute){margin-left:auto;width:22px;height:22px;border-radius:7px;
  background:rgba(128,128,128,.12);display:grid;place-items:center;line-height:0}
/* Eine ausgefuellte Dankbarkeits-Zeile mit dem Kreuz zum Entfernen. */
.a-dank{display:flex;align-items:center;gap:8px;background:#1b2223;
  border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:9px 10px 9px 13px;margin-top:-4px}
.a-dank span{flex:1;min-width:0;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-dank em{width:22px;height:22px;border-radius:7px;background:rgba(128,128,128,.12);
  display:grid;place-items:center;flex:none;line-height:0}
.a-feld{background:#1b2223;border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:11px 13px;
  font-size:12.5px;color:#5c6a68;line-height:1.45}
.a-feld--voll{color:#fff;font-weight:600;min-height:52px}
.a-moods{display:flex;justify-content:space-between;gap:6px}
.a-mood{flex:1;height:44px;border-radius:14px;background:rgba(128,128,128,.08);
  border:1.5px solid transparent;display:grid;place-items:center}
.a-mood.on{background:color-mix(in srgb, var(--f) 15%, transparent);border-color:var(--f)}
.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 drei Einstiege darunter ----
   Die Analyse wird am oeftesten geoeffnet, darum bekommt sie die halbe Zeile
   und steht rechts, wo der Daumen ist (App-Build B151). */
.a-save{height:44px;border-radius:16px;background:#5fb5ab;color:#0b1112;
  display:grid;place-items:center;font-size:14px;font-weight:800;margin-top:2px}
.a-jkarten{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.a-jspalte{display:flex;flex-direction:column;gap:8px}
.a-jk{display:flex;align-items:center;gap:9px;background:#161b1c;border-radius:15px;padding:10px 11px}
.a-jspalte .a-jk{flex:1}
.a-jk b{font-size:13px;font-weight:800;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-jk i{display:block;font-size:10.5px;color:#7d8a88;margin-top:1px}
.a-jk--gross{padding:13px}
.a-jk--gross b{display:block;font-size:14.5px}

/* ---- 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:78px;flex:none;background:#161b1c;border-radius:15px;padding:11px 9px;
  display:flex;flex-direction:column;justify-content:space-between;opacity:.72;overflow:hidden}
.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:4px;margin-top:8px}
.a-kampfk__u i{font-size:11px;font-weight:700;color:#de5650}
.a-kampfk__u b{font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6d7a78}

/* ---- Markt (Stand August 2026) ----
   Kein Kachel-Gitter mehr: oben der Coin-Stand, darunter die Kaufliste als
   Zeilen, dann das Gluecksrad, unten der Aufklapper der gesperrten Items. */
.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,.15);
  color:#e0915f;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.a-mcoin{background:#161b1c;border-radius:20px;padding:14px;
  display:flex;align-items:center;justify-content:center;gap:9px}
.a-mcoin b{font-size:36px;font-weight:900;line-height:1;color:#e0b94a}

/* Kaufliste: eine Karte, die Zeilen darin durch feine Linien getrennt. */
.a-items{border-radius:20px;overflow:hidden;background:#161b1c}
.a-izeile{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-top:1px solid rgba(255,255,255,.06)}
.a-izeile:first-child{border-top:0}
.a-izeile__ic{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#11171899;box-shadow:inset 0 0 8px 2px rgba(0,0,0,.45)}
.a-izeile__m{flex:1;min-width:0}
.a-izeile__m b{font-size:13.5px;font-weight:800}
.a-izeile__m u{margin-left:6px;padding:1px 6px;border-radius:99px;font-size:9.5px;font-weight:800;
  background:rgba(95,181,171,.14);color:#5fb5ab}
.a-izeile__m i{display:block;font-size:10.5px;line-height:1.3;color:#7d8a88;margin-top:2px}
.a-izeile__n{flex:none;height:34px;padding:0 11px;border-radius:12px;background:#232b2c;
  display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#9aa8a5}
.a-izeile__p{flex:none;min-width:62px;height:34px;padding:0 10px;border-radius:12px;background:#5fb5ab;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  font-size:13px;font-weight:800;color:#0b1112}

/* Gluecksrad. Die Felder sind ein conic-gradient, die Symbole liegen aussen
   auf dem Kreis und stehen dank Gegen-Drehung aufrecht, wie in der App. */
.a-rad{background:#161b1c;border-radius:22px;padding:13px 14px 14px}
.a-rad__k{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.a-rad__k b{font-size:15px;font-weight:800}
.a-rad__k span{padding:4px 9px;border-radius:99px;background:rgba(224,185,74,.16);color:#e0b94a;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.a-rad__w{position:relative;width:160px;height:160px;margin:0 auto}
.a-rad__z{position:absolute;left:50%;top:-5px;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:15px solid #e0b94a;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.a-rad__s{position:absolute;inset:0;border-radius:50%;background-color:#1b2122;
  box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 0 5px rgba(255,255,255,.05)}
.a-rad__f{position:absolute;inset:0}
.a-rad__f em{position:absolute;left:50%;top:7%;width:26px;height:26px;margin-left:-13px;
  display:grid;place-items:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.a-rad__m{position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);
  border-radius:50%;background:#0e1213;z-index:2;display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.07),0 6px 16px rgba(0,0,0,.5)}
.a-rad__b{height:44px;margin-top:13px;border-radius:17px;background:#5fb5ab;color:#0b1112;
  display:grid;place-items:center;font-size:14px;font-weight:800}

/* Noch gesperrte Items: in der App nur eine Zeile zum Aufklappen. */
.a-zu{display:flex;align-items:center;gap:6px;padding:2px 4px}
.a-zu b{font-size:12.5px;font-weight:800;color:#7d8a88}

/* ---- 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}

/* ---- 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}

/* ---- Fussleiste lesbar (Nachbesserung 11.10.2026) ----
   Die Beschriftung stand mit 9,5 Pixeln in #5c6a68 auf #0e1213, 3,3 zu 1.
   Jetzt 11 Pixel in #87938f, 5,9 zu 1. Der gewählte Bereich bleibt in
   #5fb5ab und damit klar hervorgehoben. Sonst ändert sich am Gerät nichts. */
.a-nav__i{color:#87938f}
.a-nav__i b{font-size:11px}