/* =========================================================
   Streekontmoeting - stijlblad
   Kleuren en maten pas je aan in :root
   ========================================================= */
:root{
  --navy:#14213d; --navy2:#1f3266; --navy3:#0e1830;
  --rood:#d3102f; --rood2:#a80d26; --roodlicht:#fdecef;
  --papier:#f1f4f9; --lijn:#e3e8f0; --grijs:#5b6780;
  --groen:#1f8a4c; --groenlicht:#e3f5ea; --geel:#f2c94c; --oranje:#f2994a; --blauw:#2f80ed; --bruin:#8a4b2a;
  --r:14px; --schaduw:0 4px 18px rgba(20,33,61,.07);
  --breed:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--navy);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw)}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:800}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:800}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
.binnen{width:min(100% - 40px,var(--breed));margin-inline:auto}
.sla-over{position:absolute;left:-9999px}.sla-over:focus{left:12px;top:12px;z-index:50;background:#fff;padding:10px}
.icoon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kop en menu ---------- */
.kop{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 var(--lijn)}
.kop .binnen{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.merk{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.12rem}
.merkbeeld{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-size:.82rem;font-weight:800}
.menu{display:flex;align-items:center;gap:2px;height:100%}
.menu a{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 12px;color:var(--navy);text-decoration:none;font-weight:600;font-size:.93rem}
.menu a .icoon,.menu a .pijltje,.menu-extra{display:none}
.menu a:hover,.menu a[aria-current]{color:var(--rood)}
.menu a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--rood)}
.menuknop{display:none;background:none;border:0;padding:6px;color:var(--navy);cursor:pointer}
.menuknop .icoon{width:28px;height:28px}

/* ---------- Knoppen, labels ---------- */
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:8px;background:var(--rood);color:#fff;border:2px solid var(--rood);font-weight:700;font-size:.95rem;text-decoration:none;line-height:1.2}
.knop:hover{background:var(--rood2);border-color:var(--rood2);color:#fff}
.knop.rand{background:transparent;border-color:#fff}.knop.rand:hover{background:#fff;color:var(--navy)}
.knop.klein{padding:8px 16px;font-size:.88rem}
.knop .icoon{width:18px;height:18px}
.pijl{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--blauw)}
.pijl::after{content:"\2192"}
.label{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.75rem;font-weight:700;margin-left:8px;vertical-align:2px}
.label.l-gespeeld{background:var(--groenlicht);color:var(--groen)}
.label.l-volgende{background:#fff;color:var(--rood);border:1px solid var(--rood)}
.kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);margin-bottom:12px}

