/* ===== Lespagina's (Aanbod) ===== */

/* kleuren – gelijk aan het rooster */
.kleur-recreatief   { --accent: var(--geel); }
.kleur-jeugd        { --accent: #6fb3c8; }
.kleur-ladies       { --accent: #c46be0; }
.kleur-conditioneel { --accent: #e0674b; }
.kleur-senioren     { --accent: #d8d3c8; }
.kleur-parkinson    { --accent: #7bc27e; }
.kleur-gym          { --accent: #8f93ff; }
.kleur-prive        { --accent: #f2f2f2; }


/* ===== lespagina ===== */

.les-banner {
  position: relative; min-height: 70vh; display: flex; align-items: flex-end;
  padding: 8rem var(--gutter) 4rem;
  background-size: cover; background-position: center; background-color: var(--donker);
}
.les-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,1) 0%, rgba(13,13,12,0.75) 45%, rgba(13,13,12,0.35) 100%); }
.les-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.les-banner-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.les-banner .kicker { color: var(--accent); }
.les-banner .kicker i { margin-right: 0.3rem; }
.les-banner h1 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 1rem; }
.les-banner .lead { max-width: 52ch; color: #d8d3c8; }
.les-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 1.75rem; }
.les-chips span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.4); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; }
.les-chips i { color: var(--accent); }
.les-body { padding-top: 3rem; }

.les-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .les-kaarten { grid-template-columns: 1fr; } }
.les-kaart { background: var(--donker); border: 1px solid var(--lijn); border-top: 3px solid var(--accent); padding: 1.6rem 1.5rem; }
.les-kaart > i { font-size: 1.4rem; color: var(--accent); margin-bottom: 0.8rem; display: block; }
.les-kaart h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.5rem; }
.les-kaart p { color: var(--grijs); margin: 0; }

.les-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; margin-top: 4rem; }
@media (max-width: 800px) { .les-detail { grid-template-columns: 1fr; gap: 2rem; } }
.les-detail-foto { position: relative; }
.les-detail-foto img { width: 100%; aspect-ratio: 9 / 11; object-fit: cover; border-top: 4px solid var(--accent); }
.les-detail-foto .klein { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 45%; aspect-ratio: 4 / 3; border: 6px solid #0d0d0c; border-top: 6px solid #0d0d0c; }
@media (max-width: 800px) { .les-detail-foto .klein { right: 0; bottom: -1rem; } .les-detail-tekst { margin-top: 2rem; } }
.les-detail-tekst .kicker { color: var(--accent); }
.les-detail-tekst h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1.25rem; }
.les-punten { list-style: none; margin: 0 0 2rem; padding: 0; }
.les-punten li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--lijn); font-size: 1.05rem; }
.les-punten li:last-child { border-bottom: 1px solid var(--lijn); }
.les-punten i { color: var(--accent); margin-top: 0.3rem; }
.les-tijden .tijden-lijst { list-style: none; margin: 0 0 1rem; padding: 0; }
.les-tijden .tijden-lijst li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--lijn); }
.les-tijden .tijden-lijst li span:first-child { font-family: var(--kop); font-weight: 600; text-transform: uppercase; color: var(--wit); }
.les-tijden .tijden-lijst li span:last-child { color: var(--grijs); text-align: right; }
.les-tijden small { color: var(--grijs); }
.tijden-samenvatting { color: var(--grijs) !important; margin-bottom: 1.1rem !important; }
.les-tijden .btn i { margin-right: 0.4rem; }

.les-quote { margin: 4rem auto 0; max-width: 60ch; text-align: center; }
.les-quote p { font-family: var(--kop); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; margin: 0 0 0.75rem; }
.les-quote footer { color: var(--accent); font-family: var(--kop); font-weight: 600; text-transform: uppercase; }

.les-pagina .cta-balk { border-left-color: var(--accent); margin-top: 4rem; }
.cta-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.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.zichtbaar, .reveal-links.zichtbaar, .reveal-rechts.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-links, .reveal-rechts { opacity: 1; transform: none; } }

.andere-lessen { margin-top: 3.5rem; }
.andere-lessen h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.ander-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ander {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent, var(--geel));
  color: var(--wit);
  text-decoration: none;
  font-family: var(--kop);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
}
.ander i { color: var(--accent, var(--geel)); }
.ander:hover { border-color: var(--accent, var(--geel)); }

