:root{
  --green-900:#0F3D2E;
  --green-700:#1A5C46;
  --green-600:#226B52;
  --cream:#F0EAD6;
  --cream-50:#FBF8EF;
  --gold:#F2C200;
  --gold-600:#D9AE00;
  --ink:#14241D;
  --red:#9a3320;
  /* Gedeelde typografie met de Houtvenne-overlaymodule (matchday studio) */
  --display:'salo-variable','Bodoni Moda',Georgia,serif;
  --name:'Source Sans 3',system-ui,sans-serif;
  --line:rgba(15,61,46,.14);
  --shadow:0 1px 2px rgba(15,61,46,.05),0 6px 18px rgba(15,61,46,.07);
  --shadow-lg:0 14px 40px rgba(15,61,46,.14);
  --r:12px;
  --r-lg:20px;
  --maxw:1140px;
  /* Sterkere lijn voor interactieve randen (knoppen, tabs, velden): >=3:1 non-text contrast */
  --line-strong:rgba(15,61,46,.36);
}
*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] moet altijd winnen van component-display (bv. .cal li{display:grid}),
   anders werken de "Laad meer"-inklap en lege-staat-toggles niet. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--name);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Geen horizontale schuif: stray-overflow (bv. de sponsor-marquee) afkappen.
     'clip' i.p.v. 'hidden' zodat de sticky header blijft werken. */
  overflow-x:clip;
}

/* ---------- Typografie (elegante display-serif, licht) ---------- */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:1.04;letter-spacing:.01em;color:var(--green-900);
  /* Salo stylistic set 1 = nette, gewone hoofdletter-O (zoals in Figma) */
  font-feature-settings:"ss01" 1}
/* cijfers in dezelfde serif als de overlay-scores */
.num{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}
/* kleine technische labels blijven Source Sans 3 (zoals de overlay-subtitels) */
.label{font-family:var(--name);text-transform:uppercase;letter-spacing:.12em;font-weight:700}

a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible,button:focus-visible,.card:focus-visible{
  outline:3px solid var(--green-900);outline-offset:3px;border-radius:6px}
/* Op donkergroene vlakken (header, hero, footer, strip, bottom-bar) een goudgele ring i.p.v. onzichtbaar groen */
header a:focus-visible,header button:focus-visible,.hero a:focus-visible,.hero button:focus-visible,
footer a:focus-visible,.alert:focus-visible,.botbar a:focus-visible,.sec-green a:focus-visible,
.sec-green button:focus-visible{outline-color:var(--gold)}
/* Skip-link: onzichtbaar tot toetsenbordfocus */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--green-900);color:var(--cream);
  padding:10px 16px;border-radius:8px;font-weight:700;transition:top .15s}
.skip-link:focus{top:12px}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--name);font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--green-900)}
.btn-groen{background:var(--green-900);color:var(--cream)}
.btn-outline{border-color:var(--green-900);color:var(--green-900)}
.btn-ghost{color:var(--green-900);padding:13px 6px}
.btn-lg{font-size:16px;padding:15px 28px}
.btn-ghost .arr{transition:transform .2s ease}
@media(hover:hover){
  .btn-gold:hover{background:var(--gold-600);box-shadow:0 8px 22px rgba(242,194,0,.4)}
  .btn-groen:hover{background:var(--green-700);box-shadow:0 8px 22px rgba(15,61,46,.28)}
  .btn-outline:hover{background:var(--green-900);color:var(--cream)}
  .btn-ghost:hover{color:var(--green-600)}
  .btn-ghost:hover .arr{transform:translateX(4px)}
}

/* ---------- Afgelasting-strip (status-component, groen=ok / rood=afgelast) ---------- */
.alert{font-size:14px;font-weight:600;text-align:center;padding:11px 24px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.alert .dot{width:9px;height:9px;border-radius:50%;flex:none;animation:pulse 1.6s infinite}
.alert.ok{background:var(--green-700);color:var(--cream)}
.alert.ok .dot{background:#7BD389}
.alert.off{background:var(--red);color:#fff}
.alert.off .dot{background:#ffd2c7}
.alert a{text-decoration:underline;text-underline-offset:3px;font-weight:700;color:inherit}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--green-900);color:var(--cream);
  border-bottom:1px solid rgba(240,234,214,.12)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:400;
  font-feature-settings:"ss01" 1;font-size:23px;letter-spacing:0;color:var(--cream)}
.crest{width:auto;height:48px;flex:none;display:block}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:8px}
.nav>ul{align-items:center}
.nav>ul>li{display:flex;align-items:center}
/* Alle top-items op exact dezelfde hoogte: zelfde box, verticaal gecentreerd */
.nav>ul>li>a,.nav>ul>li>.dd-top{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0;line-height:1}
.nav ul a{font-size:15px;font-weight:600;color:rgba(240,234,214,.82);padding:6px 0;position:relative}
.nav ul a:hover{color:var(--cream)}
.nav ul a.active{color:var(--cream)}
.nav ul a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--gold);border-radius:2px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-right .btn{padding:9px 18px;font-size:14px}
.socials{display:flex;gap:8px}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(240,234,214,.25);
  display:grid;place-items:center;color:var(--cream);transition:.15s}
.socials a:hover{background:var(--cream);color:var(--green-900)}
.burger{display:none;background:none;border:0;color:var(--cream);cursor:pointer;padding:6px}
/* ---------- Nav dropdown (Ploegen) ---------- */
.nav ul li.has-dd{position:relative}
.nav .dd-top{display:inline-flex;align-items:center;gap:5px}
.nav .dd-top .caret{width:13px;height:13px}
.nav .dd,.nav .dd-sub{position:absolute;display:block;list-style:none;margin:0;background:var(--green-900);
  border:1px solid rgba(240,234,214,.16);border-radius:12px;padding:7px;
  box-shadow:0 18px 44px rgba(0,0,0,.30);opacity:0;visibility:hidden;
  transition:opacity .15s,transform .15s,visibility .15s;z-index:60}
/* 1e niveau: verticaal, netjes naar beneden uitgelijnd */
.nav .dd{top:100%;left:0;margin-top:8px;min-width:288px;transform:translateY(6px)}
/* 2e niveau: horizontaal (Home | Wedstrijden), naast het item */
/* 2e niveau: verticaal (Home / Wedstrijden onder elkaar), rechts naast het item */
.nav .dd-sub{top:-6px;left:calc(100% + 6px);display:block;min-width:172px;transform:translateX(6px)}
.nav ul li.has-dd:hover>.dd,.nav ul li.has-dd:focus-within>.dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav .dd .has-sub:hover>.dd-sub,.nav .dd .has-sub:focus-within>.dd-sub,.nav .dd .has-sub.open>.dd-sub{opacity:1;visibility:visible;transform:translateX(0)}
.nav .dd li{position:relative;list-style:none}
/* Alle items even hoog */
.nav .dd a,.nav .dd .dd-sub-top{display:flex;align-items:center;gap:12px;
  height:42px;padding:0 14px;border-radius:8px;font-size:14.5px;font-weight:600;
  color:rgba(240,234,214,.85);white-space:nowrap;cursor:pointer}
.nav .dd .dd-sub-top{justify-content:space-between;width:100%;border:0;background:none;margin:0;font-family:inherit;text-align:left}
.nav .dd-sub a{justify-content:flex-start}
.nav .dd a::after{display:none}
.nav .dd a:hover,.nav .dd .has-sub:hover>.dd-sub-top{background:rgba(240,234,214,.10);color:var(--cream)}
.nav .dd .caret-r{width:12px;height:12px;opacity:.7}
/* 3e provinciale + beloften: gewone rijen (geen visuele bundeling) */
.nav .dd .dd-grp{list-style:none;margin:0;padding:0;border:0;background:none}
.nav .dd .dd-grp-list{display:block;list-style:none;margin:0;padding:0}
/* Ploegrij in de groep: naam links, Home | Wedstrijden inline rechts (geen flyout) */
.nav .dd .dd-teamrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:42px;padding:0 6px 0 12px;border-radius:8px}
.nav .dd .dd-team{font-size:14.5px;font-weight:600;color:rgba(240,234,214,.85);white-space:nowrap}
.nav .dd .dd-links{display:flex;gap:4px}
.nav .dd .dd-links a{height:30px;padding:0 11px;display:inline-flex;align-items:center;border-radius:6px;
  font-size:13px;font-weight:600;color:rgba(240,234,214,.68);white-space:nowrap}
.nav .dd .dd-links a::after{display:none}
.nav .dd .dd-links a:hover{background:rgba(240,234,214,.12);color:var(--cream)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--green-900);color:var(--cream);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 80% -10%,rgba(34,107,82,.55),transparent 60%),
    radial-gradient(800px 400px at -5% 110%,rgba(242,194,0,.10),transparent 60%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;
  align-items:center}
/* Enkel de verticale ruimte, en met .hero ervoor zodat dit zwaarder weegt dan
   .wrap{padding:0 24px}. Stond hier vroeger een padding-shorthand, dan wiste
   .wrap (dat verderop in dit bestand nog eens opduikt voor smalle schermen) die
   ruimte weer uit: de hero-knoppen plakten op de telefoon tegen de onderrand van
   het groen, en de titel raakte links de schermrand. De zijmarge komt nu van
   .wrap, zodat de hero op elke breedte uitlijnt met de secties eronder. */
