/* De UltraGym-app in een interactieve telefoon (src/app-telefoon.mjs) */
.app-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1040px; margin: 0 auto; }
.app-copy { display: flex; flex-direction: column; gap: 22px; }
.app-keuzes, .app-stappen { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.app-keuze { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px 12px 12px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.app-keuze:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13, 20, 28, .08); }
.app-keuze:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-keuze__ic, .app-keuze__nr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-tint); color: var(--accent-700); font-weight: 800; transition: background .2s ease, color .2s ease; }
.app-keuze__ic .ico { width: 21px; height: 21px; }
.app-keuze__tekst { display: flex; flex-direction: column; min-width: 0; padding-top: 9px; }
.app-keuze__tekst b { font-size: 1rem; line-height: 1.25; }
.app-keuze__tekst span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .94rem; line-height: 1.5; color: var(--muted); transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.app-keuze.is-actief { border-color: var(--accent-line); box-shadow: 0 14px 32px rgba(0, 114, 181, .12); }
.app-keuze.is-actief .app-keuze__ic, .app-keuze.is-actief .app-keuze__nr { background: var(--ink); color: var(--geel); }
.app-keuze.is-actief .app-keuze__tekst span { max-height: 9em; opacity: 1; margin-top: 4px; }

/* Telefoon */
.app-media { display: flex; justify-content: center; }
.app-tel { position: relative; width: min(300px, 70vw); padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #2A3442, #0B0F15 40%, #161D27); box-shadow: 0 40px 80px rgba(7, 15, 26, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 0 0 2px #05080C; }
.app-tel::before { content: ''; position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #05080C; }
.app-tel::after { content: ''; position: absolute; right: -3px; top: 22%; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #1B232E; }
.app-tel__scherm { display: flex; flex-direction: column; overflow: hidden; border-radius: 40px; background: #0B0F15; }
.app-tel__balk { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 4px 26px 0 30px; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.app-tel__status { display: flex; align-items: flex-end; gap: 2px; }
.app-tel__status i { width: 3px; border-radius: 1px; background: #fff; }
.app-tel__status i:nth-child(1) { height: 4px; } .app-tel__status i:nth-child(2) { height: 6px; } .app-tel__status i:nth-child(3) { height: 8px; } .app-tel__status i:nth-child(4) { height: 10px; }
.app-tel__status b { width: 20px; height: 10px; margin-left: 5px; border-radius: 3px; background: linear-gradient(90deg, #fff 74%, rgba(255, 255, 255, .35) 74%); }
.app-tel__inhoud { position: relative; display: grid; aspect-ratio: 600 / 1240; background: #fff; }
.app-tel__inhoud > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Schermen wisselen (uitleg) */
.app-scherm { opacity: 0; transform: scale(.98); transition: opacity .45s ease, transform .45s ease; }
.app-scherm.is-actief { opacity: 1; transform: none; }

/* Aanklikbare tegels op het startscherm */
.app-tegel { position: absolute; z-index: 2; width: 22.4%; height: 13.6%; padding: 0; border: 0; border-radius: 14%; background: transparent; cursor: pointer; transition: box-shadow .25s ease, background .25s ease; }
.app-tegel:hover { background: rgba(255, 255, 255, .1); }
.app-tegel.is-actief { box-shadow: 0 0 0 3px var(--geel), 0 0 26px rgba(230, 207, 158, .55); background: rgba(230, 207, 158, .08); }
.app-tegel.is-actief::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--geel); animation: app-puls 1.8s ease-out infinite; }
@keyframes app-puls { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .app-tegel.is-actief::after { animation: none; }
  .app-scherm, .app-keuze__tekst span { transition: none; }
}

@media (max-width: 860px) {
  .app-split { grid-template-columns: 1fr; gap: 28px; }
  .app-media { order: -1; }
  .app-tel { width: min(250px, 66vw); padding: 9px; border-radius: 42px; }
  .app-tel::before { top: 17px; height: 18px; }
  .app-tel__scherm { border-radius: 34px; }
  .app-tel__balk { height: 38px; padding: 3px 20px 0 24px; font-size: .7rem; }
  .app-keuze { padding: 10px 14px 10px 10px; }
}