/* ===== Aanbod-overzicht ===== */
.aanbod-usps { margin-top: 0; }
.aanbod-h2 { margin-top: 3rem; }
.aanbod-sub { color: var(--grijs); margin: -0.3rem 0 1.5rem; }
.aanbod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.aanbod-kaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--wit);
  background: var(--donker);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--accent, var(--geel));
  padding: 1.5rem 1.4rem 1.25rem;
  transition: transform 0.15s, border-color 0.15s;
}
.aanbod-kaart:hover { transform: translateY(-3px); border-color: var(--accent, var(--geel)); }
.aanbod-kaart > i { font-size: 1.4rem; color: var(--accent, var(--geel)); margin-bottom: 0.9rem; }
.aanbod-kaart h3 { margin-bottom: 0.5rem; }
.aanbod-kaart p { color: var(--grijs); margin: 0 0 1.25rem; flex: 1; }
.aanbod-kaart .meer { font-family: var(--kop); font-weight: 600; font-size: 1rem; text-transform: uppercase; color: var(--accent, var(--geel)); }
.aanbod-kaart .meer i { font-size: 0.8em; margin-left: 0.3rem; transition: transform 0.15s; }
.aanbod-kaart:hover .meer i { transform: translateX(4px); }

.aanbod-blok {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 4.5rem;
  scroll-margin-top: 6rem;
}
.aanbod-blok.omgekeerd .aanbod-blok-tekst { order: 2; }
.aanbod-blok .kicker i { margin-right: 0.3rem; }
.aanbod-blok h2 { margin-top: 0; }
.aanbod-blok p { color: var(--grijs); max-width: 60ch; }
.aanbod-blok ul { color: var(--grijs); padding-left: 1.2rem; margin: 0 0 1.5rem; }
.aanbod-blok li { margin-bottom: 0.4rem; }
.aanbod-blok-foto img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; border-top: 4px solid var(--geel); }
@media (max-width: 800px) {
  .aanbod-blok { grid-template-columns: 1fr; gap: 1.5rem; }
  .aanbod-blok.omgekeerd .aanbod-blok-tekst { order: 0; }
}

/* video op een lespagina */
.les-detail-video { position: relative; }
.les-detail-video video { display: block; width: 100%; aspect-ratio: 9 / 11; object-fit: cover; border-top: 4px solid var(--accent, var(--geel)); background: var(--donker); }
.video-geluid { position: absolute; right: 0.75rem; bottom: 0.75rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.55); color: var(--wit); cursor: pointer; font-size: 0.95rem; backdrop-filter: blur(4px); }
.video-geluid:hover { background: var(--accent, var(--geel)); color: var(--zwart); }