.hero .hero-inner{padding-block:84px 92px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.hero h1{font-size:calc(clamp(46px,6.2vw,84px) * var(--le-scale,1));color:var(--cream);max-width:15ch}
.hero p.lead{font-size:18px;color:rgba(240,234,214,.78);max-width:46ch;margin:26px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;margin-top:46px;border-top:1px solid rgba(240,234,214,.18);padding-top:26px}
.hero-stats .s b{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;
  font-size:40px;color:var(--cream);display:block;line-height:1}
.hero-stats .s span{font-size:13px;color:rgba(240,234,214,.7)}

/* Volgende match-kaart in hero */
.match{background:var(--cream-50);color:var(--ink);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--shadow-lg);border:1px solid rgba(15,61,46,.08)}
.match .top{display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-600)}
.match .badge{background:var(--green-900);color:var(--cream);padding:4px 10px;border-radius:999px;font-size:11px}
.match .badge:empty{display:none}
/* A/B-toggle in de matchkaart */
.match .toggle{display:flex;gap:6px;margin:16px 0 4px}
.match .toggle button{flex:1;border:1.5px solid var(--line-strong);background:#fff;border-radius:999px;
  padding:7px 0;font-family:var(--name);font-size:13px;font-weight:700;color:var(--green-900);cursor:pointer}
.match .toggle button.on{background:var(--green-900);color:var(--cream);border-color:var(--green-900)}
.match .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px 0}
.match .team{text-align:center}
.match .team .logo{width:62px;height:62px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-weight:400;
  font-feature-settings:"ss01" 1;font-size:26px;color:var(--cream)}
.lg-green{background:var(--green-900)}
.match .team .logo.real{background:transparent}
.match .team .logo.real img{height:60px;width:auto;display:block}
.match .team .nm{font-weight:700;font-size:15px}
.match .vs{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;
  font-size:22px;color:var(--green-600)}
.match .when{text-align:center;background:var(--cream);border-radius:10px;padding:12px;margin-bottom:16px}
.match .m-empty{text-align:center;color:#6b6b5e;font-size:14px;padding:26px 0 10px}
/* Toggle 3e provinciale / beloften op de wedstrijdenpagina */
.wed-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.wed-tabs button{font-family:var(--name);font-weight:700;font-size:14px;cursor:pointer;
  padding:10px 20px;border:1.5px solid var(--line-strong);background:#fff;border-radius:999px;color:var(--ink);transition:.12s}
.wed-tabs button.on{background:var(--green-900);border-color:var(--green-900);color:var(--cream)}
@media(hover:hover){.wed-tabs button:not(.on):hover{border-color:var(--green-600);color:var(--green-600)}}
.match .when b{font-size:15px}.match .when span{display:block;font-size:13px;color:var(--green-600)}
.match .acts{display:grid;grid-template-columns:1fr;gap:10px}
.match .acts .btn{justify-content:center;width:100%;font-size:14px;padding:11px}

/* ---------- Actiebanner (startpagina, beheerbaar in Instellingen) ----------
   Eén brede afbeelding met een balk eronder; de hele kaart is de link.
   De balk is donkergroen zodat hij doorloopt op de banner zelf en de kaart
   als één geheel leest op de crème achtergrond. */
.promo{padding:56px 0 0;background:var(--cream)}
.promo-card{display:block;max-width:960px;margin:0 auto;background:var(--green-900);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  transition:transform .18s ease,box-shadow .18s ease}
.promo-card img{width:100%;height:auto}
.promo-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 16px 16px 26px;border-top:1px solid rgba(240,234,214,.13)}
.promo-txt{font-size:15px;font-weight:600;color:rgba(240,234,214,.82);line-height:1.4}
/* De knop is een span binnen de link: geen eigen klikdoel, wel het knop-uiterlijk. */
.promo-bar .btn{flex:0 0 auto}
@media(hover:hover){
  .promo-card:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(15,61,46,.22)}
  .promo-card:hover .btn-gold{background:var(--gold-600)}
}
@media(max-width:700px){
  .promo{padding-top:38px}
  .promo-bar{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .promo-txt{text-align:center}
  .promo-bar .btn{justify-content:center;width:100%}
}

/* ---------- Section frame ---------- */
section{padding:88px 0;scroll-margin-top:88px}
.sec-cream{background:var(--cream)}
.sec-cream-50{background:var(--cream-50)}
.sec-green{background:var(--green-900);color:var(--cream)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,3.9vw,50px);max-width:18ch}
.sec-green .sec-head h2{color:var(--cream)}
.sec-head .kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:8px}
.sec-green .sec-head .kicker{color:var(--gold)}
/* gouden haarlijn-detail, rijmt met de haarlijnen in de display-serif */
.sec-head h2{position:relative;padding-bottom:14px}
/* Accent-streep onder titels = ROOD. Uitzondering: nooit rood op groen → daar GEEL. */
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--red)}
.sec-green .sec-head h2::after{background:var(--gold)}

/* ---------- Scorebord: uitslagen + stand samen ---------- */
.scorebord{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.sb-sub{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-600);margin:0 0 16px}
.sb-sub a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.sb-sub a .arr{transition:transform .2s ease}
.sb-sub a:hover .arr{transform:translateX(4px)}
.sb-full{margin-top:14px}
.results{display:flex;flex-direction:column;gap:12px}
/* "Komende wedstrijden"-kop lager t.o.v. de uitslagkaart erboven */
.results + .sb-sub{margin-top:40px}
/* Uitslagkaart: competitie + uitslag-badge bovenaan, ploeg (met logo) links,
   score groot rechts, met een subtiele accentrand per uitkomst. */
.res{position:relative;background:var(--cream-50);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:14px;padding:20px 24px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
/* De accentrand volgt de uitkomst. Twee schrijfwijzen, want op de homepage
   staat er bewust GEEN winst/verlies-badge meer in de kaart (klasse op .res),
   terwijl de uitslagenlijsten die badge wel tonen (:has). */
.res-w,.res:has(.tag-w){border-left-color:var(--green-600)}
.res-d,.res:has(.tag-d){border-left-color:var(--gold-600)}
.res-l,.res:has(.tag-l){border-left-color:var(--red)}
.res .comp{grid-column:1;grid-row:1;font-size:11px;font-weight:800;color:var(--green-600);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.res .tag{grid-column:2;grid-row:1;justify-self:end;align-self:start;margin:0 0 16px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;white-space:nowrap}
.res .t{grid-column:1;min-width:0;display:flex;align-items:center;gap:11px;
  font-weight:600;font-size:15.5px;color:var(--green-900);padding:10px 0}
.res .res-crest{flex:0 0 auto;width:24px;height:24px;object-fit:contain}
.res .res-crest--none{width:24px;height:24px}
.res .res-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .sc{grid-column:2;justify-self:end;align-self:center;
  font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;font-size:30px;line-height:1;
  color:var(--green-900);font-variant-numeric:tabular-nums;
  width:auto;height:auto;min-width:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 0 16px;display:block}
.res .t:nth-child(4),.res .sc:nth-child(5){border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.tag-w{background:rgba(34,107,82,.16);color:var(--green-700)}
.tag-d{background:rgba(15,61,46,.10);color:var(--green-700)}
.tag-l{background:rgba(154,51,32,.14);color:var(--red)}

/* Komende wedstrijden teaser. Geen lijn bovenaan: die viel samen met de
   scheidingslijntjes tussen de rijen en las als een streep onder de kop. */
.upcoming{list-style:none;margin-top:8px}
.upcoming li a{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line)}
.upcoming li:last-child a{border-bottom:0}
.upcoming .u-dt{font-weight:700;font-size:13px;color:var(--green-600);min-width:96px;font-variant-numeric:tabular-nums}
.upcoming .u-mt{flex:1;font-weight:600;font-size:15px}
.upcoming .u-vn{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green-600)}

/* Stand */
.table-card{background:var(--cream-50);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line)}
.table-card + .table-card{margin-top:18px}
.table-card h3{background:var(--green-900);color:var(--cream);font-size:16px;padding:13px 18px;
  display:flex;justify-content:space-between;align-items:center}
.table-card h3 .rk{font-size:12px;color:var(--gold);font-family:var(--name);font-weight:700;letter-spacing:.04em}
.t-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 14px;text-align:center}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--green-600);font-weight:700;
  border-bottom:1px solid var(--line)}
td:nth-child(2),th:nth-child(2){text-align:left}
tbody tr:nth-child(even){background:rgba(15,61,46,.035)}
tbody tr.me{background:var(--gold);font-weight:800}
tbody tr.me td{color:var(--green-900)}
.pos{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;font-size:18px}
.t-note{background:var(--cream-50);font-size:12px;font-style:italic;color:var(--green-600);
  line-height:1.45;padding:9px 18px;border-bottom:1px solid var(--line)}
td.t-team{white-space:normal}
/* Klassement zonder wapenschilden: rustiger beeld, en plaats voor de cijferkolommen
   (M = gespeeld, W/G/V, +/- = doelpuntensaldo, Ptn). De cijfers krijgen smallere
   cellen en tabulaire cijfers zodat de kolommen netjes onder elkaar uitlijnen. */
