/* ============================================================================
   fortuna-stats.nl — gedeelde basisstijl
   ----------------------------------------------------------------------------
   Alles wat op MEER DAN ÉÉN pagina staat hoort hier: kleuren, typografie, de
   menubalk, de koptekst, de tegelrij, de bedieningsbalk met pillen, panelen en
   de voettekst. Wat maar op één pagina voorkomt (spelerskaarten, wedstrijd-
   tijdlijn, statistiekbalken, clubkaarten, nieuwsitems, scorebord) blijft in
   die pagina zelf staan.

   Waarom geen Tailwind: er is in deze omgeving geen buildstap mogelijk (node
   mag niet lokaal draaien), en de CDN-variant kost ~100 kB die bij elke
   paginaweergave klassen staat te genereren. Het probleem was ook niet de
   CSS-taal maar de duplicatie — dezelfde zestig regels stonden vijf keer.

   Let op: de verwijzing krijgt een inhoudsstempel mee (stijl.css?v=...) van
   fortuna_site_pagina.py. Zonder dat blijft een browser de oude versie tonen.
   ============================================================================ */

:root{
  --groen:#00684B; --groen-diep:#00301f; --groen-mid:#004d37;
  --geel:#FFE21C; --geel-zacht:#f5d94a;
  --inkt:#07130e; --paneel:#0e2019; --paneel-2:#132a21;
  --rand:rgba(255,255,255,.10); --rand-fel:rgba(255,226,28,.45);
  --tekst:#eef5f1; --tekst-zacht:#9db4a9; --rood:#ff6b5e; --winst:#4ade80;
  --schaduw:0 12px 30px rgba(0,0,0,.35);
  --breedte:1240px;
  --hoek:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,104,75,.55), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(255,226,28,.10), transparent 55%),
    var(--inkt);
  color:var(--tekst); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--geel)}
.wrap{max-width:var(--breedte);margin:0 auto;padding:0 18px}

/* ---------- menubalk ---------- */
.sitenav{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 0}
.sitenav a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid var(--rand);color:var(--tekst-zacht);
  border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:600;transition:.15s;
}
.sitenav a:hover{border-color:var(--rand-fel);color:var(--tekst)}
.sitenav a.hier{background:var(--geel);border-color:var(--geel);color:#12200a}

/* ---------- koptekst ---------- */
header{padding:26px 0 6px}
.kop{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.kop img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.kop h1{
  font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;
  font-size:clamp(30px,5.4vw,50px);line-height:.95;margin:0;letter-spacing:.5px;
  text-transform:uppercase;
}
.kop h1 span{color:var(--geel)}
.kop .sub{margin-top:6px;color:var(--tekst-zacht);font-size:14px}
.kop .sub b{color:var(--tekst);font-weight:600}

/* ---------- tegelrij ----------
   Een grid en geen flex-wrap: met flex koos elke tegel zijn eigen breedte en
   liep de rij rafelig af (2-2-2-1 op een telefoon). */
.telling{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;margin:20px 0 0}
.tegel{
  background:linear-gradient(160deg,var(--paneel-2),var(--paneel));
  border:1px solid var(--rand);border-radius:14px;padding:11px 14px;
  display:flex;flex-direction:column;justify-content:center;min-height:64px;
}
.tegel .n{font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:700;
  line-height:1;color:var(--geel)}
.tegel .l{font-size:11px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--tekst-zacht);margin-top:4px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ---------- bedieningsbalk: pillen, zoeken, sorteren ---------- */
.bediening{
  position:sticky;top:0;z-index:30;margin:20px 0 0;padding:12px 0;
  background:linear-gradient(180deg,rgba(7,19,14,.97),rgba(7,19,14,.82));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rand);
}
.bediening .rij{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pillen{display:flex;gap:7px;flex-wrap:wrap}
.pil{
  background:rgba(255,255,255,.05);border:1px solid var(--rand);color:var(--tekst-zacht);
  border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;
  transition:.15s;font-family:inherit;
}
.pil:hover{border-color:var(--rand-fel);color:var(--tekst)}
.pil[aria-pressed="true"]{background:var(--geel);border-color:var(--geel);color:#12200a}
.zoek{
  flex:1;min-width:180px;background:rgba(255,255,255,.05);border:1px solid var(--rand);
  color:var(--tekst);border-radius:999px;padding:9px 16px;font-size:14px;font-family:inherit;
}
.zoek::placeholder{color:var(--tekst-zacht)}
.sorteer{
  background:rgba(255,255,255,.05);border:1px solid var(--rand);color:var(--tekst);
  border-radius:999px;padding:9px 14px;font-size:13px;font-family:inherit;cursor:pointer;
}
.sorteer option{background:#0e2019}
.zoek:focus,.sorteer:focus,.pil:focus-visible{outline:2px solid var(--geel);outline-offset:2px}

/* ---------- kopjes en panelen ---------- */
.groepkop{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-size:22px;color:var(--geel);margin:32px 0 13px;display:flex;align-items:center;gap:12px;
}
.groepkop::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--rand-fel),transparent)}
.paneel{
  background:linear-gradient(160deg,var(--paneel-2),var(--paneel));
  border:1px solid var(--rand);border-radius:18px;padding:20px;margin:16px 0;
}

/* ---------- kleine tekst ---------- */
.leeg{color:var(--tekst-zacht);font-size:14px}
.uitleg{margin:-4px 0 14px;color:var(--tekst-zacht);font-size:12.5px;line-height:1.65;
  max-width:74ch}
.club{color:var(--tekst-zacht);font-size:12.5px}
footer{margin:44px 0 30px;padding-top:18px;border-top:1px solid var(--rand);
  color:var(--tekst-zacht);font-size:12.5px;line-height:1.7}

/* ---------- uitslagkleuren, overal hetzelfde ---------- */
.w,.goed{color:var(--winst)}
.g,.matig{color:var(--geel-zacht)}
.v,.slecht{color:var(--rood)}

@media(max-width:520px){
  .sitenav a{padding:8px 13px;font-size:13px}
  .paneel{padding:15px}
  .groepkop{font-size:20px;margin:26px 0 11px}
}