/* =====================================================================
   Telefoonlayout — geldt voor alle pagina's (max 700px breed)
   ===================================================================== */
@media (max-width: 700px) {

  /* ---- algemeen ---- */
  html, body { overflow-x: hidden; }
  h1, .pagina h1 { font-size: clamp(2.1rem, 10.5vw, 3rem) !important; line-height: 0.98; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  section:not(.hero) { padding: 3rem var(--gutter); }
  .section-head { margin-bottom: 1.5rem; }
  .section-head p, .lead { font-size: 1rem; }
  .pagina { padding-top: 6rem; padding-bottom: 3rem; }
  .pagina-kop { margin-bottom: 1.75rem; }
  .kicker { font-size: 0.95rem; }
  .btn { font-size: 1.15rem; padding: 0.7em 1.3em; }
  .cta-balk { padding: 1.4rem 1.2rem; }
  .cta-balk p { font-size: 1.15rem; }
  .cta-balk .btn, .cta-knoppen .btn { width: 100%; text-align: center; }

  /* ---- homepage ---- */
  .hero { min-height: 88svh; padding: 6.5rem var(--gutter) 3.5rem; }
  .hero h1 { font-size: clamp(2.6rem, 13vw, 3.6rem) !important; }
  .hero-kicker { font-size: 1rem; }
  .hero-sub { font-size: 1rem; margin: 1rem 0 1.5rem; }
  .hero-actions { gap: 1.25rem; }
  .hero-scrollhint { display: none; }

  .vandaag-inner { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.6rem; }
  .vandaag-lessen { width: auto; min-width: 0; }
  .vandaag-kop { font-size: 1.05rem; }
  .vandaag-lessen { margin: 0 calc(-1 * var(--gutter)); padding: 0 0 0.3rem var(--gutter); scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; }
  .vandaag-lessen::after { content: ""; flex: 0 0 var(--gutter); }   /* ruimte na het laatste blokje (padding-right telt niet in Safari) */
  .vandaag-les { flex: 0 0 auto; }
  .vandaag .link-plain { align-self: flex-start; font-size: 0.9rem; }

  .waarom-grid { gap: 0.75rem; }
  .waarom-kaart { aspect-ratio: 16 / 10; }
  .waarom-tekst { padding: 1rem 1rem 0.9rem; }
  .waarom-tekst h3 { font-size: 1.6rem; margin: 0.1rem 0 0.2rem; }
  .waarom-tekst p { font-size: 0.9rem; margin-bottom: 0.4rem; }
  .waarom-tekst .link-plain { opacity: 1; transform: none; font-size: 0.85rem; }

  .fotostrip { margin-top: 1.5rem; }
  .fotostrip .tile { width: 200px; }

  .uitgelicht.licht { padding: 2.5rem var(--gutter) 1rem !important; }
  .rij { margin-bottom: 2.25rem; }
  .rij-foto .tile { aspect-ratio: 16 / 10; }
  .rij-tekst h2 { font-size: 1.8rem; }
  .rij-tekst p { font-size: 0.98rem; }
  .rij-acties { margin-top: 1rem; }

  .cijfers { padding: 2.5rem var(--gutter) !important; }
  .cijfer { padding: 1.1rem 1rem; }
  .cijfer strong { font-size: 2.2rem; }
  .cijfer span { font-size: 0.85rem; }

  .trainers-teaser { padding-top: 3rem !important; }
  .trainers-rij { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .trainer-kaart { aspect-ratio: 4 / 5; }
  .trainer-kaart > div { padding: 0.8rem; }
  .trainer-kaart h3 { font-size: 1.15rem; }
  .trainer-kaart p { font-size: 0.75rem; }
  .trainer-kaart.tekst { grid-column: 1 / -1; aspect-ratio: auto; padding: 1.25rem; }
  .trainer-kaart.tekst .groot { font-size: 1.5rem; }

  .reviews-slider { min-height: 11rem; }
  .review p { font-size: 1.2rem; }
  .cta-foto { padding: 4rem var(--gutter) !important; background-attachment: scroll; }
  .cta-foto h2 { font-size: 2.4rem; }

  .contact-grid { gap: 2rem; }
  .contact-info h2 { font-size: 2.2rem; }

  /* ---- Ons verhaal ---- */
  .pagina-inhoud { gap: 1.5rem; }
  .pagina-inhoud .feiten { order: 1; grid-template-columns: 1fr 1fr; margin-top: 0.5rem; }
  .feit { padding: 1rem 0.9rem; }
  .feit strong { font-size: 1.8rem; }
  .feit span { font-size: 0.85rem; }
  .tekst h2 { font-size: 1.7rem; font-weight: 800; line-height: 1; margin: 2rem 0 0.6rem; padding: 0; border: 0; color: var(--wit); }
  .tekst h2::before { content: ""; display: block; width: 2.2rem; height: 3px; background: var(--geel); margin-bottom: 0.6rem; }
  .tekst h2:first-child { margin-top: 0.5rem; }
  .tekst p { font-size: 0.98rem; line-height: 1.6; }
  .tekst strong { font-weight: 600; }
  .pagina-kop .lead { font-size: 1.05rem; }
  .tijdlijn-sectie { margin-top: 2.5rem; padding: 2.5rem var(--gutter) 2.5rem; }
  .tijdlijn-sectie .section-head h2 { font-size: 1.8rem; }
  .tl-jaren { padding: 0; margin-bottom: 1.25rem; }
  .tl-jaren [role=tab] { font-size: 0.85rem; padding-top: 1.2rem; min-width: 0; }
  .tl-slide { padding: 1rem; }
  .tl-slide img { aspect-ratio: 16 / 10; }
  .tl-jaar { font-size: 2rem; }
  .tl-slide h3 { font-size: 1.5rem; }
  .tl-slide p { font-size: 0.95rem; }
  .naar-tijdlijn { bottom: 1rem; }

  /* ---- Lidmaatschappen ---- */
  .looptijd { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 1.5rem; }
  .looptijd button { padding: 0.65rem 0.3rem; font-size: 0.9rem; text-align: center; }
  .looptijd button small { display: none; }
  .looptijd button i { display: none; }
  .looptijd-actie { top: -0.5rem; right: 0.2rem; }
  .tarieven-grid { gap: 1rem; }
  .tarief { padding: 1.5rem 1.25rem; }
  .tarief h3 { font-size: 1.6rem; }
  .tarief .prijs { font-size: 2.5rem; }
  .usp-lijst { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; margin-top: 2rem; }
  .tarieven-extra { margin-top: 2.5rem; }
  .tarieven-extra td { display: block; padding: 0.15rem 0; border: 0; }
  .tarieven-extra tr { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--lijn); }
  .tarieven-extra td:nth-child(2) { font-size: 1.3rem; }
  .inschrijven-blok { padding: 1.4rem 1.2rem; }
  .inschrijven-acties .btn { width: 100%; text-align: center; }

  /* ---- Trainers ---- */
  .pagina .trainers-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .trainer-kaart-site h3 { font-size: 1.1rem; margin: 0 0.75rem 0.1rem; }
  .trainer-kaart-site .rol { margin: 0 0.75rem 0.3rem !important; font-size: 0.75rem; }
  .trainer-kaart-site > p:not(.rol) { display: none; }
  .trainer-kaart-site .meer { margin: auto 0.75rem 0; font-size: 0.8rem; }

  /* ---- FAQ ---- */
  .faq summary { font-size: 1.1rem; padding: 0.9rem 2.2rem 0.9rem 0; }
  .faq details p { font-size: 0.95rem; }

  /* ---- Formulieren (proefles, inschrijven, beheer) ---- */
  .inschrijf-form fieldset { padding: 1.4rem 1rem 1.2rem; margin-bottom: 1rem; }
  .inschrijf-form legend { font-size: 1.05rem; padding: 0 0.4rem; margin-left: 0.4rem; }
  .interesse span { padding: 1rem; }
  .interesse span strong { font-size: 1.25rem; }
  .interesse span small { font-size: 0.85rem; }
  .proefles-layout { gap: 1.5rem; }
  .proefles-info { position: static; }
  .info-kaart { padding: 1.2rem 1.1rem; }
  .stappen li { font-size: 0.75rem; padding: 0.45rem 0.2rem; }
  .gekozen-les { grid-template-columns: 1fr; gap: 0.35rem; }
  .gekozen-les .gl-waarde { font-size: 1.15rem; }
  .verstuur .btn, .stap-knoppen .btn { width: 100%; text-align: center; }

  /* ---- Rooster: dagweergave op de telefoon ---- */
  .rooster-grid, .rooster-legenda { display: none; }
  .dag-weergave { display: block; }
  .dag-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.9rem; }
  .dag-tabs button { background: var(--donker); border: 1px solid var(--lijn); color: var(--grijs); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; padding: 0.45rem 0.1rem; cursor: pointer; line-height: 1.1; }
  .dag-tabs button strong { display: block; font-size: 1.05rem; color: var(--wit); }
  .dag-tabs button.actief { background: var(--geel); border-color: var(--geel); color: var(--zwart); }
  .dag-tabs button.actief strong { color: var(--zwart); }
  .dag-tabs button.vandaag:not(.actief) { border-color: var(--geel); }
  .dag-lijst { display: grid; gap: 0.5rem; }
  .dag-les { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: 0.2rem 0.8rem; align-items: center; background: var(--donker); border: 1px solid var(--lijn); border-left: 4px solid var(--kleur, var(--geel)); padding: 0.7rem 0.8rem; color: var(--wit); text-align: left; font: inherit; cursor: pointer; }
  .dag-les .t { font-family: var(--kop); font-weight: 800; font-size: 1rem; color: var(--kleur, var(--geel)); line-height: 1.1; }
  .dag-les .n { font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; line-height: 1.1; }
  .dag-les .s { grid-column: 2; font-size: 0.78rem; color: var(--grijs); }
  .dag-les .b { grid-column: 3; grid-row: 1 / 3; font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; padding: 0.15em 0.45em; background: var(--wit); color: var(--zwart); }
  .dag-les.vervalt { opacity: 0.5; } .dag-les.vervalt .n { text-decoration: line-through; }
  .dag-les.voorbij { opacity: 0.4; }
  .dag-les.afwijking .b { background: var(--geel); }
  .dag-les.uitgelicht { outline: 2px solid var(--wit); outline-offset: -1px; }
  .dag-les.gefilterd { opacity: 0.25; }
  .dag-leeg { color: var(--grijs); padding: 0.75rem 0; }
  .dag-gesloten { font-size: 0.85rem; color: var(--grijs); margin: 0 0 0.6rem; }
  .dag-gesloten i { color: var(--geel); margin-right: 0.3rem; }
  .dag-prive { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.6rem; background: none; border: 1px dashed var(--lijn); color: var(--grijs); padding: 0.7rem 0.9rem; font: inherit; font-size: 0.85rem; text-decoration: none; }
  .dag-prive b { color: var(--geel); font-size: 1.1rem; }

  /* ---- Rooster ---- */
  .rooster-pagina { padding-top: 6rem; }
  .rooster-kop { gap: 1rem; margin-bottom: 1rem; }
  .rooster-kop h1 { font-size: 2.4rem !important; }
  .week-nav { width: 100%; justify-content: space-between; }
  .week-titel { min-width: 0; flex: 1; }
  .rooster-intro { font-size: 0.85rem; }
  .legenda-prive { display: none; }

  /* ---- Footer ---- */
  .site-footer { padding: 2.5rem var(--gutter) 0; }
  .footer-grid { gap: 2rem; }
  .footer-locatie iframe { aspect-ratio: 16 / 9; }
}

