/* ===== Lespagina op de telefoon: eigen ontwerp ===== */
.lm { display: none; }
@media (max-width: 800px) {
  .les-pagina.heeft-mobiel > .les-banner, .les-pagina.heeft-mobiel > .les-body { display: none !important; }
  .lm { display: block; --kleur: var(--accent, var(--geel)); }

  /* hero: beeldvullend */
  .lm-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; margin-top: calc(-1 * var(--melding-h, 0px)); }
  .lm-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.1); animation: lm-kenburns 14s ease-out forwards; }
  @keyframes lm-kenburns { to { transform: scale(1); } }
  .lm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,1) 0%, rgba(13,13,12,0.75) 40%, rgba(13,13,12,0.15) 75%, rgba(13,13,12,0.35) 100%); }
  .lm-hero-inhoud { position: relative; z-index: 1; width: 100%; padding: 0 var(--gutter) 1.6rem; }
  .lm-hero .kicker { display: block !important; color: var(--kleur); margin-bottom: 0.3rem; }
  .lm-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 0.95; margin: 0 0 0.5rem; }
  .lm-lead { color: #d8d3c8; margin: 0 0 0.9rem; font-size: 1.02rem; }
  .lm-chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .lm-chips li { padding: 0.3rem 0.65rem; border: 1px solid rgba(255,255,255,0.3); background: rgba(13,13,12,0.4); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; backdrop-filter: blur(4px); }
  .lm-volgende { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; color: var(--wit); text-decoration: none; font-size: 0.95rem; }
  .lm-volgende .puls { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #7bc27e; box-shadow: 0 0 0 0 rgba(123,194,126,0.7); animation: lm-puls 1.8s infinite; flex: none; }
  @keyframes lm-puls { 70% { box-shadow: 0 0 0 10px rgba(123,194,126,0); } 100% { box-shadow: 0 0 0 0 rgba(123,194,126,0); } }
  .lm-volgende strong { font-family: var(--kop); font-weight: 700; text-transform: uppercase; }
  .lm-hero-knop { display: block; text-align: center; }
  .lm-hero-inhoud > * { opacity: 0; transform: translateY(16px); animation: lm-in 0.6s cubic-bezier(0.2,0.8,0.2,1) forwards; }
  .lm-hero-inhoud > :nth-child(1) { animation-delay: 0.1s; } .lm-hero-inhoud > :nth-child(2) { animation-delay: 0.2s; }
  .lm-hero-inhoud > :nth-child(3) { animation-delay: 0.35s; } .lm-hero-inhoud > :nth-child(4) { animation-delay: 0.45s; }
  .lm-hero-inhoud > :nth-child(5) { animation-delay: 0.55s; } .lm-hero-inhoud > :nth-child(6) { animation-delay: 0.65s; }
  @keyframes lm-in { to { opacity: 1; transform: none; } }

  /* blokken */
  .lm-blok { padding: 2.5rem var(--gutter) 0.5rem; }
  .lm-blok h2 { margin: 0 0 1rem; }
  .lm-sub { color: var(--grijs); margin: -0.5rem 0 1rem; font-size: 0.92rem; }

  /* stappen eerste les: tijdlijn met groeiende lijn */
  .lm-stappen { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.1rem; }
  .lm-stappen::before { content: ""; position: absolute; left: 1.35rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--kleur); transform-origin: top; transform: scaleY(0); transition: transform 1.4s cubic-bezier(0.2,0.8,0.2,1); }
  .lm-stappen.in::before { transform: scaleY(1); }
  .lm-stappen li { display: grid; grid-template-columns: 2.7rem 1fr; gap: 0.9rem; align-items: start; position: relative; }
  .lm-stap-icoon { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--donker); border: 2px solid var(--kleur); color: var(--kleur); position: relative; z-index: 1; }
  .lm-stappen strong { display: block; font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; margin: 0.35rem 0 0.15rem; }
  .lm-stappen p { margin: 0; color: var(--grijs); font-size: 0.93rem; }

  /* trainer(s) */
  .lm-trainers { display: grid; gap: 0.6rem; }
  .lm-trainer { display: grid; grid-template-columns: 4rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--donker); border: 1px solid var(--lijn); color: var(--wit); text-decoration: none; }
  .lm-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: var(--zwart) center 15% / cover no-repeat; border: 2px solid var(--kleur); display: flex; align-items: center; justify-content: center; color: var(--grijs); overflow: hidden; }
  .lm-avatar img { width: 100%; height: 100%; }
  .lm-trainer strong { display: block; font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; line-height: 1.05; }
  .lm-trainer small { color: var(--grijs); font-size: 0.85rem; }
  .lm-trainer > i { color: var(--grijs); }

  /* komende lessen */
  .lm-momenten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
  .lm-moment { display: grid; gap: 0.1rem; padding: 0.8rem 0.9rem; background: var(--donker); border: 1px solid var(--lijn); border-left: 3px solid var(--kleur); color: var(--wit); text-decoration: none; transition: transform 0.15s, background 0.15s; }
  .lm-moment:active { transform: scale(0.97); background: #24221c; }
  .lm-moment small { color: var(--grijs); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; }
  .lm-moment strong { font-family: var(--kop); font-weight: 800; font-size: 1.35rem; line-height: 1; }
  .lm-moment span { color: var(--kleur); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
  .lm-moment:first-child { grid-column: 1 / -1; border-left-width: 5px; }
  .lm-moment:first-child strong { font-size: 1.7rem; }

  /* beeld */
  .lm-beeld { padding: 2rem 0 0.5rem; }
  .lm-beeld-rij { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 0 var(--gutter) 0.3rem; scrollbar-width: none; }
  .lm-beeld-rij::-webkit-scrollbar { display: none; }
  .lm-beeld-rij::after { content: ""; flex: 0 0 1px; }
  .lm-beeld-rij img { flex: 0 0 78%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; }

  /* vragen */
  .lm-faq { display: grid; gap: 0.5rem; }
  .lm-faq details { background: var(--donker); border: 1px solid var(--lijn); }
  .lm-faq summary { list-style: none; cursor: pointer; padding: 0.95rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 1rem; }
  .lm-faq summary::-webkit-details-marker { display: none; }
  .lm-faq summary::after { content: "+"; color: var(--kleur); font-size: 1.4rem; line-height: 1; transition: transform 0.25s; }
  .lm-faq details[open] summary::after { transform: rotate(45deg); }
  .lm-faq details p { margin: 0; padding: 0 1rem 1rem; color: var(--grijs); animation: lm-in 0.35s ease forwards; }

  /* slot */
  .lm-slot { margin: 2.5rem var(--gutter) 3rem; padding: 1.6rem 1.3rem; background: var(--donker); border: 1px solid var(--lijn); border-top: 4px solid var(--kleur); display: grid; gap: 1rem; }
  .lm-slot blockquote { margin: 0; font-family: var(--kop); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
  .lm-slot cite { display: block; margin-top: 0.5rem; font-style: normal; color: var(--kleur); font-size: 0.85rem; text-transform: uppercase; }
  .lm-slot .btn { text-align: center; }
  .lm-slot .link-plain { justify-self: center; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .lm-hero-media { animation: none; transform: none; }
  .lm-hero-inhoud > * { animation: none; opacity: 1; transform: none; }
  .lm-stappen::before { transform: none; transition: none; }
}
@media (max-width: 800px) {
  .lm-hero-prive { background: radial-gradient(ellipse at 50% 30%, #3a2745 0%, #140f18 75%); display: flex; justify-content: center; align-items: flex-start; padding-top: 5.5rem; }
  .lm-hero-prive img { width: 62%; max-width: 16rem; height: auto; }
  .lm-breed { display: block; text-align: center; }
  .kleur-ladies .lm .btn, .kleur-ladies .lm-hero-knop { background: #c46be0; border-color: #c46be0; color: var(--wit); }
}