/* ===== Lespagina's op de telefoon ===== */
@media (max-width: 700px) {
  /* banner: compacter, tekst direct in beeld */
  .les-banner { min-height: 0; padding: 6.5rem var(--gutter) 2rem; background-position: center 30%; }
  .les-banner::before { background: linear-gradient(to top, rgba(13,13,12,1) 0%, rgba(13,13,12,0.85) 50%, rgba(13,13,12,0.6) 100%); }
  .les-banner h1 { font-size: 2.6rem; margin-bottom: 0.5rem; }
  .les-banner .lead { font-size: 1rem; }
  .les-chips { gap: 0.4rem; margin: 0.9rem 0 1.1rem; }
  .les-chips span { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
  .les-banner .rij-acties { gap: 1rem; }
  .les-banner .btn { width: 100%; text-align: center; }
  .les-body { padding-top: 1.5rem; }

  /* drie kaarten: compact, icoon en kop naast elkaar */
  .les-kaarten { gap: 0.6rem; }
  .les-kaart { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem; padding: 1rem 1.1rem; border-top-width: 2px; }
  .les-kaart > i { grid-row: 1 / 3; margin: 0.15rem 0 0; font-size: 1.1rem; }
  .les-kaart h3 { font-size: 1.15rem; margin: 0; }
  .les-kaart p { font-size: 0.92rem; }

  /* foto/video: niet hoger dan het scherm, kleine foto weg */
  .les-detail { gap: 1.25rem; margin-top: 2rem; }
  .les-detail-foto img, .les-detail-video video { aspect-ratio: 4 / 5; max-height: 70svh; }
  .les-detail-foto .klein { display: none; }
  .les-detail-tekst { margin-top: 0.5rem; }
  .les-detail-tekst h2 { font-size: 1.9rem; margin-bottom: 0.75rem; }
  .les-punten li { padding: 0.5rem 0; font-size: 0.95rem; }
  .les-tijden { display: block; padding: 1.1rem 1.1rem 1.2rem; border-top-width: 3px; }
  .les-tijden > i { display: block; margin-bottom: 0.5rem; }
  .les-tijden h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
  .les-tijden .btn { width: 100%; text-align: center; }

  .les-quote { margin-top: 2.5rem; }
  .les-quote p { font-size: 1.25rem; }
  .les-pagina .cta-balk { margin-top: 2.5rem; padding: 1.4rem 1.2rem; }
  .les-pagina .cta-balk p { font-size: 1.15rem; }
  .cta-knoppen { gap: 0.9rem; }
  .cta-knoppen .btn { width: 100%; text-align: center; }

  /* andere lessen: één rij die je opzij schuift */
  .andere-lessen { margin-top: 2.5rem; }
  .ander-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.4rem; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .ander-grid::-webkit-scrollbar { display: none; }
  .ander { flex: none; scroll-snap-align: start; font-size: 0.9rem; padding: 0.5rem 0.8rem; }

  /* aanbod-overzicht */
  .aanbod-usps { padding: 1.25rem 0; gap: 1rem; }
  .aanbod-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .aanbod-kaart { padding: 1rem 0.9rem 0.9rem; }
  .aanbod-kaart > i { font-size: 1.1rem; margin-bottom: 0.5rem; }
  .aanbod-kaart h3 { font-size: 1.1rem; }
  .aanbod-kaart p { display: none; }
  .aanbod-kaart .meer { font-size: 0.85rem; }
  .aanbod-blok { margin-top: 2.5rem; }
  .aanbod-blok h2 { font-size: 1.8rem; }
  .aanbod-blok .btn { width: 100%; text-align: center; }
}

.les-banner-prive { background-size: auto 110%; background-position: right 8% center; background-repeat: no-repeat; background-color: #140f18; }
.les-banner-prive::before { background: linear-gradient(90deg, rgba(13,13,12,1) 0%, rgba(13,13,12,0.92) 45%, rgba(13,13,12,0.35) 75%, rgba(13,13,12,0.2) 100%); }
@media (max-width: 700px) { .les-banner-prive { background-size: auto 70%; background-position: right -20% top 12%; } }

/* ===== aanbod: kieshulp + lesrijen ===== */
.kies { margin: 0.5rem 0 1.5rem; }
.kies-label { font-family: var(--kop); font-weight: 600; text-transform: uppercase; color: var(--grijs); font-size: 0.95rem; margin: 0 0 0.5rem; }
.kies-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kies-chips button { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: 1px solid var(--lijn); color: var(--wit); cursor: pointer; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; padding: 0.55rem 0.95rem; transition: all 0.15s; }
.kies-chips button i { color: var(--geel); }
.kies-chips button:hover { border-color: var(--grijs); }
.kies-chips button.actief { background: var(--geel); border-color: var(--geel); color: var(--zwart); }
.kies-chips button.actief i { color: var(--zwart); }

.les-lijst { display: grid; gap: 0.75rem; }
.les-rij { display: grid; grid-template-columns: 12rem 1fr auto; gap: 1.5rem; align-items: center; background: var(--donker); border: 1px solid var(--lijn); border-left: 5px solid var(--accent, var(--geel)); color: var(--wit); text-decoration: none; overflow: hidden; transition: transform 0.2s, border-color 0.2s, opacity 0.3s; }
.les-rij:hover { transform: translateX(4px); border-color: var(--accent, var(--geel)); }
.les-rij.weg { display: none; }
.lr-foto { align-self: stretch; min-height: 8rem; overflow: hidden; background: var(--zwart); }
.lr-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.les-rij:hover .lr-foto img { transform: scale(1.05); }
.lr-tekst { padding: 1rem 0; }
.lr-tekst h3 { font-size: 1.5rem; margin: 0 0 0.3rem; }
.lr-tekst h3 i { color: var(--accent, var(--geel)); font-size: 0.85em; margin-right: 0.3rem; }
.lr-tekst p { color: var(--grijs); margin: 0 0 0.6rem; max-width: 60ch; }
.lr-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; color: var(--grijs); }
.lr-meta i { color: var(--accent, var(--geel)); margin-right: 0.25rem; }
.lr-volgende { color: var(--wit); }
.lr-volgende:empty { display: none; }
.lr-pijl { padding: 0 1.5rem; color: var(--grijs); font-size: 1.2rem; transition: color 0.15s, transform 0.15s; }
.les-rij:hover .lr-pijl { color: var(--accent, var(--geel)); transform: translateX(4px); }
.les-leeg { color: var(--grijs); padding: 1rem; }
.les-leeg a { color: var(--geel); }
@media (max-width: 800px) {
  .kies { margin: 0.25rem 0 1rem; }
  .kies-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.3rem; scrollbar-width: none; }
  .kies-chips::-webkit-scrollbar { display: none; }
  .kies-chips button { flex: none; font-size: 0.85rem; padding: 0.45rem 0.8rem; }
  .les-rij { grid-template-columns: 6.5rem 1fr; gap: 0.8rem; }
  .lr-foto { min-height: 6.5rem; }
  .lr-tekst { padding: 0.7rem 0.6rem 0.7rem 0; }
  .lr-tekst h3 { font-size: 1.15rem; }
  .lr-tekst p { font-size: 0.88rem; margin-bottom: 0.4rem; }
  .lr-meta { font-size: 0.75rem; gap: 0.25rem 0.8rem; }
  .lr-pijl { display: none; }
}