/* ---------- Hero (home): foto over de volle breedte ---------- */
.hero{position:relative;color:#fff;background:var(--navy) center right/cover no-repeat;min-height:440px;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,48,.96) 0%,rgba(14,24,48,.85) 38%,rgba(14,24,48,.15) 75%,rgba(14,24,48,0))}
.hero .binnen{position:relative;padding-block:64px}
.hero-tekst{max-width:520px}
.hero h1 span{color:#ff3150}
.hero p{color:#e3e8f2;font-size:1.05rem}
.bandkleuren{display:flex;height:7px}
.bandkleuren i{flex:1}
.bandkleuren i:nth-child(1){background:#fff}.bandkleuren i:nth-child(2){background:var(--geel)}.bandkleuren i:nth-child(3){background:var(--oranje)}.bandkleuren i:nth-child(4){background:var(--groen)}.bandkleuren i:nth-child(5){background:var(--blauw)}.bandkleuren i:nth-child(6){background:var(--bruin)}

/* ---------- Paginakop ---------- */
.paginakop{position:relative;color:#fff;background:var(--navy) center right/cover no-repeat}
.paginakop::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,48,.97) 0%,rgba(20,33,61,.9) 45%,rgba(31,50,102,.55) 100%)}
.paginakop .binnen{position:relative;padding-block:46px 42px}
.paginakop h1{margin-bottom:.3em}
.paginakop p{color:#dfe5f1;max-width:560px}

/* ---------- Algemeen ---------- */
.sectie{padding-block:44px}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw);min-width:0}

/* Datumblok */
.datum{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:78px;border:1px solid var(--lijn);border-radius:10px;background:#fff;line-height:1;text-transform:uppercase}
.datum small{font-size:.7rem;font-weight:700;color:var(--navy)}
.datum b{font-size:1.85rem;font-weight:800;margin:5px 0 4px}
.datum span{font-size:.78rem;font-weight:800}

.info{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.info li{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}
.info .icoon{width:16px;height:16px;margin-top:3px;color:var(--rood)}

/* ---------- Home ---------- */
.volgende-kaart{display:flex;gap:24px;align-items:stretch;padding:22px}
.volgende-tekst{flex:1;min-width:0}
.volgende-rij{display:flex;gap:18px;align-items:flex-start}
.volgende-rij h2{font-size:1.3rem;margin-bottom:8px}
.volgende-foto{flex:0 0 300px;border-radius:10px;overflow:hidden;background:var(--papier)}
.volgende-foto img{width:100%;height:100%;object-fit:cover}
.let-op{background:var(--roodlicht);color:var(--rood2);border-radius:8px;padding:10px 14px;font-weight:600;font-size:.9rem}

.stappen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stappen li{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:22px;box-shadow:var(--schaduw);display:flex;flex-direction:column}
.stapnr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rood);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:14px;flex:none}
.stappen h3{margin-bottom:6px}
.stappen p{color:var(--grijs);font-size:.9rem}
.stappen .icoon{width:34px;height:34px;color:var(--navy);margin-top:auto;padding-top:12px;stroke-width:1.5}

.doelgroep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.doel{border-left:5px solid #8b94a7}
.doel.groen{border-left-color:var(--groen)}.doel.blauw{border-left-color:var(--blauw)}

.band{background:var(--navy);color:#fff;padding-block:30px}
.band .binnen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.usp{display:flex;gap:16px;align-items:flex-start}
.usp .icoon{width:38px;height:38px;stroke-width:1.4}
.usp h3{margin-bottom:2px;font-size:1rem}
.usp p{color:#c4cde0;font-size:.88rem}

.cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;background:#fff}
.cta-icoon{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--roodlicht);color:var(--rood);flex:none}
.cta-icoon .icoon{width:28px;height:28px}
.cta-tekst{flex:1 1 320px;min-width:0}
.cta h2{font-size:1.2rem;margin-bottom:4px}
.cta p{color:var(--grijs);font-size:.93rem}

/* ---------- Clubs ---------- */
.clubs{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.club{flex:0 1 calc((100% - 40px)/3);text-align:center;display:flex;flex-direction:column;align-items:center;padding:28px 22px}
.clublogo{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--papier);margin-bottom:16px;overflow:hidden}
.clublogo span{font-weight:800;font-size:1.5rem}
.clublogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.club h2{font-size:1.1rem}
.club p{color:var(--grijs);font-size:.92rem;margin-bottom:12px}
.club .pijl{margin-top:auto}
.cta.breed{margin-top:22px;background:#eef1f7;border-color:#e3e8f0;box-shadow:none}

/* ---------- Kalender ---------- */
.tijdlijn{list-style:none;margin:0;padding:0;display:grid;gap:16px;position:relative}
.tijdlijn::before{content:"";position:absolute;left:58px;top:20px;bottom:20px;width:2px;background:var(--lijn)}
.toernooi{position:relative;display:flex;gap:22px;align-items:center;padding:18px 20px}
.toernooi .datum{position:relative;z-index:1}
.toernooi-tekst{flex:1;min-width:0}
.toernooi h2{font-size:1.1rem;margin-bottom:6px}
.toernooi-foto{flex:0 0 160px;height:100px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy2))}
.toernooi-foto img{width:100%;height:100%;object-fit:cover}
.toernooi.is-gespeeld .datum{background:var(--papier);color:var(--grijs)}
.toernooi.is-volgende{border-color:var(--rood);box-shadow:0 0 0 1px var(--rood),var(--schaduw)}
.toernooi.is-volgende .datum{border-color:var(--rood);color:var(--rood)}
details summary{cursor:pointer;color:var(--blauw);font-weight:600;font-size:.9rem;list-style:none;display:inline-flex;gap:4px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"\2192"}
details[open] summary::after{content:"\2193"}
details .scroll{margin-top:12px}

/* ---------- Tabellen ---------- */
.scroll{overflow-x:auto;border:1px solid var(--lijn);border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--lijn);white-space:nowrap}
td:nth-child(2),td:nth-child(3){white-space:normal}
th{font-size:.75rem;font-weight:700;color:var(--navy);background:#f7f9fc}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fbf3f5}
.getal{text-align:right}
.medaille{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem;font-weight:800}
.m1{background:#f6dc85}.m2{background:#dfe3ea}.m3{background:#efc9a4}

/* ---------- Uitslagen ---------- */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tabs button{padding:14px;border:0;border-radius:10px 10px 0 0;background:#dfe5ef;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--rood);color:#fff}
.tabbalk{background:var(--navy3)}
.tabbalk .binnen{padding-top:0}
.tabpaneel[hidden]{display:none}
.sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.sectiekop p{color:var(--grijs);margin:0;font-size:.92rem}
.poules{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.poules .categorie{grid-column:1/-1;margin:18px 0 0;font-size:1.25rem}
.poules .categorie:first-child{margin-top:0}
.poule{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.poule h3{margin:0;padding:12px 14px 8px;font-size:1rem}
.poule .scroll{border:0;border-radius:0}
.poule th,.poule td{padding:7px 12px}
.filter select{font:inherit;font-size:.9rem;padding:8px 12px;border:1px solid var(--lijn);border-radius:8px;background:#fff;color:var(--navy)}

/* ---------- Reglement ---------- */
.met-zijmenu{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.zijmenu{position:sticky;top:86px;display:grid;gap:6px}
.zijmenu a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:#fff;border:1px solid var(--lijn);color:var(--navy);text-decoration:none;font-weight:600;font-size:.88rem}
.zijmenu a:hover,.zijmenu a.actief{background:var(--roodlicht);border-color:#f6c9d1;color:var(--rood2)}
.zijmenu .icoon{width:17px;height:17px}
.blok{scroll-margin-top:86px}
.blok+.blok{margin-top:28px;padding-top:24px;border-top:1px solid var(--lijn)}
.regels{display:grid;gap:18px}
.regel{display:flex;gap:18px;align-items:flex-start}
.regel>.icoon{width:32px;height:32px;stroke-width:1.5;margin-top:2px}
.regel h3{margin-bottom:2px;font-size:1rem}
.regel p{color:var(--grijs);font-size:.92rem}
.download{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:10px;background:var(--roodlicht);text-decoration:none;color:var(--navy);margin-top:22px}
.download:hover{background:#fbdde3}
.download .icoon{width:28px;height:28px;color:var(--rood)}
.download b{display:block;color:var(--rood2);font-size:.95rem}
.download small{color:var(--grijs)}
.download .eind{margin-left:auto;width:22px;height:22px}

/* ---------- Lesgevers ---------- */
.stappenlijst{list-style:none;margin:0;padding:0}
.stappenlijst li{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:14px 0}
.stappenlijst .stapnr{margin:0}
.stappenlijst h3{margin-bottom:2px;font-size:1rem}
.stappenlijst p,.stappenlijst ul{color:var(--grijs);font-size:.93rem;margin:0}
.stappenlijst ul{padding-left:18px;margin-top:4px}

/* ---------- Voet ---------- */
.voet{background:#fff;border-top:1px solid var(--lijn);padding-block:24px;margin-top:20px}
.voet .binnen{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.voet strong{display:block}
.voet p{color:var(--grijs);font-size:.88rem;margin:0}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blauw);color:#fff}
.social a.mail{background:var(--navy)}
.social .icoon{width:18px;height:18px}

/* ---------- Responsief ---------- */
@media(max-width:1000px){
  .stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .club{flex-basis:calc((100% - 20px)/2)}
  .menu a{padding:0 8px}
}
@media(max-width:860px){
  .menuknop{display:block}
  .menu{display:none;position:fixed;top:66px;right:0;bottom:0;width:min(86vw,340px);height:auto;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);padding:10px 0;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.3)}
  .menu.open{display:flex}
  .menu a{height:auto;padding:15px 22px;color:#fff;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .menu a .icoon,.menu a .pijltje{display:block}
  .menu a .pijltje{margin-left:auto;opacity:.6;width:16px;height:16px}
  .menu a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}
  .menu a[aria-current]::after{left:0;right:auto;top:0;bottom:0;width:4px;height:auto}
  .menu-extra{display:block;padding:20px 22px;color:#c4cde0;font-size:.9rem}
  .menu-extra a{all:unset;color:#fff;cursor:pointer;text-decoration:underline}
  .hero{min-height:0;background-position:70% center}
  .hero::before{background:linear-gradient(180deg,rgba(14,24,48,.55),rgba(14,24,48,.95) 70%)}
  .hero .binnen{padding-block:120px 40px}
  .volgende-kaart{flex-direction:column-reverse}
  .volgende-foto{flex:none;height:170px}
  .doelgroep,.band .binnen{grid-template-columns:1fr}
  .met-zijmenu{grid-template-columns:1fr}
  .zijmenu{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:4px}
  .toernooi-foto{display:none}
}
@media(max-width:560px){
  .binnen{width:min(100% - 28px,var(--breed))}
  .sectie{padding-block:32px}
  .stappen{grid-template-columns:1fr}
  .club{flex-basis:100%}
  .tijdlijn::before{left:48px}
  .toernooi{gap:14px;padding:14px;align-items:flex-start}
  .datum{width:60px;height:68px}.datum b{font-size:1.5rem}
  .knoppen .knop{flex:1 1 100%}
  .poules{grid-template-columns:1fr}
}

/* Correcties na browsertest */
.paginakop .binnen.tabbinnen{padding:0}
.stappen .icoon{width:30px;height:30px;padding-top:0;margin-top:auto}
.stappen p{margin-bottom:14px}
.blok h2{font-size:1.3rem}
.zijmenu a{font-size:.9rem;line-height:1.3}
.merklogo{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hero,.paginakop{background-size:cover;background-position:center right;background-repeat:no-repeat}

/* =========================================================
   Ingekaderde opmaak: niets loopt meer over de volle breedte
   ========================================================= */
.kop{background:transparent;box-shadow:none;padding-top:14px}
.kop .binnen{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);padding-inline:20px}
.menu a[aria-current]::after{bottom:-1px}
.hero,.paginakop,.band,.voet{width:min(100% - 40px,var(--breed));margin-inline:auto;border-radius:20px;overflow:hidden}
.hero,.paginakop{margin-top:20px}
.hero .binnen,.paginakop .binnen,.band .binnen,.voet .binnen{width:auto;padding-inline:44px}
.hero{min-height:420px}
.hero .bandkleuren{position:absolute;left:0;right:0;bottom:0}
.band{margin-block:0}
.voet{margin-block:20px 24px;border:1px solid var(--lijn)}
.paginakop .binnen.tabbinnen{padding:0 44px}

/* Keuze streekontmoeting */
.so-keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:6px 0 26px}
.so-knop{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--lijn);border-radius:10px;background:#fff;font:inherit;color:var(--navy);text-align:left;cursor:pointer;box-shadow:var(--schaduw)}
.so-knop b{font-size:.95rem}
.so-knop small{font-size:.78rem;color:var(--grijs);line-height:1.3}
.so-knop:hover:not(:disabled){border-color:var(--rood)}
.so-knop[aria-pressed="true"]{background:var(--rood);border-color:var(--rood);color:#fff}
.so-knop[aria-pressed="true"] small{color:#ffe1e6}
.so-knop:disabled{cursor:default;opacity:.55;box-shadow:none;background:transparent}
.so-titel{font-size:1.15rem;margin:0}

@media(max-width:860px){
  .menu{top:84px;border-radius:var(--r) 0 0 var(--r)}
  .hero .binnen{padding-block:110px 40px}
}
@media(max-width:560px){
  .hero,.paginakop,.band,.voet{width:min(100% - 28px,var(--breed));border-radius:16px}
  .hero .binnen,.paginakop .binnen,.band .binnen,.voet .binnen,.paginakop .binnen.tabbinnen{padding-inline:20px}
  .kop{padding-top:10px}
  .so-keuze{grid-template-columns:1fr}
}
.hero .binnen{width:100%;margin:0}

/* Sorteerbare totaalstand */
.sorteerbaar th{padding:0}
.sorteerbaar th button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;padding:10px 14px;cursor:pointer;font-size:.75rem;font-weight:700;color:var(--navy)}
.sorteerbaar th.getal button{justify-content:flex-end}
.sorteerbaar th button:hover{color:var(--rood)}
.sorteerbaar th button:focus-visible{outline:3px solid var(--rood);outline-offset:-3px}
.sorteerbaar th button::after{content:"\2195";opacity:.35;font-size:.9em}
.sorteerbaar th[aria-sort="ascending"] button::after{content:"\2191";opacity:1;color:var(--rood)}
.sorteerbaar th[aria-sort="descending"] button::after{content:"\2193";opacity:1;color:var(--rood)}