.stand-t td,.stand-t th{padding-left:8px;padding-right:8px}
.stand-t td:first-child,.stand-t th:first-child{padding-left:16px}
.stand-t td:last-child,.stand-t th:last-child{padding-right:16px}
.stand-t td:nth-child(n+3){font-variant-numeric:tabular-nums}
.stand-t td:last-child{font-weight:700}
.stand-t .t-sal{color:var(--green-600)}
.stand-t tr.me .t-sal{color:inherit}
.cal-more-wrap{text-align:center;margin-top:20px}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--cream-50);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease;display:block}
@media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.card .ph{height:186px;position:relative;display:grid;place-items:center;color:rgba(240,234,214,.6)}
.card .ph svg{width:54px;height:54px;opacity:.5}
.card .cat{position:absolute;top:14px;left:14px;background:var(--green-900);color:var(--cream);
  font-size:11px;font-weight:800;padding:5px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.card .body{padding:20px}
.card .date{font-size:12px;color:var(--green-600);font-weight:600}
.card h3{font-size:23px;margin:8px 0 8px;line-height:1.12}
.card p{font-size:14px;color:rgba(20,36,29,.72)}

/* ---------- CTA band ---------- */
.band{background:var(--green-900);color:var(--cream);border-radius:var(--r-lg);
  padding:48px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;
  position:relative;overflow:hidden}
.band::after{content:"1946";position:absolute;right:30px;bottom:-18px;font-family:var(--display);
  font-weight:400;font-feature-settings:"ss01" 1;font-size:140px;color:rgba(240,234,214,.06);
  line-height:1;pointer-events:none}
.band .txt{position:relative;z-index:1}
.band h2{font-size:clamp(30px,3.6vw,46px);color:var(--cream)}
.band p{color:rgba(240,234,214,.8);margin-top:8px;max-width:50ch}
.band .btn{position:relative;z-index:1}
/* Word lid dat mee in de groene ploegen-sectie zit: geen eigen kaart, blendt in het groen */
.band.on-green{background:transparent;border-radius:0;padding:40px 0 0;
  border-top:1px solid rgba(240,234,214,.16)}
.band.on-green::after{right:0}

/* ---------- Teams / jeugd ---------- */
.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* clean ploeg-kaart, consistent met de ploegenpagina */
.tile{display:flex;flex-direction:column;background:var(--cream-50);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 22px 24px;color:var(--green-900);text-decoration:none;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.tile .kind{font-family:var(--name);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600)}
.tile .nm{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;text-transform:uppercase;
  font-size:24px;line-height:1.05;color:var(--green-900);margin:8px 0 4px}
.tile .rk{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-600)}
.tile .rule{display:block;width:34px;height:2px;background:var(--gold);margin:14px 0 0}
/* jeugd per leeftijd — directe ingang */
.youth-pick{margin-top:26px;background:rgba(240,234,214,.06);border:1px solid rgba(240,234,214,.14);
  border-radius:var(--r);padding:22px 24px}
.youth-pick .yp-lbl{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.youth-pick .chips{display:flex;flex-wrap:wrap;gap:9px}
.youth-pick .chips a{display:inline-flex;align-items:center;min-height:44px;
  padding:8px 15px;border-radius:999px;border:1.5px solid rgba(240,234,214,.45);
  font-weight:700;font-size:14px;color:var(--cream);transition:.15s}
@media(hover:hover){.youth-pick .chips a:hover{background:var(--cream);color:var(--green-900);border-color:var(--cream)}}

/* ---------- Sponsors ---------- */
/* ---------- Sponsors: dubbele stroom (carousel) ---------- */
.sec-sponsors{background:var(--green-900);color:var(--cream);padding:52px 0 58px;overflow:hidden}
.sp-head{text-align:center;margin-bottom:30px}
.sp-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
/* Zelfde formaat als elke andere sectietitel (.sec-head h2), anders valt deze
   kop kleiner uit dan "Laatste nieuws" of "Uitslagen & stand". */
.sp-head h2{color:var(--cream);font-size:clamp(32px,3.9vw,50px)}
/* 'Sponsor worden'-CTA op de groene partnersband: crème i.p.v. het groene .btn-ghost */
.sp-cta-wrap{margin-top:20px}
.sec-sponsors .sp-cta{color:var(--cream)}
@media(hover:hover){.sec-sponsors .sp-cta:hover{color:var(--gold)}}
.sp-main-wrap{display:flex;justify-content:center;margin:2px 0 26px}
.sp-streams{display:flex;flex-direction:column;gap:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sp-row{display:flex;overflow:hidden}
.sp-track{display:flex;gap:16px;flex:0 0 auto;width:max-content;padding:8px}
/* Rustiger tempo: de logo's mogen leesbaar voorbijkomen, niet voorbijrazen. */
.sp-row--left  .sp-track{animation:sp-left  78s linear infinite}
.sp-row--right .sp-track{animation:sp-right 92s linear infinite}
.sp-streams:hover .sp-track{animation-play-state:paused}
@keyframes sp-left {from{transform:translateX(0)}     to{transform:translateX(-50%)}}
@keyframes sp-right{from{transform:translateX(-50%)}  to{transform:translateX(0)}}
.sc{flex:0 0 auto;width:clamp(168px,20vw,220px);height:clamp(92px,11.5vw,118px);background:var(--cream-50);
  border-radius:16px;border:1px solid rgba(15,61,46,.08);box-shadow:0 10px 24px -14px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.6vw,16px);position:relative;
  transition:transform .3s ease,box-shadow .3s ease}
/* Vult het vak zo groot mogelijk, maar contain = nooit afgesneden. */
.sc img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
/* Niet-transparant logo: vak in de logokleur (inline), minder padding zodat het
   logo groter is, en een fijne lichte rand zodat ook een zwart/navy vak leesbaar
   blijft op het groen. */
.sc--filled{padding:clamp(8px,1vw,12px);border-color:rgba(255,255,255,.16)}
.sc-txt{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;font-size:21px;
  color:var(--green-900);text-align:center;line-height:1.05}
@media(hover:hover){.sp-streams:hover .sc:hover{transform:translateY(-4px);box-shadow:0 18px 34px -14px rgba(0,0,0,.65)}}
.sc--main{width:clamp(250px,34vw,348px);height:clamp(120px,14vw,150px);background:linear-gradient(180deg,#fff,var(--cream-50));
  border:2px solid var(--gold);padding:26px 30px 22px;
  box-shadow:0 0 0 4px rgba(242,194,0,.16),0 18px 40px -16px rgba(0,0,0,.6),0 0 34px -6px rgba(242,194,0,.45)}
.sc--main .sc-txt{font-size:26px}
.sc-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--green-900);
  font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.sc-badge::before{content:"\2605\00a0"}
@media(max-width:640px){
  .sp-row--left .sp-track{animation-duration:30s}
  .sp-row--right .sp-track{animation-duration:36s}
}
@media(prefers-reduced-motion:reduce){
  .sp-track{animation:none!important}
  .sp-row{overflow-x:auto;scrollbar-width:none}
  .sp-row::-webkit-scrollbar{display:none}
}

/* ---------- Footer ---------- */
footer{background:var(--green-900);color:var(--cream);padding:64px 0 26px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
footer h4{font-family:var(--name);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:9px;color:rgba(240,234,214,.78);font-size:14px}
footer a:hover{color:var(--gold)}
.fbrand p{color:rgba(240,234,214,.7);font-size:14px;margin:14px 0 0;max-width:34ch}
.fbottom{border-top:1px solid rgba(240,234,214,.14);padding-top:20px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(240,234,214,.6)}

/* ---------- Mobiel menu + bottom-bar ---------- */
.mobile-menu{display:none}
.botbar{display:none}

/* ---------- Responsive ---------- */
@media(max-width:940px){
  section{padding:56px 0;scroll-margin-top:80px}
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .hero .hero-inner{padding-block:40px 52px}
  .hero-inner .match{order:-1}            /* match-kaart eerst op mobiel */
  .scorebord{grid-template-columns:1fr;gap:30px}
  .news{grid-template-columns:1fr}
  .teams{grid-template-columns:repeat(2,1fr)}
  .sponsors{grid-template-columns:repeat(3,1fr)}
  .nav ul,.nav-right .socials,.nav-right .btn{display:none}
  .burger{display:block}
  .nav-right{margin-left:auto}   /* burger helemaal rechtsboven op mobiel */
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:30px}
  .band{flex-direction:column;text-align:center;align-items:center;padding:36px 26px}
  .mobile-menu.open{display:block;background:var(--green-700);padding:8px 0 16px}
  .mobile-menu ul{list-style:none}
  .mobile-menu a{display:block;padding:14px 24px;font-weight:600;border-bottom:1px solid rgba(240,234,214,.1)}
  .mobile-menu .mm-group-h{display:block;padding:14px 24px 6px;font-size:12px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(240,234,214,.1)}
  .mobile-menu a.mm-sub{padding-left:38px;font-weight:600;color:rgba(240,234,214,.88)}
  .mobile-menu .mm-cta{margin:14px 24px 4px;display:block;text-align:center;border-bottom:0}
  .mobile-menu .mm-soc{display:flex;gap:10px;padding:14px 24px 4px}
  .mobile-menu .mm-soc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(240,234,214,.3);
    display:grid;place-items:center;padding:0}
  /* sticky bottom action-bar in de duimzone */
  body{padding-bottom:66px}
  .botbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--green-900);border-top:1px solid rgba(240,234,214,.14);
    padding-bottom:env(safe-area-inset-bottom)}
  .botbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;
    color:rgba(240,234,214,.82);font-size:11px;font-weight:600}
  .botbar a svg{width:21px;height:21px}
  .botbar a:active{color:var(--cream)}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  section{padding:46px 0}
  .alert{font-size:13px;padding:10px 16px}
  .nav{height:64px}
  .crest{height:42px}
  .brand{font-size:19px;gap:9px}
  .hero p.lead{font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1;justify-content:center}
  .hero-stats{gap:24px;margin-top:34px}
  .hero-stats .s b{font-size:30px}
  .match{padding:20px}
  .teams{grid-template-columns:1fr 1fr;gap:14px}
  .sponsors{grid-template-columns:repeat(2,1fr)}
  .sp.big{grid-column:span 2}
  .band{padding:30px 20px}
  .band .btn{width:100%;justify-content:center}
  .band::after{font-size:96px;right:14px}
  th,td{padding:9px 8px;font-size:13px}
  /* compacte stand op klein scherm: enkel #, ploeg, ptn */
  .compact:not(.stand-t) th:nth-child(n+3):nth-child(-n+5),
  .compact:not(.stand-t) td:nth-child(n+3):nth-child(-n+5){display:none}
  /* Klassement met 8 kolommen: W/G/V wijken, #, ploeg, M, +/- en Ptn blijven staan */
  .stand-t th:nth-child(n+4):nth-child(-n+6),
  .stand-t td:nth-child(n+4):nth-child(-n+6){display:none}
  .stand-t td,.stand-t th{padding-left:6px;padding-right:6px}
  .stand-t td:first-child,.stand-t th:first-child{padding-left:12px}
  .stand-t td:last-child,.stand-t th:last-child{padding-right:12px}
  .table-card h3{font-size:15px;padding:12px 16px}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .fbrand{grid-column:1 / -1}
  .upcoming .u-dt{min-width:84px}
}

