/* =========================================================
   App-Screen Mockups — Alpha Gym Empire
   Echte Feature-Screens: QR-Check-in · KI-Coach · Profil
   Erbt Tokens aus styles.css (--ink, --champ, --bronze …)
   ========================================================= */

.scr {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #151414 0%, #0b0b0b 100%);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  isolation: isolate;
}

/* ---- Status bar ---- */
.scr__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.scr__status .sig { display: flex; align-items: center; gap: 4px; }
.scr__status .sig i {
  display: block; width: 3px; height: 9px; border-radius: 1px;
  background: var(--ink);
}
.scr__status .sig i:nth-child(1){ height: 5px; opacity:.9 }
.scr__status .sig i:nth-child(2){ height: 7px; opacity:.95 }
.scr__status .bat {
  width: 22px; height: 11px; border: 1px solid var(--ink-dim);
  border-radius: 3px; position: relative; padding: 1.5px;
}
.scr__status .bat::after {
  content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px;
  background: var(--ink-dim); border-radius: 0 1px 1px 0;
}
.scr__status .bat span { display:block; height:100%; width:72%; background: var(--ink); border-radius:1px; }

/* ---- App header ---- */
.scr__head {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px 12px;
  flex: 0 0 auto;
}
.scr__head .back {
  width: 9px; height: 9px; border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink); transform: rotate(45deg);
  flex: 0 0 auto;
}
.scr__brandrow { display:flex; flex-direction:column; gap:2px; }
.scr__eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--champ) 78%, var(--ink-faint));
}
.scr__title {
  font-family: var(--font-display);
  font-size: 19px; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink);
}
.scr__body { flex: 1 1 auto; min-height: 0; padding: 0 18px; overflow: hidden; }

/* ---- Bottom tab bar ---- */
.scr__tabs {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: end;
  padding: 9px 14px 15px;
  border-top: 1px solid var(--hair-soft);
  background: rgba(0,0,0,0.35);
}
.tab-i { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tab-i b {
  font-weight: 500; font-size: 8px; letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.tab-i .ico { width: 17px; height: 17px; position: relative; opacity: .5; }
.tab-i.is-on b { color: var(--champ); }
.tab-i.is-on .ico { opacity: 1; }
.tab-i.is-on .ico * , .tab-i.is-on .ico::before, .tab-i.is-on .ico::after { border-color: var(--champ); background-color: var(--champ); }

/* icon: home */
.ico--home { border: 0; }
.ico--home::before {
  content:""; position:absolute; left:2px; right:2px; bottom:1px; top:7px;
  border: 1.6px solid var(--ink); border-top: 0;
}
.ico--home::after {
  content:""; position:absolute; left:1px; right:1px; top:1px; height:9px;
  border-top: 1.6px solid var(--ink);
  transform: rotate(0); clip-path: polygon(50% 0, 100% 60%, 0 60%);
  border: 0; background: var(--ink);
  -webkit-mask: linear-gradient(#000,#000); 
}
/* simpler home: triangle + body via box */
.ico--home { display:grid; place-items:center; }
.ico--home::before { content:none; }
.ico--home::after { content:none; }
.ico--home i {
  width: 13px; height: 11px; border: 1.6px solid var(--ink); border-radius: 1px;
  position: relative; margin-top: 3px;
}
.ico--home i::before {
  content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%);
  width:0;height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:6px solid var(--ink);
}

/* icon: qr */
.ico--qr i, .ico--qr i::before, .ico--qr i::after { box-sizing:border-box; }
.ico--qr { display:block; }
.ico--qr::before {
  content:""; position:absolute; left:0; top:0; width:6px; height:6px;
  border: 1.6px solid var(--ink);
}
.ico--qr::after {
  content:""; position:absolute; right:0; top:0; width:6px; height:6px;
  border: 1.6px solid var(--ink);
}
.ico--qr i { position:absolute; left:0; bottom:0; width:6px; height:6px; border:1.6px solid var(--ink); }
.ico--qr i::after { content:""; position:absolute; right:-9px; bottom:0; width:6px; height:6px; background: var(--ink); }

/* icon: chat */
.ico--chat i {
  position:absolute; inset:1px 1px 4px 1px; border:1.6px solid var(--ink);
  border-radius: 3px;
}
.ico--chat i::after {
  content:""; position:absolute; left:3px; bottom:-4px; width:5px; height:5px;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* icon: profile */
.ico--me i { position:absolute; left:50%; top:1px; transform:translateX(-50%); width:7px; height:7px; border:1.6px solid var(--ink); border-radius:50%; }
.ico--me i::after { content:""; position:absolute; left:50%; top:9px; transform:translateX(-50%); width:14px; height:8px; border:1.6px solid var(--ink); border-bottom:0; border-radius:8px 8px 0 0; }

/* =========================================================
   SCREEN 1 · QR Check-in
   ========================================================= */
.scr--checkin .scr__body { display:flex; flex-direction:column; }
.checkin__greet { font-size: 12px; color: var(--ink-dim); margin-bottom: 2px; }
.checkin__streak {
  display:inline-flex; align-items:center; gap:7px;
  font-size: 11px; color: var(--ink); margin-bottom: 14px;
}
.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%);
}
.checkin__streak b { color: var(--champ); font-weight: 600; }

.qr-card {
  background: #fbfbf8; border-radius: 16px;
  padding: 16px; align-self: center;
  width: min(168px, 78%);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,0.85);
  margin-top: 4px;
}
.qr-card img { width: 100%; border-radius: 6px; display:block; }
.qr-card .scan {
  margin-top: 11px; text-align:center;
  font-family: ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #5a564d;
}
.checkin__hint {
  text-align:center; margin-top: 16px;
  font-size: 11px; color: var(--ink-dim); line-height: 1.5;
}
.checkin__cta {
  margin-top: auto; margin-bottom: 4px;
  display: block; text-align:center;
  background: var(--ink); color:#0c0c0c;
  font-size: 12px; font-weight:600; letter-spacing:0.02em;
  padding: 13px; border-radius: 12px;
}

