/* ==========================================================================
   KFC Eppegem — static-site prototype
   A single stylesheet. No build step, no plugins. Edit colours in :root.
   ========================================================================== */

:root {
  --green: #0c7a3d;
  --green-dark: #095c2e;
  --green-light: #e8f5ee;
  --red: #c8102e;
  --ink: #1a2027;
  --muted: #5b6670;
  --line: #e3e8ec;
  --bg: #ffffff;
  --bg-soft: #f6f8f9;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(12, 122, 61, 0.08);
  --maxw: 1120px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- Header / nav -------------------------------------------------------- */
.topbar {
  background: var(--green-dark);
  color: #cdebd8;
  font-size: 0.82rem;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 12px; }
.topbar a { color: #fff; }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.crest {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #15a352, var(--green-dark));
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 0.9rem;
  box-shadow: var(--shadow);
}
.crest-img { width: 46px; height: 46px; object-fit: contain; }
.brand small { display: block; font-weight: 500; font-size: 0.7rem; color: var(--muted); letter-spacing: .04em; }

nav.main { margin-left: auto; }
nav.main > ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
nav.main > ul > li { position: relative; }
nav.main a {
  display: inline-block; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); font-weight: 600; font-size: 0.93rem; white-space: nowrap;
}
nav.main a:hover { background: var(--green-light); text-decoration: none; }
nav.main a.active { color: var(--green); }
nav.main .has-sub > a::after { content: " ▾"; font-size: 0.7rem; color: var(--muted); }

/* dropdown */
nav.main .submenu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
  min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease; z-index: 60;
}
nav.main .has-sub:hover .submenu,
nav.main .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
nav.main .submenu a { display: block; padding: 9px 12px; font-weight: 500; }

/* mobile menu toggle */
.menu-toggle { display: none; margin-left: auto; background: var(--green); color: #fff;
  border: none; border-radius: 8px; padding: 10px 14px; font-size: 1rem; font-weight: 700; cursor: pointer; }

@media (max-width: 940px) {
  .menu-toggle { display: block; }
  nav.main { display: none; width: 100%; order: 3; margin-left: 0; }
  nav.main.open { display: block; padding-bottom: 12px; }
  nav.main > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  nav.main .submenu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0; }
  nav.main .has-sub > a::after { content: ""; }
  header.site .wrap { flex-wrap: wrap; }
}