/* ===================================================================
   SUBPAGINA'S (wedstrijden / ploegen / club / contact)
   =================================================================== */

/* ---------- Pagina-hero (compacte groene kop) ---------- */
.page-hero{position:relative;background:var(--green-900);color:var(--cream);overflow:hidden;
  padding:64px 0 56px;scroll-margin-top:88px}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 420px at 85% -20%,rgba(34,107,82,.5),transparent 60%),
             radial-gradient(700px 360px at -5% 120%,rgba(242,194,0,.08),transparent 60%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:calc(clamp(40px,5.4vw,68px) * var(--le-scale,1));color:var(--cream);max-width:16ch}
.page-hero .lead{font-size:18px;color:rgba(240,234,214,.8);max-width:54ch;margin-top:18px}
/* Subtiele partnerregel onder de intro (bv. samenwerking met KVC Westerlo). */
.page-hero .hero-partner{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(240,234,214,.6)}
.page-hero .hero-partner::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--gold);box-shadow:0 0 0 4px rgba(242,194,0,.14)}
.page-hero .page-note{margin-top:18px;font-size:14px;color:rgba(240,234,214,.7);max-width:60ch;
  border-left:3px solid var(--gold);padding-left:14px}

.empty{background:#fff;border:1px dashed var(--line-strong);border-radius:var(--r);
  padding:26px;color:var(--green-700);font-weight:600;max-width:640px}
.lead-dark{font-size:16px;color:rgba(20,36,29,.72);max-width:60ch;margin:-26px 0 26px}
/* Inline links in lopende tekst (privacy, prose) herkenbaar maken */
.prose a{color:var(--green-600);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:hover{color:var(--green-900)}
.prose a.btn{text-decoration:none}

/* ---------- Nieuws-filterbalk ---------- */
.news-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.news-filters .nf{font-family:var(--name);font-weight:700;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;
  padding:9px 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--cream-50);
  color:var(--green-900);transition:.15s}
.news-filters .nf.on{background:var(--green-900);border-color:var(--green-900);color:var(--cream)}
@media(hover:hover){.news-filters .nf:not(.on):hover{border-color:var(--green-600);color:var(--green-600)}}
.news-item[hidden]{display:none}

/* ---------- Artikel-detail: rijen met kolommen ----------
   Een bericht bestaat uit rijen; elke rij heeft 1, 2 of 3 kolommen met tekst
   en/of een foto. Op een smal scherm komt alles altijd onder elkaar. */
.article-body{max-width:960px;margin-top:22px}
.art-row{display:grid;gap:26px 34px;align-items:start}
/* De ruimte onder een blok is per blok in te stellen in het beheer. */
.art-row{margin-bottom:var(--art-gap,26px)}
.art-row:last-child{margin-bottom:0}
.art-row--1{grid-template-columns:minmax(0,1fr)}
.art-row--1-1{grid-template-columns:repeat(2,minmax(0,1fr))}
.art-row--1-1-1{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-row--2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.art-row--1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.art-col > :last-child{margin-bottom:0}
/* Een foto die naast de tekst zweeft mag niet uit haar kolom hangen. */
.art-col:after{content:"";display:block;clear:both}
.art-fig{margin:0 0 16px;max-width:100%}
.art-fig img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.art-fig figcaption{font-size:13.5px;color:var(--green-600);font-weight:600;margin-top:8px}

/* Breedte van een foto in het artikel (keuze in het beheer). */
.art-fig--vol{max-width:100%}
.art-fig--groot{max-width:720px}
.art-fig--middel{max-width:480px}
.art-fig--klein{max-width:280px}
/* En waar ze staat wanneer ze smaller is dan de kolom. */
.art-fig--midden{margin-left:auto;margin-right:auto}
.art-fig--midden figcaption{text-align:center}
.art-fig--rechts{margin-left:auto}
.art-fig--rechts figcaption{text-align:right}
.art-fig--zweef-links{float:left;margin:5px 26px 16px 0}
.art-fig--zweef-rechts{float:right;margin:5px 0 16px 26px}

/* Citaat, knop, video en scheidingslijn tussen de alinea's. */
.art-quote{margin:4px 0 18px;border-left:4px solid var(--gold);padding:4px 0 4px 20px}
.art-quote p{font-family:var(--name);font-weight:700;font-size:clamp(19px,2.4vw,23px);
  line-height:1.35;color:var(--green-900);margin:0}
.art-quote cite{display:block;margin-top:9px;font-style:normal;font-size:14px;
  font-weight:700;color:var(--green-600)}
.art-btn{margin:0 0 18px}
.art-video{margin-bottom:18px}
.art-video-box{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--green-900)}
.art-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* De lijn loopt altijd over de volle breedte, ook onder een zwevende foto. */
.art-hr{border:0;border-top:1px solid var(--line-strong);margin:22px 0;clear:both}
/* Losse ruimte tussen twee elementen; de hoogte staat in het beheer. */
.art-space{width:100%}

/* ---------- Fotocollage ----------
   De foto's staan in rijen die even hoog uitkomen. Elke foto krijgt haar eigen
   beeldverhouding mee (--ar) en groeit in de rij naar verhouding: samen vullen ze
   precies de breedte, en er wordt nooit iets bijgesneden. Op een gsm valt alles
   onder elkaar: display:contents laat de rij-omhulsels dan gewoon weg. */
.art-gal{margin:0 0 22px;--gal-gap:10px}
.art-gal-t{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-feature-settings:"ss01" 1;font-size:clamp(20px,2.6vw,26px);line-height:1.1;
  color:var(--green-900);margin:0 0 14px;text-align:left}
.art-gal-rows{display:flex;flex-direction:column;gap:var(--gal-gap)}
.art-gal-row{display:flex;gap:var(--gal-gap)}
/* De lege ruimte die een halve laatste rij aanvult, zodat die niet hoger uitvalt. */
.art-gal-i,.art-gal-vul{flex-grow:var(--ar);flex-shrink:1;flex-basis:0;min-width:0}
.art-gal-i{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);background:var(--cream-50);
  box-shadow:var(--shadow);cursor:zoom-in}
/* contain in plaats van cover: zo KAN de code niet bijsnijden, ook niet wanneer de
   breedte en hoogte in media.json ooit niet meer met het bestand overeenkomen. */
.art-gal-i img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;
  border:0;border-radius:0;box-shadow:none}
@media(hover:hover){
  .art-gal-i{transition:transform .18s ease,box-shadow .18s ease}
  .art-gal-i:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
}
.art-gal-i:focus-visible{outline:3px solid var(--green-900);outline-offset:3px}

/* Grote albums tonen eerst een deel; de knop toont de rest (zie gallery.js). */
.art-gal-row[hidden]{display:none}
.art-gal-meer{display:flex;justify-content:center;margin-top:16px}

/* Een album vult de volle breedte van de pagina, want daar draait het om. */
.article-body--breed{max-width:none}
/* De naam van de fotograaf onder een album. */
.art-door{margin-top:14px;font-size:15px;color:rgba(20,36,29,.68)}
.art-door b{font-weight:600;color:var(--green-900)}

@media(max-width:620px){
  /* Op een gsm laten we de rij-indeling los (display:contents haalt de omhulsels
     weg) en zetten we twee foto's naast elkaar. Elk houdt haar eigen
     beeldverhouding, dus de onderkanten lopen niet gelijk. Dat is bewust: liever
     een ongelijke rand dan een bijgesneden foto. Twee kolommen zijn ook de reden
     dat de lichte tussenmaat op een gsm gebruikt wordt in plaats van het volle
     bestand: dat scheelt ruim twee derde aan gegevens. */
  .art-gal{--gal-gap:8px}
  .art-gal-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .art-gal-row{display:contents}
  .art-gal-i{flex:none;width:auto}
  .art-gal-vul{display:none}
}
@media(max-width:380px){
  .art-gal-rows{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Foto vergroten (lichtbak) ---------- */
.gal-box{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(10,26,20,.94);padding:16px;border:0;width:100%;height:100%;max-width:none;max-height:none}
/* De browser verbergt een gesloten <dialog> zelf, maar de display:flex hierboven
   is een auteursregel en wint van die ingebouwde regel. Zonder deze lijn blijft de
   lichtbak na het sluiten over de hele pagina liggen en is de site onklikbaar. */
.gal-box:not([open]){display:none}
.gal-box::backdrop{background:rgba(10,26,20,.94)}
.gal-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%}
.gal-img{max-width:100%;max-height:calc(100vh - 132px);width:auto;height:auto;display:block;
  border-radius:var(--r);background:var(--green-900)}
/* dvh houdt rekening met de adresbalk die op een gsm in- en uitschuift. */
@supports (height:100dvh){ .gal-img{max-height:calc(100dvh - 132px)} }
.gal-cap{color:rgba(240,234,214,.86);font-size:14.5px;font-weight:600;text-align:center;
  max-width:60ch;min-height:1.2em}
.gal-tel{position:absolute;top:16px;left:20px;color:rgba(240,234,214,.72);font-size:13px;
  font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.gal-knop{position:absolute;background:rgba(240,234,214,.12);border:1px solid rgba(240,234,214,.28);
  color:var(--cream);border-radius:999px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;width:48px;height:48px;padding:0;transition:background .15s}
.gal-knop:hover{background:rgba(240,234,214,.24)}
.gal-knop:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.gal-knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gal-sluit{top:12px;right:12px}
.gal-vorig{left:12px;top:50%;transform:translateY(-50%)}
.gal-volgend{right:12px;top:50%;transform:translateY(-50%)}
.gal-laadt .gal-img{opacity:.35}
@media(max-width:620px){
  .gal-box{padding:8px}
  .gal-img{max-height:calc(100vh - 150px)}
  @supports (height:100dvh){ .gal-img{max-height:calc(100dvh - 150px)} }
  .gal-knop{width:44px;height:44px}
  .gal-vorig{left:6px;top:auto;bottom:14px;transform:none}
  .gal-volgend{right:6px;top:auto;bottom:14px;transform:none}
  .gal-cap{padding-bottom:56px}
}
@media(prefers-reduced-motion:reduce){
  .art-gal-i{transition:none}
  .art-gal-i:hover{transform:none}
}

@media(max-width:760px){
  .art-row{grid-template-columns:minmax(0,1fr)!important;gap:20px}
}
@media(max-width:560px){
  /* Op een gsm is er geen plaats voor tekst naast een foto. */
  .art-fig{float:none;margin-left:0;margin-right:0;max-width:100%}
}

/* Meldingsbalk boven een concept-voorbeeld (staat niet online). */
.concept-bar{background:var(--gold);color:var(--green-900);font-weight:700;font-size:14.5px;
  text-align:center;padding:11px 18px}

/* ---------- Kalenderlijst ---------- */
.cal{list-style:none;display:flex;flex-direction:column;gap:10px}
.cal li{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:16px;
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 18px}
.cal-dt{display:flex;flex-direction:column;line-height:1.15}
.cal-dt b{font-size:15px;font-variant-numeric:tabular-nums}
.cal-dt span{font-size:13px;color:var(--green-600);font-weight:700;font-variant-numeric:tabular-nums}
.cal-comp{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--green-600);margin-bottom:3px}
.cal-teams{font-weight:700;font-size:16px}
.tag-venue{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px}
.tag-thuis{background:rgba(34,107,82,.16);color:var(--green-700)}
.tag-uit{background:rgba(15,61,46,.08);color:var(--green-600)}

/* ---------- Uitslagen grid + standen grid op subpagina ---------- */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stand-grid{display:grid;grid-template-columns:minmax(0,760px);gap:22px;align-items:stretch}
.stand-grid .table-card{display:flex;flex-direction:column}
.stand-grid .table-card + .table-card{margin-top:0}
.stand-grid .t-scroll{flex:1 1 auto}
.t-updated{background:var(--cream-50);font-size:12px;font-weight:600;color:var(--green-600);
  padding:8px 18px;border-bottom:1px solid var(--line)}

/* ---------- Ploeg-detailkaarten ---------- */
.team-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:22px}
.team-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:26px;scroll-margin-top:96px;display:flex;flex-direction:column}
.tc-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.tc-badge{width:58px;height:58px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--green-900);color:var(--gold);font-family:var(--display);font-weight:400;
  font-feature-settings:"ss01" 1;font-size:24px}