/* =========================================================
   SCREEN 2 · KI-Coach Kollegah Chat
   ========================================================= */
.scr--chat .scr__head { border-bottom: 1px solid var(--hair-soft); padding-bottom: 11px; }
.coach-av {
  width: 32px; height: 32px; border-radius: 50%; flex:0 0 auto;
  background: linear-gradient(150deg, #2a2a2a, #121212);
  border: 1px solid color-mix(in srgb, var(--champ) 40%, var(--hair));
  display:grid; place-items:center;
  font-family: var(--font-display); font-size: 15px; color: var(--champ);
}
.coach-meta { display:flex; flex-direction:column; gap:2px; }
.coach-meta .nm { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.coach-meta .st { display:flex; align-items:center; gap:5px; font-size:9px; color: var(--ink-dim); }
.coach-meta .st .on { width:5px; height:5px; border-radius:50%; background:#46b16b; box-shadow:0 0 6px #46b16b; }

.chat {
  display:flex; flex-direction:column; gap: 9px;
  padding: 14px 0 8px;
}
.chat__day {
  align-self:center; font-size: 8px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.bub {
  max-width: 82%; padding: 9px 11px; font-size: 11.5px; line-height: 1.42;
  border-radius: 13px;
}
.bub--in {
  align-self: flex-start;
  background: #1c1b19; border: 1px solid var(--hair-soft);
  color: var(--ink); border-bottom-left-radius: 4px;
}
.bub--out {
  align-self: flex-end;
  background: linear-gradient(150deg, var(--champ), var(--bronze));
  color: #14110b; font-weight: 450; border-bottom-right-radius: 4px;
}
.bub b { font-weight: 650; }
.chat__input {
  margin-top: auto; display:flex; align-items:center; gap: 9px;
  padding: 9px 12px; margin: 0 -18px -4px; 
  border-top: 1px solid var(--hair-soft); background: rgba(0,0,0,0.3);
}
.chat__input .box {
  flex:1; font-size: 11px; color: var(--ink-faint);
  padding: 9px 13px; border:1px solid var(--hair); border-radius: 20px;
  background: #131211;
}
.chat__input .send {
  width: 30px; height: 30px; flex:0 0 auto; border-radius:50%;
  background: var(--ink); position: relative;
}
.chat__input .send::after {
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:0;height:0; border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left: 8px solid #0c0c0c;
}

/* =========================================================
   SCREEN 3 · Profil & Stats
   ========================================================= */
.scr--profile .scr__body { display:flex; flex-direction:column; gap: 13px; padding-top: 4px; }
.prof__id { display:flex; align-items:center; gap: 12px; }
.prof__av {
  width: 46px; height: 46px; border-radius: 50%; flex:0 0 auto;
  background: linear-gradient(150deg, #2c2c2c, #141414);
  border: 1px solid var(--hair);
  display:grid; place-items:center;
  font-family: var(--font-display); font-size: 19px; color: var(--ink);
}
.prof__who .nm { font-size: 15px; font-weight: 600; }
.prof__who .lv {
  display:inline-flex; align-items:center; gap:6px; margin-top:3px;
  font-size: 10px; letter-spacing: 0.1em; text-transform:uppercase;
  color: var(--champ);
}
.prof__who .lv::before { content:""; width:14px; height:1px; background: color-mix(in srgb, var(--champ) 60%, transparent); }

.xp {
  border: 1px solid var(--hair-soft); border-radius: 12px; padding: 12px 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
.xp__row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.xp__row .a { font-size: 10px; letter-spacing:0.06em; color: var(--ink-dim); text-transform:uppercase; }
.xp__row .b { font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink); }
.xp__bar { height: 7px; border-radius: 4px; background: #201f1d; overflow:hidden; }
.xp__bar i { display:block; height:100%; width:68%; border-radius:4px;
  background: linear-gradient(90deg, var(--bronze), var(--champ)); }

.prof__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.pstat { border:1px solid var(--hair-soft); border-radius: 11px; padding: 11px 8px; text-align:center; }
.pstat .n { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); }
.pstat .n em { font-style: normal; color: var(--champ); font-size: 14px; }
.pstat .l { margin-top: 6px; font-size: 8px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-faint); }

.chal {
  border:1px solid color-mix(in srgb, var(--champ) 26%, var(--hair-soft));
  border-radius: 12px; padding: 12px 13px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--bronze) 9%, transparent), transparent 70%);
}
.chal__top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 9px; }
.chal__top .k { font-size: 9px; letter-spacing:0.14em; text-transform:uppercase; color: var(--champ); }
.chal__top .v { font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink-dim); }
.chal__name { font-size: 12.5px; font-weight:600; margin-bottom: 9px; }
.chal__bar { height:6px; border-radius:4px; background:#201f1d; overflow:hidden; }
.chal__bar i { display:block; height:100%; width:80%; background: linear-gradient(90deg, var(--bronze), var(--champ)); border-radius:4px; }

/* =========================================================
   App scrollytelling — one pinned phone, screens swap on scroll
   Fallback (no-JS / reduced-motion): three phones side by side.
   ========================================================= */
.appstage { position: relative; }
.appstage__rail { display: none; }

/* ---- Fallback layout: three phones in a row (mirrors the old showcase) ---- */
.appstage__stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: center;
}
.appstage__stack .phone:nth-child(2) { transform: translateY(-22px) scale(1.04); z-index: 2; }

