/* Thema Mu-Chin: zwart, wit en kanku-rood. Geen externe fonts of scripts. */
:root {
  --rood: #c8102e;
  --rood-donker: #9e0c24;
  --zwart: #111;
  --tekst: #222;
  --grijs: #6b6b6b;
  --licht: #f5f3ef;
  --lijn: #e4e0d8;
  --rond: 14px;
  --breed: 1160px;
  --smal: 760px;
  --schaduw: 0 10px 30px rgba(0, 0, 0, .08);
  --kopfont: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 var(--font); color: var(--tekst); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rood); text-underline-offset: 3px; }
a:hover { color: var(--rood-donker); }
h1, h2, h3 { font-family: var(--kopfont); font-weight: 700; line-height: 1.15; color: var(--zwart); letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 .3em; text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 2em 0 .6em; }
h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
.tekst > h2:first-child, .tekst > h3:first-child { margin-top: 0; }
p, ul, ol { margin: 0 0 1em; }
blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 4px solid var(--rood); background: var(--licht); border-radius: 0 var(--rond) var(--rond) 0; font-style: italic; }
blockquote p:last-child { margin: 0; }
.klein { font-size: .85rem; color: var(--grijs); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--zwart); color: #fff; padding: .6em 1em; z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }

/* Knoppen */
.knop { display: inline-block; background: var(--rood); color: #fff; font-weight: 600; text-decoration: none; padding: .8em 1.5em; border-radius: 999px; border: 2px solid var(--rood); transition: background .2s, color .2s, transform .2s; margin: 0 .4em .4em 0; }
.knop:hover { background: var(--rood-donker); border-color: var(--rood-donker); color: #fff; transform: translateY(-1px); }
.knop--licht { background: transparent; color: inherit; border-color: currentColor; }
.knop--licht:hover { background: #fff; color: var(--zwart); border-color: #fff; }
.knop--klein { padding: .45em 1.1em; margin: 0; font-size: .92rem; }

/* Kop en menu */
.kop { position: sticky; top: 0; z-index: 50; background: #111; color: #fff; }
.kop__binnen { max-width: var(--breed); margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.merk { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; margin-right: auto; flex-shrink: 0; white-space: nowrap; }
.merk img { background: #fff; border-radius: 10px; padding: 5px 8px; width: 108px; height: auto; }
@media (max-width: 1180px) { .merk img { width: 78px; padding: 4px 6px; } }
.merk__naam { font-family: var(--kopfont); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.merk__naam small { display: block; font-size: .62rem; letter-spacing: .2em; color: #bbb; font-weight: 500; margin-top: .25em; }
.merk:hover { color: #fff; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; align-items: center; gap: .15rem; }
.menu a { color: #eee; text-decoration: none; font-weight: 500; font-size: .96rem; white-space: nowrap; }
.menu > ul > li { position: relative; display: flex; align-items: center; }
.menu > ul > li > a { padding: .5em .55em; border-radius: 8px; }
.menu > ul > li > a:hover, .menu > ul > li.actief > a { color: #fff; background: rgba(255, 255, 255, .1); }
.menu > ul > li.actief > a { box-shadow: inset 0 -2px 0 var(--rood); }
.menu__cta { margin-left: .6rem; }
.menu__cta a.knop { color: #fff; }
.subknop { background: none; border: 0; color: #aaa; cursor: pointer; padding: .3em; margin-left: -.4em; }
.subknop::before { content: ""; display: block; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.sub { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border-radius: 12px; box-shadow: var(--schaduw), 0 0 0 1px var(--lijn); padding: .5rem !important; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; }
.sub a { display: block; color: var(--tekst); padding: .5em .8em; border-radius: 8px; }
.sub a:hover, .sub a[aria-current] { background: var(--licht); color: var(--rood); }
.heeft-sub:hover .sub, .heeft-sub:focus-within .sub, .heeft-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.menuknop { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.menuknop__streep, .menuknop__streep::before, .menuknop__streep::after { position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: .2s; content: ""; }
.menuknop__streep { top: 21px; }
.menuknop__streep::before { left: 0; top: -7px; }
.menuknop__streep::after { left: 0; top: 7px; }
.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { top: 0; transform: rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .menuknop { display: block; }
  /* Direct onder de header, tot onderaan het scherm (100% = hoogte van de header). */
  .menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%); background: var(--zwart); overflow-y: auto; padding: 1rem 1.25rem 2rem; display: none; border-top: 1px solid #2a2a2a; }
  .menu.open { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > ul > li { flex-wrap: wrap; border-bottom: 1px solid #2a2a2a; }
  .menu > ul > li > a { flex: 1; padding: .9em .2em; font-size: 1.1rem; }
  .menu > ul > li.actief > a { box-shadow: none; color: var(--rood); background: none; }
  .subknop { padding: .9em .8em; }
  .sub { position: static; width: 100%; background: none; box-shadow: none; padding: 0 0 .6rem 1rem !important; display: none; opacity: 1; visibility: visible; transform: none; }
  .heeft-sub:hover .sub, .heeft-sub:focus-within .sub { display: none; }
  .heeft-sub.open .sub { display: block; }
  .sub a { color: #ccc; }
  .sub a:hover, .sub a[aria-current] { background: none; color: #fff; }
  .menu__cta { margin: 1.2rem 0 0; border: 0 !important; }
  .menu__cta a.knop { width: 100%; text-align: center; padding: .8em; }
}

/* Hero (home): de Calpe-banner van de oude site, tekst en knoppen eronder */
.hero { background: var(--zwart); color: #fff; }
.hero__banner { position: relative; background: #2a1b26; }
.hero__banner img { width: 100%; max-height: 72vh; object-fit: cover; object-position: center 40%; }
.hero__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rood); }
.hero__binnen { max-width: var(--breed); margin: 0 auto; padding: 2.2rem 1.25rem 2.6rem; display: grid; gap: 1rem; }
.hero__boven { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; margin: 0; border-left: 4px solid var(--rood); padding-left: .8em; justify-self: start; }
.hero__tekst { font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: 40em; color: #ddd; margin: 0; }
.banner__video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

/* Paginakop (overige pagina's) */
.paginakop { position: relative; background: var(--zwart); color: #fff; overflow: hidden; }
.paginakop__beeld { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: .4; }
.paginakop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rood); }
.paginakop__binnen { position: relative; max-width: var(--breed); margin: 0 auto; padding: 4rem 1.25rem 3.2rem; }
.paginakop--beeld .paginakop__binnen { padding-top: 7rem; }
.paginakop h1 { color: #fff; margin: 0; }
.paginakop__intro { font-size: 1.2rem; color: #ddd; margin: .5rem 0 0; max-width: 40em; }
.kruimel { margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; }
.kruimel a { color: #ccc; text-decoration: none; }
.kruimel a::after { content: " /"; color: var(--rood); }

/* Secties */
.sectie { padding: clamp(3rem, 7vw, 5.5rem) 1.25rem; }
.sectie--licht { background: var(--licht); }
.sectie--donker { background: var(--zwart); color: #ddd; }
.sectie--donker h2 { color: #fff; margin-top: 0; }
.tekst { max-width: var(--smal); margin: 0 auto; }
.tekst::after { content: ""; display: block; clear: both; }
.breed { max-width: var(--breed); margin: 0 auto; }
.sectiekop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 1.6rem; }
.sectiekop h2 { margin: 0; }
.sectiekop a { font-weight: 600; text-decoration: none; }
.afgerond { border-radius: var(--rond); box-shadow: var(--schaduw); }
.tekst-foto { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.tekst-foto .tekst { margin: 0; }
.tekst .tekst-foto { grid-template-columns: 1fr 1.3fr; align-items: start; margin: 1rem 0 2rem; }
.tekst .tekst-foto img { border-radius: var(--rond); }
.banner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 800px) {
  .tekst-foto, .tekst .tekst-foto, .banner { grid-template-columns: 1fr; }
}

/* Lesgroepen/locaties */
.locaties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 0 0 2rem; }
.tekst .locaties { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .tekst .locaties { grid-template-columns: 1fr; } }
.locatie { background: #fff; border-radius: var(--rond); padding: 1.4rem 1.4rem 1.1rem; box-shadow: var(--schaduw), 0 0 0 1px var(--lijn); border-top: 4px solid var(--rood); }
.locatie h3 { margin: 0 0 .2rem; font-size: 1.5rem; }
.locatie__dag { margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--rood); }
.locatie__naam { color: var(--grijs); font-size: .93rem; margin-bottom: .8rem; }
.locatie__naam a { color: var(--grijs); }
.locatie__extra { font-size: .85rem; font-weight: 600; margin: -.3rem 0 .6rem; }
.locatie__lessen { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lijn); }
.locatie__lessen li { display: flex; flex-wrap: wrap; gap: 0 .8rem; padding: .55rem 0; border-bottom: 1px solid var(--lijn); font-size: .95rem; }
.locatie__lessen li:last-child { border-bottom: 0; }
.tijd { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 7.5em; }

/* Tarieven */
.tarieven { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 0 0 1.8rem; }
.tarief { background: var(--licht); border-radius: var(--rond); padding: 1.4rem 1.6rem; }
.tarief h3 { margin: 0; }
.tarief p { color: var(--grijs); margin: 0 0 .6rem; }
.tarief ul { list-style: none; padding: 0; margin: .6rem 0 0; }
.tarief li { padding: .3rem 0; }
.tarief strong { color: var(--zwart); font-size: 1.15rem; }

/* Agenda */
.activiteiten { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.breed .activiteiten { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.activiteit { display: flex; gap: 1.2rem; align-items: center; background: #fff; border-radius: var(--rond); padding: 1rem 1.2rem; box-shadow: 0 0 0 1px var(--lijn); }
.activiteit h3 { margin: 0 0 .1rem; font-size: 1.15rem; }
.activiteit p { margin: 0; color: var(--grijs); font-size: .95rem; }
.activiteit .plaats { color: var(--tekst); }
.activiteit.is-voorbij { opacity: .5; }
.activiteit.is-voorbij .datumblok { background: var(--grijs); }
.datumblok { flex: 0 0 5.2rem; text-align: center; background: var(--rood); color: #fff; border-radius: 10px; padding: .45rem .3rem; line-height: 1.1; }
.datumblok__dag { display: block; font-family: var(--kopfont); font-weight: 700; font-size: 1.6rem; }
.datumblok__maand { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.vakanties { margin: 0 0 2rem; }
.vakanties > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.vakanties dt { font-weight: 700; }
.vakanties dd { margin: 0; }
.let-op { display: block; margin-top: .3rem; font-size: .92rem; color: var(--rood-donker); font-weight: 600; }
@media (max-width: 560px) { .vakanties > div { grid-template-columns: 1fr; gap: 0; } }

/* Kaarten (subpagina's) */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.kaart { display: block; background: #fff; border-radius: var(--rond); overflow: hidden; text-decoration: none; color: var(--tekst); box-shadow: var(--schaduw); transition: transform .2s, box-shadow .2s; }
.kaart:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.12); color: var(--tekst); }
.kaart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kaart__tekst { display: block; padding: 1.1rem 1.3rem 1.3rem; }
.kaart__tekst strong { display: block; font-family: var(--kopfont); font-size: 1.3rem; color: var(--zwart); }
.kaart__tekst strong::after { content: " →"; color: var(--rood); }
.kaart__tekst span { color: var(--grijs); font-size: .95rem; }

/* Foto's, galerijen, video */
.galerij, .fotorij { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: 2rem 0; }
.galerij p, .fotorij p { display: contents; }
.galerij a, .fotorij a { display: block; border-radius: 10px; overflow: hidden; }
.galerij img, .fotorij img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.galerij a:hover img, .fotorij a:hover img { transform: scale(1.05); }
.poster { border-radius: var(--rond); box-shadow: var(--schaduw); margin: 0 auto; max-width: 520px; width: 100%; }
figure { margin: 0 0 1.5rem; }
figcaption { font-size: .88rem; color: var(--grijs); margin-top: .4rem; }
figure.rechts { float: right; width: 230px; max-width: 40%; margin: .3rem 0 1rem 1.6rem; }
figure.rechts img { border-radius: 10px; width: 100%; }
h2 { clear: both; }
@media (max-width: 600px) { figure.rechts { float: none; max-width: 100%; margin: 0 0 1.5rem; } }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.video { margin: 0; }
.video__start, .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.video__start img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.video__start:hover img { opacity: 1; }
.video__play { position: absolute; left: 50%; top: 50%; width: 62px; height: 44px; margin: -22px 0 0 -31px; background: var(--rood); border-radius: 12px; }
.video__play::after { content: ""; position: absolute; left: 25px; top: 13px; border: solid transparent; border-width: 9px 0 9px 15px; border-left-color: #fff; }

.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.6rem; }
.tags li { background: var(--licht); border: 1px solid var(--lijn); border-radius: 999px; padding: .3em .9em; font-size: .93rem; }
.drie-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.drie-kolommen > div { background: var(--licht); border-radius: var(--rond); padding: 1.1rem 1.3rem; border-top: 4px solid var(--rood); }
.drie-kolommen h3 { margin: 0 0 .3rem; }
.drie-kolommen p { margin: 0; font-size: .95rem; }
.aangesloten { display: flex; align-items: center; gap: 1.4rem; background: var(--licht); border-radius: var(--rond); padding: 1.2rem 1.4rem; margin-top: 2rem; }
.aangesloten p { margin: 0; }
.aangesloten img { flex: 0 0 auto; width: 110px; }
.ondertekening { margin-top: 2rem; font-family: var(--kopfont); font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.ondertekening span { font-family: var(--font); font-weight: 400; font-size: .95rem; color: var(--grijs); }

/* Leraren: zwarte banden */
.zwarte-banden__groep { margin-bottom: 1.4rem; }
.zwarte-banden__groep h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.zwarte-banden ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.zwarte-banden li { background: var(--licht); border-left: 4px solid var(--zwart); border-radius: 0 8px 8px 0; padding: .5rem .9rem; }

img.breed-beeld { width: 100%; border-radius: var(--rond); box-shadow: var(--schaduw); margin: .5rem 0 1.4rem; }

/* Sportweerbaarheid */
img.zijbeeld { float: right; width: 230px; max-width: 40%; margin: .3rem 0 1rem 1.6rem; border-radius: 10px; box-shadow: var(--schaduw); }
@media (max-width: 600px) { img.zijbeeld { float: none; max-width: 100%; margin: 0 auto 1.5rem; } }

/* Contact: volle breedte, gelijk met de paginatitel */
.contact .tekst { max-width: var(--breed); }
.contact .contactblok .knop { white-space: nowrap; }
.contact .groot { overflow-wrap: anywhere; }
.contact a.groot[href^="mailto"] { font-size: .95rem; }
.contactblokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 1.5rem 0 2rem; }
.contactblok { background: var(--licht); border-radius: var(--rond); padding: 1.3rem 1.5rem; }
.contactblok h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.contactblok p:last-child { margin-bottom: 0; }
.groot { font-size: 1.08rem; font-weight: 600; }

/* Sponsoren */
.sponsoren { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.sponsoren a { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: .6rem .9rem; height: 84px; }
.sponsoren img { max-height: 64px; width: auto; max-width: 150px; }
.tekst .sponsoren a { box-shadow: 0 0 0 1px var(--lijn); height: 110px; padding: 1rem 1.4rem; }
.tekst .sponsoren img { max-height: 80px; max-width: 200px; }

/* Voet */
.voet { background: #0b0b0b; color: #aaa; font-size: .95rem; }
.voet__binnen { max-width: var(--breed); margin: 0 auto; padding: 3.5rem 1.25rem 2rem; display: grid; grid-template-columns: 1.1fr 1fr .8fr 1.3fr; gap: 2rem; }
.voet h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .8rem; }
.voet a { color: #ddd; text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet strong { color: #fff; }
.voet__kolom img.voet__logo { background: #fff; border-radius: 12px; padding: 6px 8px; margin-bottom: .8rem; width: 110px; height: auto; }
.voet__sponsoren img { background: none; border-radius: 0; padding: 0; margin: 0; }
.voet .sponsoren a { height: 64px; padding: .4rem .7rem; }
.voet .sponsoren img { max-height: 48px; max-width: 110px; }
.voet__links { list-style: none; padding: 0; margin: 0; }
.voet__links li { margin-bottom: .35rem; }
.voet__onder { max-width: var(--breed); margin: 0 auto; padding: 1.2rem 1.25rem 2rem; border-top: 1px solid #222; font-size: .85rem; color: #777; }
@media (max-width: 900px) { .voet__binnen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .voet__binnen { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lightbox img { max-width: 94vw; max-height: 84vh; width: auto; border-radius: 8px; margin: 0 auto; }
.lightbox__tekst { color: #ddd; text-align: center; margin: .6rem 0 0; font-size: .95rem; }
.lightbox__sluit { position: fixed; top: 1rem; right: 1rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 1.8rem; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}