.tc-name{font-size:26px;margin:0}
.tc-league{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--green-600);text-transform:uppercase}
.tc-intro{color:rgba(20,36,29,.78);font-size:15px;margin-bottom:18px}
.tc-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-bottom:22px}
.tc-meta dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-600)}
.tc-meta dd{font-size:15px;font-weight:600;margin-top:2px}
.team-card .btn{align-self:flex-start;margin-top:auto}

/* ---------- Proeftraining-blok (op groen) ---------- */
.tryout{margin-top:30px;background:rgba(240,234,214,.06);border:1px solid rgba(240,234,214,.16);
  border-radius:var(--r-lg);padding:30px}
.tryout h3{color:var(--cream);font-size:26px}
.tryout p{color:rgba(240,234,214,.82);margin:12px 0 20px;max-width:64ch}

/* ---------- Club: over ons + cijfers ---------- */
.club-about{display:grid;grid-template-columns:1.5fr .8fr;gap:44px;align-items:start}
/* Zonder cijferblok mag de tekst niet in een smalle kolom blijven hangen. */
.club-about--solo{grid-template-columns:1fr}
.club-about--solo .prose{max-width:74ch}
.prose .kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:16px}
.prose p{font-size:17px;color:rgba(20,36,29,.82);margin-bottom:16px;max-width:62ch}
.prose h2{margin-top:30px;margin-bottom:10px}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{max-width:62ch;margin:0 0 18px;padding-left:24px}
.prose li{font-size:17px;color:rgba(20,36,29,.82);line-height:1.6;margin-bottom:8px;padding-left:4px}

/* ---------- Documenten in een tekst ("Document: ..." in een info-sectie) ----------
   Ziet eruit als de knoppen elders op de site, maar rustiger: een document is
   geen oproep tot actie, het is iets dat je meeneemt. Meerdere documenten na
   elkaar vormen één rij. */
.doc-links{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 22px;max-width:62ch}
.doc-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--name);font-weight:700;font-size:15px;line-height:1.3;
  color:var(--green-900);background:var(--cream-50);
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:12px 16px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.prose .doc-link{text-decoration:none}
.doc-link .doc-ic{width:18px;height:18px;flex:none;color:var(--green-600)}
.doc-link .doc-type{font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--green-700);background:rgba(34,107,82,.12);
  border-radius:999px;padding:3px 8px;margin-left:2px}
.doc-link:active{background:#fff;box-shadow:inset 0 1px 2px rgba(15,61,46,.12)}
.doc-link:focus-visible{outline:3px solid var(--green-600);outline-offset:2px}
@media(hover:hover){
  .doc-link:hover{background:#fff;border-color:var(--green-900);box-shadow:var(--shadow)}
  .doc-link:hover .doc-ic{color:var(--green-900)}
}
@media(prefers-reduced-motion:reduce){
  .doc-link{transition:none}
}

.facts{background:var(--green-900);color:var(--cream);border-radius:var(--r-lg);padding:28px 30px}
.facts .f-title{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.f-item{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(240,234,214,.14)}
.f-item:last-child{border-bottom:0}
.f-item b{font-size:34px;color:var(--cream);line-height:1;min-width:84px}
.f-item span{font-size:14px;color:rgba(240,234,214,.75)}

/* ---------- Club: waarden ---------- */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow)}
.value h3{font-size:21px;margin-bottom:8px}
.value p{font-size:14px;color:rgba(20,36,29,.74)}

/* ---------- Club: bestuur ---------- */
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.board-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow)}
.board-card .b-role{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-600)}
.board-card .b-name{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;
  font-size:23px;color:var(--green-900);margin-top:4px}
.board-card .b-mail{display:inline-block;margin-top:8px;font-size:14px;color:var(--green-600);
  text-decoration:none;border-bottom:1px solid rgba(34,107,82,.3);overflow-wrap:anywhere}
.board-card .b-mail:hover{color:var(--green-900);border-bottom-color:var(--green-900)}

/* ---------- Club: vrijwilligers + sponsoring banden ---------- */
/* CTA-blok: vrijwilligers + sponsoring. Groene ronde panelen op een crème band,
   duidelijk los van de groene sponsorbalk en footer eronder, zodat de onderkant
   van de pagina niet één lange groene lap wordt. */
.sec-cta{background:var(--cream);padding:64px 0}
.cta-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cta-card{position:relative;overflow:hidden;background:var(--green-900);color:var(--cream);
  border-radius:var(--r-lg);padding:34px 34px 32px;scroll-margin-top:96px;
  box-shadow:0 22px 48px -24px rgba(15,61,46,.6)}
.cta-card::after{content:"";position:absolute;right:-46px;top:-46px;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(242,194,0,.20),transparent 70%);pointer-events:none}
.cta-card h2{color:var(--cream);font-size:clamp(24px,2.6vw,30px);line-height:1.1}
.cta-card p{color:rgba(240,234,214,.85);margin:12px 0 22px;max-width:40ch}
.cta-card .btn{position:relative;z-index:1}
@media(max-width:760px){.cta-panel{grid-template-columns:1fr}.sec-cta{padding:48px 0}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.info-block{margin-bottom:28px}
.info-block h3{font-size:22px;margin-bottom:8px}
.info-block p{font-size:15px;color:rgba(20,36,29,.78);margin-bottom:6px}
.info-block .ib-strong{font-weight:700;color:var(--green-900)}
.info-block .btn{margin-top:10px}
.channels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.channel{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ch-label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green-600)}
.ch-mail{display:inline-block;font-size:14px;font-weight:700;color:var(--green-900);margin:4px 0 4px;text-decoration:underline;
  text-underline-offset:3px;word-break:normal;overflow-wrap:anywhere}
.ch-desc{font-size:13px;color:rgba(20,36,29,.7)}

/* Wegwijzer naar het aanmeldformulier op /jeugd. Rustig blok, geen banner:
   het staat boven de uitslagen die de meeste bezoekers komen halen. */
.aanmeld-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;box-shadow:var(--shadow)}
.aanmeld-band .kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-600)}
.aanmeld-band h2{font-size:26px;margin:4px 0 6px}
.aanmeld-band p{font-size:15px;color:rgba(20,36,29,.74);margin:0}
@media(max-width:640px){
  .aanmeld-band{padding:20px}
  .aanmeld-band .btn{width:100%;justify-content:center}
}

/* Een formulier midden in een tekst (info-pagina, "Formulier: <sleutel>").
   Zelfde kaart als op /contact, maar met lucht erboven en eronder zodat het
   niet tegen de stap erboven plakt. */
.prose-form{margin:8px 0 26px;max-width:62ch}
.prose-form h3{font-size:20px}

/* Formulier */
.contact-form-wrap{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:30px}
.contact-form-wrap h3{font-size:24px;margin-bottom:18px}
.contact-form label{display:block;margin-bottom:16px}
.contact-form label span{display:block;font-size:13px;font-weight:700;color:var(--green-900);margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;font-family:var(--name);font-size:16px;
  padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid var(--green-900);outline-offset:1px;
  border-color:var(--green-600)}