/* ===== Tweede ronde telefoon ===== */
@media (max-width: 700px) {
  /* koppen: niet midden in een woord afbreken; iets kleiner zodat lange woorden passen */
  h1, .pagina h1 { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; overflow-wrap: normal; hyphens: manual; }

  /* Ons verhaal: duidelijke hiërarchie — intro wit en groter, koppen met gele balk links, tekst grijs */
  .pagina-kop .lead { color: var(--wit); font-size: 1.08rem; line-height: 1.55; }
  .tekst h2::before { display: none; }
  .tekst h2 { font-size: 1.45rem; letter-spacing: 0.02em; margin: 2.25rem 0 0.7rem; padding-left: 0.85rem; border-left: 4px solid var(--geel); line-height: 1.1; }
  .tekst h2:first-child { margin-top: 0; }
  .tekst p { color: var(--grijs); font-size: 0.98rem; }
  .tekst p strong { color: var(--wit); }
  .tekst p a { color: var(--geel); text-decoration: underline; text-underline-offset: 3px; }
  .pagina-inhoud .feiten { border-top: 1px solid var(--lijn); }
  .naar-tijdlijn { display: none; }                 /* zwevende pijl niet op de telefoon: tijdlijn staat direct onder de tekst */
  .tijdlijn-sectie .section-head { text-align: left; }
  .tijdlijn-sectie .section-head p { margin-left: 0; }

  /* rooster: weeknavigatie op één regel */
  .rooster-kop { flex-direction: column; align-items: stretch; }
  .week-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; }
  .week-nav .deze-week { grid-column: 1 / -1; width: 100%; justify-self: stretch; padding: 0.5rem; }
  .week-titel { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
  .weeknummer { font-size: 1.35rem; }
  .weekdatums { margin: 0; font-size: 0.85rem; }

  /* lidmaatschappen: knoppen volle breedte, kaarten iets compacter */
  .tarief-acties { width: 100%; }
  .tarief-acties .btn { width: 100%; text-align: center; }
  .tarief .prijs { font-size: 2.3rem; }
  .tarief li { padding: 0.35rem 0 0.35rem 1.3rem; font-size: 0.95rem; }
  .tarief .voor { min-height: 0; }

  /* trainers */
  .tp-grid { grid-template-columns: 1fr; }
  .tp-grid img { max-width: 10rem; }

  /* formulieren: alles onder elkaar, grote invoervelden */
  .velden { grid-template-columns: 1fr; }
  .velden input, .velden select, .velden textarea, .datum-velden input, .datum-velden select { font-size: 16px; }   /* voorkomt inzoomen op iOS */
  .keuze span { padding: 0.6rem 0.9rem; font-size: 0.95rem; }
  .interesse-rij { grid-template-columns: 1fr; }

  /* contact op de homepage */
  .contact-form .btn { width: 100%; text-align: center; }
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; }

  /* footer: compacter */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-locatie { grid-column: 1 / -1; }
  .site-footer h4 { font-size: 1.1rem; }
  .footer-links li { margin-bottom: 0.3rem; font-size: 0.92rem; }
  .footer-onder { flex-direction: column; align-items: flex-start; gap: 0.3rem; font-size: 0.8rem; }
}


