/* =========================================================
   ALPHAGYM — Eingebettete App-Screens (Showcase im #app)
   Generiert aus app-ui.css, gescopt unter .pscr,
   damit .app / .tab nicht mit der Seite kollidieren.
   ========================================================= */

/* Wurzelfläche des Screens (ersetzt .device__screen) */
.pscr {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #131312 0%, #0a0a09 100%);
}

/* kompakter, interaktiver Showcase statt langem Pin-Track */
html.js-anim #app .appstage { height: auto; }
html.js-anim #app .appstage__pin {
  position: static; height: auto; min-height: 0;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
/* sanfter Crossfade beim Screen-Wechsel (Klick / Hover / Auto) */
html.js-anim #app .appstage__stack .phone { transition: opacity .5s var(--ease); }
/* Rail wird klickbar */
#app .appstage__rail .aps { cursor: pointer; }
#app .appstage__rail .aps:hover { opacity: .9; }
#app .appstage__rail .aps:focus-visible { outline: 1px solid var(--champ); outline-offset: 4px; }

.pscr {
  display: flex; flex-direction: column; height: 100%;
  font-family: var(--font-body); color: var(--ink);
}.pscr .app__status {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 24px 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}.pscr .app__status .sig { display: flex; align-items: center; gap: 6px; }.pscr .app__status .sig b { font-size: 11px; font-weight: 600; }.pscr .app__status .bars { display: flex; align-items: flex-end; gap: 2px; }.pscr .app__status .bars i { width: 3px; border-radius: 1px; background: var(--ink); }.pscr .app__status .bars i:nth-child(1) { height: 5px; }.pscr .app__status .bars i:nth-child(2) { height: 7px; }.pscr .app__status .bars i:nth-child(3) { height: 9px; }.pscr .app__status .bars i:nth-child(4) { height: 11px; opacity: .45; }.pscr .app__status .bat {
  width: 23px; height: 12px; border: 1px solid var(--ink-dim);
  border-radius: 3px; position: relative; padding: 1.5px;
}.pscr .app__status .bat::after {
  content:""; position:absolute; right:-3px; top:3.5px; width:2px; height:5px;
  background: var(--ink-dim); border-radius: 0 1px 1px 0;
}.pscr .app__status .bat i { display:block; height:100%; width:64%; background: var(--ink); border-radius:1px; }.pscr .app__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
  padding: 6px 19px 8px;
}.pscr .app__h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 1px 16px;
}.pscr .app__h .eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--champ) 80%, var(--ink-faint));
  margin-bottom: 5px;
}.pscr .app__h .title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 0.96; letter-spacing: 0.005em;
  text-transform: uppercase;
}.pscr .app__h .sub { font-size: 11px; color: var(--ink-dim); margin-top: 6px; }.pscr .app__h .tools { display: flex; gap: 9px; align-items: center; flex: 0 0 auto; padding-top: 2px; }.pscr .iconbtn {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.02);
  display: grid; place-items: center; color: var(--ink-dim);
}.pscr .iconbtn svg { width: 15px; height: 15px; }.pscr .app__tabs {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 14px));
  padding-bottom: 18px;
  border-top: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.42));
}.pscr .tab { display: flex; flex-direction: column; align-items: center; gap: 5px; }.pscr .tab svg { width: 19px; height: 19px; color: var(--ink-faint); }.pscr .tab b {
  font-weight: 500; font-size: 7.5px; letter-spacing: 0.02em;
  color: var(--ink-faint);
}.pscr .tab.on svg { color: var(--champ); }.pscr .tab.on b { color: var(--champ); }.pscr .card {
  border: 1px solid var(--hair-soft); border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent);
  padding: 14px;
}.pscr .card--gild {
  border-color: color-mix(in srgb, var(--champ) 26%, var(--hair-soft));
  background: linear-gradient(118deg, color-mix(in srgb, var(--bronze) 12%, transparent), transparent 64%);
}.pscr .badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  color: var(--champ);
  border: 1px solid color-mix(in srgb, var(--champ) 38%, transparent);
  background: color-mix(in srgb, var(--bronze) 12%, transparent);
}.pscr .badge--live { color: #5ec27e; border-color: color-mix(in srgb, #5ec27e 42%, transparent); background: color-mix(in srgb, #5ec27e 10%, transparent); }.pscr .badge--live .dot { width: 5px; height: 5px; border-radius: 50%; background: #5ec27e; box-shadow: 0 0 7px #5ec27e; }.pscr .flame {
  width: 11px; height: 14px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--champ), var(--bronze));
  clip-path: polygon(50% 0, 78% 32%, 92% 66%, 70% 100%, 30% 100%, 8% 66%, 26% 38%);
}.pscr .bar { height: 6px; border-radius: 4px; background: #211f1c; overflow: hidden; }.pscr .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--bronze), var(--champ)); }.pscr .chev { width: 7px; height: 7px; border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint); transform: rotate(-45deg); flex: 0 0 auto; }.pscr .dash { display: flex; flex-direction: column; gap: 11px; }.pscr .dash__hello { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 3px; }.pscr .dash__hello .eyebrow {
  font-family: ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: color-mix(in srgb, var(--champ) 80%, var(--ink-faint));
}.pscr .dash__hello .nm { font-family: var(--font-display); font-size: 26px; line-height: 0.98; text-transform: uppercase; margin-top: 5px; }.pscr .dash__hello img { width: 30px; height: 30px; opacity: 0.92; }.pscr .weigh { display: flex; align-items: center; gap: 12px; }.pscr .weigh__ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--champ) 30%, var(--hair));
  display: grid; place-items: center; color: var(--champ);
  background: color-mix(in srgb, var(--bronze) 10%, transparent);
}.pscr .weigh__ic svg { width: 17px; height: 17px; }.pscr .weigh__tx { flex: 1; }.pscr .weigh__tx .a { font-size: 12.5px; font-weight: 600; }.pscr .weigh__tx .b { font-size: 10px; color: var(--ink-dim); margin-top: 2px; }.pscr .dot-badge {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 9px; font-weight: 700; color: #14110b;
  background: linear-gradient(150deg, var(--champ), var(--bronze));
}.pscr .dash__two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.pscr .metric { padding: 14px; }.pscr .metric .top { display: flex; align-items: center; gap: 6px; color: var(--champ); margin-bottom: 12px; }.pscr .metric .top svg { width: 14px; height: 14px; }.pscr .metric .top .flame { width: 10px; height: 13px; }.pscr .metric .n { font-family: var(--font-display); font-size: 34px; line-height: 0.9; }.pscr .metric .l { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px; }.pscr .level .xp-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }.pscr .level .lv { font-size: 12.5px; font-weight: 600; }.pscr .level .lv em { font-style: normal; color: var(--champ); }.pscr .level .xp { font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink-dim); }.pscr .qa__h { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 1px 3px; }.pscr .qa { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }.pscr .qa__ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--hair); }.pscr .qa__ic svg { width: 16px; height: 16px; }.pscr .qa__tx { flex: 1; }.pscr .qa__tx .a { font-size: 12.5px; font-weight: 600; }.pscr .qa__tx .b { font-size: 10px; color: var(--ink-dim); margin-top: 2px; }.pscr .qa__tx .b code { font-family: ui-monospace, monospace; color: var(--champ); letter-spacing: 0.04em; }.pscr .member { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.pscr .member .a { font-size: 12.5px; font-weight: 600; }.pscr .member .b { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #5ec27e; margin-top: 3px; }.pscr .member .b .dot { width: 5px; height: 5px; border-radius: 50%; background: #5ec27e; box-shadow: 0 0 6px #5ec27e; }.pscr .checkin { display: flex; flex-direction: column; height: 100%; text-align: center; }.pscr .checkin__top { padding: 10px 0 4px; }.pscr .checkin__top .title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 0.96; letter-spacing: 0.005em;
  text-transform: uppercase; white-space: nowrap;
}.pscr .checkin__sub { font-size: 11px; color: var(--ink-dim); margin: 7px 0 16px; }.pscr .checkin__badge { align-self: center; margin-bottom: 16px; }.pscr .qr {
  align-self: center; width: min(186px, 80%);
  background: #fbfaf6; border-radius: 18px; padding: 17px;
  box-shadow: 0 30px 56px -26px rgba(0,0,0,0.9);
}.pscr .qr img { width: 100%; display: block; border-radius: 7px; }.pscr .qr__valid { margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #5ec27e; font-weight: 600; }.pscr .qr__valid svg { width: 12px; height: 12px; }.pscr .qr__mail { margin-top: 5px; font-family: ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.06em; color: #8a857a; }.pscr .steps { margin-top: auto; text-align: left; padding-top: 18px; }.pscr .steps__h { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 11px; }.pscr .step { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; }.pscr .step .n {
  width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--champ);
  border: 1px solid color-mix(in srgb, var(--champ) 40%, transparent);
}.pscr .step p { font-size: 10.5px; line-height: 1.45; color: var(--ink-dim); }.pscr .hist__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }.pscr .hstat { padding: 13px 10px; text-align: center; }.pscr .hstat .top { display: grid; place-items: center; margin-bottom: 8px; color: var(--champ); }.pscr .hstat .top svg { width: 15px; height: 15px; }.pscr .hstat .n { font-family: var(--font-display); font-size: 25px; line-height: 0.9; }.pscr .hstat .l { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }.pscr .sess { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 8px; }.pscr .sess__tick {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, #5ec27e 50%, transparent);
  background: color-mix(in srgb, #5ec27e 10%, transparent); color: #5ec27e;
}.pscr .sess__tick svg { width: 11px; height: 11px; }.pscr .sess__tx { flex: 1; min-width: 0; }.pscr .sess__tx .a { font-size: 12px; font-weight: 600; }.pscr .sess__tx .b { font-family: ui-monospace, monospace; font-size: 9px; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.04em; }.pscr .sess__dur { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600; color: #5ec27e; flex: 0 0 auto; }.pscr .chips { display: flex; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }.pscr .chip {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em;
  padding: 6px 11px; border-radius: 999px; color: var(--ink-dim);
  border: 1px solid var(--hair); background: rgba(255,255,255,0.015);
  display: inline-flex; align-items: center; gap: 4px;
}.pscr .chip.on { color: #14110b; background: linear-gradient(150deg, var(--champ), var(--bronze)); border-color: transparent; font-weight: 600; }.pscr .chip em { font-style: normal; opacity: 0.7; }.pscr .toggle-row { display: flex; align-items: center; gap: 8px; padding: 12px 1px 8px; font-size: 10px; color: var(--ink-faint); }.pscr .toggle-row .sw { width: 26px; height: 15px; border-radius: 999px; background: #2a2825; position: relative; flex: 0 0 auto; }.pscr .toggle-row .sw::after { content:""; position:absolute; left:2px; top:2px; width:11px; height:11px; border-radius:50%; background: var(--ink-faint); }.pscr .chl { padding: 13px; margin-bottom: 9px; }.pscr .chl__top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }.pscr .chl__ic {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--champ); border: 1px solid color-mix(in srgb, var(--champ) 26%, var(--hair));
  background: color-mix(in srgb, var(--bronze) 8%, transparent);
}.pscr .chl__ic svg { width: 17px; height: 17px; }.pscr .chl__tx { flex: 1; min-width: 0; }.pscr .chl__tx .a { font-size: 12.5px; font-weight: 600; }.pscr .chl__tx .b { font-size: 10px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }.pscr .chl__xp {
  flex: 0 0 auto; text-align: right;
  font-family: var(--font-display); font-size: 15px; color: var(--champ); line-height: 1;
}.pscr .chl__xp em { display: block; font-family: var(--font-body); font-style: normal; font-size: 7.5px; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: 3px; }.pscr .chl__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.pscr .chl__foot .lab { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--champ) 75%, var(--ink-faint)); display: flex; align-items: center; gap: 5px; }.pscr .chl__foot .cnt { font-family: ui-monospace, monospace; font-size: 9.5px; color: var(--ink-faint); }.pscr .chl .bar { margin-top: 9px; }.pscr .chat-pin { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 16px; }.pscr .av {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: 17px; color: var(--ink);
  background: linear-gradient(150deg, #2c2b29, #131312); border: 1px solid var(--hair);
}.pscr .av--gild { color: var(--champ); border-color: color-mix(in srgb, var(--champ) 42%, var(--hair)); }.pscr .av img { width: 100%; height: 100%; object-fit: cover; }.pscr .chat-pin__tx { flex: 1; min-width: 0; }.pscr .chat-pin__tx .row1 { display: flex; align-items: center; gap: 7px; }.pscr .chat-pin__tx .nm { font-size: 13px; font-weight: 600; }.pscr .chat-pin__tx .msg { font-size: 11px; color: var(--ink-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.pscr .ki-tag {
  font-size: 7px; font-weight: 700; letter-spacing: 0.1em; color: #14110b;
  padding: 2px 5px; border-radius: 4px; background: linear-gradient(150deg, var(--champ), var(--bronze));
}.pscr .contacts__h { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 2px 1px 11px; }.pscr .contact { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--hair-soft); }.pscr .contact:last-child { border-bottom: 0; }.pscr .contact .av { width: 38px; height: 38px; font-size: 15px; }.pscr .contact__tx { flex: 1; min-width: 0; }.pscr .contact__tx .nm { font-size: 12.5px; font-weight: 600; }.pscr .contact__tx .msg { font-size: 10.5px; color: var(--ink-dim); margin-top: 2px; }

@media (max-width: 680px) {.pscr .rail { padding-inline: 16px; }
}