/* ---- Hero ---------------------------------------------------------------- */
/* ---- Hero-slider --------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  min-height: 560px; display: grid; place-items: center; padding: 40px 20px;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,92,46,.55) 0%, rgba(7,40,22,.88) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 780px; }
.hero-content .klein {
  display: block; text-transform: uppercase; letter-spacing: .14em; font-weight: 400;
  font-size: clamp(1rem, 2.4vw, 1.5rem); color: #d6f0e0;
}
.hero-content h1 {
  font-size: clamp(2.2rem, 6vw, 4rem); margin: 4px 0 14px; line-height: 1.05;
  text-transform: uppercase; font-weight: 800;
}
.hero-content h1 .accent { color: #fff; border-bottom: 5px solid var(--red); padding-bottom: 4px; }
.hero p { font-size: 1.15rem; max-width: 640px; margin: 0 auto 26px; color: #eafff1; min-height: 1.6em; }
.hero .cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* slider dots */
.hero-dots { position: absolute; z-index: 3; bottom: 22px; left: 0; right: 0; display: flex; gap: 9px; justify-content: center; }
.hero-dots button {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent;
  cursor: pointer; padding: 0; transition: background .2s;
}
.hero-dots button.active { background: #fff; }

/* ---- Scroll-reveal animaties -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.left { transform: translateX(-32px); }
.reveal.left.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: opacity .4s ease; transform: none; }
}

/* ---- Masonry fotogalerij ------------------------------------------------ */
.masonry { column-count: 3; column-gap: 16px; }
@media (max-width: 820px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }
.masonry img {
  width: 100%; display: block; border-radius: 12px; margin-bottom: 16px;
  border: 1px solid var(--line); cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.masonry img:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 10px; }
.lightbox .x { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 2.2rem;
  cursor: pointer; line-height: 1; background: none; border: none; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: #fff; color: var(--green-dark); }
.btn-primary:hover { background: #eafff1; text-decoration: none; }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* ---- Sections ------------------------------------------------------------ */
section.block { padding: 56px 0; }
section.block.soft { background: var(--bg-soft); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; gap: 12px; flex-wrap: wrap; }
/* two-weight uppercase headline style (thema-signatuur) */
.section-head h2 {
  font-size: 1.7rem; margin: 0; text-transform: uppercase; font-weight: 300;
  letter-spacing: .01em; position: relative; padding-bottom: 12px; line-height: 1.15;
}
.section-head h2 strong { font-weight: 800; }
.section-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 4px; background: var(--red); border-radius: 2px;
}
.section-head a { font-weight: 700; font-size: 0.9rem; }
.eyebrow { color: var(--green); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 0.75rem; }

.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 860px) {
  .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
}

/* ---- News cards ---------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .thumb {
  height: 150px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 2rem;
}
/* Kaart met een eigen afbeelding (bv. een activiteitenbeeld) */
.card .thumb.foto { background-size: cover; background-position: center; }
.card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.card .date { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.card h3 { font-size: 1.08rem; margin: 0 0 8px; }
.card p { color: var(--muted); font-size: 0.93rem; margin: 0 0 14px; }
.card .read { margin-top: auto; font-weight: 700; font-size: 0.88rem; }
.tag {
  display: inline-block; align-self: flex-start; background: var(--green-light); color: var(--green-dark);
  font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
/* Komende activiteit: rood label zodat het opvalt tussen het gewone nieuws */
.tag.komend { background: #fdecec; color: var(--red); }

/* ---- League table -------------------------------------------------------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel h3 { margin: 0 0 4px; font-size: 1.05rem; }
.panel .sub { color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; }
table.league { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.league th, table.league td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
table.league th { color: var(--muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; }
table.league td.team, table.league th.team { text-align: left; font-weight: 600; }
table.league tr.us { background: var(--green-light); }
table.league tr.us td { font-weight: 800; color: var(--green-dark); }

/* activiteiten-tabel */
table.activities { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.activities th {
  background: var(--green); color: #fff; text-align: left; padding: 12px 18px;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
}
table.activities td { padding: 11px 18px; border-bottom: 1px solid var(--line); }
table.activities tr:last-child td { border-bottom: none; }
table.activities tr:nth-child(even) td { background: var(--bg-soft); }
table.activities .act-date { font-weight: 700; color: var(--green-dark); white-space: nowrap; width: 190px; }
table.activities tr:hover td { background: var(--green-light); }

.widget-note {
  border: 2px dashed var(--green); border-radius: var(--radius);
  background: var(--green-light); padding: 18px; font-size: 0.9rem; color: var(--green-dark);
}
.widget-note strong { display: block; margin-bottom: 4px; }

/* ---- Ploegen: senioren + jeugd -------------------------------------------
   Vervangt het oude blok "Teams grid", op exact dezelfde plaats: tussen
   .widget-note en "---- Sponsors ----".

   Twee lagen:
     SENIOREN (3)  hebben een eigen pagina, dus brede klikbare kaarten met
                   letterschild, reeksbadge en een pijl. Ze staan hardcoded
                   in index.html, zodat de sectie ook klopt zonder teams.json.
     JEUGD   (24)  heeft alleen een naam, dus compacte chips in een rustige
                   band eronder. Ze komen uit content/teams.json.

   Bewust flex/grid en geen repeat(auto-fill, minmax(120px,1fr)) meer: die
   auto-fill maakte evenveel kolommen als er passen, waardoor een enkel
   element (de oude span met alle jeugdchips) in een cel van 123px werd
   geperst. Dat was de bug.

   Let op bij onderhoud: .senior-card staat NIET in revealSel (site.js regel
   69) en de jeugdchips bestaan nog niet wanneer site.js draait. Daardoor
   krijgt deze sectie geen inline transition-delay en geen .reveal-transform
   opgelegd. Voeg .senior-card dus niet toe aan revealSel; de hover gebruikt
   daarom ook geen transform op de kaart zelf, alleen op de pijl erin. */

/* kopregel boven een laag: kop links, uitleg rechts. De uitleg staat bewust
   BUITEN de h3, anders leest een schermlezer de kop voor als
   "Jeugd 24 ploegen Klik een ploeg voor de contactpersonen". */
.teams-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 16px; margin: 0 0 12px;
}
.teams-sub { margin: 0; font-size: 0.95rem; font-weight: 800; line-height: 1.35; }
.teams-sub .aantal { font-weight: 500; font-size: 0.82rem; color: var(--muted); margin-left: 6px; }
.teams-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* ---- Senioren: drie kaarten ---------------------------------------------
   Vaste drie kolommen boven 1000px, daaronder een enkele kolom. Geen
   auto-fit: dat gaf tussen ongeveer 490 en 725px twee smalle kaarten naast
   een brede alleenstaande derde. Gridcellen zijn bovendien altijd even
   hoog, dus de rij blijft recht ook als een reeks over twee regels valt. */
.senior-teams {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 0 0 28px;
}
/* Het breekpunt is bewust 860px: precies waar .grid.cols-3 en .grid.cols-2
   hierboven (regel 196) ook naar een kolom gaan. Zo klapt de hele pagina op
   hetzelfde punt om en staan de nieuwskaarten nooit met drie naast elkaar
   terwijl de ploegkaarten al onder elkaar staan. */
.senior-card {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 13px 14px; line-height: 1.3;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.senior-card:hover {
  border-color: var(--green); box-shadow: var(--shadow); text-decoration: none;
}
.senior-card:focus-visible {
  outline: 3px solid var(--green); outline-offset: 3px; text-decoration: none;
}
/* letterschild A, B of R; het eerste elftal krijgt het volle clubgroen */
.senior-card .letter {
  flex: 0 0 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--green-light); color: var(--green-dark);
  font-weight: 800; font-size: 1.05rem;
}
.senior-card.eerste .letter { background: var(--green); color: #fff; }
.senior-card .tekst { min-width: 0; }
.senior-card .naam { display: block; font-weight: 800; font-size: 1rem; }
.senior-card .rol { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
/* de reeks als badge: leest als een toestand en niet als een bijschrift */
.senior-card .reeks {
  display: inline-block; max-width: 100%; margin-top: 4px;
  padding: 2px 9px; border: 1px solid transparent; border-radius: 999px;
  background: var(--green-light); color: var(--green-dark);
  font-size: 0.74rem; font-weight: 700; line-height: 1.4;
  overflow-wrap: anywhere;
}
/* nog geen reeks bekend: rustig grijs en gestippeld, geen foutgevoel */
.senior-card .reeks.onbekend {
  background: var(--bg-soft); color: var(--muted);
  border-color: var(--line); border-style: dashed; font-weight: 600;
}
/* zichtbaar teken dat de kaart een link is */
.senior-card .pijl {
  flex: none; margin-left: auto; padding-left: 6px;
  color: var(--green); font-size: 1.05rem; transition: transform .15s ease;
}
.senior-card:hover .pijl { transform: translateX(3px); }

/* ---- Jeugd: band met alle ploegen als chips ----------------------------- */
.jeugd-band {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 16px;
}

/* Chipraster, ook gebruikt op jeugd.html. Flex en geen grid: de namen zijn
   erg ongelijk van lengte ("U6" naast "U11 Meisjes"), een raster met vaste
   minimumkolommen verspilt daar veel breedte. */
.teams { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chip {
  display: inline-block; max-width: 100%;
  padding: 5px 11px 5px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-weight: 700; font-size: 0.78rem; line-height: 1.4;
  /* geen white-space: nowrap: api/lib/validate.php laat 40 tekens per
     ploegnaam toe, en zo'n naam moet afbreken in plaats van de pagina
     breder te maken dan het scherm */
  overflow-wrap: anywhere;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
/* stip in clubgroen, bij meisjesploegen in clubrood. De naam bevat zelf het
   woord "Meisjes", dus kleur is extra informatie en nooit de enige. */
.team-chip::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin: -2px 6px 0 0;
}
.team-chip.meisjes::before { background: var(--red); }
.team-chip:hover {
  border-color: var(--green); background: var(--green-light);
  color: var(--green-dark); text-decoration: none;
}
.team-chip.meisjes:hover { border-color: var(--red); background: #fdecec; color: var(--red); }
.team-chip:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; text-decoration: none; }
.team-chip.meisjes:focus-visible { outline-color: var(--red); }

/* Grotere variant voor jeugd.html: daar zijn de ploegen het onderwerp van
   de pagina en niet een samenvatting, dus mogen ze meer plaats innemen. */
.teams.groot { gap: 10px; }
.teams.groot .team-chip { padding: 9px 16px 9px 18px; font-size: 0.95rem; border-radius: 12px; }
.teams.groot .team-chip::before { width: 7px; height: 7px; margin-right: 8px; }

/* Terugval als content/teams.json niet laadt. Bewust een gewone zin en geen
   chip: een chip met een lange tekst is breder dan een gsm-scherm. */
.teams-fallback { flex: 1 1 100%; margin: 0; font-size: 0.88rem; color: var(--muted); }

@media (max-width: 860px) {
  /* een kolom, als volle-breedte rijen met de pijl aan de rechterrand */
  .senior-teams { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
}
@media (max-width: 560px) {
  /* op een gsm iets krapper, zodat 24 chips niet het halve scherm vullen */
  .jeugd-band { padding: 12px 13px 14px; }
  .teams { gap: 6px; }
  .team-chip { padding: 4px 10px 4px 12px; font-size: 0.74rem; }
  .teams.groot .team-chip { padding: 7px 13px 7px 15px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* style.css regel 144-145 dekt alleen .reveal, niet deze transities */
  .senior-card, .senior-card .pijl, .team-chip { transition: none; }
  .senior-card:hover .pijl { transform: none; }
}

/* ---- Afbeelding op een artikelpagina ------------------------------------
   Volle breedte binnen de tekstkolom, eigen verhouding behouden. Bewust geen
   vaste hoogte: een affiche is liggend, een sfeerfoto staand, en allebei moeten
   volledig zichtbaar blijven. */
.artikel-beeld {
  display: block; width: 100%; height: auto; margin: 0 0 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}

/* ---- Sponsors ------------------------------------------------------------ */
.sponsors { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.sponsor {
  width: 150px; height: 70px; border: 1px solid var(--line); border-radius: 10px;
  display: grid; place-items: center; color: var(--muted); font-weight: 700; background: #fff;
}

/* ---- Roster table (team page) ------------------------------------------- */
.roster { width: 100%; border-collapse: collapse; }
.roster th, .roster td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.roster th { background: var(--bg-soft); font-size: 0.78rem; text-transform: uppercase; color: var(--muted); }
.roster td.num { font-weight: 800; color: var(--green); width: 48px; }

/* ---- Footer -------------------------------------------------------------- */
footer.site { background: var(--ink); color: #c2cad2; padding: 48px 0 28px; margin-top: 20px; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site h4 { color: #fff; font-size: 0.95rem; margin: 0 0 12px; }
footer.site a { color: #c2cad2; }
footer.site a:hover { color: #fff; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 6px; font-size: 0.9rem; }
.copyright { border-top: 1px solid #2c3540; margin-top: 32px; padding-top: 18px; font-size: 0.8rem; color: #8a96a3; }

.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 40px 0; }
.page-head h1 { margin: 0 0 6px; }
.breadcrumb { color: var(--muted); font-size: 0.85rem; }

.prose { max-width: 800px; }
.prose p { margin: 0 0 16px; }
.prose h3 { font-size: 1.25rem; margin: 28px 0 10px; color: var(--green-dark); }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { font-weight: 600; }
.lead { font-size: 1.12rem; color: var(--muted); }

/* notice / placeholder banner for content not in the backup */
.notice {
  background: #fff8e6; border: 1px solid #f0d98a; border-left: 4px solid #e0a800;
  border-radius: 10px; padding: 14px 16px; font-size: .9rem; color: #6b5300; margin: 0 0 22px;
}
.notice strong { color: #5a4500; }

/* FAQ accordion */
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 16px 18px; font-weight: 700; list-style: none; position: relative; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; color: var(--green); font-size: 1.3rem; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 18px 18px; color: var(--ink); }
.faq .answer p { margin: 0 0 12px; }
.faq .answer ul { margin: 0 0 12px; padding-left: 20px; }

/* contact form */
.form-grid { display: grid; gap: 14px; max-width: 520px; }
.form-grid label { font-weight: 600; font-size: .88rem; display: block; margin-bottom: 4px; }
.form-grid input, .form-grid textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-family: var(--font); font-size: .95rem;
}
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--green); }
.form-note { font-size: .82rem; color: var(--muted); }

/* ---- Contactschema jeugdwerking -----------------------------------------
   Zelfde kleurcodering als het oorspronkelijke schema: groen voor sportieve
   vragen, rood voor niet-sportieve. */
.contact-groep { margin-bottom: 28px; }
.contact-groep > h3 {
  margin: 0 0 14px; padding: 10px 16px; border-radius: 10px;
  color: #fff; font-size: 1.05rem; letter-spacing: .02em;
}
.contact-groep.sportief > h3 { background: var(--green); }
.contact-groep.niet-sportief > h3 { background: var(--red); }

.contact-vraag {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
}
.contact-groep.sportief .contact-vraag { border-left-color: var(--green); }
.contact-groep.niet-sportief .contact-vraag { border-left-color: var(--red); }
.contact-vraag .vraag { margin: 0 0 8px; font-weight: 700; }
.contact-vraag .stappen { margin: 0; padding-left: 22px; color: var(--ink); }
.contact-vraag .stappen li { margin-bottom: 4px; font-size: .94rem; }
.contact-vraag .stappen li::marker { color: var(--muted); font-weight: 700; }

.contactregel { font-size: .92rem; margin: 0 0 12px; }
.contactregel strong { color: var(--green-dark); }

/* Telefoonnummers: duidelijk aantikbaar op gsm */
a.tel { color: var(--green-dark); font-weight: 600; white-space: nowrap; }
a.tel:hover { color: var(--red); }

/* people / board cards */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 18px; }
.person { background:#fff; border:1px solid var(--line); border-radius:14px; padding:0; overflow:hidden; text-align:center; }
.person .photo { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--green-light); display:block; }
.person .photo.placeholder { display:grid; place-items:center; font-size:2.4rem; color:var(--green); }
.person .info { padding:14px; }
.person .role { color: var(--green); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.person .name { font-weight:800; margin-top:2px; font-size:1.02rem; }

/* sponsor logos (real images) */
.sponsor-logos { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; align-items:center; }
.sponsor-logos a, .sponsor-logos div {
  background:#fff; border:1px solid var(--line); border-radius:12px; height:110px;
  display:grid; place-items:center; padding:16px;
}
.sponsor-logos img { max-width:100%; max-height:78px; object-fit:contain; }

/* team photo */
.team-photo { width:100%; border-radius:14px; border:1px solid var(--line); display:block; margin-bottom:18px; }

.cards-link { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.link-card { display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; color:inherit; }
.link-card:hover { border-color:var(--green); box-shadow:var(--shadow); text-decoration:none; transform:translateY(-2px); transition:.15s; }
.link-card .ic { font-size:1.8rem; }
.link-card h3 { margin:8px 0 4px; font-size:1.05rem; }
.link-card p { margin:0; color:var(--muted); font-size:.88rem; }

/* ---- Chat widget --------------------------------------------------------- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 26px rgba(12,122,61,.45);
  display: grid; place-items: center; transition: transform .15s ease, background .15s ease;
}
.chat-fab:hover { transform: scale(1.06); background: var(--green-dark); }

.chat-panel {
  position: fixed; right: 22px; bottom: 96px; z-index: 200;
  width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22); display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.open { display: flex; }

.chat-head {
  background: var(--green); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px;
}
.chat-head .avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: grid; place-items: center; font-weight: 900; font-size: .8rem; }
.chat-head strong { display: block; font-size: .95rem; }
.chat-head small { font-size: .72rem; color: #d6f0e0; }
.chat-head .close { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; }

.chat-body { flex: 1; padding: 14px; overflow-y: auto; background: var(--bg-soft); display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.user { background: var(--green); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--bg-soft); }
.chat-suggest button {
  background: var(--green-light); color: var(--green-dark); border: 1px solid #cdebd8;
  border-radius: 999px; padding: 6px 11px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.chat-suggest button:hover { background: #d6f0e0; }

.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: .9rem; font-family: var(--font); }
.chat-input input:focus { outline: none; border-color: var(--green); }
.chat-input button { background: var(--green); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; }
.chat-input button:hover { background: var(--green-dark); }

/* ---- Aankondigingsbalk (sticky bovenaan) -------------------------------- */
.announce-bar {
  background: linear-gradient(90deg, #c0392b, #e67e22);
  color: #fff; text-align: center; font-weight: 700; font-size: .92rem;
  padding: 10px 44px 10px 16px; position: relative;
}
.announce-bar a { color: #fff; text-decoration: underline; }
.announce-bar .pulse {
  display: inline-block; background: rgba(255,255,255,.25); border-radius: 999px;
  padding: 2px 9px; margin-right: 8px; font-size: .72rem; letter-spacing: .05em;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.announce-bar .close-bar {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1;
}

/* ---- Event-popup -------------------------------------------------------- */
.event-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(10,20,15,.62);
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.event-overlay.open { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.event-card {
  position: relative; width: 460px; max-width: 100%; background: #fff;
  border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.4);
  animation: popIn .35s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes popIn { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

.event-banner {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; padding: 30px 26px 26px; text-align: center; position: relative; overflow: hidden;
}
.event-banner::after {
  content: "⚽"; position: absolute; right: -10px; bottom: -18px; font-size: 7rem; opacity: .14;
}
.event-banner .badge {
  display: inline-block; background: #f1c40f; color: #5a4500; font-weight: 900;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.event-banner h2 { margin: 0 0 6px; font-size: 1.75rem; line-height: 1.15; }
.event-banner p { margin: 0; color: #d6f0e0; font-size: .95rem; }

.event-body { padding: 22px 26px 26px; }
.event-meta { list-style: none; margin: 0 0 18px; padding: 0; }
.event-meta li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.event-meta li:last-child { border-bottom: none; }
.event-meta .ic { font-size: 1.15rem; width: 24px; text-align: center; }
.event-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.event-actions .btn { flex: 1; text-align: center; }
.event-actions .btn-primary { background: var(--green); color: #fff; }
.event-actions .btn-primary:hover { background: var(--green-dark); }
.event-actions .btn-ghost { border-color: var(--green); color: var(--green); }

.event-card .close-x {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  background: rgba(255,255,255,.25); color: #fff; border: none; width: 32px; height: 32px;
  border-radius: 50%; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.event-card .close-x:hover { background: rgba(255,255,255,.4); }