/* ===== Simpeler op de telefoon ===== */
@media (max-width: 700px) {
  /* lidmaatschappen: het inschrijfblok onderaan is dubbelop (elk pakket heeft al een knop) */
  .inschrijven-blok { display: none; }
  .tarieven-extra .noot { display: none; }
  /* extra links onder de hoofdknop verbergen */
  .tarief-acties .link-klein, .hero-actions .link-plain:nth-child(2), .cta-balk .link-plain, .cta-knoppen .link-plain, .les-banner .link-plain { display: none; }
  .cta-foto .rij-acties .link-plain { display: none; }
  /* homepage: minder secties */
  .fotostrip { display: none; }
  .reviews-dots { display: none; }
  .trainer-kaart.tekst { display: none; }
  /* proefles: alleen de essentie naast het formulier */
  .proefles-info .info-kaart:first-child { display: none; }
  /* lespagina: 'ook bij Meliani' en de quote weg */
  .les-quote, .andere-lessen { display: none; }
  /* rooster: legenda-uitleg kort */
  .rooster-noot { font-size: 0.85rem; }
  /* footer: alleen het nodige */
  .footer-social + .sponsor-kop, .sponsor-tekst, .sponsor-logos { display: none; }
  .footer-locatie iframe { display: none; }

  /* Ons verhaal en andere tekstpagina's: alinea voor alinea in beeld tijdens het scrollen */
  .tekst > h2, .tekst > p, .feiten, .aanbod-blok > *, .pagina-inhoud .tekst > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .tekst > h2.zichtbaar, .tekst > p.zichtbaar, .feiten.zichtbaar, .aanbod-blok > .zichtbaar, .pagina-inhoud .tekst > .zichtbaar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tekst > h2, .tekst > p, .feiten { opacity: 1; transform: none; } }

