/* ===== Homepage: dynamiek ===== */

/* hero: lijnen schuiven uit een masker omhoog, video zoomt heel langzaam */
.hero-bg { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-kicker { display: flex; align-items: center; gap: 0.75rem; opacity: 0; transition: opacity 0.8s 0.2s; }
.hero-kicker .lijn { display: block; width: 0; height: 2px; background: var(--geel); transition: width 0.8s 0.2s cubic-bezier(0.2,0.8,0.2,1); }
.hero.klaar .hero-kicker { opacity: 1; }
.hero.klaar .hero-kicker .lijn { width: 3rem; }
.hero h1 .regel { display: block; overflow: hidden; }
.hero h1 .regel > span { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.2,0.8,0.2,1); }
.hero.klaar h1 .regel:nth-child(1) > span { transform: none; transition-delay: 0.35s; }
.hero.klaar h1 .regel:nth-child(2) > span { transform: none; transition-delay: 0.5s; }
.hero.klaar h1 .regel:nth-child(3) > span { transform: none; transition-delay: 0.65s; }
.hero-sub, .hero-actions { opacity: 0; transform: translateY(16px); transition: opacity 0.8s, transform 0.8s; }
.hero.klaar .hero-sub { opacity: 1; transform: none; transition-delay: 1s; }
.hero.klaar .hero-actions { opacity: 1; transform: none; transition-delay: 1.15s; }
.hero-scrollhint {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 2; display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--kop); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--grijs);
  opacity: 0; transition: opacity 0.6s 1.6s;
}
.hero.klaar .hero-scrollhint { opacity: 1; }
.hero-scrollhint span { display: block; width: 1px; height: 2.2rem; background: linear-gradient(var(--geel), transparent); animation: hint 1.6s infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-kicker, .hero-sub, .hero-actions, .hero h1 .regel > span { opacity: 1; transform: none; transition: none; }
  .hero-kicker .lijn { width: 3rem; }
}

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .hero-content > * { opacity: 1; transform: none; transition: none; } }

/* menubalk verbergen bij scrollen */
.site-header { transition: transform 0.3s ease, background 0.25s; }
.site-header.verborgen { transform: translateY(-100%); }

/* vandaag-strip */
.vandaag { background: var(--donker); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 1.25rem var(--gutter) !important; }
.vandaag-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.vandaag-kop { margin: 0; font-family: var(--kop); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.puls { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.6); animation: puls 1.8s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(255,212,0,0.6); } 70% { box-shadow: 0 0 0 10px rgba(255,212,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,212,0,0); } }
.vandaag-lessen { display: flex; gap: 0.6rem; overflow-x: auto; flex: 1; padding-bottom: 0.25rem; scrollbar-width: thin; }
.vandaag-les {
  flex: none;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--kleur);
  background: var(--zwart);
  color: var(--wit);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.vandaag-les:hover { transform: translateY(-2px); border-color: var(--kleur); }
.vandaag-les.voorbij { opacity: 0.35; }
.vandaag-les.bezig { border-color: var(--kleur); box-shadow: 0 0 0 1px var(--kleur) inset; }
.vl-tijd { font-family: var(--kop); font-weight: 800; font-size: 1.15rem; color: var(--kleur); }
.vl-naam { font-family: var(--kop); font-weight: 600; font-size: 1rem; text-transform: uppercase; line-height: 1.05; }
.vl-naam small { display: block; font-size: 0.75rem; color: var(--grijs); text-transform: none; }
.vl-badge { font-family: var(--kop); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; padding: 0.15em 0.5em; background: var(--kleur); color: var(--zwart); }
.vl-badge.stil { background: none; border: 1px solid var(--lijn); color: var(--grijs); }
.vandaag-leeg { margin: 0; color: var(--grijs); }
.vandaag .link-plain { font-size: 1rem; white-space: nowrap; }

/* cijfers */
.cijfers { padding: 3.5rem var(--gutter) 0 !important; }
.cijfers-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
@media (max-width: 700px) { .cijfers-grid { grid-template-columns: 1fr 1fr; } }
.cijfer { background: var(--zwart); padding: 1.75rem 1.5rem; }
.cijfer strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--geel); }
.cijfer span { color: var(--grijs); }