/* ===== aanbod in stappen ===== */
.ab-vraag { font-family: var(--kop); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; margin: 0.5rem 0 1rem; }
.ab-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.ab-tegel { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: pointer; color: var(--wit); text-align: left; background: var(--donker) center / cover no-repeat; overflow: hidden; opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.ab-tegel.in { opacity: 1; transform: none; }
.ab-tegel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,0.98) 0%, rgba(13,13,12,0.55) 55%, rgba(13,13,12,0.25) 100%); transition: background 0.3s; }
.ab-tegel::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color 0.2s; }
.ab-tegel:hover::after, .ab-tegel:focus-visible::after { border-color: var(--geel); }
.ab-tegel:hover::before { background: linear-gradient(to top, rgba(13,13,12,0.95) 0%, rgba(13,13,12,0.4) 55%, rgba(13,13,12,0.1) 100%); }
.ab-tegel > * { position: relative; display: block; padding: 0 1.2rem; }
.ab-tegel .nr { position: absolute; top: 1rem; left: 0; color: var(--geel); font-family: var(--kop); font-weight: 800; }
.ab-tegel strong { position: absolute; bottom: 2.6rem; left: 0; right: 0; font-family: var(--kop); font-weight: 800; font-size: 1.8rem; line-height: 1; text-transform: uppercase; }
.ab-tegel .sub { position: absolute; bottom: 1.1rem; left: 0; right: 0; color: var(--grijs); font-size: 0.9rem; }
.ab-stap1 { transition: opacity 0.35s, transform 0.35s; }
.ab-stap1.uit { opacity: 0; transform: translateY(-20px); }
.ab-stap2 { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; scroll-margin-top: calc(var(--melding-h, 0px) + 7.5rem); }
.ab-stap2.in { opacity: 1; transform: none; }
.ab-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lijn); }
.ab-terug { background: none; border: 0; color: var(--grijs); cursor: pointer; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; }
.ab-terug:hover { color: var(--geel); }
.ab-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ab-tabs button { background: none; border: 1px solid var(--lijn); color: var(--grijs); cursor: pointer; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; padding: 0.45rem 0.9rem; transition: all 0.15s; }
.ab-tabs button:hover { color: var(--wit); }
.ab-tabs button.actief { background: var(--geel); border-color: var(--geel); color: var(--zwart); }
.ab-paneel > h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 1rem; opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.4s; }
.ab-paneel > h2.in { opacity: 1; transform: none; }
.ab-groepen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.ab-groep { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: var(--wit); text-decoration: none; background: var(--donker); border: 1px solid var(--lijn); border-bottom: 4px solid var(--accent, var(--geel)); opacity: 0; transform: translateY(24px); transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2,0.8,0.2,1), border-color 0.2s; }
.ab-groep.in { opacity: 1; transform: none; }
.ab-groep-foto { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(0.8) brightness(0.75); transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s; }
.ab-groep:hover .ab-groep-foto, .ab-groep.focus .ab-groep-foto { transform: scale(1.06); filter: saturate(1) brightness(0.85); }
.ab-groep-tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.1rem 1rem; background: linear-gradient(to top, rgba(13,13,12,0.98), rgba(13,13,12,0.7) 60%, transparent); display: grid; gap: 0.15rem; }
.ab-groep-tekst strong { font-family: var(--kop); font-weight: 800; font-size: 1.4rem; line-height: 1; text-transform: uppercase; }
.ab-groep-tekst small { color: var(--accent, var(--geel)); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }
.ab-groep-tekst em { font-style: normal; color: var(--grijs); font-size: 0.9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s, opacity 0.3s, margin 0.3s; }
.ab-groep:hover .ab-groep-tekst em, .ab-groep.focus .ab-groep-tekst em { max-height: 5rem; opacity: 1; margin-top: 0.4rem; }
.ab-enkel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
.ab-enkel.in { opacity: 1; transform: none; }
.ab-enkel-foto { aspect-ratio: 4 / 5; background: center / cover no-repeat; border-top: 4px solid var(--geel); }
.ab-enkel-tekst h2 { opacity: 1; transform: none; }
.ab-enkel-tekst p { color: var(--grijs); max-width: 52ch; }
.ab-punten { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ab-punten li { padding: 0.35rem 0.8rem; border: 1px solid var(--lijn); font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
.ab-enkel .rij-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.ab-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ab-twee-kaart { display: grid; gap: 0.5rem; padding: 2rem; background: var(--donker); border: 1px solid var(--lijn); border-top: 4px solid var(--geel); color: var(--wit); text-decoration: none; opacity: 0; transform: translateY(20px); transition: opacity 0.45s, transform 0.5s, border-color 0.2s; }
.ab-twee-kaart.in { opacity: 1; transform: none; }
.ab-twee-kaart:hover { border-color: var(--geel); }
.ab-twee-kaart > i { font-size: 1.8rem; color: var(--geel); }
.ab-twee-kaart strong { font-family: var(--kop); font-weight: 800; font-size: 1.8rem; text-transform: uppercase; }
.ab-twee-kaart span { color: var(--grijs); }
.ab-twee-kaart em { font-style: normal; font-family: var(--kop); font-weight: 600; text-transform: uppercase; color: var(--geel); margin-top: 0.5rem; }
@media (max-width: 800px) {
  .ab-tegels { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ab-tegel { aspect-ratio: 4 / 4; }
  .ab-tegel strong { font-size: 1.3rem; bottom: 2.2rem; }
  .ab-tegel .sub { font-size: 0.78rem; bottom: 0.8rem; }
  .ab-balk { gap: 0.6rem; }
  .ab-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 0.2rem; }
  .ab-tabs::-webkit-scrollbar { display: none; }
  .ab-tabs button { flex: none; font-size: 0.85rem; }
  .ab-groepen { grid-template-columns: 1fr; gap: 0.6rem; }
  .ab-groep { aspect-ratio: 16 / 9; }
  .ab-groep-tekst em { max-height: 5rem; opacity: 1; margin-top: 0.3rem; }
  .ab-enkel { grid-template-columns: 1fr; gap: 1.2rem; }
  .ab-enkel-foto { aspect-ratio: 4 / 3; }
  .ab-enkel .rij-acties .btn { width: 100%; text-align: center; }
  .ab-twee { grid-template-columns: 1fr; }
}

/* uitklapbare blokken (scholen / bedrijven) */
.ab-twee-kaart { cursor: pointer; text-align: left; font: inherit; }
.ab-twee-kaart.actief { border-color: var(--geel); background: #1c1a10; }
.ab-twee-kaart em i { display: inline-block; transition: transform 0.25s; }
.ab-twee-kaart.actief em i { transform: rotate(180deg); }
.ab-uitklap { margin-top: 1.5rem !important; scroll-margin-top: calc(var(--melding-h, 0px) + 7.5rem); opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.45s; }
.ab-uitklap.in { opacity: 1; transform: none; }

.aanbod-grid.twee { grid-template-columns: 1fr 1fr; margin-top: 0.5rem; }
@media (max-width: 700px) { .aanbod-grid.twee { grid-template-columns: 1fr 1fr; } .aanbod-grid.twee .aanbod-kaart p { display: block; font-size: 0.85rem; } }

.les-trainsters { margin-top: 2rem; }
.les-trainsters p a { color: var(--accent, var(--geel)); text-decoration: none; font-weight: 600; }