/* ===== Inschrijven op de telefoon: pakket en looptijd als nette rasters ===== */
@media (max-width: 700px) {
  .inschrijf-form .veld-label { display: block; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; color: var(--grijs); margin: 0.9rem 0 0.4rem; }
  .inschrijf-form .veld-label:first-of-type { margin-top: 0; }
  #pakketten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.25rem; }
  #pakketten .keuze span { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 0.85rem 0.5rem; font-size: 1.05rem; }
  .looptijd-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.25rem; }
  .looptijd-rij .keuze span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 0.7rem 0.3rem; font-size: 0.85rem; line-height: 1.15; text-align: center; min-height: 3.6rem; }
  .looptijd-rij .keuze span i { display: none; }
  .looptijd-rij .keuze span small { margin: 0.25rem 0 0; }
  .snelkeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .snelkeuze button { width: 100%; padding: 0.55rem 0.3rem; font-size: 0.78rem; }
  .snelkeuze button:first-child { grid-column: 1 / -1; }
}

/* footer: inklapbare kopjes op de telefoon */
@media (max-width: 800px) {
  .footer-klap { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--lijn); margin: 0; }
  .footer-klap::after { content: "+"; font-size: 1.3rem; color: var(--geel); transition: transform 0.25s; }
  .footer-klap[aria-expanded="true"]::after { transform: rotate(45deg); }
  .footer-klap-inhoud { display: none; padding-top: 0.6rem; }
  .footer-klap-inhoud.open { display: block; animation: klap-open 0.3s ease; }
  @keyframes klap-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .footer-locatie .footer-klap { margin-top: 1rem; }
  .footer-col:has(.footer-klap) { grid-column: 1 / -1; }
}