.contact-form textarea{resize:vertical}
.contact-form select{width:100%;font-family:var(--name);font-size:16px;padding:12px 14px;
  border:1.5px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
.contact-form select:focus{outline:3px solid var(--green-900);outline-offset:1px;border-color:var(--green-600)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .btn{width:100%;justify-content:center;margin-top:4px}
.form-privacy,.form-note{font-size:13px;color:rgba(20,36,29,.72);margin-top:14px;text-align:center}

/* ---------- Velden uit de formulier-builder (inc/form_render.php) ----------
   Eén render-bron voor de publieke pagina én de preview in het beheer. */
.contact-form .field{margin-bottom:16px}
.contact-form .field>label,.contact-form .field-label{display:block;margin:0 0 6px;
  font-size:13px;font-weight:700;color:var(--green-900)}
/* De oude regel ".contact-form label span{display:block}" zou het sterretje
   op een eigen regel duwen; daarom expliciet inline houden. */
.contact-form .req{display:inline;color:var(--red)}
.field-help{display:block;font-size:12.5px;color:rgba(20,36,29,.72);margin-top:6px}
.field-error{display:block;font-size:12.5px;font-weight:700;color:var(--red);margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row .field{margin-bottom:16px}
/* Bijlage-veld: de kale browserknop past niet bij de rest, dus geven we het
   veld een eigen omkadering met dezelfde rand en radius als de tekstvelden. */
.contact-form .field-file input[type=file]{width:100%;font-family:var(--name);font-size:14.5px;
  padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:10px;background:#fff;
  color:var(--ink);cursor:pointer}
.contact-form .field-file input[type=file]:focus{outline:3px solid var(--green-900);outline-offset:1px;
  border-color:var(--green-600)}
.contact-form .field-file input[type=file]::file-selector-button{font-family:var(--name);font-size:13.5px;
  font-weight:700;color:var(--green-900);background:var(--cream-50,#FBF8EF);border:1.5px solid var(--line-strong);
  border-radius:8px;padding:7px 13px;margin-right:12px;cursor:pointer}
.contact-form .field-file input[type=file]::file-selector-button:hover{background:#fff;border-color:var(--green-600)}

/* Keuzevakjes als chips */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.contact-form .chip{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;
  color:var(--green-900);background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:9px 15px;cursor:pointer;line-height:1}
.contact-form .chip input{width:auto;margin:0;padding:0;accent-color:var(--green-600);flex:0 0 auto}
.contact-form .chip:hover{border-color:var(--green-600)}
.contact-form .chip:has(input:checked){border-color:var(--green-600);background:rgba(34,107,82,.1)}
.contact-form .chip:focus-within{outline:3px solid var(--green-900);outline-offset:1px}
/* Tussentitel binnen een formulier */
.field-section-wrap{margin:22px 0 4px}
.field-section{font-size:18px;color:var(--green-900);margin:0}
.field-section-help{font-size:13px;color:rgba(20,36,29,.62);margin:4px 0 0}
/* Akkoordvinkje */
.contact-form .field-consent>label{display:flex;gap:9px;align-items:flex-start;font-weight:400;
  font-size:14px;color:var(--ink);cursor:pointer}
.contact-form .field-consent input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--green-600)}
.contact-form [aria-invalid="true"]{border-color:var(--red)}
.form-success{background:rgba(34,107,82,.14);border:1px solid var(--green-600);color:var(--green-700);
  border-radius:10px;padding:14px 16px;font-weight:700;margin-bottom:18px}
.form-error{background:rgba(154,51,32,.1);border:1px solid var(--red);color:var(--red);
  border-radius:10px;padding:14px 16px;font-weight:700;margin-bottom:18px}

/* ---------- Responsive subpagina's ---------- */
@media(max-width:940px){
  .page-hero{padding:46px 0 40px;scroll-margin-top:80px}
  .res-grid{grid-template-columns:1fr 1fr}
  .stand-grid{grid-template-columns:1fr}
  .team-cards{grid-template-columns:1fr}
  .club-about{grid-template-columns:1fr;gap:30px}
  .values-grid{grid-template-columns:1fr 1fr}
  .board-grid{grid-template-columns:1fr 1fr}
  .club-bands{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .lead-dark{margin:-16px 0 24px}
}
@media(max-width:560px){
  .cal li{grid-template-columns:84px 1fr;gap:6px 12px}
  .cal-vn{grid-column:2;justify-self:start}
  .res-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .board-grid{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr}
  .cf-row,.form-row{grid-template-columns:1fr;gap:0}
  .tc-meta{grid-template-columns:1fr}
  .contact-form-wrap,.tryout,.club-band,.facts{padding:22px}
}

/* ===================================================================
   AFBEELDINGEN - "Houtvenne-treatment" (foto + groene gradient + goud + 1946)
   =================================================================== */

/* Gedeeld logo-watermerk voor placeholders */
.wm{width:46%;max-width:130px;opacity:.14;filter:brightness(0) invert(1);pointer-events:none}

/* ---- Nieuwskaart-foto ---- */
.card .ph{height:auto;aspect-ratio:16/10;display:block;position:relative;overflow:hidden;
  border-bottom:1px solid var(--gold)}
.card .ph .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* leesbaarheidsgradient enkel over een echte foto, niet over de placeholder */
.card .ph:not(.ph--empty)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,61,46,0) 45%,rgba(15,61,46,.55) 100%)}
.card .ph.ph--empty{display:grid;place-items:center}
.card .cat{z-index:2}

/* ---- Ploegfoto-band op de detailkaart ---- */
.tc-media{position:relative;margin:-26px -26px 18px;aspect-ratio:2/1;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--gold);
  display:grid;place-items:center}