/* galerij: iets levendiger */
.tile img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; filter: saturate(0.85); }
.tile:hover img { transform: scale(1.06); filter: saturate(1.1); }

/* ===== Homepage-secties met foto's ===== */
.kicker { font-family: var(--kop); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; color: var(--geel); margin: 0 0 0.4rem; }
.kicker.jeugd { color: #6fb3c8; }
.kicker.ladies { color: #c46be0; }
.btn.ladies { background: #c46be0; color: var(--wit); }
.btn.ladies:hover { background: #a94fc6; }

/* waarom: drie foto-kaarten */
.waarom-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 800px) { .waarom-grid { grid-template-columns: 1fr; } }
.waarom-kaart {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  text-decoration: none; color: var(--wit); background: var(--donker);
}
.waarom-kaart img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2,0.8,0.2,1), filter 0.5s; filter: saturate(0.7) brightness(0.8); }
.waarom-kaart:hover img { transform: scale(1.06); filter: saturate(1) brightness(0.9); }
.waarom-tekst {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}
.waarom-tekst .nr { font-family: var(--kop); font-weight: 800; color: var(--geel); font-size: 1rem; }
.waarom-tekst h3 { font-size: 2.2rem; font-weight: 800; margin: 0.2rem 0 0.4rem; }
.waarom-tekst p { color: #d8d3c8; margin: 0 auto 0.9rem; max-width: 34ch; }
.waarom-tekst .link-plain { font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.waarom-kaart:hover .link-plain { opacity: 1; transform: none; }

/* fotostrip: oneindig schuivend */
.fotostrip { overflow: hidden; padding: 0 !important; margin: 3rem 0 0; }
.fotostrip-baan { display: flex; gap: 6px; width: max-content; animation: strip 40s linear infinite; }
.fotostrip:hover .fotostrip-baan { animation-play-state: paused; }
.fotostrip .tile { flex: none; width: 320px; aspect-ratio: 4 / 3; display: block; overflow: hidden; }
.fotostrip .tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fotostrip-baan { animation: none; } }

/* uitgelicht: afwisselende rijen */
.uitgelicht { max-width: var(--max); margin: 0 auto; padding-top: 3rem !important; }
.rij { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 5rem; }
.rij.omgekeerd .rij-foto { order: 2; }
@media (max-width: 800px) { .rij { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } .rij.omgekeerd .rij-foto { order: 0; } }
.rij-foto .tile { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.rij-foto .tile img { width: 100%; height: 100%; object-fit: cover; }
.rij-tekst h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.rij-tekst p { color: var(--grijs); max-width: 48ch; }
.rij-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.reveal-links { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-rechts { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-links.zichtbaar, .reveal-rechts.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-links, .reveal-rechts { opacity: 1; transform: none; } }

/* cijfers op foto */
.cijfers {
  position: relative; padding: 5rem var(--gutter) !important;
  background-size: cover; background-position: center; background-attachment: fixed;
}
.cijfers::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.cijfers-grid { position: relative; background: none; border: 0; gap: 1rem; }
.cijfer { background: rgba(0,0,0,0.6); border: 1px solid var(--lijn); backdrop-filter: blur(4px); }
@media (max-width: 800px) { .cijfers { background-attachment: scroll; } }

/* trainers teaser */
.trainers-teaser { padding-top: 5rem !important; }
.trainers-rij { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--kolommen, 3), 1fr); gap: 1.5rem; }
@media (max-width: 800px) { .trainers-rij { grid-template-columns: 1fr; } }
.trainer-kaart { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; color: var(--wit); background: var(--donker); }
.trainer-kaart img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6); transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s; }
.trainer-kaart:hover img { transform: scale(1.05); filter: saturate(1); }
.trainer-kaart > div { position: absolute; inset: auto 0 0 0; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); }
.trainer-kaart h3 { font-size: 1.6rem; margin: 0; }
.trainer-kaart p { color: var(--geel); font-family: var(--kop); font-weight: 600; text-transform: uppercase; margin: 0.2rem 0 0; font-size: 0.95rem; }
.trainer-kaart.tekst { display: flex; flex-direction: column; justify-content: center; padding: 2rem; border: 1px solid var(--lijn); }
.trainer-kaart.tekst .groot { font-family: var(--kop); font-weight: 800; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--wit); margin: 0 0 0.75rem; }
.trainer-kaart.tekst p:not(.groot) { color: var(--grijs); text-transform: none; font-family: var(--tekst); font-weight: 400; font-size: 1rem; margin-bottom: 1.25rem; }
.trainer-kaart.tekst .link-plain { align-self: flex-start; }