/* =========================================================
   SUBPAGINA'S OP DE TELEFOON: rustiger + meer beweging
   ========================================================= */
.zweef-cta { display: none; }
@media (max-width: 800px) {
  /* labeltjes boven koppen weg, behalve bovenaan de pagina */
  main .kicker { display: none; }
  main .les-banner .kicker, main .vh-hero .kicker, main .team-kop .kicker, main .pagina-kop .kicker, main .td-intro .kicker { display: block; }
  main h2 { font-size: clamp(1.7rem, 7.5vw, 2.1rem); }

  /* animaties alleen van onder */
  .reveal-links, .reveal-rechts { transform: translateY(24px) !important; }
  .reveal-links.zichtbaar, .reveal-rechts.zichtbaar { transform: none !important; }

  /* Lees verder */
  .ingeklapt { display: none !important; }
  .kap { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .lees-verder { display: flex; width: max-content; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.8rem; background: none; border: 0; padding: 0; color: var(--geel); cursor: pointer; font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; }
  .lees-verder i { font-size: 0.75em; }
  .uitklap-in { animation: uitklap 0.45s cubic-bezier(0.2,0.8,0.2,1) both; }
  @keyframes uitklap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* koppen uit een masker */
  .kop-masker { display: block; overflow: hidden; padding-bottom: 0.05em; }
  .kop-masker > span { display: block; transform: translateY(105%); transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
  .kop-in .kop-masker > span { transform: none; }

  /* gestaffeld van onder */
  .staffel > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2,0.8,0.2,1); }
  .staffel.in > * { opacity: 1; transform: none; }

  /* foto's zoomen licht in */
  .les-detail-foto.zoom-in, .vh-begin figure.zoom-in, .ab-enkel-foto.zoom-in, .td-foto.zoom-in { overflow: hidden; }
  .zoom-in > img, .zoom-in > video { transform: scale(1.08); transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1); }
  .zoom-in.in > img, .zoom-in.in > video { transform: scale(1); }

  /* swipe-rijen (gedeeld) */
  .swipe { display: flex !important; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin: 0 calc(-1 * var(--gutter)) !important; padding: 0 var(--gutter) 0.4rem !important; scrollbar-width: none; }

  /* --- lespagina's, scholen, bedrijven --- */
  .les-kaarten { display: flex !important; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin: 0 calc(-1 * var(--gutter)) !important; padding: 0 var(--gutter) 0.4rem !important; scrollbar-width: none; }
  .les-kaarten::-webkit-scrollbar { display: none; }
  .les-kaarten::after { content: ""; flex: 0 0 1px; }
  .les-kaarten .les-kaart { flex: 0 0 78%; scroll-snap-align: start; }
  .les-detail-foto img, .les-detail-video video { aspect-ratio: 16 / 10 !important; max-height: 50svh; }
  .les-banner .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* --- ons verhaal --- */
  .vh-hero .lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vh-begin img { aspect-ratio: 16 / 10 !important; }
  .vh-voorwie .section-head p, .vh-drie .section-head p { display: none; }
  .vh-meer-kaarten { display: flex !important; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)) !important; padding: 0 var(--gutter) 0.4rem !important; scrollbar-width: none; }
  .vh-meer-kaarten::-webkit-scrollbar { display: none; }
  .vh-meer-kaarten > div { flex: 0 0 75%; scroll-snap-align: start; }
  .vh-waarde p { font-size: 0.85rem; }

  /* --- lidmaatschappen: pakketten naast elkaar om te swipen --- */
  .tarieven-grid { display: flex !important; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin: 0 calc(-1 * var(--gutter)) !important; padding: 1.2rem var(--gutter) 0.6rem !important; scrollbar-width: none; align-items: stretch; }
  .tarieven-grid::-webkit-scrollbar { display: none; }
  .tarieven-grid::after { content: ""; flex: 0 0 1px; }
  .tarieven-grid .tarief { flex: 0 0 82%; scroll-snap-align: start; }
  .usp-lijst { display: none !important; }

  /* --- trainerpagina --- */
  .td-hero .lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* zwevende proefles-knop */
  .zweef-cta { display: inline-flex; align-items: center; gap: 0.5rem; position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
    transform: translate(-50%, 150%); padding: 0.85rem 1.4rem; background: var(--geel); color: var(--zwart); text-decoration: none;
    font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1); white-space: nowrap; }
  .zweef-cta.zichtbaar { transform: translate(-50%, 0); }
  body:has(main.kleur-ladies) .zweef-cta { background: #c46be0; color: var(--wit); }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .kop-masker > span, .staffel > *, .zoom-in > img, .zoom-in > video { transform: none !important; opacity: 1 !important; transition: none !important; }
  .uitklap-in { animation: none; }
}