.tc-media img:not(.wm){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* duotone-groen om wisselende fotokwaliteit te egaliseren */
.tc-media:not(.tc-media--empty)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,61,46,.15),rgba(15,61,46,.4))}
.tc-media--empty{background:linear-gradient(160deg,#1f6b51,#0c3325)}

/* ---- Foto-loze ploegkaart: sober en clean, geen fotovlak ---- */
.tc-eyebrow{font-family:var(--name);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600)}
.team-card--info .tc-name{font-size:27px;color:var(--green-900);margin:8px 0 5px;line-height:1.05}
.team-card--info .tc-league{font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--green-600)}
.tc-rule{display:block;width:38px;height:2px;background:var(--gold);margin:16px 0 6px}
.team-card--info .tc-meta{display:flex;flex-direction:column;gap:0;margin:0 0 22px}
.team-card--info .tc-meta div{display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.team-card--info .tc-meta dt{font-size:13px;font-weight:600;color:var(--green-600);
  letter-spacing:0;text-transform:none;margin:0}
.team-card--info .tc-meta dd{font-size:14px;font-weight:600;color:var(--green-900);
  margin:0;text-align:right}
.tc-link{margin-top:auto;align-self:flex-start;font-family:var(--name);font-weight:700;
  font-size:14px;color:var(--green-900);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:2px}
.tc-link:hover{color:var(--green-600)}
.team-card--link{text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.team-card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.team-card--link:hover .tc-link{color:var(--green-600)}

/* ---- Club-sfeerbeeld (full-bleed band) ---- */
.club-photo-sec{padding:0}
/* width:100% is nodig. Met enkel aspect-ratio + max-height krimpt de BREEDTE mee
   zodra de hoogte geklemd wordt, en dan stopt de band ergens midden op de pagina
   in plaats van van rand tot rand te lopen. */
.club-photo{position:relative;width:100%;aspect-ratio:21/9;max-height:440px;overflow:hidden;display:grid;place-items:center}
.club-photo img:not(.wm){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.club-photo:not(.club-photo--empty)::after{content:"";position:absolute;inset:0;background:rgba(15,61,46,.55)}
.club-photo--empty{background:radial-gradient(120% 120% at 30% 20%,#1a5a42,#0F3D2E)}
.club-photo-year{position:relative;z-index:2;font-family:var(--display);font-weight:400;
  font-feature-settings:"ss01" 1;font-size:clamp(90px,15vw,200px);line-height:1;
  color:rgba(240,234,214,.16);letter-spacing:.02em}
.club-photo .wm{position:relative;z-index:2}

@media(max-width:560px){
  .club-photo{aspect-ratio:3/2}
}

/* Lege-staten in het scorebord (buiten het seizoen) */
.sb-empty{color:rgba(20,36,29,.72);font-size:14px;padding:14px 0;font-style:italic}

/* ---------- WordPress-achtige adminbalk (enkel zichtbaar als beheerder ingelogd is) ---------- */
.hv-adminbar{position:fixed;top:0;left:0;right:0;height:40px;z-index:120;background:#14241D;color:#F0EAD6;
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:13px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.hv-adminbar a{color:#F0EAD6;display:inline-flex;align-items:center;gap:7px}
.hv-adminbar a:hover{color:var(--gold)}
.hv-ab-left,.hv-ab-right{display:flex;align-items:center;gap:18px}
.hv-ab-home{font-weight:800}
.hv-ab-home img{height:20px;width:auto}
.hv-ab-edit{padding:6px 14px;background:var(--gold);color:var(--green-900)!important;border-radius:999px;font-weight:700}
.hv-ab-edit:hover{color:var(--green-900)!important;background:var(--gold-600)}
.hv-ab-hi{opacity:.65;font-weight:600}
body.has-adminbar{padding-top:40px}
/* Inline-bewerken (live-edit) */
.hv-ab-edit{border:0;font-family:inherit;font-size:13px;cursor:pointer;line-height:1}
.hv-ab-link{opacity:.8;font-size:13px}
body.le-editing .hv-ab-edit{background:#fff;color:var(--green-900)!important}
.hv-le-status{font-size:12px;opacity:.75;font-weight:600}
.hv-le-status.ok{color:#8fd3a6;opacity:1}
.hv-le-status.err{color:#ff9b8a;opacity:1}
/* Bewerkbare velden alleen zichtbaar gemarkeerd tijdens bewerkmodus */
body.le-editing [data-le],body.le-editing [data-le-multi]{
  outline:2px dashed rgba(242,194,0,.7);outline-offset:3px;border-radius:3px;
  cursor:text;transition:outline-color .15s,background .15s}
body.le-editing [data-le]:hover,body.le-editing [data-le-multi]:hover{outline-color:var(--gold);background:rgba(242,194,0,.08)}
body.le-editing [data-le]:focus,body.le-editing [data-le-multi]:focus{
  outline:2px solid var(--gold);background:rgba(242,194,0,.12)}
[data-le].le-saved,[data-le-multi].le-saved{outline:2px solid #38a169!important;background:rgba(56,161,105,.12)}
/* Bewerkbaar label binnen een gouden knop: donkere stippellijn i.p.v. goud-op-goud. */
body.le-editing .btn [data-le],body.le-editing .btn [data-le-multi]{outline-color:rgba(15,61,46,.6)}
body.le-editing .btn [data-le]:hover,body.le-editing .btn [data-le-multi]:hover{outline-color:var(--green-900);background:rgba(15,61,46,.12)}
body.le-editing .btn [data-le]:focus,body.le-editing .btn [data-le-multi]:focus{outline-color:var(--green-900);background:rgba(15,61,46,.16)}
/* Titelgrootte-knopjes: enkel zichtbaar in de bewerkmodus, onder de titel. */
.le-sizer{display:none;align-items:center;gap:2px;margin-top:12px;vertical-align:middle;
  background:rgba(20,36,29,.9);border:1px solid rgba(240,234,214,.28);border-radius:999px;padding:3px;
  text-transform:none;font-family:var(--name);letter-spacing:0;box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
body.le-editing .le-sizer{display:inline-flex}
.le-sizer button{border:0;background:transparent;color:#F0EAD6;font-weight:800;font-size:13px;line-height:1;
  cursor:pointer;padding:5px 10px;border-radius:999px;font-family:inherit}
.le-sizer button:hover{background:var(--gold);color:var(--green-900)}
.le-sizer-val{color:#F0EAD6;font-size:12px;font-weight:700;min-width:40px;text-align:center}
.le-sizer-reset{font-size:15px!important;opacity:.85;padding:5px 9px!important}
body.has-adminbar header{top:40px}
@media(max-width:640px){
  .hv-adminbar{font-size:12px;padding:0 10px}
  .hv-ab-left,.hv-ab-right{gap:10px}
  .hv-ab-hi{display:none}
  .hv-ab-home span,.hv-ab-home{gap:5px}
}

/* ---------- Wedstrijden per ploeg (ploegenpagina, automatisch) ---------- */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tm-team{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.tm-team-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tm-team-head h3{font-size:20px}
.tm-reeks{font-size:12px;font-weight:700;color:var(--green-600);text-transform:uppercase;letter-spacing:.04em}
.tm-next{background:var(--green-900);color:var(--cream);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.tm-when{font-size:12px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.tm-match{font-weight:700;font-size:15px}
.tm-list{list-style:none;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.tm-list li{display:flex;gap:10px;font-size:14px;color:rgba(20,36,29,.82)}
.tm-list .tm-dt{flex:none;width:92px;font-weight:700;color:var(--green-700);font-variant-numeric:tabular-nums}
.tm-recent{border-top:1px solid var(--line);padding-top:10px}
.tm-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--green-600)}
.tm-res{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin-top:6px}

/* Uitklapbaar klassement per ploeg */
.tm-stand{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.tm-stand summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--green-700);list-style:none;display:flex;align-items:center;gap:6px}
.tm-stand summary::-webkit-details-marker{display:none}
.tm-stand summary::before{content:"▸";color:var(--green-600);font-size:11px}
.tm-stand[open] summary::before{content:"▾"}
.tm-stand summary b{color:var(--green-900)}
.tm-stand .t-scroll{margin-top:10px}
.tm-stand table.compact{width:100%;border-collapse:collapse;font-size:13px}
.tm-stand table.compact th{background:var(--green-900);color:var(--cream);padding:6px 8px;text-align:left;font-weight:700}
.tm-stand table.compact td{padding:6px 8px;border-bottom:1px solid var(--line)}
.tm-stand table.compact tr.me{background:rgba(242,194,0,.18);font-weight:700}
.tm-stand table.compact td.pos{font-variant-numeric:tabular-nums;color:var(--green-600);font-weight:700}

/* ---------- Visueel onderscheid A-ploeg / B-ploeg ---------- */
.tag-team{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 6px;border-radius:5px;font-size:11px;font-weight:800;line-height:1;margin-right:7px;flex:none}
.tag-team-A{background:var(--green-900);color:var(--cream)}
.tag-team-B{background:var(--gold);color:var(--green-900)}
/* Gekleurde accentrand per rij */
.cal li.team-A{border-left:4px solid var(--green-900)}
.cal li.team-B{border-left:4px solid var(--gold)}
.res.team-A{border-left:4px solid var(--green-900)}
.res.team-B{border-left:4px solid var(--gold)}
.upcoming .u-mt .tag-team{vertical-align:middle}

/* ---------- Kalender-tabs (A/B) + subtiel thuis/uit-onderscheid ---------- */
.cal-tabs{display:flex;gap:6px;margin-bottom:16px}
.cal-tab{border:1.5px solid var(--line-strong);background:#fff;border-radius:999px;padding:8px 20px;
  font-family:var(--name);font-weight:700;font-size:14px;color:var(--green-900);cursor:pointer}
.cal-tab:hover{border-color:var(--green-600)}
.cal-tab.on{background:var(--green-900);color:var(--cream);border-color:var(--green-900)}
/* Verbergen moet winnen van .cal li / .res {display:grid}, anders filtert de tab niet */
.team-tabset [data-team][hidden]{display:none}
/* Subtiele thuis/uit-markering: thuis krijgt een zacht groen randje, uit blijft neutraal */
.cal-item.venue-thuis{border-left:3px solid rgba(34,107,82,.55)}
.cal-item.venue-uit{border-left:3px solid transparent}
.cal-vn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.cal-item.venue-thuis .cal-vn{color:var(--green-700)}
.cal-item.venue-uit .cal-vn{color:rgba(20,36,29,.75)}
.vn-ic{width:15px;height:15px;flex:none}
.vn-logo{height:20px;width:auto;flex:none}

/* ---------- Info-hub (reglementen / beleid / praktische info) ---------- */
.info-group{margin-bottom:42px}
.info-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.info-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.info-card-title{font-family:var(--display);text-transform:uppercase;font-size:20px;line-height:1.1;
  color:var(--green-900);font-feature-settings:"ss01" 1}
.info-card-desc{font-size:14px;color:rgba(20,36,29,.72);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.info-card-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--green-600)}
.info-card .arr{transition:transform .2s ease}
@media(hover:hover){.info-card:hover .arr{transform:translateX(4px)}}

/* ===== Eigen pagina's: vacatures ===== */
/* Kaartjes over de volle breedte van de pagina, zodat de vacatures uitlijnen
   met de rest van de site (zelfde taal als de kaarten op /info). */
.vac-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.vac-card{display:flex;flex-direction:column;overflow:hidden;
  background:var(--cream-50);border-radius:var(--r);text-decoration:none;color:inherit;
  box-shadow:var(--shadow);border:1px solid rgba(15,61,46,.08);
  transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){.vac-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}}
.vac-ph{overflow:hidden;background:linear-gradient(150deg,#226B52,#0F3D2E);display:grid;place-items:center}
.vac-ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vac-ph--leeg img.wm{width:auto;height:56%;aspect-ratio:auto;opacity:.16}
.vac-ph--leeg{aspect-ratio:16/9}
.vac-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px 26px 22px}
.vac-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vac-title{margin:0;font-size:1.55rem;line-height:1.1;color:var(--green-900)}
.vac-desc{margin:0;font-size:14px;line-height:1.55;color:rgba(20,36,29,.72)}
.vac-tag{display:inline-block;background:var(--green-900);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.vac-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;
  font-size:14px;font-weight:700;color:var(--green-700);white-space:nowrap}
.vac-band{margin-top:34px}
.vac-band h2{font-size:30px;margin:0 0 8px}
.vac-band p{margin:0;max-width:62ch;color:rgba(240,234,214,.82)}
.vac-go .arr{transition:transform .18s ease}
@media(hover:hover){.vac-card:hover .vac-go .arr{transform:translateX(4px)}}
.vac-detail-tag{margin:14px 0 0}
/* Op de groene kop valt een groen plaatje weg: daar goud met donkere tekst. */
.page-hero .vac-tag{background:var(--gold);color:var(--green-900)}
.vac-cta{margin-top:20px;margin-bottom:0}

/* Vacature-detail: foto en contactpersoon */
.vac-photo{display:block;width:100%;max-width:74ch;max-height:440px;object-fit:cover;object-position:center;
  border-radius:var(--r);box-shadow:var(--shadow);margin:0 0 26px}
.vac-contact{margin-top:26px}
.vac-contact-p{margin:0 0 10px;color:var(--ink)}
/* Solliciteer-blok onder de vacaturetekst: zelfde kaartje als het
   contactformulier, zodat de bezoeker meteen ziet dat hier iets in te vullen valt. */
.vac-apply{max-width:74ch;margin:34px 0 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg,20px);padding:26px 28px;box-shadow:var(--shadow)}
.vac-apply h2{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;
  font-size:26px;color:var(--green-900);margin:0 0 18px}
@media(max-width:560px){ .vac-apply{padding:20px 18px} }

/* ===== Afgelastingen: statusblok ===== */
.afg-status{display:flex;align-items:flex-start;gap:18px;background:var(--cream-50);
  border:1px solid var(--line);border-left:6px solid var(--green-600);
  border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow)}
.afg-status h2{margin:0 0 6px;font-size:26px;color:var(--green-900)}
.afg-status p{margin:0;color:rgba(20,36,29,.78);max-width:62ch}
.afg-dot{flex:none;width:14px;height:14px;border-radius:50%;margin-top:9px;background:var(--green-600)}
.afg-status--off{border-left-color:#963232}
.afg-status--off .afg-dot{background:#963232}
@media(max-width:560px){ .afg-status{padding:20px 18px;gap:14px} .afg-status h2{font-size:22px} }

/* Partnerclub in de clubkop: goud en klikbaar, zonder de zin te onderbreken. */
.partner-link{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(242,194,0,.45);
  transition:border-color .18s ease}
.partner-link:hover,.partner-link:focus-visible{border-bottom-color:var(--gold)}

/* ---------- Cookiemelding (assets/js/consent.js) ----------
   Een paneel dat de pagina niet blokkeert: geen donkere laag erover, je kan
   gewoon verder lezen. Weigeren en Aanvaarden zijn even groot en even zichtbaar,
   zodat nee zeggen even makkelijk is als ja. Komt van onderen en gaat langs
   dezelfde weg terug. Op gsm over de volle breedte, boven de snelbalk. */
.hv-cc{position:fixed;z-index:150;left:20px;bottom:20px;width:min(440px,calc(100% - 40px));
  background:var(--green-900);color:var(--cream);border-radius:var(--r-lg);
  border:1px solid rgba(240,234,214,.14);padding:22px 22px 20px;
  /* Gouden haarlijn bovenaan: zo komt het paneel ook los van een groene hero. */
  border-top:2px solid rgba(242,194,0,.75);
  box-shadow:0 22px 60px rgba(15,61,46,.38),0 2px 8px rgba(15,61,46,.22);
  opacity:0;transform:translateY(18px);
  transition:opacity .26s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.hv-cc.show{opacity:1;transform:none}
.hv-cc__t{font-family:var(--display);font-feature-settings:"ss01" 1;font-weight:400;text-transform:uppercase;
  font-size:23px;line-height:1.06;letter-spacing:0;color:var(--cream);margin:0 0 10px;text-wrap:balance}
.hv-cc__d{font-size:15px;line-height:1.55;color:rgba(240,234,214,.86);margin:0}
.hv-cc__d a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hv-cc__now{font-size:14px;color:rgba(240,234,214,.72);margin:10px 0 0}
.hv-cc__now strong{color:var(--cream);font-weight:700}
.hv-cc__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.hv-cc__btns button{font:700 15px/1 var(--name);min-height:48px;padding:0 14px;border:0;border-radius:999px;
  color:var(--green-900);cursor:pointer;transition:transform .1s ease-out,filter .15s ease}
.hv-cc__btns button:hover{filter:brightness(1.05)}
.hv-cc__btns button:active{transform:scale(.97)}
.hv-cc__no{background:var(--cream)}
.hv-cc__yes{background:var(--gold)}
.hv-cc a:focus-visible,.hv-cc button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:640px){
  .hv-cc{left:0;bottom:0;width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:2px 0 0;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  .hv-cc__t{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .hv-cc{transform:none;transition:opacity .2s ease}
  .hv-cc__btns button:active{transform:none}
}

/* Cookietabel op /privacybeleid (inc/analytics.php) */
.cookie-scroll{overflow-x:auto;margin:6px 0 20px;max-width:74ch}
.cookie-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;background:var(--cream-50);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cookie-table th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--green-900);padding:12px 14px;border-bottom:1px solid var(--line-strong)}
.cookie-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:rgba(20,36,29,.86);vertical-align:top;
  text-align:left}
.cookie-table tr:last-child td{border-bottom:0}
.cookie-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--green-900);white-space:nowrap}
/* Op gsm past een tabel van vier kolommen niet: elke cookie wordt een blokje,
   met naam en bewaartermijn bovenaan en daaronder van wie en waarvoor. */
@media (max-width:640px){
  .cookie-table{min-width:0}
  .cookie-table thead{display:none}
  .cookie-table,.cookie-table tbody{display:block}
  .cookie-table tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"naam duur" "van van" "doel doel";
    column-gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .cookie-table tr:last-child{border-bottom:0}
  .cookie-table td{display:block;padding:0;border:0}
  .cookie-table td:nth-child(1){grid-area:naam}
  .cookie-table td:nth-child(2){grid-area:van;font-size:13px;font-weight:700;color:var(--green-700);margin-top:4px}
  .cookie-table td:nth-child(3){grid-area:doel}
  .cookie-table td:nth-child(4){grid-area:duur;font-size:13px;font-weight:700;color:var(--green-900)}
}

/* ---------- Verborgen pagina, enkel zichtbaar voor beheerders ---------- */
.concept-bar{background:var(--gold);color:var(--green-900);font-size:14px;line-height:1.45;padding:10px 0}
.concept-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.concept-bar a{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Evenementpagina (soort "Evenement", bv. /eetdag) ----------
   Bovenaan het beeld uit de mediabibliotheek, in zijn eigen verhouding. Het
   wordt nooit bijgesneden: het krimpt tot het (bijna) op één scherm past, en de
   zijkanten lopen zacht uit in het groen, zodat een affiche van de grafisch
   vormgever naadloos in de pagina overgaat. */
.ev-hero{padding:0;background:#0F3E2E;display:flex;justify-content:center;overflow:hidden;scroll-margin-top:0}
.ev-hero picture{display:block;
  width:min(100%,1920px,calc((100vh - 72px) * .88 * var(--ev-ar)));
  width:min(100%,1920px,calc((100svh - 72px) * .88 * var(--ev-ar)))}
.ev-hero img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}

.ev-intro{background:var(--cream);padding:72px 0 84px}
.ev-intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.ev-intro--solo{grid-template-columns:minmax(0,1fr)}
.ev-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-600);margin-bottom:18px}
.ev-eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:0 0 auto}
.ev-intro h1{font-size:calc(clamp(40px,5vw,70px) * var(--le-scale,1));max-width:15ch}
.ev-lead{font-size:19px;line-height:1.6;color:rgba(20,36,29,.82);max-width:52ch;margin-top:22px}
.ev-lead + .ev-lead{margin-top:12px}
.ev-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.ev-feiten{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px 28px}
.ev-feit{display:grid;grid-template-columns:minmax(104px,.75fr) minmax(0,1.6fr);gap:6px 18px;padding:17px 0;
  border-bottom:1px solid var(--line)}
.ev-feit:last-child{border-bottom:0}
.ev-feit dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-600);padding-top:3px}
.ev-feit dd strong{display:block;font-size:17px;font-weight:700;color:var(--green-900);line-height:1.35}
.ev-feit dd span{display:block;font-size:14px;color:rgba(20,36,29,.7);margin-top:2px}
.ev-feit-link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:14px;font-weight:700;
  color:var(--green-600);text-decoration:underline;text-underline-offset:3px}

.ev-sub{font-size:17px;color:rgba(20,36,29,.75);margin-top:14px;max-width:60ch}
.ev-menu{background:var(--cream-50)}
.ev-menu .sec-head{margin-bottom:34px}
.ev-menukaart{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px 40px}
.ev-menu-groep{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px 32px;padding:30px 0;border-bottom:1px solid var(--line)}
.ev-menu-groep:last-child{border-bottom:0}
.ev-menu-groep--zonder{grid-template-columns:minmax(0,1fr)}
.ev-menu-groep h3{font-size:28px;line-height:1.05;padding-top:8px}
.ev-menu-groep ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.ev-menu-groep li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0}
.ev-gerecht{font-weight:700;font-size:17px;line-height:1.35;color:var(--ink)}
.ev-gerecht small{display:block;font-weight:500;font-size:14px;color:rgba(20,36,29,.66);margin-top:2px}
.ev-prijs{font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;font-variant-numeric:tabular-nums;
  font-size:22px;line-height:1;color:var(--green-900);white-space:nowrap}

.ev-stappen .sec-head{margin-bottom:38px}
.ev-stappen-lijst{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.ev-stappen-lijst li{border-top:1px solid rgba(240,234,214,.22);padding-top:22px}
.ev-stap-nr{display:block;font-family:var(--display);font-weight:400;font-feature-settings:"ss01" 1;font-size:64px;
  line-height:.9;color:var(--gold)}
.ev-stappen-lijst h3{font-size:26px;color:var(--cream);margin-top:16px}
.ev-stappen-lijst p{color:rgba(240,234,214,.78);margin-top:8px;font-size:16px;line-height:1.55}

.ev-inschrijven{background:var(--cream)}
.ev-ins-kop{max-width:720px;margin:0 auto 30px;text-align:center}
.ev-ins-kop h2{font-size:clamp(34px,4.2vw,54px)}
.ev-ins-kop .ev-sub{margin-left:auto;margin-right:auto}
.ev-form{max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.ev-form iframe{display:block;width:100%;border:0;height:900px;min-height:560px}
.ev-form-alt{text-align:center;font-size:14px;color:rgba(20,36,29,.66);margin-top:14px}
.ev-form-alt a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ev-dicht{max-width:780px;margin:0 auto;background:#fff;border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:30px 28px;text-align:center;font-size:17px;font-weight:600;color:var(--green-700)}
.ev-form-storing p+p{margin-top:16px}
.ev-dicht-beheer{font-size:13px;font-weight:500;color:#7a4b00;background:#fdf3e1;border-radius:10px;padding:10px 14px;margin-top:16px}
.ev-extra{max-width:780px;margin:56px auto 0;display:grid;gap:18px}
.ev-extra-blok{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px}
.ev-extra-blok h3{font-size:26px;margin-bottom:8px}

@media(max-width:940px){
  .ev-intro{padding:44px 0 56px}
  .ev-intro-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .ev-menukaart{padding:4px 24px}
  .ev-menu-groep{grid-template-columns:minmax(0,1fr);padding:24px 0}
  .ev-menu-groep h3{padding-top:0}
}
@media(max-width:700px){
  .ev-hero picture{
    width:min(100%,calc((100vh - 64px) * .9 * var(--ev-ar-gsm)));
    width:min(100%,calc((100svh - 64px) * .9 * var(--ev-ar-gsm)))}
  .ev-lead{font-size:17px}
  .ev-cta .btn{flex:1 1 100%;justify-content:center}
  .ev-feiten{padding:4px 20px}
  .ev-feit{grid-template-columns:minmax(0,1fr);padding:14px 0}
  .ev-menu-groep ul{grid-template-columns:minmax(0,1fr)}
  .ev-menukaart{padding:2px 18px}
  .ev-extra-blok{padding:20px}
}