/* ---- JS-driven pinned mode ---- */
html.js-anim .appstage { height: 340vh; }
html.js-anim .appstage__pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 6vw, 7rem);
}
html.js-anim .appstage__rail {
  display: flex; flex-direction: column;
  width: clamp(180px, 20vw, 250px);
  border-left: 1px solid var(--hair);
  flex: 0 0 auto;
}
html.js-anim .appstage__rail .aps {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 1.05rem 0 1.05rem 1.3rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  opacity: 0.38;
  transition: opacity .45s var(--ease), border-color .45s var(--ease);
}
html.js-anim .appstage__rail .aps.is-on { opacity: 1; border-left-color: var(--champ); }
.aps__n { font-family: ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--champ); flex: 0 0 auto; }
.aps__t { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; letter-spacing: var(--disp-tracking); color: var(--ink); text-transform: uppercase; }
.aps__t em { display: block; margin-top: 0.35rem; font-style: normal; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--ink-dim); }

/* Device-mockup images carry their own iPhone frame + shadow, so the stack is
   just a sized, frameless box; the screens crossfade inside it. */
.phone__shot { display: block; width: 100%; height: auto; }

html.js-anim .appstage__stack {
  display: block; position: relative;
  height: min(74vh, 470px);
  aspect-ratio: 466 / 936;   /* matches the cropped mockup images */
  width: auto;
  flex: 0 0 auto;
}
html.js-anim .appstage__stack .phone {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
  transform: none;
  opacity: var(--pho, 1);
  will-change: opacity;
}
html.js-anim .appstage__stack .phone .phone__shot {
  width: 100%; height: 100%; object-fit: contain;
}

@media (max-width: 880px) {
  html.js-anim .appstage__rail { display: none; }
  html.js-anim .appstage__stack { height: min(72vh, 540px); }
}
@media (max-width: 560px) {
  .appstage__stack { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .appstage__stack .phone:not(:nth-child(2)) { display: none; }
}