.alleen-mobiel { display: none; }
@media (max-width: 800px) { .alleen-mobiel { display: block; } }

/* ===== Trainerpagina op de telefoon: eigen ontwerp ===== */
.tm { display: none; }
@media (max-width: 800px) {
  .td-desktop { display: none !important; }
  .trainer-pagina { padding: 0 !important; }
  .tm { display: block; --acc: var(--geel); }
  .tm.ladies { --acc: #c46be0; }

  /* hero: portret over de volle breedte */
  .tm-hero { position: relative; height: 72svh; min-height: 26rem; overflow: hidden; margin-top: calc(-1 * var(--melding-h, 0px)); }
  .tm-hero-foto { position: absolute; inset: 0; background: center 15% / cover no-repeat; transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.2,0.8,0.2,1); }
  .tm.klaar .tm-hero-foto { transform: scale(1); }
  .tm-hero.zonder-foto { height: 58svh; min-height: 22rem; background: radial-gradient(ellipse at 50% 35%, #3a2745 0%, #140f18 70%); }
  .tm:not(.ladies) .tm-hero.zonder-foto { background: radial-gradient(ellipse at 50% 35%, #2e2a1c 0%, #0d0d0c 70%); }
  .tm-hero-icoon { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 11rem; height: 11rem; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--lijn); }
  .tm-hero-icoon img { width: 100%; height: 100%; }
  .tm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,1) 0%, rgba(13,13,12,0.7) 28%, transparent 58%); }
  .tm-hero-tekst { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--gutter) 1.2rem; }
  .tm-terug { display: inline-flex; align-items: center; gap: 0.4rem; color: #d8d3c8; text-decoration: none; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.4rem; }
  .tm-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 0.92; margin: 0 0 0.35rem; }
  .tm-rol { margin: 0; color: var(--acc); font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; }
  .tm-hero-tekst > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
  .tm.klaar .tm-hero-tekst > * { opacity: 1; transform: none; }
  .tm.klaar .tm-hero-tekst > :nth-child(2) { transition-delay: 0.12s; } .tm.klaar .tm-hero-tekst > :nth-child(3) { transition-delay: 0.24s; }

  /* cijfers */
  .tm-cijfers { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 var(--gutter); border: 1px solid var(--lijn); background: var(--donker); }
  .tm-cijfers div { padding: 0.8rem 0.6rem; text-align: center; border-left: 1px solid var(--lijn); }
  .tm-cijfers div:first-child { border-left: 0; }
  .tm-cijfers strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--acc); }
  .tm-cijfers span { color: var(--grijs); font-size: 0.75rem; }

  /* live: train vandaag/morgen met ... */
  .tm-live { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; margin: 0.8rem var(--gutter) 0; padding: 1rem 1.1rem; background: var(--donker); border: 1px solid var(--lijn); border-left: 5px solid var(--kleur); color: var(--wit); text-decoration: none; }
  .tm-live .puls { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #7bc27e; animation: lm-puls 1.8s infinite; }
  .tm-live small { display: block; color: var(--grijs); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; }
  .tm-live strong { display: block; font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.05; color: var(--kleur); }
  .tm-live-tekst > span { font-size: 0.9rem; }
  .tm-live > i { color: var(--grijs); }
  @keyframes lm-puls { 0% { box-shadow: 0 0 0 0 rgba(123,194,126,0.7); } 70% { box-shadow: 0 0 0 10px rgba(123,194,126,0); } 100% { box-shadow: 0 0 0 0 rgba(123,194,126,0); } }

  /* blokken */
  .tm-blok { padding: 2rem var(--gutter) 0; }
  .tm-blok h2 { margin: 0 0 0.9rem; font-size: 1.7rem; }
  .tm-intro { font-family: var(--kop); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.6rem; }
  .tm-meer p { color: var(--grijs); }
  .tm-leesverder { color: var(--acc) !important; }

  /* week */
  .tm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-bottom: 0.8rem; }
  .tm-week button { position: relative; padding: 0.55rem 0 0.75rem; background: var(--donker); border: 1px solid var(--lijn); color: var(--grijs); font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; cursor: pointer; }
  .tm-week button span { position: absolute; left: 50%; bottom: 0.3rem; width: 0.35rem; height: 0.35rem; margin-left: -0.175rem; border-radius: 50%; background: transparent; }
  .tm-week button.heeft { color: var(--wit); }
  .tm-week button.heeft span { background: var(--acc); }
  .tm-week button.vandaag { border-color: var(--grijs); }
  .tm-week button.actief { background: var(--acc); border-color: var(--acc); color: var(--zwart); }
  .tm-week button.actief span { background: var(--zwart); }
  .tm-dag { display: grid; gap: 0.4rem; }
  .tm-dag.wissel > * { animation: uitklap 0.35s cubic-bezier(0.2,0.8,0.2,1) both; }
  .tm-dagles { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.7rem; align-items: center; padding: 0.7rem 0.8rem; background: var(--donker); border: 1px solid var(--lijn); border-left: 3px solid var(--kleur); }
  .tm-dagles .tijd { font-family: var(--kop); font-weight: 800; font-size: 1.15rem; }
  .tm-dagles .naam { font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; line-height: 1.1; }
  .tm-dagles .naam small { display: block; color: var(--grijs); text-transform: none; font-weight: 400; font-family: var(--tekst); }
  .tm-dagles a { padding: 0.4rem 0.7rem; background: var(--kleur); color: var(--zwart); text-decoration: none; font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; }
  .tm-leeg { color: var(--grijs); margin: 0; }

  /* lessen */
  .tm-lessen { display: flex; gap: 0.5rem; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.3rem; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); }
  .tm-lessen::after { content: ""; flex: 0 0 1px; }
  .tm-lessen::-webkit-scrollbar { display: none; }
  .tm-lessen a { flex: 0 0 auto; scroll-snap-align: start; display: grid; padding: 0.8rem 1rem; min-width: 9.5rem; background: var(--donker); border: 1px solid var(--lijn); border-top: 3px solid var(--kleur); color: var(--wit); text-decoration: none; }
  .tm-lessen strong { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; }
  .tm-lessen small { color: var(--grijs); font-size: 0.8rem; margin-top: 0.2rem; }

  /* privé */
  .tm-prive { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; background: var(--donker); border: 1px solid var(--lijn); border-left: 4px solid var(--acc); }
  .tm-prive > i { font-size: 1.6rem; color: var(--acc); margin-top: 0.2rem; }
  .tm-prive strong { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
  .tm-prive p { color: var(--grijs); margin: 0.3rem 0 0.8rem; font-size: 0.92rem; }

  /* team */
  .tm-team { display: flex; gap: 1rem; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.3rem; scrollbar-width: none; }
  .tm-team::-webkit-scrollbar { display: none; }
  .tm-team a { flex: 0 0 auto; display: grid; justify-items: center; gap: 0.35rem; color: var(--wit); text-decoration: none; }
  .tm-av { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--donker) center 15% / cover no-repeat; border: 2px solid var(--acc); display: flex; align-items: center; justify-content: center; color: var(--grijs); font-size: 1.4rem; overflow: hidden; }
  .tm-av img { width: 100%; height: 100%; }
  .tm-team strong { font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }

  /* slot */
  .tm-slot { margin: 2.5rem var(--gutter) 3rem; padding: 1.5rem 1.3rem; background: var(--donker); border: 1px solid var(--lijn); border-top: 4px solid var(--acc); display: grid; gap: 0.6rem; }
  .tm-slot strong { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; }
  .tm-slot p { margin: 0 0 0.4rem; color: var(--grijs); }
  .tm-slot .btn { text-align: center; }
  .tm.ladies .tm-slot .btn, .tm.ladies .tm-prive .btn { background: #c46be0; border-color: #c46be0; color: var(--wit); }

  /* in beeld komen */
  .tm-uit { opacity: 0; transform: translateY(22px); transition: opacity 0.55s, transform 0.55s cubic-bezier(0.2,0.8,0.2,1); }
  .tm-uit.tm-in { opacity: 1; transform: none; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .tm-hero-foto, .tm-hero-tekst > *, .tm-uit { transform: none !important; opacity: 1 !important; transition: none !important; }
}