/* reviews */
.reviews { background: var(--donker); }
.reviews-slider { max-width: 60ch; margin: 0 auto; position: relative; min-height: 9rem; }
.review { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.6s, transform 0.6s; pointer-events: none; }
.review.actief { opacity: 1; transform: none; position: relative; pointer-events: auto; }
.review p { font-family: var(--kop); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; margin: 0 0 1rem; }
.review footer { color: var(--geel); font-family: var(--kop); font-weight: 600; text-transform: uppercase; }
.reviews-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.reviews-dots button { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid var(--grijs); background: none; cursor: pointer; padding: 0; }
.reviews-dots button.actief { background: var(--geel); border-color: var(--geel); }

/* cta op foto */
.cta-foto { position: relative; background-size: cover; background-position: center; background-attachment: fixed; padding: 7rem var(--gutter) !important; }
.cta-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.3) 100%); }
.cta-foto-inner { position: relative; max-width: var(--max); margin: 0 auto; }
.cta-foto h2 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-bottom: 1rem; }
.cta-foto p { color: #d8d3c8; max-width: 44ch; }
@media (max-width: 800px) { .cta-foto { background-attachment: scroll; } }

/* ===== Lichtere secties: afwisseling in grijstinten, geen wit ===== */
.licht { background: var(--licht); color: var(--wit); }
.licht h2, .licht h3 { color: var(--wit); }
.licht .rij-tekst p, .licht .section-head p { color: #b3aea4; }
.licht .rij-foto .tile { box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.uitgelicht.licht { max-width: none; padding: 5rem var(--gutter) 2rem !important; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.uitgelicht.licht .rij { max-width: var(--max); margin-left: auto; margin-right: auto; }
.uitgelicht.licht .rij:last-child { margin-bottom: 3rem; }
.reviews.licht { background: var(--licht-2); border-top: 1px solid var(--lijn); }

/* zachte gloed achter donkere secties, zodat het niet vlak zwart is */
.waarom, .trainers-teaser, .contact {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 212, 0, 0.07), transparent 70%);
}

.trainer-kaart .trainer-geen-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--lijn); background: var(--donker); margin: 0; border: 0; aspect-ratio: auto; }
@media (max-width: 800px) { .trainers-rij { grid-template-columns: 1fr 1fr !important; gap: 0.75rem; } .trainer-kaart h3 { font-size: 1.2rem; } .trainer-kaart p { font-size: 0.8rem; } }

.tile { cursor: default; }

/* trainers als uitklappanelen (zoals op Ons verhaal) */
.trainers-panelen { max-width: var(--max); margin: 0 auto; display: flex; gap: 0.6rem; height: 30rem; }
.tr-paneel { position: relative; flex: 1; min-width: 0; cursor: pointer; color: var(--wit); background: var(--donker) center / cover no-repeat; overflow: hidden; transition: flex 0.6s cubic-bezier(0.2,0.8,0.2,1); border: 1px solid var(--lijn); }
.tr-paneel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,0.98) 0%, rgba(13,13,12,0.55) 50%, rgba(13,13,12,0.2) 100%); transition: background 0.4s; }
.tr-paneel.actief { flex: 2.6; }
.tr-paneel-kop { position: absolute; left: 1.5rem; bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.2rem; transition: bottom 0.5s; }
.tr-paneel-kop .nr { color: var(--geel); font-family: var(--kop); font-weight: 800; }
.tr-paneel-kop strong { font-family: var(--kop); font-weight: 800; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.tr-paneel-tekst { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; max-width: 44ch; color: #d8d3c8; opacity: 0; transform: translateY(12px); transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; display: grid; gap: 0.5rem; }
.tr-paneel-tekst em { font-style: normal; color: var(--geel); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; }
.tr-paneel-tekst .link-plain { justify-self: start; font-size: 1rem; }
.tr-paneel.actief .tr-paneel-kop { bottom: 10.5rem; }
.tr-paneel.actief .tr-paneel-tekst { opacity: 1; transform: none; }
.tr-paneel:not(.actief):hover::before { background: linear-gradient(to top, rgba(13,13,12,0.9), rgba(13,13,12,0.15)); }
.tr-paneel:not(.actief) .tr-paneel-kop strong { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.4rem; white-space: nowrap; }
.tr-paneel:not(.actief) .tr-paneel-kop { bottom: 1.5rem; left: 1.1rem; }
@media (max-width: 800px) {
  .trainers-panelen { flex-direction: column; height: auto; gap: 0.5rem; }
  .tr-paneel { min-height: 5rem; }
  .tr-paneel.actief { min-height: 20rem; flex: none; }
  .tr-paneel:not(.actief) .tr-paneel-kop strong { writing-mode: horizontal-tb; transform: none; font-size: 1.4rem; }
  .tr-paneel:not(.actief) .tr-paneel-kop { flex-direction: row; align-items: baseline; gap: 0.6rem; bottom: 1.1rem; left: 1.1rem; }
  .tr-paneel.actief .tr-paneel-kop { bottom: auto; top: 1.1rem; }
  .tr-paneel.actief .tr-paneel-tekst { bottom: 1.1rem; }
}


/* schakelaar Team / Ladies-only boven de trainerpanelen */
.trainers-schakel { max-width: var(--max); margin: -1rem auto 1.25rem; display: flex; gap: 0.4rem; }
.trainers-schakel button { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: 1px solid var(--lijn); color: var(--grijs); cursor: pointer; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 1rem; padding: 0.55rem 1rem; transition: all 0.15s; }
.trainers-schakel button:hover { color: var(--wit); }
.trainers-schakel button.actief { background: var(--geel); border-color: var(--geel); color: var(--zwart); }
.trainers-schakel button[data-groep="ladies"].actief { background: #c46be0; border-color: #c46be0; color: var(--wit); }
.tr-paneel.ladies { background: linear-gradient(135deg, #2b1d33, #140f18); }
.tr-paneel.ladies .tr-paneel-kop .nr, .tr-paneel.ladies .tr-paneel-tekst em { color: #c46be0; }
.tr-paneel.ladies::before { background: linear-gradient(to top, rgba(20,15,24,0.95), rgba(20,15,24,0.3)); }
.tr-paneel.ladies:not(.actief):hover::before { background: linear-gradient(to top, rgba(20,15,24,0.9), rgba(20,15,24,0.2)); }
.tr-paneel.ladies .tr-paneel-kop strong::before { content: "\f221"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #c46be0; font-size: 0.6em; margin-right: 0.4rem; vertical-align: middle; }
.tr-paneel { opacity: 0; transform: translateY(12px); transition: flex 0.6s cubic-bezier(0.2,0.8,0.2,1), opacity 0.4s, transform 0.4s; }
.tr-paneel.in { opacity: 1; transform: none; }
.trainers-teaser.ladies .section-head p::after { content: " Ladies-only lessen worden gegeven door onze trainsters."; }

/* trainster-icoon in de panelen */
.tr-paneel .tr-icoon { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 9rem; height: 9rem; transition: top 0.5s, width 0.5s, height 0.5s; }
.tr-paneel.actief .tr-icoon { top: 34%; width: 12rem; height: 12rem; }
.tr-paneel:not(.actief) .tr-icoon { width: 5rem; height: 5rem; top: 3.5rem; }
.tr-icoon img { width: 100%; height: 100%; }
.tr-paneel.ladies::before { background: linear-gradient(to top, rgba(20,15,24,0.95) 0%, rgba(20,15,24,0.3) 45%, transparent 100%); }
@media (max-width: 800px) { .tr-paneel.actief .tr-icoon { top: 40%; width: 8rem; height: 8rem; } .tr-paneel:not(.actief) .tr-icoon { width: 3rem; height: 3rem; top: 50%; left: auto; right: 1rem; transform: translateY(-50%); } }

.tr-icoon { display: flex; align-items: center; justify-content: center; }
.tr-icoon img { width: 100%; height: 100%; display: block; }


/* trainers: op desktop panelen, op de telefoon een compacte swipe-rij met ronde portretten */
.tr-avatar { display: none; }
@media (max-width: 800px) {
  .trainers-panelen { flex-direction: row !important; height: auto !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); gap: 0.6rem; margin: 0 calc(-1 * var(--gutter)) !important; padding: 0 var(--gutter) 0.4rem !important; scrollbar-width: none; }
  .trainers-panelen::after { content: ""; flex: 0 0 1px; }
  .trainers-panelen::-webkit-scrollbar { display: none; }
  .trainers-panelen .tr-paneel, .trainers-panelen .tr-paneel.actief, .trainers-panelen .tr-paneel:not(.actief) {
    flex: 0 0 58%; min-height: 0; aspect-ratio: auto; background-image: none !important; background: var(--donker);
    scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 0.9rem 1rem; cursor: default;
  }
  .trainers-panelen .tr-paneel.ladies { background: linear-gradient(135deg, #2b1d33, #140f18); }
  .trainers-panelen .tr-paneel::before { display: none; }
  .trainers-panelen .tr-avatar { display: flex; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: var(--zwart) center 15% / cover no-repeat; border: 3px solid var(--geel); color: var(--grijs); font-size: 2rem; margin-bottom: 0.8rem; flex: none; }
  .trainers-panelen .tr-paneel .tr-icoon, .trainers-panelen .tr-paneel.actief .tr-icoon, .trainers-panelen .tr-paneel:not(.actief) .tr-icoon { position: static; transform: none; width: 6.5rem; height: 6.5rem; margin-bottom: 0.8rem; flex: none; }
  .trainers-panelen .tr-paneel .tr-paneel-kop, .trainers-panelen .tr-paneel.actief .tr-paneel-kop, .trainers-panelen .tr-paneel:not(.actief) .tr-paneel-kop { position: static; flex-direction: column; align-items: center; gap: 0.15rem; }
  .trainers-panelen .tr-paneel .tr-paneel-kop .nr { display: none; }
  .trainers-panelen .tr-paneel .tr-paneel-kop strong, .trainers-panelen .tr-paneel:not(.actief) .tr-paneel-kop strong { writing-mode: horizontal-tb; transform: none; font-size: 1.2rem; white-space: normal; line-height: 1.05; }
  .trainers-panelen .tr-paneel .tr-paneel-kop strong::before { display: none; }
  .trainers-panelen .tr-paneel .tr-paneel-tekst, .trainers-panelen .tr-paneel.actief .tr-paneel-tekst { position: static; opacity: 1; transform: none; max-width: none; gap: 0.35rem; margin-top: 0.2rem; justify-items: center; }
  .trainers-panelen .tr-paneel-tekst em { font-size: 0.78rem; }
  .trainers-panelen .tr-paneel-tekst > span { display: none; }
  .trainers-panelen .tr-paneel-tekst .link-plain { font-size: 0.85rem; justify-self: center; margin-top: 0.3rem; }
}

/* =========================================================
   HOMEPAGE OP DE TELEFOON: rustiger + meer beweging
   ========================================================= */
.alleen-mobiel { display: none; }
.zweef-cta { display: none; }

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

  /* minder tekst */
  .hero-sub { display: none; }
  .hero-actions .link-plain + .link-plain { display: none; }
  .waarom .section-head p, .trainers-teaser .section-head p { display: none; }
  .uitgelicht { display: none; }
  .fotostrip { display: none; }
  .cta-foto .kicker, .cta-foto p:not(.kicker) { display: none; }
  .contact-info > p, .contact-info address, .contact-info .socials, .contact-form { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact { padding-bottom: 2.5rem; }
  section h2 { font-size: clamp(1.8rem, 8vw, 2.2rem); }

  /* animaties alleen van onder, nooit van opzij (voorkomt tekst buiten beeld) */
  .reveal-links, .reveal-rechts { transform: translateY(24px); }

  /* ---- swipe-rijen ---- */
  .swipe-rij, .waarom-grid { 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)); padding: 0 var(--gutter) 0.4rem; scrollbar-width: none; }
  .swipe-rij::-webkit-scrollbar, .waarom-grid::-webkit-scrollbar { display: none; }
  .swipe-rij::after, .waarom-grid::after { content: ""; flex: 0 0 1px; }

  /* Dit is Meliani: drie kaarten opzij */
  .waarom-grid .waarom-kaart { flex: 0 0 72%; aspect-ratio: 4 / 5 !important; scroll-snap-align: start; }
  .waarom { padding-bottom: 1rem !important; }
  .waarom-grid .waarom-kaart { height: auto; }
  .lessen-swipe { padding-top: 1.5rem !important; }
  .waarom-kaart .waarom-tekst p { display: none; }
  .waarom-kaart .waarom-tekst h3 { font-size: 1.7rem; }
  .waarom-kaart .waarom-tekst .link-plain { opacity: 1; transform: none; }

  /* Lessen */
  .lessen-swipe { padding: 3rem var(--gutter) 2.5rem; }
  .lessen-swipe .section-head { margin-bottom: 1rem; }
  .lessen-swipe > .link-plain { display: inline-block; margin-top: 1rem; }
  .ls-kaart { flex: 0 0 44%; scroll-snap-align: start; display: grid; background: var(--donker); border: 1px solid var(--lijn); border-bottom: 3px solid var(--kleur); color: var(--wit); text-decoration: none; overflow: hidden; }
  .ls-foto { display: block; aspect-ratio: 1; background: var(--zwart) center / cover no-repeat; transition: transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
  .ls-tekst { display: grid; padding: 0.6rem 0.7rem 0.7rem; gap: 0.1rem; }
  .ls-tekst strong { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1; }
  .ls-tekst small { color: var(--grijs); font-size: 0.78rem; }

  /* Contact: drie knoppen */
  .contact-knoppen { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1rem; }
  .contact-knoppen a { display: grid; justify-items: center; gap: 0.35rem; padding: 0.9rem 0.3rem; background: var(--donker); border: 1px solid var(--lijn); color: var(--wit); text-decoration: none; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
  .contact-knoppen i { font-size: 1.3rem; color: var(--geel); }

  /* ---- beweging ---- */
  /* koppen schuiven regel voor regel omhoog */
  .kop-masker { display: block; overflow: hidden; }
  .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; }
  /* kaarten gestaffeld van onder */
  .staffel > * { opacity: 0; transform: translateY(22px); 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 */
  .zoom-in img, .zoom-in .ls-foto { transform: scale(1.08); transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1); }
  .zoom-in.in img, .zoom-in.in .ls-foto { transform: scale(1); }

  /* 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); }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .kop-masker > span, .staffel > *, .zoom-in img, .zoom-in .ls-foto { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* contact: drie grote knoppen in plaats van het formulier (desktop) */
.contact-acties { display: grid; gap: 0.9rem; align-content: center; }
.contact-acties a { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.1rem; align-items: center; padding: 1.3rem 1.5rem; background: var(--donker); border: 1px solid var(--lijn); color: var(--wit); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.contact-acties a:hover { border-color: var(--geel); transform: translateX(4px); }
.contact-acties i { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; background: var(--geel); color: var(--zwart); font-size: 1.4rem; }
.contact-acties strong { display: block; font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; }
.contact-acties small { color: var(--grijs); font-size: 0.95rem; }
@media (max-width: 800px) { .contact-acties { display: none; } }